/* Clan Plus — la charte et les composants de l'application.
   Sorti de index.html pour être partagé avec progression.html : il ne
   doit exister qu'UNE définition des jetons de couleur et des cartes.
   Deux copies auraient divergé au premier ajustement. */

  :root{
    --plane:#f3f2ee; --surface-1:#faf9f6; --surface-2:#f1f0ea; --card:#ffffff;
    --ink:#16150f; --ink-2:#565349; --muted:#8b887e;
    --grid:#e8e6de; --axis:#cfccc2; --border:rgba(22,21,15,.10);
    --series-1:#2a78d6; --good:#12a150; --bad:#d64545;
    --accent:#bf8f34; --accent-2:#e2ba63; --accent-soft:rgba(191,143,52,.12);
    --shadow-sm:0 1px 2px rgba(20,18,10,.05);
    --shadow:0 1px 2px rgba(20,18,10,.04), 0 12px 30px -16px rgba(20,18,10,.20);
    --radius:14px; --radius-sm:9px; --ring:rgba(191,143,52,.40);
    color-scheme:light;
  }
  :root[data-theme="dark"]{
    --plane:#0c0c0b; --surface-1:#151412; --surface-2:#201f1b; --card:#1a1917;
    --ink:#f6f5f1; --ink-2:#bdb9af; --muted:#87847b;
    --grid:#2b2a26; --axis:#3a3833; --border:rgba(255,255,255,.09);
    --series-1:#4f97ee; --good:#2ec26e; --bad:#ec6a6a;
    --accent:#d8b566; --accent-2:#ecd190; --accent-soft:rgba(216,181,102,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow:0 2px 10px rgba(0,0,0,.40);
    --ring:rgba(216,181,102,.45);
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  img,svg{max-width:100%}
  svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
  body{background:var(--plane);color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .wrap{max-width:1200px;margin:0 auto;padding:20px 20px 72px}
  .hidden{display:none !important}

  /* ---- Écran de connexion ---- */
  .login{min-height:80vh;display:grid;place-items:center}
  .login-card{
    max-width:420px;width:100%;text-align:center;padding:34px 30px;
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    border-top:3px solid var(--accent);
  }
  .login-card .logo{width:66px;height:66px;border-radius:16px;margin:0 auto 16px;background:#141310;
    display:grid;place-items:center;overflow:hidden;padding:6px;box-shadow:inset 0 0 0 1px rgba(216,181,102,.28)}
  .login-card h1{font-size:20px;margin:0 0 6px}
  .login-card p{color:var(--ink-2);margin:0 0 22px;font-size:14px}
  .wg-btn{
    appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
    color:#1a1608;background:linear-gradient(180deg,var(--accent),#b7923f);
    border:0;border-radius:10px;padding:13px 20px;width:100%;
    display:inline-flex;align-items:center;justify-content:center;gap:9px}
  .wg-btn:hover{filter:brightness(1.06)}
  .login-note{margin-top:16px;font-size:12px;color:var(--muted)}
  .login-err{margin-top:16px;font-size:13px;color:var(--bad)}
  .login-back{display:inline-block;margin-top:18px;font-size:13px;color:var(--muted);text-decoration:none}
  .login-back:hover{color:var(--ink)}

  /* ---- Page d'accueil publique ---- */
  #landing{max-width:1100px;margin:0 auto;padding:0 20px 40px}
  .lp-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px;position:sticky;top:0;z-index:20;
    background:var(--plane);border-bottom:1px solid var(--border)}
  .lp-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.3px}
  .lp-nav-r{display:flex;align-items:center;gap:8px}
  .lp-nav-link{color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:600;padding:8px 10px;border-radius:8px}
  .lp-nav-link:hover{color:var(--ink);background:var(--surface-2)}
  @media (max-width:640px){.lp-nav-link{display:none}}

  .lp-btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px;text-decoration:none;
    border-radius:11px;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border:1px solid transparent;transition:transform .15s ease,filter .15s ease,background .15s ease,border-color .15s ease}
  .lp-btn-sm{padding:9px 15px;font-size:13px;border-radius:9px}
  .lp-btn-primary{color:#1a1608;background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:var(--shadow-sm)}
  .lp-btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}
  .lp-btn-ghost{color:var(--ink);background:var(--card);border-color:var(--border)}
  .lp-btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}

  .lp-hero{position:relative;text-align:center;padding:66px 16px 54px;overflow:hidden}
  .lp-hero-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:560px;height:340px;pointer-events:none;
    background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%);filter:blur(10px)}
  .lp-logo-xl{position:relative;width:104px;height:104px;margin:0 auto 22px;background:#141310;border-radius:24px;
    display:grid;place-items:center;padding:12px;box-shadow:inset 0 0 0 1px rgba(216,181,102,.28),0 18px 44px -18px rgba(0,0,0,.55)}
  .lp-title{position:relative;font-size:clamp(34px,7vw,58px);margin:0 0 14px;letter-spacing:-1.5px;line-height:1}
  .lp-tag{position:relative;max-width:600px;margin:0 auto 30px;font-size:clamp(15px,2.3vw,18px);color:var(--ink-2)}
  .lp-cta{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .lp-hero-note{position:relative;margin-top:20px;font-size:12.5px;color:var(--muted);letter-spacing:.2px}

  .lp-h2{text-align:center;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.6px;margin:0 0 30px}
  .lp-feats{padding:44px 0 20px}
  .lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
  .lp-feat{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:22px 20px;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .lp-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
  .lp-feat-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:24px;margin-bottom:13px;
    background:var(--accent-soft);border:1px solid var(--border)}
  .lp-feat h3{margin:0 0 6px;font-size:16px}
  .lp-feat p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}


  .lp-foot{margin-top:56px;border-top:1px solid var(--border);padding:26px 4px 4px}
  .lp-foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .lp-foot-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink-2)}
  .lp-foot-links{display:flex;gap:6px;flex-wrap:wrap}
  .lp-foot-links a{color:var(--ink-2);text-decoration:none;font-size:13px;padding:7px 11px;border-radius:8px}
  .lp-foot-links a:hover{color:var(--ink);background:var(--surface-2)}
  .lp-disclaimer{margin:18px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}

  /* ---- Modale légale ---- */
  .lp-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;
    animation:lpFade .2s ease both}
  .lp-modal-box{position:relative;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;background:var(--card);
    border:1px solid var(--border);border-radius:16px;padding:30px 30px 34px;box-shadow:var(--shadow);
    animation:lpPop .24s cubic-bezier(.2,.7,.2,1) both}
  .lp-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--ink-2);cursor:pointer;font-size:15px;line-height:1}
  .lp-modal-x:hover{color:var(--ink);border-color:var(--accent)}
  .lp-legal h2{margin:0 0 4px;font-size:22px;letter-spacing:-.5px}
  .lp-legal .lp-legal-upd{color:var(--muted);font-size:12px;margin:0 0 18px}
  .lp-legal h3{font-size:15px;margin:20px 0 6px}
  .lp-legal p,.lp-legal li{font-size:13.5px;color:var(--ink-2);line-height:1.6}
  .lp-legal ul{margin:6px 0;padding-left:20px}
  .lp-legal code{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:12px}
  .lp-legal a{color:var(--accent);text-decoration:none} .lp-legal a:hover{text-decoration:underline}

  /* ---- Bandeau cookies ---- */
  .cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:55;max-width:820px;margin:0 auto;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
    background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px 18px;box-shadow:var(--shadow);
    animation:lpUp .3s ease both}
  .cookiebar span{font-size:12.5px;color:var(--ink-2);flex:1;min-width:220px}
  .cookiebar a{color:var(--accent);text-decoration:none} .cookiebar a:hover{text-decoration:underline}
  @keyframes lpFade{from{opacity:0}to{opacity:1}}
  @keyframes lpPop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
  @keyframes lpUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.lp-modal,.lp-modal-box,.cookiebar,.lp-btn,.lp-feat{animation:none;transition:none}}

  /* ---- Boutons génériques ---- */
  .logo-sm{width:38px;height:38px;border-radius:11px;flex:0 0 auto;background:#141310;display:grid;place-items:center;
    overflow:hidden;padding:3px;box-shadow:inset 0 0 0 1px rgba(216,181,102,.22)}
  .cp-mark{width:100%;height:100%;display:block}
  /* micro-animation subtile au chargement du logo */
  @keyframes cpIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
  @keyframes cpPlusPop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
  .cp-mark{animation:cpIn .55s ease both}
  .cp-mark .cp-plus{transform-box:fill-box;transform-origin:center;animation:cpPlusPop .5s .35s ease both}
  @media (prefers-reduced-motion:reduce){.cp-mark,.cp-mark .cp-plus{animation:none}}
  .who{font-size:12px;color:var(--muted);text-align:right;line-height:1.25;white-space:nowrap}
  .who b{color:var(--ink);font-weight:600}
  .btn{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);
    background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 13px;
    display:inline-flex;gap:6px;align-items:center;transition:.15s}
  .btn:hover{color:var(--ink);border-color:var(--accent);background:var(--surface-2)}
  .icon-btn{appearance:none;cursor:pointer;font-size:15px;color:var(--ink-2);background:var(--card);
    border:1px solid var(--border);border-radius:9px;width:36px;height:36px;display:grid;place-items:center;transition:.15s}
  .icon-btn:hover{border-color:var(--accent);color:var(--ink)}

  /* ---- Menu latéral (dépliant) ---- */
  .shell{display:flex;align-items:flex-start;min-height:100vh}
  .sidebar{position:sticky;top:0;height:100vh;flex:0 0 220px;width:220px;min-width:0;
    background:linear-gradient(180deg,#151517,#0e0e0f);border-right:1px solid rgba(229,185,92,.34);
    display:flex;flex-direction:column;padding:14px 11px;gap:4px;overflow:visible}
  .sidebar.collapsed{flex-basis:66px;width:66px}
  .side-head{display:flex;align-items:center;gap:10px;padding:4px 6px 13px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
  .side-brand{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;flex:1;letter-spacing:.4px;color:#eaf1f8;font-family:"Bahnschrift","Segoe UI Semibold",system-ui,sans-serif;text-transform:uppercase}
  /* Bouton "poignée" rond, a cheval sur le bord droit, centre verticalement */
  .side-toggle{position:absolute;top:50%;right:-13px;transform:translateY(-50%);z-index:60;
    appearance:none;cursor:pointer;background:#151517;border:1px solid rgba(229,185,92,.5);border-radius:50%;
    width:26px;height:26px;color:#e5b95c;font-size:15px;line-height:1;display:grid;place-items:center;
    box-shadow:0 3px 10px rgba(0,0,0,.55);transition:.15s}
  .side-toggle:hover{background:rgba(229,185,92,.14);transform:translateY(-50%) scale(1.1)}
  .sidebar.collapsed .side-brand{display:none}
  .sidebar.collapsed .side-head{justify-content:center;padding:4px 0 12px}
  .sidebar.collapsed .side-toggle{transform:translateY(-50%) rotate(180deg)}   /* flèche vers "déplier" */
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-item{appearance:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:#9aa7b6;
    background:transparent;border:0;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:12px;
    text-align:left;transition:.15s;white-space:nowrap;overflow:hidden}
  .side-item:hover{background:rgba(255,255,255,.04);color:#eaf1f8}
  .side-item.on{background:rgba(229,185,92,.12);color:#f4d78c;box-shadow:inset 2px 0 0 #e5b95c}
  .si-ic{width:24px;flex:0 0 auto;display:grid;place-items:center}
  .si-ic svg{width:18px;height:18px;color:#e5b95c;opacity:.72;transition:opacity .15s}
  .side-item:hover .si-ic svg,.side-item.on .si-ic svg{opacity:1}
  /* bouton Soutenir : le cœur passe au rouge au survol */
  .side-support{text-decoration:none}
  .side-support .si-heart{font-size:15px;line-height:1;color:#9aa7b6;transition:color .15s,transform .15s}
  .side-support:hover .si-heart{color:#ff4d5e;transform:scale(1.15)}
  .si-lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
  .sidebar.collapsed .si-lbl,.sidebar.collapsed .si-new{display:none}
  .sidebar.collapsed .side-item{justify-content:center;padding:10px}
  /* bloc utilisateur (pseudo + déconnexion) en bas de la sidebar */
  .side-user{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
  .su-who{display:flex;align-items:center;gap:8px;font-size:12px;color:#9b9b96;padding:2px 6px 9px;white-space:nowrap;overflow:hidden}
  .su-who b{color:#ecebe8;font-weight:600}
  .su-who .odot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#4cc077;box-shadow:0 0 8px #4cc077,0 0 2px #4cc077}
  .su-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.08);
    background:#0e0e0f;color:#9b9b96;font:inherit;font-size:12.5px;font-weight:600;padding:9px;border-radius:9px;cursor:pointer;transition:.15s}
  .su-logout svg{width:15px;height:15px}
  .su-logout:hover{border-color:var(--bad,#e8626b);color:#e8626b;background:rgba(232,98,107,.10)}
  .sidebar.collapsed .su-who,.sidebar.collapsed .su-lbl{display:none}
  .sidebar.collapsed .su-logout{padding:9px 0}
  /* ---- Zone principale + barre haute ---- */
  .main{flex:1 1 auto;min-width:0}
  .topbar{position:sticky;top:0;z-index:40;background:var(--surface-1);border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:14px;padding:11px 20px}
  .tb-clan{margin-right:auto;min-width:0}
  .tb-title{font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
  .tb-sub{font-size:12px;color:var(--muted)}
  .tb-right{display:flex;align-items:center;gap:8px}
  /* ---- Classements ---- */
  .rk-mine{font-size:13px;color:var(--ink-2)}
  .rk-mine b{color:var(--ink)}
  .rk-me td{background:var(--accent-soft) !important;font-weight:600}
  .rk-table th,.rk-table td{text-align:left;white-space:nowrap}
  .rk-table .rk-num{text-align:right;font-variant-numeric:tabular-nums}
  @media(max-width:720px){
    .sidebar{flex-basis:58px;width:58px;padding:10px 7px}
    .side-brand,.side-toggle{display:none}
    .sidebar .si-lbl,.sidebar .su-who,.sidebar .su-lbl,.sidebar .si-new{display:none}
    .sidebar .side-item{justify-content:center;padding:10px}
    .sidebar .su-logout{padding:9px 0}
    .side-head{justify-content:center;padding:4px 0 10px}
    .topbar{padding:10px 14px}
  }

  /* ---- Barre de filtres ---- */
  .filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:11px 15px;margin-bottom:20px;
    background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
  .fld{display:flex;align-items:center;gap:8px}
  .filters label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
  .filters select,.filters input,.searchbar input{font:inherit;font-size:13px;color:var(--ink);
    background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;transition:.15s}
  .filters select:focus,.filters input:focus,.searchbar input:focus{border-color:var(--accent);background:var(--card)}
  .filters input[type=search]{min-width:190px}
  .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px}
  .seg button{appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);
    background:transparent;border:0;border-radius:6px;padding:6px 12px;transition:.15s}
  .seg button:hover{color:var(--ink)}
  .seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
  .spacer{flex:1 1 auto}

  .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
  .kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 17px;
    box-shadow:var(--shadow-sm);transition:.18s;position:relative;overflow:hidden}
  .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:0;transition:.18s}
  .kpi:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  .kpi:hover::before{opacity:.65}
  .kpi .k-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .kpi .k-val{font-size:27px;font-weight:750;margin-top:7px;letter-spacing:-.6px;line-height:1}
  .kpi .k-sub{font-size:12px;color:var(--ink-2);margin-top:6px}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
  .card h2{font-size:13px;margin:0 0 16px;font-weight:700;letter-spacing:.2px;display:flex;align-items:baseline;gap:8px}
  .card h2 .hint{font-weight:500;color:var(--muted);font-size:12px}

  .bars{display:flex;flex-direction:column;gap:11px}
  .bar-row{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:12px}
  .bar-row .nm{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  .bar-track{background:var(--surface-2);border-radius:6px;height:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
  .bar-fill{height:100%;background:var(--series-1);border-radius:6px;min-width:4px;
    transition:width .55s cubic-bezier(.2,.7,.2,1)}
  .bar-row .vv{font-size:13px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

  .trend{width:100%;height:190px;display:block}
  .trend .grid-line{stroke:var(--grid);stroke-width:1}
  .trend .axis-line{stroke:var(--axis);stroke-width:1}
  .trend .area{fill:var(--series-1);opacity:.13}
  .trend .line{fill:none;stroke:var(--series-1);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
  .trend .dot{fill:var(--series-1)}
  .trend text{fill:var(--muted);font-size:11px}

  .tablecard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
    box-shadow:var(--shadow-sm);overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  th,td{padding:10px 12px;text-align:right;white-space:nowrap}
  th:first-child,td:first-child{text-align:left}
  thead th{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    cursor:pointer;user-select:none;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card)}
  thead th:hover{color:var(--ink)}
  thead th.sorted{color:var(--accent)}
  thead th .arw{color:var(--accent);font-size:10px}
  tbody td{border-bottom:1px solid var(--grid);font-size:13px}
  tbody tr{transition:.12s}
  tbody tr:hover{background:var(--accent-soft)}
  tbody tr:last-child td{border-bottom:0}
  tbody td:first-child{font-weight:600}
  .rank{color:var(--muted);width:22px;display:inline-block;text-align:right;margin-right:10px}
  .pos{color:var(--good)} .neg{color:var(--bad)}
  .empty{padding:44px;text-align:center;color:var(--muted);font-size:14px}
  .members{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
  .mem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;
    background:var(--surface-2);border:1px solid var(--border);border-radius:9px;transition:.12s}
  .mem:hover{border-color:var(--accent)}
  .mem .mn{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mem .mr{font-size:11px;color:var(--muted);white-space:nowrap}
  .mem.me{border-color:var(--accent);background:var(--accent-soft)}
  .phead{margin-bottom:18px;font-size:14px;color:var(--ink-2)}
  .phead b{font-size:20px;color:var(--ink);letter-spacing:-.3px}
  .pcard{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow);border-left:4px solid var(--accent)}
  .pav{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(145deg,var(--accent-2),var(--accent));color:#231a06;font-weight:800;font-size:17px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
  .pci{min-width:0}
  .pci h2{font-size:20px;margin:0 0 3px;letter-spacing:-.3px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pmeta{font-size:13px;color:var(--muted)}
  .pmeta b{font-weight:700}
  .role-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);
    background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:3px 10px}
  /* ══ LINE-UPS — présences et compositions de chars ═══════════════════
     Monde .dashx : acier presque noir, filets d'un pixel, l'or réservé à
     la sélection, à l'affectation et à l'action principale. Le vert et le
     rouge ne portent que du sens, toujours doublés d'un signe (✓ ⚠ ?).
     Tout est scopé sous #viewLineups : les autres onglets gardent les
     règles de base .lu-head / .lu-title. */
  #viewLineups{--lx-ease:cubic-bezier(.2,.8,.2,1);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}
  #viewLineups .ic{width:15px;height:15px;flex:none}
  #viewLineups [hidden]{display:none !important}

  /* ── En-tête ── */
  #viewLineups .lx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:22px}
  #viewLineups .lx-top-txt{min-width:0;max-width:640px}
  #viewLineups .lu-title{margin:0;font:700 24px/1.15 var(--fx);letter-spacing:.2px;color:var(--ink);text-transform:none;text-wrap:balance}
  #viewLineups .lx-lead{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  #viewLineups .lx-rolehint{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
  #viewLineups .lx-rolehint:empty{display:none}
  #viewLineups .lx-top-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  #viewLineups .lx-ctx{display:flex;gap:6px}
  #viewLineups .lx-ctx span{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);white-space:nowrap}
  #viewLineups .lx-ctx b{margin-left:4px;font-weight:600;color:var(--ink-2)}
  #viewLineups .lu-format-tabs{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel-2)}
  #viewLineups .lu-format-tabs button{appearance:none;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink-2);padding:7px 14px;font:600 12.5px inherit;cursor:pointer}
  #viewLineups .lu-format-tabs button:first-child{border-left:0}
  #viewLineups .lu-format-tabs button.on{color:var(--gold-2);background:var(--gold-soft)}
  #viewLineups .lu-new{margin:0;height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--gold);
    background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#19150b;font-weight:800;font-size:13.5px;
    transition:filter .15s,transform .15s var(--lx-ease)}
  #viewLineups .lu-new:hover{filter:brightness(1.06);transform:translateY(-1px);color:#19150b;border-color:var(--gold);background:linear-gradient(180deg,var(--gold-2),var(--gold))}

  /* ── Boutons et champs ── */
  :is(#viewLineups,.lx-dlg) .lx-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 12px;
    border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--ink-2);font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
    cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background-color .15s,filter .15s}
  :is(#viewLineups,.lx-dlg) .lx-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.18);background:var(--raised)}
  :is(#viewLineups,.lx-dlg) .lx-btn:disabled{opacity:.4;cursor:not-allowed}
  :is(#viewLineups,.lx-dlg) .lx-btn-quiet{background:transparent;border-color:transparent}
  :is(#viewLineups,.lx-dlg) .lx-btn-quiet:hover{background:var(--raised);border-color:var(--line)}
  :is(#viewLineups,.lx-dlg) .lx-btn-danger:hover{color:var(--bad);border-color:rgba(232,98,107,.35);background:rgba(232,98,107,.08)}
  :is(#viewLineups,.lx-dlg) .lx-btn-gold{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#19150b;font-weight:800}
  :is(#viewLineups,.lx-dlg) .lx-btn-gold:hover{color:#19150b;border-color:var(--gold);background:linear-gradient(180deg,var(--gold-2),var(--gold));filter:brightness(1.07)}
  :is(#viewLineups,.lx-dlg) .lx-icon{width:34px;padding:0;font-size:15px}
  :is(#viewLineups,.lx-dlg) .lx-link{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--gold-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  :is(#viewLineups,.lx-dlg) .lx-link:hover{color:var(--gold)}
  :is(#viewLineups,.lx-dlg) .lx-input{width:100%;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--ink);font:14px system-ui,-apple-system,"Segoe UI",sans-serif;transition:border-color .15s}
  :is(#viewLineups,.lx-dlg) .lx-input::placeholder{color:var(--muted)}
  :is(#viewLineups,.lx-dlg) .lx-input:focus{outline:0;border-color:var(--gold-line)}
  :is(#viewLineups,.lx-dlg) :is(button,[role="button"],select,input):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  :is(#viewLineups,.lx-dlg) .lx-btn-bad{border-color:rgba(232,98,107,.55);background:rgba(232,98,107,.16);color:#ffb4b9;font-weight:700}
  :is(#viewLineups,.lx-dlg) .lx-btn-bad:hover{color:#ffc9cd;border-color:var(--bad);background:rgba(232,98,107,.26)}
  #viewLineups .lx-me{font:700 9.5px/1.5 var(--fx);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#17130b;background:var(--gold);border-radius:4px;padding:0 5px}
  #viewLineups .lx-tag{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
  #viewLineups .lx-warn{font-style:normal;font-size:11px;font-weight:600;color:var(--or)}

  /* ── Message ── */
  #viewLineups .lu-notice{margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink-2);font-size:13px;font-weight:600;animation:lxIn .2s var(--lx-ease)}
  #viewLineups .lu-notice.good{border-color:rgba(76,192,119,.35);color:var(--good2)}
  #viewLineups .lu-notice.bad{border-color:rgba(232,98,107,.4);color:var(--bad)}

  /* ── Entrées ── */
  @keyframes lxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes lxFade{from{opacity:.25}to{opacity:1}}
  @keyframes lxWipe{from{clip-path:inset(0 100% 0 0 round 8px)}to{clip-path:inset(0 0 0 0 round 8px)}}
  @keyframes lxPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
  @keyframes lxSlide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
  @keyframes lxPulse{from{opacity:.45}to{opacity:1}}
  #viewLineups .lx-in{animation:lxIn .24s var(--lx-ease) both}
  #viewLineups .lx-fade{animation:lxFade .2s ease-out both}

  /* ── Liste des line-ups ── */
  #viewLineups .lx-group{margin:26px 2px 10px;font:700 11px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #viewLineups .lx-group:first-child{margin-top:0}
  #viewLineups .lx-list{display:grid;gap:10px}
  #viewLineups .lx-skel{height:104px;border-radius:12px;border:1px solid var(--line);background:var(--panel);animation:lxPulse .9s ease-in-out infinite alternate}
  #viewLineups .lx-card{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr) 16px;gap:28px;align-items:center;
    padding:18px 18px 18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;
    transition:border-color .18s,transform .18s var(--lx-ease),box-shadow .18s}
  #viewLineups .lx-card:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(0,0,0,.85)}
  #viewLineups .lx-card:active{transform:translateY(0)}
  #viewLineups .lx-card.is-past{background:var(--panel-2)}
  #viewLineups .lx-card.is-past .lx-card-name{color:var(--ink-2)}
  #viewLineups .lx-card-id{min-width:0}
  #viewLineups .lx-kick{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
  #viewLineups .lx-kick>span:not(.lx-when)+span:not(.lx-when)::before{content:"·";margin-right:10px;color:rgba(255,255,255,.2)}
  #viewLineups .lx-when{font:700 10.5px/1 var(--fx);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--gold-soft);color:var(--gold-2)}
  #viewLineups .lx-when.next{background:rgba(255,255,255,.06);color:var(--ink-2)}
  #viewLineups .lx-when.past{background:transparent;color:var(--muted);padding-left:0;padding-right:0}
  #viewLineups .lx-card-name{margin:7px 0 0;font:700 18px/1.2 var(--fx);letter-spacing:.2px;color:var(--ink);overflow-wrap:anywhere}
  #viewLineups .lx-card-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:6px;font-size:12.5px;color:var(--muted)}
  #viewLineups .lx-card-meta span+span::before{content:"·";margin:0 8px;color:rgba(255,255,255,.2)}
  #viewLineups .lx-days{display:grid;grid-template-columns:repeat(7,26px);gap:4px;align-items:end}
  #viewLineups .lx-dbar{display:grid;justify-items:center;gap:4px}
  #viewLineups .lx-dbar b{font:600 11.5px/1 var(--fx);color:var(--ink-2);font-variant-numeric:tabular-nums}
  #viewLineups .lx-dbar.zero b{color:var(--muted);opacity:.6}
  #viewLineups .lx-dbar i{position:relative;display:block;width:10px;height:34px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
  #viewLineups .lx-dbar s{position:absolute;left:0;right:0;bottom:0;border-radius:3px;background:var(--gold)}
  #viewLineups .lx-dbar em{font-style:normal;font-size:10.5px;color:var(--muted)}
  #viewLineups .lx-card-comps{display:grid;gap:9px;min-width:0}
  #viewLineups .lx-chips{display:flex;flex-wrap:wrap;gap:6px}
  #viewLineups .lx-chip{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);font-size:12.5px;color:var(--muted)}
  #viewLineups .lx-chip b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-chip em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
  #viewLineups .lx-chip-none{border-style:dashed;background:transparent}
  #viewLineups .lx-mine{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:12.5px;color:var(--ink-2)}
  #viewLineups .lx-mine .ic{width:14px;height:14px;color:var(--gold)}
  #viewLineups .lx-mine b{color:var(--gold-2);font-weight:700}
  #viewLineups .lx-mine-plan{color:var(--muted)}
  #viewLineups .lx-mine-plan::before{content:"— "}
  #viewLineups .lx-mine-more{font-size:11.5px;color:var(--muted)}
  #viewLineups .lx-card-go{color:var(--muted);transition:transform .18s var(--lx-ease),color .18s}
  #viewLineups .lx-card-go .ic{width:16px;height:16px}
  #viewLineups .lx-card:hover .lx-card-go{color:var(--gold);transform:translateX(3px)}

  /* ── État vide ── */
  #viewLineups .lx-empty{display:grid;justify-items:center;gap:10px;padding:40px 22px;text-align:center;border:1px dashed rgba(255,255,255,.12);border-radius:12px}
  #viewLineups .lx-empty-ic{width:26px;height:26px;color:var(--gold)}
  #viewLineups .lx-empty h4{margin:0;font:700 17px var(--fx);color:var(--ink)}
  #viewLineups .lx-empty p{margin:0;max-width:56ch;font-size:14px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  #viewLineups .lx-empty .lx-btn{margin-top:6px;height:38px;padding:0 16px}

  /* ── Détail d'une line-up ── */
  #viewLineups .lx-dtop{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin-bottom:12px}
  #viewLineups .lx-back{appearance:none;display:inline-flex;align-items:center;gap:4px;height:30px;margin:0 0 0 -8px;padding:0 10px 0 4px;border:0;border-radius:8px;
    background:transparent;color:var(--ink-2);font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,background-color .15s}
  #viewLineups .lx-back .ic{width:17px;height:17px;transition:transform .18s var(--lx-ease)}
  #viewLineups .lx-back:hover{color:var(--ink);background:var(--panel)}
  #viewLineups .lx-back:hover .ic{transform:translateX(-2px)}
  #viewLineups .lx-dtitle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
  #viewLineups .lx-dtitle-txt{min-width:0}
  #viewLineups .lx-dtitle{margin:8px 0 0;font:700 27px/1.12 var(--fx);letter-spacing:.2px;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
  #viewLineups .lx-dnotes{margin:9px 0 0;max-width:72ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
  /* Titre et note se modifient sur place : ils ressemblent à du texte, pas à un formulaire. */
  #viewLineups .lx-dtitle-in{display:block;width:min(100%,28ch);padding:2px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;transition:border-color .15s}
  #viewLineups .lx-dtitle-in:hover{border-bottom-color:rgba(255,255,255,.2)}
  #viewLineups .lx-dtitle-in:focus{outline:0;border-bottom-color:var(--gold)}
  #viewLineups .lx-dtitle-in::placeholder{color:var(--muted)}
  #viewLineups .lx-dnotes-in{display:block;width:min(100%,72ch);margin-top:8px;padding:3px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;
    color:var(--ink-2);font:14.5px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;transition:border-color .15s}
  #viewLineups .lx-dnotes-in::placeholder{color:var(--muted)}
  #viewLineups .lx-dnotes-in:hover{border-bottom-color:rgba(255,255,255,.2)}
  #viewLineups .lx-dnotes-in:focus{outline:0;border-bottom-color:var(--gold);color:var(--ink)}
  #viewLineups .lx-weekstep{display:inline-flex;align-items:center;gap:2px}
  #viewLineups .lx-weekstep button{appearance:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
  #viewLineups .lx-weekstep button:hover{color:var(--gold-2);background:var(--panel)}
  #viewLineups .lx-weekstep .ic{width:14px;height:14px}
  #viewLineups .lx-weekstep>span{font-variant-numeric:tabular-nums}
  #viewLineups .lx-sync{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
  #viewLineups .lx-sync:empty{display:none}
  #viewLineups .lx-sync .ic{width:14px;height:14px;stroke-width:2.4}
  #viewLineups .lx-sync i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:lxPulse .6s ease-in-out infinite alternate}
  #viewLineups .lx-sync[data-state="saved"]{color:var(--good);animation:lxFade .25s ease-out}
  #viewLineups .lx-sync[data-state="error"]{color:var(--or)}
  #viewLineups .lx-sync .lx-link{font-size:12.5px}
  #viewLineups .lx-dactions{display:flex;gap:6px;flex-wrap:wrap}
  #viewLineups .lx-seg{display:flex;gap:2px;margin:22px 0 18px;border-bottom:1px solid var(--line)}
  #viewLineups .lx-seg button{appearance:none;position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 13px;border:0;background:transparent;
    color:var(--muted);font:600 14.5px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s}
  #viewLineups .lx-seg button:hover{color:var(--ink)}
  #viewLineups .lx-seg button[aria-selected="true"]{color:var(--ink)}
  #viewLineups .lx-seg button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .22s var(--lx-ease)}
  #viewLineups .lx-seg button[aria-selected="true"]::after{transform:scaleX(1)}
  #viewLineups .lx-seg b{min-width:22px;padding:3px 7px;border-radius:999px;background:var(--panel-2);color:var(--ink-2);font:600 11.5px/1 var(--fx);text-align:center;font-variant-numeric:tabular-nums}
  #viewLineups .lx-seg button[aria-selected="true"] b{background:var(--gold-soft);color:var(--gold-2)}

  /* ── Plans (onglets de compositions) ── */
  #viewLineups .lx-plans{display:flex;gap:8px;margin:0 -2px 16px;padding:2px 2px 4px;overflow-x:auto;scrollbar-width:thin}
  #viewLineups .lx-plan{appearance:none;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name fill" "sub sub";gap:3px 14px;align-items:baseline;
    min-width:136px;max-width:240px;padding:10px 13px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink-2);text-align:left;cursor:pointer;
    transition:border-color .16s,background-color .16s,transform .16s var(--lx-ease)}
  #viewLineups .lx-plan:hover{border-color:rgba(255,255,255,.2)}
  #viewLineups .lx-plan:active{transform:scale(.98)}
  #viewLineups .lx-plan-name{grid-area:name;font:700 15px/1.2 var(--fx);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-plan-fill{grid-area:fill;font:600 12px var(--fx);color:var(--muted);font-variant-numeric:tabular-nums}
  #viewLineups .lx-plan-sub{grid-area:sub;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-plan.on{border-color:var(--gold);background:var(--gold-soft)}
  #viewLineups .lx-plan.on .lx-plan-name{color:var(--gold-2)}
  #viewLineups .lx-plan.on .lx-plan-fill{color:var(--gold-2)}
  #viewLineups .lx-plan-add{appearance:none;flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border:1px dashed rgba(255,255,255,.16);border-radius:10px;
    background:transparent;color:var(--ink-2);font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s}
  #viewLineups .lx-plan-add:hover{color:var(--gold-2);border-color:var(--gold-line)}

  /* ── Composition ── */
  #viewLineups .lx-comp{container:lxcomp/inline-size}
  #viewLineups .lx-chead{display:flex;align-items:flex-end;gap:14px 26px;flex-wrap:wrap;margin-bottom:14px}
  #viewLineups .lx-chead-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;margin-right:auto}
  #viewLineups .lx-cname{max-width:100%;padding:2px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;color:var(--ink);font:700 22px/1.2 var(--fx);letter-spacing:.2px;transition:border-color .15s}
  #viewLineups .lx-cname:hover{border-bottom-color:rgba(255,255,255,.2)}
  #viewLineups .lx-cname:focus{outline:0;border-bottom-color:var(--gold)}
  #viewLineups .lx-cname-ro{margin:0;font:700 22px/1.2 var(--fx);letter-spacing:.2px;color:var(--ink)}
  #viewLineups .lx-cmap{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 0 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--muted);transition:border-color .15s}
  #viewLineups .lx-cmap:hover{border-color:rgba(255,255,255,.2)}
  #viewLineups .lx-cmap:focus-within{border-color:var(--gold-line)}
  #viewLineups .lx-cmap select{appearance:none;height:30px;padding:0 28px 0 0;border:0;background:transparent;color:var(--ink);font:500 13.5px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
  #viewLineups .lx-cmap select:focus-visible{outline:0}
  #viewLineups .lx-cmap::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
  #viewLineups .lx-cmap option{background:#16171a;color:var(--ink)}
  #viewLineups .lx-cmap-ro{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
  #viewLineups .lx-cmap-ro .ic{color:var(--muted)}
  #viewLineups .lx-cstats{display:flex;gap:24px;align-items:flex-end}
  #viewLineups .lx-cstat b{display:block;font:700 23px/1 var(--fx);color:var(--ink);font-variant-numeric:tabular-nums}
  #viewLineups .lx-cstat b small{margin-left:1px;font-size:13px;font-weight:600;color:var(--muted)}
  #viewLineups .lx-cstat span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);white-space:nowrap}
  #viewLineups .lx-cstat.warn b{color:var(--or)}
  #viewLineups .lx-cmenu{display:flex;gap:2px}
  #viewLineups .lx-cnote{margin:0 0 14px}
  #viewLineups .lx-cnote-ro{margin:0 0 14px;max-width:75ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
  #viewLineups .lx-minebar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;padding:11px 14px;border:1px solid var(--gold-line);border-radius:10px;background:var(--gold-soft)}
  #viewLineups .lx-minebar-k{font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  #viewLineups .lx-minebar-v{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
  #viewLineups .lx-minebar-v b{color:var(--gold-2)}
  #viewLineups .lx-minebar-note{font-size:13px;font-style:italic;color:var(--ink-2)}
  #viewLineups .lx-st{font-size:12.5px;font-weight:600}
  #viewLineups .lx-st.ok{color:var(--good)}
  #viewLineups .lx-st.warn{color:var(--or)}
  #viewLineups .lx-st.unk{color:var(--muted)}

  /* ── La matrice postes × joueurs ── */
  #viewLineups .lx-mx-wrap{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  #viewLineups .lx-mx{min-width:calc(276px + var(--np) * 56px + 150px)}
  #viewLineups .lx-mx-row{display:grid;grid-template-columns:minmax(276px,1.6fr) repeat(var(--np),minmax(52px,1fr)) minmax(150px,1fr);border-top:1px solid var(--line-2);transition:background-color .15s}
  #viewLineups .lx-cells{display:contents}
  #viewLineups .lx-mx-row:not(.lx-mx-head):hover{background:rgba(255,255,255,.018)}
  #viewLineups .lx-mx-row.is-editing{background:rgba(229,185,92,.04)}
  #viewLineups .lx-mx-head{border-top:0;border-bottom:1px solid var(--line);background:var(--panel-2)}
  #viewLineups .lx-mx-hpost{align-self:end;padding:0 14px 10px !important;font:700 10.5px var(--fx) !important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--panel-2) !important}
  /* Les pseudos (jusqu'à 24 caractères) s'écrivent en diagonale au-dessus de leur colonne. */
  #viewLineups .lx-mx-ph{position:relative;display:grid;justify-items:center;align-content:end;gap:6px;min-width:0;height:116px;padding:0 4px 8px;text-align:center}
  #viewLineups .lx-ph-tags{display:flex;align-items:center;justify-content:center;gap:3px;height:15px}
  #viewLineups .lx-mx-ph.is-me{background:rgba(229,185,92,.07)}
  #viewLineups .lx-ph-name{position:absolute;left:calc(50% - 4px);bottom:42px;max-width:134px;font-size:12px;font-weight:600;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-32deg);transform-origin:0 100%}
  #viewLineups .lx-mx-ph.is-me .lx-ph-name{color:var(--gold-2)}
  #viewLineups .lx-ph-days{display:flex;gap:2px}
  #viewLineups .lx-ph-days i{width:5px;height:5px;border-radius:1px;background:rgba(255,255,255,.1)}
  #viewLineups .lx-ph-days i.on{background:var(--gold)}
  #viewLineups .lx-mx-head .lx-mx-as{align-self:end;padding:0 14px 10px;font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  /* colonne « poste » : collée à gauche quand la matrice défile */
  #viewLineups .lx-post{position:sticky;left:0;z-index:2;display:grid;grid-template-columns:18px 52px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:10px 12px;
    background:var(--panel);border:0;border-right:1px solid var(--line-2);color:inherit;font:inherit;text-align:left}
  #viewLineups button.lx-post{appearance:none;grid-template-columns:18px 52px minmax(0,1fr) 16px;cursor:pointer;border-radius:0;transition:background-color .15s}
  #viewLineups button.lx-post:hover,#viewLineups button.lx-post.on{background:var(--raised)}
  #viewLineups button.lx-post:focus-visible{outline-offset:-2px}
  #viewLineups .lx-post-pen{color:var(--muted);opacity:0;transition:opacity .15s,color .15s}
  #viewLineups .lx-post-pen .ic{width:14px;height:14px}
  #viewLineups button.lx-post:hover .lx-post-pen,#viewLineups button.lx-post:focus-visible .lx-post-pen{opacity:1}
  #viewLineups button.lx-post.on .lx-post-pen{opacity:1;color:var(--gold)}
  #viewLineups .lx-num{font:700 13px var(--fx);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
  #viewLineups .lx-pic{display:grid;place-items:center;width:52px;height:34px;border-radius:7px;background:var(--panel-2);overflow:hidden;color:var(--muted)}
  #viewLineups .lx-pic img{width:100%;height:100%;object-fit:contain}
  #viewLineups .lx-pic img.lx-clsimg{width:20px;height:20px;object-fit:contain}
  #viewLineups .lx-req{display:grid;gap:3px;min-width:0}
  #viewLineups .lx-req-name{font-size:14.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-req-name.todo{color:var(--or)}
  #viewLineups .lx-req-name.todo::before{content:"⚠ "}
  #viewLineups .lx-req-sub{display:flex;align-items:center;gap:7px;min-width:0}
  #viewLineups .lx-req-kind{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-post-note{font-size:12px;font-style:italic;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-tac{display:inline-flex;align-items:center;gap:5px;flex:none;height:21px;padding:0 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
  #viewLineups .lx-tac .ic{width:12px;height:12px;color:var(--gold)}
  #viewLineups .lx-c{display:grid;min-width:0;padding:6px 3px}
  #viewLineups .lx-c.is-me{background:rgba(229,185,92,.05)}
  #viewLineups .lx-cell{appearance:none;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;margin:0;padding:0 2px;border:0;border-radius:8px;
    background:rgba(229,185,92,calc(var(--h,0) * .15));color:var(--ink);font:600 13.5px/1.1 var(--fx);font-variant-numeric:tabular-nums}
  #viewLineups button.lx-cell{cursor:pointer;transition:box-shadow .15s,background-color .15s,color .15s}
  #viewLineups button.lx-cell:hover{box-shadow:inset 0 0 0 1px var(--gold-line)}
  #viewLineups button.lx-cell:focus-visible{outline-offset:1px}
  #viewLineups .lx-cell-name{display:none}
  #viewLineups .lx-cell small{display:block;margin-top:2px;font:500 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
  #viewLineups .lx-cell.s-absent,#viewLineups .lx-cell.s-na{color:rgba(255,255,255,.24);font-weight:400}
  #viewLineups .lx-cell.s-unknown{color:var(--muted);font-weight:500}
  #viewLineups .lx-cell.s-wait .lx-cell-v{width:22px;height:8px;border-radius:4px;background:var(--raised);animation:lxPulse .8s ease-in-out infinite alternate}
  #viewLineups .lx-mx:not(.is-loading) .lx-cell.s-played .lx-cell-v,#viewLineups .lx-mx:not(.is-loading) .lx-cell.s-absent .lx-cell-v{animation:lxFade .25s ease-out both}
  /* le joueur désigné : la case se remplit d'or */
  #viewLineups .lx-cell.is-on{color:#17130b;font-weight:700}
  #viewLineups .lx-cell.is-on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--gold);box-shadow:0 8px 18px -10px rgba(229,185,92,.75)}
  #viewLineups .lx-cell.is-on small{color:rgba(23,19,11,.7)}
  #viewLineups .lx-cell.is-on.s-absent,#viewLineups .lx-cell.is-on.s-na,#viewLineups .lx-cell.is-on.s-unknown{color:rgba(23,19,11,.8)}
  #viewLineups .lx-cell.is-conflict::before{background:var(--or)}
  #viewLineups .lx-cell-ok{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#17130b;color:var(--gold)}
  #viewLineups .lx-cell.is-conflict .lx-cell-ok{color:var(--or)}
  #viewLineups .lx-cell-ok .ic{width:10px;height:10px;stroke-width:2.8}
  #viewLineups .lx-cell.just::before{animation:lxWipe .28s var(--lx-ease) both}
  #viewLineups .lx-cell.just .lx-cell-ok{animation:lxPop .3s .14s var(--lx-ease) both}
  #viewLineups .lx-mx-as{display:grid;align-content:center;gap:3px;min-width:0;padding:8px 14px;border-left:1px solid var(--line-2)}
  #viewLineups .lx-mx-as.just{animation:lxSlide .24s var(--lx-ease) both}
  #viewLineups .lx-as-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;font-weight:650;color:var(--ink)}
  #viewLineups .lx-as-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-as-name.is-me>span{color:var(--gold-2)}
  #viewLineups .lx-mx-as.is-none .lx-as-name{color:var(--muted);font-weight:500;font-style:italic}
  #viewLineups .lx-as-hint{font-size:11.5px;color:var(--muted);opacity:.8}
  #viewLineups .lx-as-k{display:none}
  #viewLineups .lx-mx-empty{padding:26px 20px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;color:var(--ink-2);font-size:14px;line-height:1.55;text-align:center}

  /* ── Modifier un poste (sous sa ligne) ── */
  #viewLineups .lx-pe-host{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--lx-ease)}
  #viewLineups .lx-pe-host.open{grid-template-rows:1fr}
  #viewLineups .lx-pe-host>div{min-height:0;overflow:hidden}
  #viewLineups .lx-pe{position:sticky;left:0;max-width:min(100%,100cqw);padding:16px 16px 14px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);background:var(--panel-2)}
  #viewLineups .lx-pe-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px}
  #viewLineups .lx-pe-col{min-width:0}
  #viewLineups .lx-pe-lab{display:block;margin:0 0 8px;font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #viewLineups .lx-pe-col .lx-input+.lx-pe-actions{margin-top:14px}
  #viewLineups .lx-pe-kinds{display:inline-flex;gap:2px;margin-bottom:12px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  #viewLineups .lx-pe-kind{appearance:none;padding:7px 13px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,background-color .15s}
  #viewLineups .lx-pe-kind:hover{color:var(--ink)}
  #viewLineups .lx-pe-kind.on{background:var(--gold-soft);color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-line)}
  #viewLineups .lx-pe-hint{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  #viewLineups .lx-tp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  #viewLineups .lx-tp-search{display:flex;align-items:center;gap:8px;flex:1 1 200px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);transition:border-color .15s}
  #viewLineups .lx-tp-search:focus-within{border-color:var(--gold-line)}
  #viewLineups .lx-tp-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:14px system-ui,-apple-system,"Segoe UI",sans-serif}
  #viewLineups .lx-tp-search input:focus-visible{outline:0}
  #viewLineups .lx-tp-f{display:flex;gap:4px;flex-wrap:wrap}
  #viewLineups .lx-pill{appearance:none;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-2);font:600 12px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
  #viewLineups .lx-pill:hover{color:var(--ink);border-color:rgba(255,255,255,.2)}
  #viewLineups .lx-pill.on{color:var(--gold-2);border-color:var(--gold-line);background:var(--gold-soft)}
  #viewLineups .lx-tp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:3px;max-height:262px;overflow:auto;padding:3px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);scrollbar-width:thin}
  #viewLineups .lx-tp-item{appearance:none;display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:5px 9px 5px 4px;
    border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .12s,border-color .12s}
  #viewLineups .lx-tp-item img{grid-row:span 2;width:52px;height:32px;object-fit:contain}
  #viewLineups .lx-tp-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-tp-cls{grid-column:2;font-size:11.5px;color:var(--muted)}
  #viewLineups .lx-tp-cov{grid-row:1/span 2;grid-column:3;font:600 12.5px var(--fx);color:var(--ink-2);font-variant-numeric:tabular-nums}
  #viewLineups .lx-tp-cov.none{color:rgba(255,255,255,.25)}
  #viewLineups .lx-tp-item:hover{background:var(--raised)}
  #viewLineups .lx-tp-item.on{border-color:var(--gold);background:var(--gold-soft)}
  #viewLineups .lx-tp-item.on .lx-tp-name{color:var(--gold-2)}
  #viewLineups .lx-cp{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
  #viewLineups .lx-cp-item{appearance:none;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:9px;
    background:var(--panel);color:var(--ink);font:600 13.5px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s}
  #viewLineups .lx-cp-item img{width:18px;height:18px;object-fit:contain}
  #viewLineups .lx-cp-item em{font:600 12px var(--fx);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
  #viewLineups .lx-cp-item:hover{border-color:rgba(255,255,255,.2)}
  #viewLineups .lx-cp-item.on{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-2)}
  #viewLineups .lx-pe-tacs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
  #viewLineups .lx-pe-tac{appearance:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
    color:var(--ink-2);font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
  #viewLineups .lx-pe-tac .ic{width:14px;height:14px}
  #viewLineups .lx-pe-tac:hover{color:var(--ink);border-color:rgba(255,255,255,.2)}
  #viewLineups .lx-pe-tac.on{color:var(--gold-2);border-color:var(--gold);background:var(--gold-soft)}
  #viewLineups .lx-pe-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
  #viewLineups .lx-pe-actions #lxPeDone{margin-left:auto}

  /* ── Ajouter un poste, légende, source ── */
  #viewLineups .lx-addbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px}
  #viewLineups .lx-addbar-l{margin-right:6px;font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #viewLineups .lx-add{appearance:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px dashed rgba(255,255,255,.16);border-radius:8px;background:transparent;
    color:var(--ink-2);font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
  #viewLineups .lx-add img{width:15px;height:15px;object-fit:contain}
  #viewLineups .lx-add .ic{width:14px;height:14px}
  #viewLineups .lx-add:hover:not(:disabled){border-style:solid;border-color:var(--gold-line);color:var(--ink);background:var(--panel)}
  #viewLineups .lx-add:disabled{opacity:.35;cursor:not-allowed}
  #viewLineups .lx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;font-size:12px;color:var(--muted)}
  #viewLineups .lx-legend>span{display:inline-flex;align-items:center;gap:7px}
  #viewLineups .lx-lg{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:30px;height:22px;padding:0 5px;border-radius:5px;font:600 11.5px var(--fx);font-style:normal;font-variant-numeric:tabular-nums}
  #viewLineups .lx-lg small{font:500 9px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
  #viewLineups .lx-lg-n{background:rgba(229,185,92,.12);color:var(--ink)}
  #viewLineups .lx-lg-d{background:var(--panel);color:var(--muted)}
  #viewLineups .lx-lg-on{background:var(--gold);color:#17130b}
  #viewLineups .lx-lg-on .ic{width:12px;height:12px;stroke-width:2.6}
  #viewLineups .lx-src{margin:8px 0 0;max-width:92ch;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
  #viewLineups .lx-src.warn{color:var(--or)}
  #viewLineups .lx-src b{color:var(--ink-2);font-weight:600}

  /* ── Onglet Joueurs : qui joue, quels jours ── */
  #viewLineups .lx-at{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto;scrollbar-width:thin}
  #viewLineups .lx-at-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(7,minmax(48px,72px));align-items:center;min-width:540px;border-top:1px solid var(--line-2)}
  #viewLineups .lx-at-row.is-me{background:rgba(229,185,92,.05)}
  #viewLineups .lx-at-head{border-top:0;border-bottom:1px solid var(--line);background:var(--panel-2)}
  #viewLineups .lx-at-head .lx-at-name{align-self:end;font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #viewLineups .lx-at-name{display:flex;align-items:center;gap:8px;min-width:0;padding:11px 14px;font-size:14px;font-weight:600}
  #viewLineups .lx-at-name>.lx-at-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #viewLineups .lx-at.can-edit .lx-at-row{grid-template-columns:minmax(210px,1fr) repeat(7,minmax(46px,68px)) 46px;min-width:580px}
  #viewLineups .lx-at-row:not(.lx-at-head)>.lx-at-name{position:sticky;left:0;z-index:1;background:var(--panel)}
  #viewLineups .lx-at-row.is-me:not(.lx-at-head)>.lx-at-name{background:#1d1c19}
  #viewLineups .lx-at-row.just{animation:lxRowIn .9s ease-out}
  @keyframes lxRowIn{from{background:rgba(229,185,92,.16)}to{background:transparent}}
  #viewLineups .lx-strat{appearance:none;display:inline-flex;align-items:center;gap:5px;flex:none;height:24px;padding:0 7px;border:1px solid transparent;border-radius:999px;
    background:transparent;color:rgba(255,255,255,.28);font:600 11.5px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
  #viewLineups .lx-strat .ic{width:13px;height:13px}
  #viewLineups .lx-strat span{display:none}
  #viewLineups .lx-strat:hover{color:var(--gold-2);border-color:var(--line)}
  #viewLineups .lx-strat:hover span{display:inline}
  #viewLineups .lx-strat.on{color:var(--gold-2);border-color:var(--gold-line);background:var(--gold-soft)}
  #viewLineups .lx-strat.on span{display:inline}
  #viewLineups .lx-strat.on .ic{fill:currentColor}
  #viewLineups .lx-tag .ic{width:11px;height:11px;margin-right:4px;vertical-align:-1px;fill:currentColor;color:var(--gold)}
  #viewLineups .lx-at-rm{appearance:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
  #viewLineups .lx-at-rm .ic{width:14px;height:14px}
  #viewLineups .lx-at-rm:hover{color:var(--bad);background:rgba(232,98,107,.1)}
  /* Ajouter des joueurs : les membres encore libres, un clic chacun */
  #viewLineups .lx-ap{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  #viewLineups .lx-ap.is-first{margin-top:0;padding:22px 20px;border-color:var(--gold-line)}
  #viewLineups .lx-ap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  #viewLineups .lx-ap-title{margin:0;font:700 16px var(--fx);color:var(--ink)}
  #viewLineups .lx-ap.is-first .lx-ap-title{font-size:19px}
  #viewLineups .lx-ap-count{font:600 13px var(--fx);color:var(--muted);font-variant-numeric:tabular-nums}
  #viewLineups .lx-ap-lead{margin:6px 0 0;max-width:60ch;font-size:14px;line-height:1.55;color:var(--ink-2)}
  #viewLineups .lx-ap-search{margin:12px 0 10px;max-width:360px}
  #viewLineups .lx-ap-list{display:flex;flex-wrap:wrap;gap:6px}
  #viewLineups .lx-ap-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:999px;
    background:var(--panel-2);color:var(--ink);font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s,transform .15s var(--lx-ease)}
  #viewLineups .lx-ap-chip .ic{width:13px;height:13px;color:var(--gold)}
  #viewLineups .lx-ap-chip:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-2)}
  #viewLineups .lx-ap-chip:active{transform:scale(.96)}
  #viewLineups .lx-ap .lx-src{margin-top:12px}
  #viewLineups .lx-ap.is-full{padding:12px 16px}
  #viewLineups .lx-ap-full{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--ink-2)}
  #viewLineups .lx-ap-full .ic{width:15px;height:15px;color:var(--good)}
  #viewLineups .lx-at-day{display:grid;justify-items:center;gap:5px;padding:12px 0 10px}
  #viewLineups .lx-at-day b{font:700 12px var(--fx);color:var(--ink-2)}
  #viewLineups .lx-at-day i{position:relative;display:block;width:12px;height:30px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
  #viewLineups .lx-at-day s{position:absolute;left:0;right:0;bottom:0;border-radius:3px;background:rgba(229,185,92,.55)}
  #viewLineups .lx-at-day em{font:600 12.5px/1 var(--fx);font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
  #viewLineups .lx-at-day.best b,#viewLineups .lx-at-day.best em{color:var(--gold-2)}
  #viewLineups .lx-at-day.best s{background:var(--gold)}
  #viewLineups .lx-at-c{display:grid;place-items:center;padding:7px 0}
  #viewLineups .lx-at-cell{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:transparent;color:#17130b}
  #viewLineups .lx-at-cell .ic{width:16px;height:16px;stroke-width:2.4}
  #viewLineups .lx-at-cell.on{border-color:var(--gold);background:var(--gold)}
  #viewLineups button.lx-at-cell{appearance:none;padding:0;cursor:pointer;border-width:1.5px;border-color:rgba(229,185,92,.5);transition:transform .12s var(--lx-ease),background-color .12s,border-color .12s}
  #viewLineups button.lx-at-cell:hover{transform:scale(1.08);border-color:var(--gold)}
  #viewLineups .lx-at-foot{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
  #viewLineups .lx-at-foot b{color:var(--gold-2);font-weight:600}

  /* ── Largeurs moyennes et petites ── */
  @media(max-width:1060px){
    #viewLineups .lx-card{grid-template-columns:minmax(0,1fr) auto 16px;gap:16px 22px}
    #viewLineups .lx-card-comps{grid-column:1/3;grid-row:2}
    #viewLineups .lx-card-go{grid-column:3;grid-row:1/3}
  }
  @media(max-width:920px){
    #viewLineups .lx-pe-grid{grid-template-columns:1fr;gap:18px}
  }
  @media(max-width:640px){
    #viewLineups .lx-top{align-items:flex-start}
    #viewLineups .lu-title{font-size:22px}
    #viewLineups .lx-card{grid-template-columns:minmax(0,1fr) 16px;padding:16px}
    #viewLineups .lx-days{grid-column:1;grid-row:2;grid-template-columns:repeat(7,minmax(0,1fr));justify-self:stretch}
    #viewLineups .lx-card-comps{grid-column:1;grid-row:3}
    #viewLineups .lx-card-go{grid-column:2;grid-row:1}
    #viewLineups .lx-card-meta span:nth-child(2){display:none}
    #viewLineups .lx-dtitle{font-size:23px}
    #viewLineups .lx-dactions{width:100%}
    #viewLineups .lx-cstats{gap:18px}
    #viewLineups .lx-dtitle-in{width:100%}
    #viewLineups .lx-ap-search{max-width:none}
    #viewLineups .lx-ap.is-first{padding:18px 16px}
    /* Joueurs : le nom sur une ligne, les sept jours dessous, sans défilement de côté */
    #viewLineups .lx-at{overflow:visible}
    #viewLineups .lx-at-row,#viewLineups .lx-at.can-edit .lx-at-row{grid-template-columns:repeat(7,minmax(0,1fr));column-gap:5px;min-width:0;padding:0 10px}
    #viewLineups .lx-at.can-edit .lx-at-row{grid-template-columns:repeat(7,minmax(0,1fr)) 38px}
    #viewLineups .lx-at-row>.lx-at-name,#viewLineups .lx-at-row:not(.lx-at-head)>.lx-at-name{position:static;grid-column:1/8;grid-row:1;padding:12px 2px 2px;background:none}
    #viewLineups .lx-at-head>.lx-at-name{display:none}
    #viewLineups .lx-at-head>.lx-at-day{grid-row:1;padding:10px 0 8px}
    #viewLineups .lx-at-row>.lx-at-c{grid-row:2;padding:6px 0 12px}
    #viewLineups .lx-at-row>.lx-at-c:has(.lx-at-rm){grid-column:8;grid-row:1;padding:6px 0 0}
    #viewLineups .lx-at-cell{width:100%;max-width:38px;height:36px}
  }
  /* La matrice devient une pile de postes quand la place manque. */
  @container lxcomp (max-width:700px){
    #viewLineups .lx-mx-wrap{overflow:visible;border:0;background:transparent}
    #viewLineups .lx-mx{display:grid;gap:10px;min-width:0}
    #viewLineups .lx-mx-row.lx-mx-head{display:none}
    #viewLineups .lx-mx-row{display:block;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
    #viewLineups .lx-mx-row:not(.lx-mx-head):hover{background:var(--panel)}
    #viewLineups .lx-mx-row.is-editing{border-color:var(--gold-line);border-bottom-left-radius:0;border-bottom-right-radius:0}
    #viewLineups .lx-post,#viewLineups button.lx-post{position:static;width:100%;padding:12px 12px 10px;border-right:0}
    #viewLineups .lx-post-pen{opacity:1}
    #viewLineups .lx-cells{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 12px}
    #viewLineups .lx-c,#viewLineups .lx-c.is-me{padding:0;background:none}
    #viewLineups .lx-cell{flex-direction:row;gap:7px;min-height:32px;padding:0 10px;border:1px solid var(--line);font-size:13px}
    #viewLineups .lx-cell.is-on{border-color:transparent}
    #viewLineups .lx-cell-name{display:inline;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink-2)}
    #viewLineups .lx-cell.is-on .lx-cell-name{color:#17130b;font-weight:600}
    #viewLineups .lx-cell.s-absent:not(.is-on) .lx-cell-name,#viewLineups .lx-cell.s-na:not(.is-on) .lx-cell-name{color:var(--muted)}
    #viewLineups .lx-cell small{display:none}
    #viewLineups .lx-cell-ok{position:static;order:-1}
    #viewLineups .lx-mx-as{grid-template-columns:auto 1fr;justify-content:start;align-items:center;gap:4px 10px;padding:10px 12px;border-left:0;border-top:1px solid var(--line-2)}
    #viewLineups .lx-as-k{display:block;font:700 10px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    #viewLineups .lx-mx-as>.lx-st{grid-column:2}
    #viewLineups .lx-as-hint{grid-column:1/-1}
    /* en pile, les joueurs qui ont joué le char passent devant, le désigné en premier */
    #viewLineups .lx-c:has(.s-played){order:-1}
    #viewLineups .lx-c:has(.is-on){order:-2}
    #viewLineups .lx-pe{border:1px solid var(--gold-line);border-top:0;border-radius:0 0 12px 12px;padding:14px 12px}
    #viewLineups .lx-pe-host{margin-top:-10px}
    #viewLineups .lx-tp-list{grid-template-columns:1fr}
  }
  /* ── Fenêtre de confirmation (dialog natif, aux couleurs du site) ── */
  .lx-dlg{width:min(440px,calc(100vw - 32px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible;
    font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
  .lx-dlg::backdrop{background:rgba(5,5,4,.72);animation:lxDlgFade .18s ease-out}
  .lx-dlg-box{margin:0;padding:22px 22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 30px 70px -24px rgba(0,0,0,.95);animation:lxDlgIn .2s cubic-bezier(.2,.8,.2,1)}
  .lx-dlg.is-closing .lx-dlg-box{animation:lxDlgOut .15s ease-in forwards}
  .lx-dlg.is-closing::backdrop{animation:lxDlgFade .15s ease-in reverse forwards}
  @keyframes lxDlgFade{from{opacity:0}to{opacity:1}}
  @keyframes lxDlgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes lxDlgOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
  .lx-dlg-head{display:flex;align-items:center;gap:12px}
  .lx-dlg-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--gold-soft);color:var(--gold)}
  .lx-dlg-ic .ic{width:19px;height:19px}
  .lx-dlg.is-danger .lx-dlg-ic{background:rgba(232,98,107,.12);color:var(--bad)}
  .lx-dlg h3{margin:0;font:700 19px/1.25 var(--fx);letter-spacing:.2px;color:var(--ink);text-wrap:balance}
  .lx-dlg-text{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  .lx-dlg-text b{color:var(--ink);font-weight:600}
  .lx-dlg-lab{display:block;margin:18px 0 7px;font:700 10.5px var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .lx-dlg-hint{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .lx-weekpick{display:flex;align-items:center;gap:8px}
  .lx-weekpick-v{flex:1;display:grid;justify-items:center;gap:5px;min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);text-align:center}
  .lx-weekpick-v b{font:700 15px var(--fx);color:var(--ink);font-variant-numeric:tabular-nums}
  .lx-weekpick-v .lx-when{font:700 10px/1 var(--fx);letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--gold-soft);color:var(--gold-2)}
  .lx-weekpick-v .lx-when.next{background:rgba(255,255,255,.06);color:var(--ink-2)}
  .lx-weekpick-v .lx-when.past{background:transparent;color:var(--muted)}
  .lx-dlg .lx-icon .ic{width:16px;height:16px}
  .lx-dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
  .lx-dlg-actions .lx-btn{height:38px;padding:0 16px}
  @media(prefers-reduced-motion:reduce){
    #viewLineups *,#viewLineups *::before,#viewLineups *::after,.lx-dlg,.lx-dlg *,.lx-dlg::backdrop{animation:none !important;transition:none !important}
  }
  .mini{width:100%;border-collapse:collapse}
  .mini th{font-size:11px;color:var(--muted);text-align:right;padding:6px 8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
  .mini th:first-child{text-align:left}
  .mini td{padding:8px;text-align:right;border-top:1px solid var(--grid);font-size:13px;font-variant-numeric:tabular-nums}
  .mini td:first-child{text-align:left;font-weight:600}
  .plan ul{margin:0;padding-left:20px}
  .plan li{margin:9px 0;font-size:14px;line-height:1.6}
  .tagpos{color:var(--good);font-weight:700} .tagneg{color:var(--bad);font-weight:700}
  #pKpis{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
  .plan{border-top:3px solid var(--accent)}
  .sec-h{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;
    margin:28px 2px 15px;display:flex;align-items:center;gap:12px}
  .sec-h::after{content:"";flex:1;height:1px;background:var(--border)}
  .sec-desc{font-size:13px;color:var(--ink-2);margin:-6px 2px 15px;line-height:1.55;max-width:860px}
  .sec-desc b{color:var(--ink)} .sec-desc a{color:var(--series-1)}
  .rat-grouplabel{font-size:12.5px;font-weight:700;color:var(--ink);margin:16px 2px 9px}
  .rat .rmean{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.35}
  .clan-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:14px;
    box-shadow:var(--shadow);position:relative;overflow:hidden}
  .clan-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--clan-color,var(--accent))}
  .clan-hero .em{width:60px;height:60px;border-radius:14px;flex:0 0 auto;
    background:var(--clan-color,var(--accent));display:grid;place-items:center;
    color:#fff;font-weight:800;font-size:19px;text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:var(--shadow-sm)}
  .clan-hero .em-img{background:var(--surface-2);object-fit:contain;padding:6px}
  .res-em{width:30px;height:30px;border-radius:7px;object-fit:contain;background:var(--surface-2);flex:0 0 auto}
  .res-em-ph{display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
  .clan-hero .ci{flex:1 1 260px;min-width:0}
  .clan-hero h2{font-size:22px;margin:0 0 3px;letter-spacing:-.4px}
  .clan-hero .motto{font-style:italic;color:var(--ink-2);margin:0 0 10px;font-size:14px}
  .clan-hero .meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
  .clan-hero .meta b{color:var(--ink);font-weight:650}
  .clan-desc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;
    font-size:14px;line-height:1.6;white-space:pre-line;color:var(--ink-2);box-shadow:var(--shadow-sm)}
  .clan-desc b{color:var(--ink);font-weight:650}
  .rat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:6px}
  .rat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow-sm);transition:.18s}
  .rat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  .rat .rl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
  .rat .rv{font-size:24px;font-weight:750;margin-top:6px;letter-spacing:-.5px;line-height:1}
  .rat .rr{font-size:12px;color:var(--ink-2);margin-top:6px;display:flex;gap:6px;align-items:center}
  .rat .up{color:var(--good);font-weight:700} .rat .down{color:var(--bad);font-weight:700}
  .searchbar{display:flex;gap:10px;margin-bottom:6px}
  .searchbar input{flex:1}
  .searchbar .btn{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
  /* ---- Vue Recrutement (annonce de recrutement du clan) ---- */
  #viewRecruit .rc-form{display:flex;flex-direction:column;gap:14px;margin-top:2px}
  #viewRecruit label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.2px}
  #viewRecruit input[type=text],#viewRecruit input[type=number],#viewRecruit textarea{font:inherit;font-size:13.5px;font-weight:400;color:var(--ink);
    background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;width:100%}
  #viewRecruit input:focus,#viewRecruit textarea:focus{outline:none;border-color:var(--accent);background:var(--card)}
  #viewRecruit textarea{resize:vertical;min-height:100px;line-height:1.55}
  #viewRecruit .rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  #viewRecruit .rc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:620px){#viewRecruit .rc-grid,#viewRecruit .rc-grid3{grid-template-columns:1fr}}
  #viewRecruit .rc-chips{display:flex;gap:6px;flex-wrap:wrap}
  #viewRecruit .rc-chip{cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-2);
    border:1px solid var(--border);border-radius:999px;padding:6px 12px;user-select:none;transition:.12s}
  #viewRecruit .rc-chip:hover{border-color:var(--accent);color:var(--ink)}
  #viewRecruit .rc-chip.on{color:#1a1608;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent}
  #viewRecruit .rc-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px;padding-top:14px;border-top:1px solid var(--border)}
  #viewRecruit .rc-status{flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
  #viewRecruit .rc-status input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
  #viewRecruit .rc-msg{font-size:13px;min-height:18px;font-weight:600}
  #viewRecruit .rc-msg.ok{color:var(--good)} #viewRecruit .rc-msg.err{color:var(--bad)}
  #viewRecruit .rc-notice{background:var(--accent-soft);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink-2);margin-bottom:14px}
  #viewRecruit .rc-disabled{opacity:.55;pointer-events:none}
  #viewRecruit .btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent;color:#1a1608}
  /* ---- Classement des clans (module, thème sombre via tokens) ---- */
  #clanRanking{ --cr-panel:var(--card); --cr-panel-2:var(--surface-2); --cr-line:var(--border);
    --cr-line-gold:color-mix(in srgb,var(--accent) 45%,transparent); --cr-text:var(--ink); --cr-text-2:var(--ink-2);
    --cr-muted:var(--muted); --cr-gold:var(--accent); --cr-gold-2:var(--accent-2); --cr-good:var(--good); --cr-bad:var(--bad);
    --cr-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --cr-title:"Bahnschrift","Segoe UI Semibold",system-ui,sans-serif; }
  .cr-page{box-sizing:border-box;max-width:1220px;margin:0 auto;color:var(--cr-text);font-family:var(--cr-font)}
  .cr-page *,.cr-page *::before,.cr-page *::after{box-sizing:border-box}
  .cr-header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}
  .cr-header h2{margin:5px 0 3px;font:800 26px/1.15 var(--cr-title)}
  .cr-header p{margin:0;color:var(--cr-text-2);font-size:12px}
  .cr-eyebrow{color:var(--cr-gold);font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
  .cr-status{color:var(--cr-text-2);font-size:11px;white-space:nowrap}
  .cr-status::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--cr-good);box-shadow:0 0 8px rgba(76,192,119,.7)}
  .cr-toolbar{display:flex;align-items:end;gap:10px;padding:11px 12px;margin-bottom:14px;border:1px solid var(--cr-line);border-radius:12px;background:var(--cr-panel);flex-wrap:wrap}
  .cr-toolbar label{display:flex;flex-direction:column;gap:5px}
  .cr-toolbar label>span{color:var(--cr-muted);font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
  .cr-toolbar select,.cr-toolbar input{height:36px;border:1px solid var(--cr-line);border-radius:8px;background:var(--cr-panel-2);color:var(--cr-text);padding:0 11px;outline:0;font:inherit;font-size:13px}
  .cr-toolbar select{min-width:220px}
  .cr-toolbar input{width:215px;margin-left:auto}
  .cr-toolbar select:focus,.cr-toolbar input:focus{border-color:var(--cr-line-gold);box-shadow:0 0 0 3px rgba(229,185,92,.08)}
  .cr-quick{display:flex;height:36px;overflow:hidden;border:1px solid var(--cr-line);border-radius:8px}
  .cr-quick button{padding:0 13px;border:0;border-right:1px solid var(--cr-line);background:transparent;color:var(--cr-text-2);cursor:pointer;font:inherit}
  .cr-quick button:last-child{border-right:0}
  .cr-quick button.active{color:var(--cr-gold-2);background:rgba(229,185,92,.12)}
  .cr-my-clan{height:36px;padding:0 14px;border:1px solid var(--cr-line-gold);border-radius:8px;background:rgba(229,185,92,.11);color:var(--cr-gold-2);font-weight:800;cursor:pointer;font:inherit}
  .cr-my-clan:disabled{opacity:.4;cursor:not-allowed}
  .cr-overview{display:grid;grid-template-columns:.9fr 1.55fr;gap:12px;margin-bottom:12px}
  .cr-own,.cr-podium{min-height:190px;border-radius:13px;background:var(--cr-panel)}
  .cr-own{position:relative;overflow:hidden;padding:18px;border:1px solid var(--cr-line-gold);background:linear-gradient(145deg,rgba(229,185,92,.13),rgba(20,23,27,.55) 58%),var(--cr-panel)}
  .cr-card-label{color:var(--cr-gold);font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
  .cr-own-main{display:flex;align-items:center;gap:14px;margin-top:15px}
  .cr-mark{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--cr-line-gold);border-radius:12px;background:rgba(0,0,0,.28);color:var(--cr-gold-2);font:700 15px var(--cr-title)}
  .cr-rank{color:var(--cr-text);font:800 38px/1 var(--cr-title)}
  .cr-clan-name{margin-top:6px;color:var(--cr-text-2);font-size:13px}
  .cr-delta{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:800}
  .cr-delta.up{color:var(--cr-good);background:rgba(76,192,119,.12)}
  .cr-delta.down{color:var(--cr-bad);background:rgba(239,90,104,.12)}
  .cr-own-foot{display:flex;justify-content:space-between;gap:12px;margin-top:17px;padding-top:12px;border-top:1px solid var(--cr-line)}
  .cr-own-foot span{color:var(--cr-muted);font-size:10px}
  .cr-own-foot b{display:block;margin-top:3px;color:var(--cr-text);font:700 15px var(--cr-title)}
  .cr-podium{padding:15px 16px;border:1px solid var(--cr-line);background:linear-gradient(180deg,var(--cr-panel),var(--cr-panel-2))}
  .cr-podium>header{display:flex;justify-content:space-between;margin-bottom:12px}
  .cr-podium>header b{font:700 13px var(--cr-title)}
  .cr-podium>header span{color:var(--cr-muted);font-size:10px}
  .cr-podium-grid{display:grid;grid-template-columns:1fr 1.08fr 1fr;align-items:end;gap:8px}
  .cr-podium-card{min-width:0;padding:13px 8px 11px;border:1px solid var(--cr-line);border-radius:10px;background:var(--cr-panel-2);text-align:center}
  .cr-podium-card.first{padding-top:20px;border-color:var(--cr-line-gold);background:linear-gradient(180deg,rgba(229,185,92,.13),var(--cr-panel-2))}
  .cr-medal{width:25px;height:25px;display:grid;place-items:center;margin:0 auto 7px;border-radius:7px;background:var(--cr-panel-2);border:1px solid var(--cr-line);color:var(--cr-text-2)}
  .cr-podium-card.first .cr-medal{color:#18150e;background:linear-gradient(#f0d17c,#c89538);border-color:transparent}
  .cr-podium-card strong,.cr-podium-card small,.cr-podium-card em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cr-podium-card strong{font-size:13px}
  .cr-podium-card small{margin:3px 0 8px;color:var(--cr-muted);font-size:10px}
  .cr-podium-card em{color:var(--cr-gold-2);font:800 18px var(--cr-title);font-style:normal}
  .cr-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px}
  .cr-table-card,.cr-side-card{border:1px solid var(--cr-line);border-radius:13px;background:var(--cr-panel)}
  .cr-table-card{overflow:hidden}
  .cr-table-card>header{display:flex;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--cr-line)}
  .cr-table-card>header b{font:700 13px var(--cr-title)}
  .cr-table-card>header span{color:var(--cr-muted);font-size:10px}
  .cr-table-scroll{overflow-x:auto}
  .cr-table{width:100%;min-width:760px;border-collapse:collapse;table-layout:fixed}
  .cr-table th,.cr-table td{padding:9px 12px;border-bottom:1px solid var(--cr-line);text-align:left}
  .cr-table th{color:var(--cr-muted);font-size:9px;letter-spacing:.7px;text-transform:uppercase}
  .cr-table td{color:var(--cr-text-2);font-size:12px}
  .cr-table th:nth-child(1),.cr-table td:nth-child(1){width:70px;text-align:center}
  .cr-table th:nth-child(3),.cr-table td:nth-child(3){width:128px}
  .cr-table th:nth-child(4),.cr-table td:nth-child(4){width:112px}
  .cr-table th:nth-child(5),.cr-table td:nth-child(5){width:92px;text-align:right}
  .cr-table th:nth-child(6),.cr-table td:nth-child(6){width:96px;text-align:right}
  .cr-table th button{display:inline-flex;align-items:center;gap:5px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;cursor:pointer}
  .cr-table th:nth-child(5) button,.cr-table th:nth-child(6) button{justify-content:end}
  .cr-table th button.active,.cr-table th button:hover{color:var(--cr-gold-2)}
  .cr-table th button i{color:var(--cr-gold-2);font-style:normal}
  .cr-table tr.mine td{background:linear-gradient(90deg,rgba(229,185,92,.14),rgba(229,185,92,.035));border-color:var(--cr-line-gold)}
  .cr-clan{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px}
  .cr-emblem{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--cr-line);border-radius:8px;color:var(--cr-gold);background:var(--cr-panel-2);font-size:9px;font-weight:800}
  .cr-emblem img{display:block;width:26px;height:26px;object-fit:contain}
  .cr-clan b,.cr-clan small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cr-clan b{color:var(--cr-text)}
  .cr-clan small{margin-top:2px;color:var(--cr-muted);font-size:10px}
  .cr-country{display:flex;align-items:center;gap:6px;min-width:0;font-size:10px}
  .cr-country span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cr-country.unknown{color:var(--cr-muted)}
  .cr-score{color:var(--cr-text) !important;font:800 14px var(--cr-title)}
  .cr-positive{color:var(--cr-good) !important}
  .cr-negative{color:var(--cr-bad) !important}
  @keyframes crFocus{0%,100%{box-shadow:inset 0 0 0 1px rgba(229,185,92,.45)}45%{box-shadow:inset 0 0 0 2px #f0c75e,0 0 18px rgba(229,185,92,.28)}}
  .cr-table tr.focus td{background:rgba(229,185,92,.22) !important;animation:crFocus 1.1s ease-in-out 2}
  .cr-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:14px}
  .cr-pagination button{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--cr-line);border-radius:8px;color:var(--cr-text-2);background:var(--cr-panel-2);cursor:pointer;font:inherit}
  .cr-pagination button.active{color:var(--cr-gold-2);border-color:var(--cr-line-gold);background:rgba(229,185,92,.11)}
  .cr-pagination button:disabled{opacity:.4;cursor:default}
  .cr-pagination span{color:var(--cr-muted);font-size:12px}
  .cr-side{display:flex;flex-direction:column;gap:12px}
  .cr-side-card{padding:14px}
  .cr-side-card h3{margin:0 0 12px;font:700 12px var(--cr-title)}
  .cr-side-card p{margin:0;color:var(--cr-text-2);font-size:11px;line-height:1.55}
  .cr-best{margin:16px 0 6px;color:var(--cr-text);font:800 38px/1 var(--cr-title)}
  .cr-tier{display:grid;grid-template-columns:55px 1fr 42px;align-items:center;gap:8px;margin:10px 0;color:var(--cr-text-2);font-size:11px}
  .cr-track{height:5px;overflow:hidden;border-radius:10px;background:color-mix(in srgb,var(--cr-text) 10%,transparent)}
  .cr-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#bf8d36,var(--cr-gold-2))}
  .cr-empty{padding:32px;color:var(--cr-muted);text-align:center}
  @media (max-width:920px){.cr-toolbar{flex-wrap:wrap}.cr-toolbar input{width:100%;margin-left:0}.cr-overview,.cr-layout{grid-template-columns:1fr}}
  @media (max-width:600px){.cr-header{align-items:start;flex-direction:column}.cr-toolbar select{min-width:0;width:100%}.cr-quick{width:100%}.cr-quick button{flex:1}.cr-own-foot{flex-wrap:wrap}}
  .res-row{display:flex;align-items:center;gap:14px;padding:12px 10px;border-top:1px solid var(--grid);cursor:pointer;transition:.12s;border-radius:8px}
  .res-row:hover{background:var(--accent-soft)}
  .res-row .rt{font-weight:750;min-width:76px;color:var(--accent)}
  .res-row .rn{color:var(--ink);font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  .res-row .rm{color:var(--muted);font-size:12px}
  .banner{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:18px;
    border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent);font-size:13px;color:var(--ink)}
  footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;text-align:center}
  /* ---- Chargement (skeleton) ---- */
  .skel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative}
  .skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,var(--surface-2),transparent);transform:translateX(-100%);animation:sh 1.3s infinite}
  @keyframes sh{100%{transform:translateX(100%)}}
  .skel-hero{height:98px;margin-bottom:16px}
  .skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:20px}
  .skel-card{height:92px}
  .skel-wide{height:300px}
  @media(max-width:900px){
    .kpis{grid-template-columns:repeat(2,1fr)}
    .grid2{grid-template-columns:1fr}
    .appbar-inner{flex-wrap:wrap;gap:10px}
    .tabs{order:3;width:100%;justify-content:center}
  }
  @media(max-width:560px){
    .kpis{grid-template-columns:1fr 1fr}
    .who{display:none}
    .wrap{padding:16px 14px 60px}
    .clan-hero h2{font-size:19px}
  }

  /* --- Onglet Batailles (confrontations) --- */
  /* ── Verdict : une phrase et un chiffre, avant les mesures ──────
     Même grammaire que la Vue clan : on dit ce que les chiffres veulent
     dire, puis on montre les chiffres, plus petits. */
  .bl-verdict{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:22px 24px;margin:6px 0 12px;position:relative;overflow:hidden}
  .bl-verdict::after{content:"";position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(229,185,92,.09) 45%,transparent);
    transform:translateX(-140%)}
  .rev .bl-verdict::after{animation:blBalaye 1.4s cubic-bezier(.3,0,.2,1) .2s both}
  @keyframes blBalaye{to{transform:translateX(360%)}}
  .bl-vt{font-size:clamp(22px,2.7vw,31px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;
    text-wrap:balance}
  .bl-vp{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:64ch}
  .bl-vp b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
  .bl-vp .who{color:var(--accent-2);font-weight:700}
  .bl-vn{text-align:right;line-height:1}
  .bl-vn b{display:block;font-size:clamp(34px,4.4vw,50px);font-weight:800;letter-spacing:-.035em;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(160deg,var(--ink) 30%,var(--accent-2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .bl-vn i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);margin-top:6px}

  /* les adversaires : le palmarès que seul cet onglet peut donner */
  .bl-advs{grid-column:1/-1;border-top:1px solid var(--border);padding-top:15px;margin-top:3px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px 22px}
  .bl-advt{grid-column:1/-1;font-size:11px;color:var(--muted);margin-bottom:1px}
  .bl-adv{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;
    font-size:12.5px}
  .bl-adv .t{font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .bl-adv .b{height:6px;border-radius:3px;background:var(--bad);overflow:hidden;opacity:.9}
  .bl-adv .b i{display:block;height:100%;background:var(--good);border-radius:3px;
    transform-origin:left center}
  .bl-adv .c{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;font-size:12px}
  .bl-adv .c .s{color:var(--muted);font-weight:400}
  .rev .bl-adv .b i,.rev .bl-dom i{animation:blPousse .7s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.25s + var(--i,0) * .07s)}
  @keyframes blPousse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (max-width:760px){
    .bl-verdict{grid-template-columns:1fr;gap:16px;padding:18px}
    .bl-vn{text-align:left}
  }

  /* les mesures passent APRÈS le verdict, et plus petites */
  .bl-mes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
  /* Le conteneur du resume etait lui-meme une grille : le verdict et les
     mesures devenaient deux colonnes cote a cote, et les tuiles s etiraient
     a vide pour rattraper la hauteur du verdict. Il redevient un bloc :
     verdict pleine largeur, mesures en dessous. */
  .bl-sum{display:block;margin:6px 0 16px}
  .bl-sc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
  .bl-sc .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
  .bl-sc .v{font-size:23px;font-weight:800;margin-top:4px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
  .bl-sc .u{font-size:13px;color:var(--muted);font-weight:400}
  .bl-list{display:flex;flex-direction:column;gap:10px}
  /* Les cartes arrivent l'une après l'autre. Le décalage n'est appliqué
     qu'aux quatorze premières : au-delà, on attendrait pour rien. */
  .rev #blList .bl-row{animation:blEntre .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes blEntre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .rev #blList .bl-row:nth-child(1){animation-delay:0ms}
  .rev #blList .bl-row:nth-child(2){animation-delay:45ms}
  .rev #blList .bl-row:nth-child(3){animation-delay:90ms}
  .rev #blList .bl-row:nth-child(4){animation-delay:135ms}
  .rev #blList .bl-row:nth-child(5){animation-delay:180ms}
  .rev #blList .bl-row:nth-child(6){animation-delay:225ms}
  .rev #blList .bl-row:nth-child(7){animation-delay:270ms}
  .rev #blList .bl-row:nth-child(8){animation-delay:315ms}
  .rev #blList .bl-row:nth-child(9){animation-delay:360ms}
  .rev #blList .bl-row:nth-child(10){animation-delay:405ms}
  .rev #blList .bl-row:nth-child(11){animation-delay:450ms}
  .rev #blList .bl-row:nth-child(12){animation-delay:495ms}
  .rev #blList .bl-row:nth-child(13){animation-delay:540ms}
  .rev #blList .bl-row:nth-child(14){animation-delay:585ms}
  .bl-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px}
  .bl-pg{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border);background:var(--card);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;transition:.15s}
  .bl-pg:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
  .bl-pg.on{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
  .bl-pg:disabled{opacity:.4;cursor:default}
  .bl-pg-dot{color:var(--muted);padding:0 3px}
  .bl-pg-info{margin-left:10px;font-size:12px;color:var(--muted)}
  .bl-row{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
  @media (prefers-reduced-motion:reduce){
    .rev #blList .bl-row,.rev .bl-adv .b i,.rev .bl-dom i,.rev .bl-verdict::after,
    .bl-row.open .bl-din > *{animation:none !important}
    .bl-detail{transition:none}
  }
  .bl-row:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--axis)}
  .bl-head{position:relative;display:flex;align-items:center;gap:18px;cursor:pointer;min-height:92px;padding:12px 18px;isolation:isolate}
  /* image de la carte = FOND de la ligne, fondue vers la carte */
  .bl-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
  .bl-bg img{position:absolute;left:0;top:0;width:52%;height:100%;object-fit:cover}
  .bl-bg .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,10,.38) 0%,rgba(14,13,10,.72) 22%,var(--card) 50%)}
  /* liseré résultat (gauche) */
  .bl-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2}
  .bl-win::before{background:var(--good)} .bl-loss::before{background:var(--bad)} .bl-draw::before{background:var(--muted)}
  /* zone 1 : identité carte (posée sur l'image) */
  .bl-mapinfo{width:148px;flex:0 0 148px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .bl-mapinfo .nm{font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.15}
  .bl-mapinfo .md{font-size:10.5px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
  /* zone 2 : la confrontation, groupe compact centré */
  .bl-match{flex:1;display:flex;align-items:center;justify-content:center;gap:20px;min-width:0}
  .bl-team{display:flex;align-items:center;gap:11px;width:158px;min-width:0}
  .bl-team.left{justify-content:flex-end;text-align:right}
  .bl-team.right{justify-content:flex-start}
  .bl-emblem{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
  .bl-emblem.bl-em-ph{display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-2);border:1px solid var(--border)}
  .bl-emblem.ours{box-shadow:0 0 0 2px var(--accent)}
  .bl-team .tag{font-size:15px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bl-team.left .tag{color:var(--accent)}
  .bl-scorebox{text-align:center;flex:0 0 auto;min-width:96px}
  /* La forme du score, sans avoir à le lire : plein = écrasement,
     coupé au milieu = partie serrée. */
  .bl-dom{display:block;height:3px;margin:7px auto 0;width:76px;border-radius:2px;
    background:var(--bad);overflow:hidden;opacity:.85}
  .bl-dom i{display:block;height:100%;background:var(--good);border-radius:2px;
    transform-origin:left center}
  .bl-draw .bl-dom i{background:var(--muted)}
  .bl-scorebox .sc{font-size:27px;font-weight:800;letter-spacing:2px;line-height:1;font-variant-numeric:tabular-nums}
  .bl-scorebox .rz{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-top:5px;padding:2px 8px;border-radius:20px;color:var(--muted);background:var(--surface-2)}
  .bl-win .sc .a{color:var(--good)} .bl-loss .sc .a{color:var(--bad)}
  .bl-win .rz{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
  .bl-loss .rz{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
  .bl-sep{color:var(--muted);font-weight:400}
  /* zone 3 : SR + meta */
  .bl-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
  .bl-sr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 14px;border-radius:10px;border:1.5px solid;min-width:66px;background:var(--surface-1)}
  .bl-sr .lbl{font-size:9px;font-weight:800;letter-spacing:.9px;opacity:.85}
  .bl-sr .val{font-size:17px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
  .bl-metar{text-align:right;font-size:11px;color:var(--muted);line-height:1.6;min-width:96px}
  .bl-chev{color:var(--muted);flex:0 0 auto;transition:transform .15s;font-size:13px}
  .bl-row.open .bl-chev{transform:rotate(180deg)}
  /* détail */
  /* display:none ne s'anime pas. Une grille à 0fr → 1fr, si : la hauteur
     se calcule toute seule, sans la mesurer en JavaScript. */
  .bl-detail{display:grid;grid-template-rows:0fr;background:var(--surface-1);
    transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1)}
  .bl-row.open .bl-detail{grid-template-rows:1fr}
  /* ⚠️ Ni padding ni bordure ICI. Avec grid-template-rows:0fr la boite de
     CONTENU fait 0, mais le padding, lui, garde sa hauteur : overflow:hidden
     clippe alors a la boite de padding et laissait depasser le haut des
     onglets sous les cartes fermees. On deporte l espacement sur les enfants. */
  .bl-din{overflow:hidden;min-height:0}
  .bl-din > .bl-tabs{padding:9px 16px 0}
  .bl-din > .bl-pane{padding:0 16px 14px}
  .bl-row.open .bl-detail{border-top:1px solid var(--border)}
  .bl-din .bl-pane{overflow-x:auto}
  /* le contenu monte légèrement en apparaissant, au lieu de surgir */
  .bl-row.open .bl-din > *{animation:blOuvre .4s cubic-bezier(.16,1,.3,1) both}
  .bl-row.open .bl-din > *:nth-child(2){animation-delay:.06s}
  @keyframes blOuvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .bl-tl{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin:12px 0 5px}
  .bl-tl:first-child{margin-top:2px} .bl-tl.ours{color:var(--accent)} .bl-tl.foe{color:var(--bad)}
  .bl-em{width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
  .bl-em-ph{display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-2)}
  .bl-tl .bl-em{width:20px;height:20px;border-radius:5px}
  .bl-tbl{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
  .bl-tbl th{font-weight:500;color:var(--muted);font-size:10px;text-align:right;padding:3px 9px}
  .bl-tbl th:first-child,.bl-tbl th:nth-child(2){text-align:left}
  .bl-tbl td{padding:4px 9px;text-align:right} .bl-tbl td.c,.bl-tbl th.c{text-align:center}
  .bl-tbl td:first-child,.bl-tbl td:nth-child(2){text-align:left}
  .bl-tbl tbody tr{border-top:1px solid var(--border)}
  .bl-tbl tr.me{background:var(--accent-soft)} .bl-tbl tr.me td:nth-child(2){color:var(--accent);font-weight:600}
  .bl-dead{color:var(--bad)} .bl-alive{color:var(--good)}
  .ce-badge{font-weight:700;letter-spacing:-.2px}
  /* lecteur de replay */
  .bl-replay{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
  /* onglets dans la carte de bataille dépliée : Résultat / Replay */
  .bl-tabs{display:flex;gap:6px;margin:2px 0 14px}
  .bl-tab{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
    color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
  .bl-tab:hover{color:var(--ink);border-color:var(--accent)}
  .bl-tab.on{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent)}
  .bl-tab .bl-tab-ic{font-size:11px}
  .bl-pane[hidden]{display:none}
  /* panneaux d'équipe : même langage que les cartes du site */
  .bl-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:900px){.bl-teams{grid-template-columns:1fr}}
  .bl-team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
  .bl-team-card>.hd{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);
    font-size:12.5px;font-weight:800;letter-spacing:-.1px}
  .bl-team-card.ours>.hd{color:var(--accent)} .bl-team-card.foe>.hd{color:var(--bad)}
  .bl-team-card>.hd .sub{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted)}
  /* La classe .tw signifie « tableau large » : elle doit defiler chez elle
   plutot que pousser la page de cote. Elle n existait que dans le contexte
   des cartes d equipe ; ailleurs elle ne faisait rien, et le tableau de
   l entonnoir debordait de 69 px sur telephone. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-team-card .tw{overflow-x:auto}
  .rp-launch{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:9px 15px;color:var(--ink);font-size:13px;font-weight:700}
  .rp-launch:hover{border-color:var(--accent);color:var(--accent)}
  .rp-launch .rp-tri{color:var(--accent);font-size:11px}
  .rp-launch .rp-demo{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:1px 7px}
  .rp-wrap{max-width:100%;margin:2px auto 0}
  .rp-main{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;align-items:start}
  @media(max-width:860px){.rp-main{grid-template-columns:1fr}}
  /* pas de panneau latéral (replay sans événements) -> carte centrée */
  .rp-main.no-side{grid-template-columns:minmax(0,1fr)}
  .rp-main.no-side>div:first-child{max-width:820px;width:100%;margin:0 auto}
  .rp-stage:hover{cursor:crosshair}
  .rp-tip{position:absolute;pointer-events:none;z-index:3;background:color-mix(in srgb,var(--plane) 92%,transparent);border:1px solid var(--border);
    border-radius:7px;padding:5px 8px;font-size:11.5px;color:var(--ink);white-space:nowrap;transform:translate(-50%,-140%);
    box-shadow:0 4px 14px rgba(0,0,0,.5);opacity:0;transition:opacity .12s}
  .rp-tip.on{opacity:1}
  .rp-tip b{color:var(--accent-2)}
  .rp-speed{appearance:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);
    background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:0 9px;height:34px}
  .rp-speed:hover{border-color:var(--accent);color:var(--accent)}
  .rp-step{appearance:none;cursor:pointer;width:30px;height:34px;flex:0 0 auto;border-radius:8px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--ink-2);font-size:13px;display:grid;place-items:center}
  .rp-step:hover{border-color:var(--accent);color:var(--accent)}
  .rp-side{display:flex;flex-direction:column;gap:10px;min-width:0}
  .rp-card{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:10px}
  .rp-card h4{margin:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
  /* Journal : les événements de la bataille défilent au fil de la lecture */
  .rp-jcard{display:flex;flex-direction:column;min-height:0}
  .rp-jcard h4{display:flex;align-items:center;justify-content:space-between}
  .rp-jn{font-weight:700;color:var(--ink-2);letter-spacing:0;text-transform:none;font-size:10.5px}
  .rp-log{display:flex;flex-direction:column;gap:1px;overflow-y:auto;scroll-behavior:smooth;
    height:clamp(320px,52vh,620px);font-size:11.5px;padding-right:2px}
  .rp-log>div{display:none;gap:7px;align-items:baseline;padding:4px 6px;border-radius:6px}
  .rp-log>div.on{display:flex}
  .rp-log>div:nth-child(odd).on{background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .rp-log>div.last{background:var(--accent-soft)}
  .rp-log .jt{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;font-size:10.5px}
  .rp-log .ji{flex:0 0 auto;width:11px;text-align:center}
  .rp-log .jm{min-width:0;color:var(--ink-2);line-height:1.35}
  .rp-log .jm b{font-weight:700}
  .rp-log .A{color:var(--good)} .rp-log .E{color:var(--bad)}
  .rp-log .jv{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);font-style:normal}
  .rp-log .k .ji{color:var(--bad)}
  .rp-log .d .ji{color:var(--muted)}
  .rp-log .empty{display:flex;color:var(--muted);padding:10px 4px}
  .rp-stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--plane)}
  .rp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .rp-stage canvas{position:absolute;inset:0;width:100%;height:100%}
  .rp-ctrl{display:flex;align-items:center;gap:11px;margin-top:9px}
  .rp-play{appearance:none;cursor:pointer;width:34px;height:34px;flex:0 0 auto;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);font-size:12px;display:grid;place-items:center}
  .rp-play:hover{border-color:var(--accent);color:var(--accent)}
  .rp-scrub{flex:1;accent-color:var(--accent)}
  .rp-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:88px;text-align:right}
  .rp-legend{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--ink-2);margin-top:9px}
  .rp-legend i{font-style:normal;font-size:12px}
  .rp-note{text-align:center;font-size:11px;color:var(--muted);margin-top:5px}
  /* Logo de chargement anime */
  .cp-load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px 0}
  .cp-load-mark{position:relative;width:104px;height:104px}
  .cp-emb{position:absolute;inset:15px;animation:cpPulse 1.7s ease-in-out infinite;transform-origin:center}
  .cp-spin{position:absolute;inset:0;width:104px;height:104px;animation:cpSpin 1s linear infinite;transform-origin:center}
  .cp-spin circle{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:58 250}
  @keyframes cpSpin{to{transform:rotate(360deg)}}
  @keyframes cpPulse{0%,100%{opacity:.7;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
  .cp-load-txt{font-size:13px;color:var(--muted);letter-spacing:.6px}
  @media(prefers-reduced-motion:reduce){.cp-emb,.cp-spin{animation:none}}
  /* Ma progression : bloc SR + objectifs */
  .sr-hero{display:flex;gap:22px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
  .sr-main{display:flex;align-items:center;gap:16px;flex:0 0 auto}
  .sr-big{font-size:46px;font-weight:800;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
  .sr-name{font-size:15px;font-weight:700}
  .sr-trend{font-size:12px;margin-top:6px;font-weight:600}
  .sr-streak{font-size:12px;margin-top:3px;color:var(--ink-2)}
  /* (.sr-break / .srb* retirés avec l'ancienne décomposition en pourcentages :
     le radar et la réglette portent la même information, en plus lisible.) */
  .plan-goals{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
  .plan-goals .pg-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:5px}
  /* La priorité porte le poids visuel : une seule chose à travailler, pas huit. */
  .pl-prio{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--dv-minus);
           border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 14px;margin-bottom:12px}
  .pl-prio.pl-ok{border-left-color:var(--dv-plus)}
  .pl-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-minus);font-weight:800}
  .pl-ok .pl-tag{color:var(--dv-plus)}
  .pl-t{font-size:16px;font-weight:800;margin-top:3px;display:flex;align-items:baseline;gap:8px}
  .pl-x{font-size:13px;font-weight:700;color:var(--dv-minus);font-variant-numeric:tabular-nums}
  .pl-c{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
  .pl-q{margin:9px 0 0 !important;padding-left:18px}
  .pl-q li{font-size:13px;line-height:1.55;color:var(--ink-2);margin:6px 0}
  .pl-next{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:2px}
  /* ================= Dashboard "Mon clan" — salle de commandement ================= */
  .dashx{
    --plane:#0b0c0c;--surface-1:#16171a;--surface-2:#1e1f22;--card:#16171a;
    /* --muted valait #66665f : 3,1:1 sur le fond des cartes, sous le seuil
       AA de 4,5:1 pour du petit texte. Toutes les étiquettes secondaires du
       tableau de bord étaient donc à la limite du lisible. #8b8981 garde le
       même gris chaud et passe à 5,1:1. Mesuré, pas estimé. */
    --ink:#ecebe8;--ink-2:#9b9b96;--muted:#8b8981;
    --border:rgba(255,255,255,.08);--accent:#e5b95c;--accent-2:#f4d78c;--accent-soft:rgba(229,185,92,.12);
    --good:#4cc077;--good2:#7dd694;--bad:#e8626b;
    --panel:#16171a;--panel-2:#101113;--raised:#1e1f22;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.045);
    --gold:#e5b95c;--gold-2:#f4d78c;--gold-soft:rgba(229,185,92,.12);--gold-line:rgba(229,185,92,.32);
    --or:#e0904a;--or-soft:rgba(224,144,74,.14);
    --gr:#e5b95c;--gr2:#f4d78c;--gr-soft:rgba(229,185,92,.12);--gr-line:rgba(229,185,92,.32);--red:#e8626b;--red-soft:rgba(232,98,107,.14);
    --teal:#4bb6c6;--steel:#7f8ea0;--fx:"Bahnschrift","DIN Condensed","Segoe UI Semibold",system-ui,sans-serif;
  }
  #viewClan{color:var(--ink)}
  @keyframes dashIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .dash-anim{animation:dashIn .5s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--di,0)*60ms)}
  @keyframes starPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.28) rotate(13deg)}}
  /* Hero (noir/or) */
  .hero2{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;margin-bottom:12px;
    padding:20px 24px;border-radius:15px;border:1px solid var(--gold-line);color:#ecebe8;
    background:linear-gradient(103deg,#221f18 0%,#141310 54%,#0d0d0b 100%)}
  .hero2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-size:cover;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='280'%3E%3Cg fill='none' stroke='%23e5b95c' stroke-opacity='0.10' stroke-width='1.3'%3E%3Cpath d='M0 40 Q190 6 380 60 T760 40'/%3E%3Cpath d='M0 96 Q190 60 380 116 T760 96'/%3E%3Cpath d='M0 152 Q190 116 380 172 T760 152'/%3E%3Cpath d='M0 208 Q190 172 380 228 T760 208'/%3E%3Cpath d='M0 264 Q190 228 380 284 T760 264'/%3E%3C/g%3E%3C/svg%3E")}
  .hero2::after{content:"";position:absolute;left:-40px;top:-60px;width:300px;height:300px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(229,185,92,.16),transparent 62%)}
  .h2-em{position:relative;z-index:1;width:100px;height:100px;flex:0 0 auto;object-fit:contain;
    border-radius:15px;background:#0d0d0b;border:1px solid var(--gold-line);padding:9px;box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
  .h2-em-ph{display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--gold)}
  .h2-ci{position:relative;z-index:1;flex:1;min-width:0}
  .h2-tag{font-family:var(--fx);font-size:30px;font-weight:700;letter-spacing:1.4px;color:#fff;line-height:1}
  .h2-name{font-family:var(--fx);font-size:17px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-2);margin-left:10px}
  .h2-motto{margin-top:6px;font-style:italic;color:#b9b3a4;font-size:13px}
  .h2-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-2);align-items:center}
  .h2-meta b{color:#ecebe8;font-weight:600}
  .h2-langs{display:inline-flex;align-items:center;gap:3px}
  .h2-flag{display:inline-flex;align-items:center}
  .flagsvg{width:21px;height:14px;border-radius:2px;display:inline-block;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
  .he-langpick{display:inline-flex;align-items:center;gap:7px}
  .he-langpick .he-flag{display:inline-flex;align-items:center;min-width:21px}
  .he-langpick .flagsvg{width:24px;height:16px}
  .h2-nolang{color:#69675f;font-style:italic}
  .h2-edit{appearance:none;border:1px solid var(--gold-line);background:transparent;color:var(--gold);border-radius:6px;
    width:22px;height:22px;line-height:1;cursor:pointer;font-size:11px;margin-left:5px;padding:0;transition:.15s}
  .h2-edit:hover{background:var(--gold-soft);transform:scale(1.1)}
  .h2-op{position:relative;z-index:1;flex:0 0 auto;width:280px;max-width:42%;text-align:left;border:1px solid var(--gold-line);
    border-radius:12px;padding:14px 16px;background:linear-gradient(180deg,rgba(229,185,92,.10),rgba(229,185,92,.02))}
  .h2-star{position:absolute;top:-12px;right:-8px;font-size:22px;color:var(--gold-2);text-shadow:0 0 9px rgba(244,215,140,.8);animation:starPulse 2s ease-in-out infinite}
  .h2-op-l{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);font-weight:700}
  .h2-op-in{background:var(--gold-soft);color:var(--gold-2);border-radius:12px;padding:1px 8px;font-size:10px;margin-left:5px;letter-spacing:0;text-transform:none}
  .h2-op-t{font-family:var(--fx);font-size:17px;letter-spacing:.5px;color:var(--gold-2);margin:6px 0 2px}
  .h2-op-d{font-size:11.5px;color:#b3aea0}
  .h2-op-edit{position:absolute;bottom:9px;right:9px}
  .h2-op-add{cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--gold);background:transparent;border-style:dashed;transition:.15s}
  .h2-op-add:hover{background:var(--gold-soft)}
  .h2-editor{margin:0 0 12px;background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:14px 16px;animation:dashIn .25s ease both}
  .h2-editor b{font-size:13px}
  .he-hint{font-size:11px;color:var(--muted);margin-left:8px}
  .he-row{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0}
  .he-row select,.he-row input{font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--ink)}
  .he-row input[type=text]{flex:1;min-width:180px}
  .he-act{display:flex;gap:8px;justify-content:flex-end}
  #dashSub .filters{margin-top:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 15px}

  /* ============ Dashboard v2 (composants, scopés #viewClan) ============ */
  #viewClan .d2card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:13px}
  #viewClan .d2top3{display:grid;grid-template-columns:1.15fr 1.25fr 1fr;gap:12px;margin-top:12px}
  #viewClan .d2mini4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
  #viewClan .d2off5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  #viewClan .d2two{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:16px}
  #viewClan .d2sect{display:flex;align-items:center;gap:9px;margin:20px 2px 12px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  #viewClan .d2sect .si{width:22px;height:22px;border-radius:6px;background:var(--gold-soft);border:1px solid var(--gold-line);display:grid;place-items:center;color:var(--gold)}
  #viewClan .d2sect .si svg{width:13px;height:13px}
  #viewClan .tti{width:14px;height:14px;color:var(--gold);vertical-align:-2px;margin-right:6px}
  #viewClan .kpi-h{display:flex;align-items:center;gap:8px;padding:12px 15px 0;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  #viewClan .kpi-h .hi{color:var(--gold)} #viewClan .kpi-h svg{width:14px;height:14px;color:var(--gold)}
  #viewClan .health{padding:6px 15px 15px;display:flex;gap:16px;align-items:flex-end}
  #viewClan .big{font-family:var(--fx);font-size:42px;line-height:1;color:var(--gold-2)}
  #viewClan .big-s{font-size:11.5px;color:var(--ink-2);margin-top:5px}
  #viewClan .streak{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 9px}
  #viewClan .streak.bad{color:var(--bad);background:var(--red-soft)} #viewClan .streak.good{color:var(--good2);background:rgba(76,192,119,.14)}
  #viewClan .hbars{flex:1;display:flex;align-items:flex-end;gap:5px;height:64px;padding-bottom:2px}
  #viewClan .hcol{flex:1;display:flex;flex-direction:column;gap:3px;align-items:center}
  #viewClan .hbar{width:100%;border-radius:3px 3px 2px 2px;min-height:8px}
  #viewClan .hbar.w{background:linear-gradient(180deg,var(--good2),var(--good))} #viewClan .hbar.l{background:linear-gradient(180deg,#e8626b,#b5424a)}
  #viewClan .hbar-x{font-size:9px;color:var(--muted)}
  #viewClan .lb{padding:6px 15px 15px;display:flex;gap:13px}
  #viewClan .lb-tx{flex:1;min-width:0}
  #viewClan .lb-res{font-family:var(--fx);font-size:19px}
  #viewClan .lb-sub{font-size:11.5px;color:var(--ink-2);margin-top:2px}
  #viewClan #dashLast{position:relative;overflow:hidden}
  #viewClan .lb-inner{position:relative;z-index:1}
  #viewClan .lb-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  /* ── Les trois dernières batailles ──────────────────────────────
     Le retrait du MVP laissait un creux : on le comble avec la même
     donnée, déjà chargée. Un instantané devient une petite série. */
  #viewClan .lb-liste{display:flex;flex-direction:column;padding:2px 10px 10px}
  #viewClan .lb-l{display:grid;grid-template-columns:3px auto 1fr auto auto;
    align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;background:none;
    text-align:left;cursor:pointer;border-radius:8px;color:inherit;font:inherit;
    transition:background .15s}
  #viewClan .lb-l:hover{background:rgba(255,255,255,.055)}
  #viewClan .lb-l+.lb-l{box-shadow:inset 0 1px 0 var(--line-2,rgba(255,255,255,.045))}
  /* l'issue se lit dans la FORME (le filet de gauche) autant que dans la couleur */
  #viewClan .lb-p{height:19px;border-radius:2px;background:var(--muted)}
  #viewClan .lb-l.w .lb-p{background:var(--good)}
  #viewClan .lb-l.l .lb-p{background:var(--bad)}
  #viewClan .lb-r{font-weight:700;font-size:13.5px}
  #viewClan .lb-l.w .lb-r{color:var(--good)}
  #viewClan .lb-l.l .lb-r{color:var(--bad)}
  #viewClan .lb-vs{font-size:12.5px;color:var(--ink-2);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  #viewClan .lb-m{font-size:12px;color:var(--muted);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:120px}
  #viewClan .lb-d{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
    white-space:nowrap}
  #viewClan .lb-vide{padding:22px 16px;color:var(--muted);font-size:12.5px}
  @media (max-width:560px){ #viewClan .lb-m{display:none} }

  #viewClan .lb-bg img{width:100%;height:100%;object-fit:cover;opacity:.22;
    -webkit-mask-image:linear-gradient(100deg,transparent 8%,#000 92%);mask-image:linear-gradient(100deg,transparent 8%,#000 92%)}
  #viewClan .lb-mvp{margin:0 15px 14px;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:11px}
  #viewClan .lb-mvp .ig{width:34px;height:34px;border-radius:9px;background:var(--raised);border:1px solid var(--line);display:grid;place-items:center;font-size:17px}
  #viewClan .lb-mvp .tl{font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:700}
  #viewClan .lb-mvp .tv{font-size:13.5px;font-weight:600;margin-top:1px}
  #viewClan .srpill{font-family:var(--fx);font-size:12px;padding:0 7px;border-radius:6px;letter-spacing:.4px;color:#141310}
  #viewClan .wg{padding:6px 15px 15px;display:flex;gap:16px}
  #viewClan .wg-rank{font-family:var(--fx);font-size:34px;line-height:1;color:#fff}
  #viewClan .wg-d{font-size:10.5px;font-weight:700;margin-top:4px}
  #viewClan .wg-elo{font-size:11.5px;color:var(--ink-2);margin-top:6px} #viewClan .wg-elo b{color:var(--ink);font-family:var(--fx);font-size:14px}
  #viewClan .wg-tiers{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
  #viewClan .wg-tier{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink-2)}
  #viewClan .wg-tier b{color:var(--ink);font-family:var(--fx);font-size:13px}
  #viewClan .up{color:var(--good)} #viewClan .dn{color:var(--bad)}
  #viewClan .mini{padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:.16s}
  #viewClan .mini:hover{transform:translateY(-3px);border-color:var(--gold-line)}
  #viewClan .mini .l{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  #viewClan .mini .v{font-family:var(--fx);font-size:24px;color:#fff;margin-top:6px}
  #viewClan .mini.hl{border-color:var(--gold-line);background:linear-gradient(165deg,rgba(229,185,92,.12),rgba(229,185,92,.02))}
  #viewClan .mini.hl .v{color:var(--gold-2)}
  #viewClan .mini .s{font-size:10.5px;color:var(--muted);margin-top:2px}
  #viewClan .off{padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
  #viewClan .off-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  #viewClan .off-ic{width:24px;height:24px;flex:0 0 auto;border-radius:6px;background:var(--gold-soft);border:1px solid var(--gold-line);display:grid;place-items:center;color:var(--gold)}
  #viewClan .off-ic svg{width:13px;height:13px}
  #viewClan .off .l{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700}
  #viewClan .off .v{font-family:var(--fx);font-size:20px;color:var(--ink);margin-top:2px}
  #viewClan .off .r{font-size:10.5px;color:var(--ink-2);margin-top:3px}
  #viewClan .d2ttl{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 6px}
  #viewClan .d2ttl h3{font-size:13px;letter-spacing:.5px;margin:0;font-family:var(--fx);font-weight:600} #viewClan .d2ttl .hint{font-size:11px;color:var(--muted)}
  #viewClan .d2tblwrap{overflow-x:auto;padding:2px 8px 8px}
  /* Un enfant de grille refuse par défaut de passer sous la largeur de son
     contenu (min-width:auto). Sans ceci, le tableau de classement pousse
     toute la page à 535 px sur un écran de 420 : c'est la page entière qui
     défile latéralement au lieu du seul tableau. */
  #viewClan .d2two > *,#viewClan .d2top3 > *,#viewClan .d2mini4 > *,
  #viewClan .d2off5 > *{min-width:0}
  #viewClan table.pl{width:100%;border-collapse:collapse;min-width:440px}
  #viewClan table.pl th{text-align:right;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:7px 12px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
  #viewClan table.pl th.sorted{color:var(--gold-2)}
  #viewClan table.pl th:nth-child(-n+2),#viewClan table.pl td:nth-child(-n+2){text-align:left}
  #viewClan table.pl td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line-2);font-size:12.5px;font-variant-numeric:tabular-nums}
  #viewClan table.pl tr:hover td{background:rgba(255,255,255,.015)}
  #viewClan .rk{color:var(--muted);width:20px}
  #viewClan .av{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:600;background:var(--raised);color:var(--ink-2);margin-right:8px}
  #viewClan .av.rav{background:transparent;border-radius:0}
  #viewClan .av.rav img{width:24px;height:24px;object-fit:contain;display:block}
  #viewClan .pn{font-weight:600;color:var(--ink)} #viewClan .pr{font-family:var(--fx);font-size:13px}
  #viewClan .pos{color:var(--good2)} #viewClan .neg{color:var(--bad)}
  #viewClan .toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  #viewClan .toggle button{background:transparent;border:0;color:var(--ink-2);font:inherit;font-size:11px;font-weight:600;padding:5px 10px;cursor:pointer}
  #viewClan .toggle button.on{background:var(--or-soft);color:var(--or)}
  #viewClan #dashTop5{display:flex;flex-direction:column}
  #viewClan .t5{flex:1;padding:8px 16px 16px;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px}
  #viewClan .t5row{display:flex;align-items:center;gap:11px}
  #viewClan .t5rk{width:23px;height:23px;flex:0 0 auto;border-radius:6px;display:grid;place-items:center;font-family:var(--fx);font-size:12px;background:var(--raised);color:var(--ink-2)}
  #viewClan .t5rk.r1{background:linear-gradient(180deg,#f4d78c,#e5b95c);color:#141310}
  #viewClan .t5rk.r2{background:linear-gradient(180deg,#dfe4ea,#a9b1ba);color:#141310}
  #viewClan .t5rk.r3{background:linear-gradient(180deg,#e3ac7d,#bf7942);color:#141310}
  #viewClan .t5main{flex:1;min-width:0}
  #viewClan .t5head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
  #viewClan .t5head .nm{font-size:12.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #viewClan .t5head .vv{font-family:var(--fx);font-size:14.5px;color:#fff;flex:0 0 auto}
  #viewClan .t5row .tk{display:block;width:100%;height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
  #viewClan .t5row .fl{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#d87f34,#f6b96e);box-shadow:0 0 10px rgba(224,144,74,.5)}
  #viewClan .mem-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 8px;flex-wrap:wrap}
  #viewClan .mem-h h3{font-size:13px;margin:0;font-family:var(--fx);font-weight:600} #viewClan .mem-h .cnt{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px}
  #viewClan table.memtbl{width:100%;border-collapse:collapse}
  #viewClan table.memtbl th{text-align:right;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:7px 16px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap}
  #viewClan table.memtbl th:hover{color:var(--ink-2)}
  #viewClan table.memtbl th.sorted{color:var(--gold-2)}
  #viewClan table.memtbl th:nth-child(-n+2),#viewClan table.memtbl td:nth-child(-n+2){text-align:left}
  #viewClan table.memtbl td{padding:9px 16px;text-align:right;border-bottom:1px solid var(--line-2);font-size:12.5px;font-variant-numeric:tabular-nums}
  #viewClan .grade{font-size:11.5px} #viewClan .grade.g-cmd{color:var(--gold-2)} #viewClan .grade.g-off{color:#c4bda9} #viewClan .grade.g-sol{color:var(--ink-2)}
  #viewClan .more{text-align:center;padding:12px;color:var(--gold-2);font-weight:600;font-size:12.5px;cursor:pointer}
  #viewClan .more:hover{background:rgba(255,255,255,.02)}
  #viewClan .desc2{margin-top:12px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  #viewClan .desc2 .dt{font-size:12px;color:var(--ink-2)} #viewClan .desc2 .dt b{color:var(--ink)}
  #viewClan .desc2 .exp{border:1px solid var(--line);background:transparent;color:var(--gold-2);font:inherit;font-size:12px;font-weight:600;padding:6px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
  #viewClan .desc2-body{padding:0 16px 16px;font-size:13px;color:#c2cdd9;line-height:1.6}
  /* sous-onglets vue clan */
  #viewClan .cv-tabs{display:flex;gap:6px;margin:0 0 14px}
  #viewClan .cv-tab{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
  #viewClan .cv-tab svg{width:15px;height:15px}
  #viewClan .cv-tab:hover{color:var(--ink);border-color:var(--gold-line)}
  #viewClan .cv-tab.on{background:var(--gold-soft);color:var(--gold-2);border-color:var(--gold-line)}
  /* calendrier */
  #viewClan .cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  #viewClan .cal-nav{display:flex;align-items:center;gap:8px}
  #viewClan .cal-nav h3{font-family:var(--fx);font-size:20px;letter-spacing:.5px;margin:0;min-width:170px;text-align:center;text-transform:capitalize}
  #viewClan .cal-arrow{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
  #viewClan .cal-arrow:hover{border-color:var(--gold-line);color:var(--gold-2)}
  #viewClan .cal-today-btn{margin-left:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;cursor:pointer}
  #viewClan .cal-today-btn:hover{border-color:var(--gold-line);color:var(--gold-2)}
  #viewClan .cal-add{border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold-2);font:inherit;font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;cursor:pointer}
  #viewClan .cal-add:hover{filter:brightness(1.12)}
  #viewClan .cal-ro{font-size:11.5px;color:var(--muted)}
  #viewClan .cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-size:11.5px;color:var(--ink-2)}
  #viewClan .cal-lg{display:inline-flex;align-items:center;gap:6px}
  #viewClan .cal-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
  #viewClan .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  #viewClan .cal-wd{text-align:center;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 0}
  #viewClan .cal-cell{min-height:94px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
  #viewClan .cal-cell.empty{background:transparent;border:0;min-height:0}
  #viewClan .cal-cell[data-day]{cursor:pointer;transition:border-color .15s}
  #viewClan .cal-cell[data-day]:hover{border-color:var(--gold-line)}
  #viewClan .cal-cell.today{border-color:var(--gold)}
  #viewClan .cal-d{font-family:var(--fx);font-size:13px;color:var(--ink-2)}
  #viewClan .cal-cell.today .cal-d{color:var(--gold-2)}
  #viewClan .cal-evs{display:flex;flex-direction:column;gap:3px;overflow:hidden}
  #viewClan .cal-ev{font-size:10px;color:var(--ink);background:rgba(255,255,255,.05);border-left:3px solid var(--evc,#9b9b96);border-radius:0 5px 5px 0;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  #viewClan .cal-ev b{color:var(--evc,#9b9b96);font-weight:700}
  #viewClan .cal-ev:hover{background:rgba(255,255,255,.1)}
  #viewClan .cal-up{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  #viewClan .cal-up-h{font-family:var(--fx);font-size:14px;margin-bottom:8px}
  #viewClan .cal-up-empty{color:var(--muted);font-size:12.5px}
  #viewClan .cal-up-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:12.5px;cursor:pointer}
  #viewClan .cal-up-row:first-of-type{border-top:0}
  #viewClan .cal-up-t{flex:1;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #viewClan .cal-up-k{font-size:11px;font-weight:600;flex:0 0 auto}
  #viewClan .cal-up-d{color:var(--ink-2);flex:0 0 auto;font-size:11.5px}
  #viewClan .cal-up-row:hover .cal-up-t{color:var(--gold-2)}
  /* modale événement */
  #viewClan .ev-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:20px}
  #viewClan .ev-box{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--gold-line);border-radius:14px;padding:22px 22px 18px;position:relative;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
  #viewClan .ev-box h3{font-family:var(--fx);font-size:18px;margin:0 0 16px;color:#fff;padding-right:34px}
  #viewClan .ev-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);cursor:pointer}
  #viewClan .ev-x:hover{color:var(--ink);border-color:var(--gold-line)}
  #viewClan .ev-row{margin-bottom:12px}
  #viewClan .ev-row label,#viewClan .ev-row2 label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:5px}
  #viewClan .ev-row input,#viewClan .ev-row textarea,#viewClan .ev-row2 input,#viewClan .ev-row2 select{width:100%;font:inherit;font-size:13px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
  #viewClan .ev-row2{display:flex;gap:10px;margin-bottom:12px}
  #viewClan .ev-row2>span{flex:1;min-width:0}
  #viewClan .ev-act{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
  #viewClan .ev-ro{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);margin-bottom:8px}
  #viewClan .ev-when{font-size:13.5px;color:var(--ink);margin-bottom:10px}
  #viewClan .ev-notes{font-size:13px;color:var(--ink-2);background:var(--panel-2);border-radius:9px;padding:10px 12px;line-height:1.5;margin-bottom:8px}
  #viewClan .ev-by{font-size:11px;color:var(--muted)}
  #viewClan .h2-op.cal-link{cursor:pointer;transition:.15s}
  #viewClan .h2-op.cal-link:hover{border-color:var(--gold)}
  #viewClan .h2-op-cta{margin-top:8px;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.3px}
  @media (max-width:680px){#viewClan .cal-cell{min-height:70px}#viewClan .cal-ev{font-size:9px}#viewClan .ev-row2{flex-wrap:wrap}}
  @media (max-width:900px){.hero2{flex-wrap:wrap}.h2-op{width:100%;max-width:none}
    #viewClan .d2top3,#viewClan .d2mini4,#viewClan .d2off5,#viewClan .d2two{grid-template-columns:1fr}}
  @media (prefers-reduced-motion:reduce){.dash-anim,.h2-star{animation:none}}

  /* Loadouts — cartes premium */
  .lo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1080px;align-items:start}
  @media(max-width:860px){ .lo-cards{grid-template-columns:1fr} }
  /* En-tête des sections Loadouts/Line-up (bouton d'action à droite) — règles de base */
  .lu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .lu-head>.btn{margin-left:auto}
  .lu-title{font-size:18px;margin:0;letter-spacing:-.3px}
  .lu-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
  .lu-new{font-weight:700;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-2)}
  .lu-new:hover{border-color:var(--gold);background:rgba(229,185,92,.18)}
  .lo-card2{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);animation:loIn .45s cubic-bezier(.2,.7,.2,1) both;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .lo-card2:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--cls)}
  .lo-card2::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cls)}
  .lo-card2-h{position:relative;display:flex;align-items:flex-start;gap:14px;padding:15px 34px 12px 16px;overflow:hidden;cursor:pointer}
  .lo-card2-body{overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1),opacity .25s ease;max-height:1800px;opacity:1}
  .lo-card2.lo-collapsed .lo-card2-body{max-height:0;opacity:0}
  .lo-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(180deg);color:var(--muted);font-size:16px;line-height:1;transition:transform .3s ease,color .15s;z-index:3}
  .lo-card2.lo-collapsed .lo-chev{transform:translateY(-50%) rotate(0deg)}
  .lo-card2-h:hover .lo-chev{color:var(--cls)}
  .lo-card2-h::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--cls),transparent 62%);opacity:.11;pointer-events:none}
  .lo-t-ic{width:122px;flex:0 0 auto;z-index:1}
  .lo-t-ic img{width:122px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
  .lo-t-info{flex:1;min-width:0;z-index:1}
  .lo-t-name{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.05}
  .lo-t-meta{display:flex;align-items:center;gap:7px;margin-top:6px}
  .lo-clsic{width:19px;height:19px;flex:0 0 auto;background:var(--cls);-webkit-mask:var(--cimg) center/contain no-repeat;mask:var(--cimg) center/contain no-repeat}
  .lo-cls{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--cls)}
  .lo-tier{font-size:10px;font-weight:800;background:var(--cls);color:#141310;border-radius:5px;padding:1px 6px;line-height:1.5}
  .lo-fmrow{align-items:center}
  .lo-fmbadge{font-size:10px;font-weight:700;color:var(--cls);background:color-mix(in srgb,var(--cls) 15%,transparent);border:1px solid var(--cls);border-radius:6px;padding:3px 8px;white-space:nowrap}
  .lo-fmtile{width:auto;min-width:52px}
  .lo-fmcap{display:flex;flex-direction:column;align-items:center;font-size:8.5px;color:var(--muted);line-height:1.3;text-align:center;margin-top:2px}
  .lo-fmcap b{font-weight:800;color:var(--cls);font-size:9.5px}
  /* Sous-onglets Loadouts (Réglages / Tier lists) */
  .lo-subtabs{display:flex;gap:6px;margin:6px 0 14px}
  .lo-subtab{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
  .lo-subtab svg{width:15px;height:15px}
  .lo-subtab:hover{color:var(--ink);border-color:var(--gold-line)}
  .lo-subtab.on{background:var(--gold-soft);color:var(--gold-2);border-color:var(--gold-line)}
  /* ===================== Tier X prioritaire ===================== */
  #prioMain{ --opt:#c77dff; --opt-dot:#e05cd6; }
  .lo-prio-tab{margin-left:6px;padding-left:12px;border-left:1px solid var(--border);border-radius:10px}
  .lo-prio-cnt{min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--gold);
    color:#141310;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
  .lo-prio-cnt[data-zero="1"]{background:var(--border);color:var(--muted)}
  .lo-subtab.on .lo-prio-cnt[data-zero="1"]{background:rgba(0,0,0,.25)}

  .pr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .pr-prog{font-size:12.5px;color:var(--ink-2)}
  .pr-prog b{color:var(--gold-2);font-weight:800}
  .pr-bar{margin-top:5px;width:220px;height:5px;border-radius:20px;background:var(--raised);overflow:hidden}
  .pr-bar i{display:block;height:100%;background:var(--gold);border-radius:20px;transition:width .3s}

  .pr-panel{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;overflow:hidden;max-width:1120px}
  .pr-title{padding:14px 18px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.2px;
    border-bottom:1px solid var(--border)}
  .pr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  @media(max-width:980px){ .pr-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:600px){ .pr-cols{grid-template-columns:1fr} }
  .pr-col{border-right:1px solid var(--border);min-width:0;display:flex;flex-direction:column}
  .pr-col:last-child{border-right:0}
  .pr-col-h{padding:11px 12px;text-align:center;font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.2px}
  .pr-col-cnt{margin-left:5px;font-size:11px;font-weight:700;color:var(--muted)}
  .pr-col-list{padding:0 8px 10px;max-height:520px;overflow-y:auto}
  .pr-row{display:flex;align-items:center;gap:7px;width:100%;padding:5px 6px;
    border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .12s}
  .pr-row:last-child{border-bottom:0}
  .pr-row:hover{background:var(--raised)}
  .pr-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:transparent}
  .pr-row.opt .pr-dot{background:var(--opt-dot)}
  .pr-ic{flex:0 0 auto;width:52px;height:26px;object-fit:contain}
  .pr-nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pr-row.prem .pr-nm{color:var(--gold-2)}
  .pr-row.opt .pr-nm{color:var(--opt)}   /* APRÈS .prem : le violet doit gagner */
  .pr-prem-ic{flex:0 0 auto;width:11px;height:11px;fill:currentColor;stroke:none;color:var(--gold);opacity:.95}
  .pr-cb{appearance:none;flex:0 0 auto;width:16px;height:16px;border-radius:3px;
    border:1px solid rgba(255,255,255,.25);background:var(--panel);cursor:pointer;
    display:grid;place-items:center;transition:.12s}
  .pr-cb:hover{border-color:var(--gold-line)}
  .pr-cb:checked{background:var(--gold);border-color:var(--gold)}
  .pr-cb:checked::after{content:"✓";color:#141310;font-size:11px;font-weight:800;line-height:1}
  .pr-col-empty{padding:18px 8px;text-align:center;font-size:11.5px;color:var(--muted)}
  .pr-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:11px 18px;
    border-top:1px solid var(--border);font-size:12px}
  .pr-leg{display:inline-flex;align-items:center;gap:8px;color:var(--opt)}
  .pr-leg-prem{color:var(--gold-2)}
  .pr-legend .pr-dot{background:var(--opt-dot)}
  .pr-empty{text-align:center;padding:56px 20px;color:var(--muted)}
  .pr-empty-ic{font-size:40px;opacity:.5;margin-bottom:8px}
  .pr-empty-t{font-size:16px;font-weight:700;color:var(--ink)}

  .pr-ed{background:var(--panel-2);border:1px solid var(--gold-line);border-radius:14px;overflow:hidden;
    max-width:1120px;margin-bottom:16px;animation:prioIn .18s cubic-bezier(.2,.7,.2,1) both}
  @keyframes prioIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .pr-ed-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:13px 16px;border-bottom:1px solid var(--border)}
  .pr-ed-h b{display:block;font-size:14.5px;color:var(--gold)}
  .pr-ed-h span{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.45}
  .pr-ed-x{appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
    background:none;border:0;color:var(--muted);padding:0}
  .pr-ed-x:hover{color:var(--ink)}
  .pr-ed-flt{padding:10px 16px;border-bottom:1px solid var(--border)}
  .pr-ed-flt input{font:inherit;font-size:12.5px;padding:7px 10px;border-radius:8px;width:100%;max-width:280px;
    border:1px solid var(--border);background:var(--panel);color:var(--ink)}
  .pr-ed-flt input:focus{outline:none;border-color:var(--gold-line)}
  .pr-ed-row{display:flex;align-items:center;gap:7px;width:100%;padding:5px 6px;
    border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .12s}
  .pr-ed-row:last-child{border-bottom:0}
  .pr-ed-row:hover{background:var(--raised)}
  .pr-ed-row .pr-nm{color:var(--muted)}
  .pr-ed-row.in .pr-nm{color:var(--ink)}
  .pr-ed-row.in.prem .pr-nm{color:var(--gold-2)}
  .pr-ed-row.in.opt .pr-nm{color:var(--opt)}
  .pr-ed-row .pr-ic,.pr-ed-row .pr-prem-ic{opacity:.4;transition:opacity .12s}
  .pr-ed-row .pr-prem-ic{color:var(--muted)}
  .pr-ed-row.in .pr-ic,.pr-ed-row.in .pr-prem-ic{opacity:1}
  .pr-ed-row.in .pr-prem-ic{color:var(--gold)}
  .pr-ed-row .pr-dot{background:transparent}
  .pr-ed-row.in.opt .pr-dot{background:var(--opt-dot)}
  .pr-ed-row.opt .pr-dot{background:var(--border)}
  .pr-ed-f{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:11px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
  .pr-ed-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .pr-reset{appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
    background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline}
  .pr-reset:hover{color:var(--bad)}
  .pr-ed-act{display:flex;gap:8px}
  .pr-ed-act button{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
    padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:var(--raised);
    color:var(--ink-2);transition:.15s}
  .pr-ed-act button:hover{color:var(--ink);border-color:var(--gold-line)}
  .pr-ed-act .pr-save{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-2);font-weight:800}
  .pr-ed-act .pr-save:hover{background:rgba(229,185,92,.2);border-color:var(--gold)}

  .lo-star{margin-right:5px;color:var(--gold);font-size:15px;line-height:1;vertical-align:-.05em}
  .lo-card2.is-prio{border-color:var(--gold-line)}
  /* Tier lists — cartes récap */
  .tl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1080px}
  @media(max-width:860px){ .tl-cards{grid-template-columns:1fr} }
  .tl-card{background:#16171a;border:1px solid #2b2d31;border-radius:13px;overflow:hidden;cursor:pointer;transition:.15s}
  .tl-card:hover{border-color:rgba(229,185,92,.4);transform:translateY(-2px)}
  .tl-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid #24262a}
  .tl-card-h b{font-size:14.5px;color:#ecebe8}
  .tl-cardact{display:flex;gap:6px}
  .tl-mini{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
  .tl-mini-row{display:flex;align-items:center;gap:8px}
  .tl-mini-lbl{flex:0 0 26px;width:26px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#17130b}
  .tl-mini-tanks{display:flex;gap:2px;flex-wrap:wrap;overflow:hidden;max-height:24px}
  .tl-mini-tanks img{width:34px;height:22px;object-fit:contain}
  .tl-card-by{padding:8px 14px;font-size:11px;color:#8b9099;border-top:1px solid #24262a}
  /* Tier list — éditeur / vue (style TierMaker) */
  .tl-editor{background:#101113;border:1px solid #2b2d31;padding:0;overflow:hidden;margin-bottom:16px}
  .tl-ed-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #2b2d31;flex-wrap:wrap}
  .tl-name{flex:1;min-width:180px;font:inherit;font-size:16px;font-weight:800;color:#ecebe8;background:#17181b;border:1px solid #2b2d31;border-radius:9px;padding:9px 12px}
  .tl-view-name{font-size:17px;font-weight:800;color:var(--gold)}
  .tl-ed-act{display:flex;gap:8px;flex-wrap:wrap}
  .tl-rows{display:flex;flex-direction:column;gap:8px;padding:14px;background:#0c0d0f}
  .tl-row{display:flex;align-items:stretch;gap:0;background:#0b0c0e;border:1px solid #202226;border-radius:12px;overflow:hidden;min-height:70px}
  .tl-row-lbl{position:relative;flex:0 0 92px;width:92px;display:flex;align-items:center;justify-content:center;padding:6px}
  .tl-lbl-in{width:100%;text-align:center;font:inherit;font-size:15px;font-weight:800;color:#17130b;background:transparent;border:0;outline:none}
  .tl-lbl-in::placeholder{color:rgba(0,0,0,.4)}
  .tl-row-ctl{position:absolute;top:2px;right:2px;display:none;gap:2px;background:rgba(0,0,0,.35);border-radius:6px;padding:2px}
  .tl-row-lbl:hover .tl-row-ctl{display:flex}
  .tl-color{width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer}
  .tl-rowbtn{width:18px;height:18px;border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:4px;font-size:9px;cursor:pointer;display:grid;place-items:center;line-height:1}
  .tl-rowbtn:hover{background:rgba(255,255,255,.3)}
  .tl-rowdel:hover{background:#c9484a}
  .tl-drop{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;padding:6px;background:#141518;transition:background .12s}
  .tl-drop.over{background:rgba(229,185,92,.16);outline:2px dashed rgba(229,185,92,.5);outline-offset:-3px}
  .tl-tank{width:62px;height:40px;flex:0 0 auto;cursor:grab;border-radius:9px;background:#1e1f22;border:1px solid #2b2d31;display:grid;place-items:center;transition:transform .1s,border-color .1s}
  .tl-tank img{max-width:58px;max-height:36px;object-fit:contain;pointer-events:none}
  .tl-tank:hover{border-color:var(--gold);transform:scale(1.05)}
  .tl-tank.dragging{opacity:.35}
  .tl-row-view .tl-tank{cursor:default}
  .tl-empty-row{color:#5a5e66;font-size:12px;padding:8px}
  .tl-pool-h{padding:12px 16px 4px;font-size:13px;font-weight:700;color:var(--gold)}
  .tl-pool-h .hint{font-weight:400;color:#8b9099;font-size:11px;margin-left:6px}
  .tl-flt{display:flex;gap:8px;flex-wrap:wrap;padding:6px 16px 10px}
  .tl-flt select,.tl-flt .lo-search{font:inherit;font-size:12.5px;padding:8px 11px;border-radius:8px;border:1px solid #2b2d31;background:#17181b;color:#ecebe8}
  .tl-flt .lo-search{flex:1;min-width:150px}
  .tl-pool{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;padding:10px 16px 16px;min-height:70px;max-height:44vh;overflow-y:auto;background:#0d0e10;border-top:1px solid #202226;transition:background .12s}
  .tl-pool.over{background:rgba(229,185,92,.1)}
  .tl-editor{border-radius:14px}
  .tl-ed-act .btn{background:#1e1f22;border:1px solid #2b2d31;color:#ecebe8;border-radius:9px;padding:9px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
  .tl-ed-act .btn:hover{border-color:var(--gold-line);color:#fff}
  .tl-ed-act .tl-save{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-2);font-weight:800}
  .tl-ed-act .tl-save:hover{background:rgba(229,185,92,.2);border-color:var(--gold);color:var(--gold-2)}
  /* Stratégie — éditeur de minimap */
  #viewStrats .lu-title{font-size:18px}
  .st-shell{background:#101113;border:1px solid #2b2d31;border-radius:14px;padding:0;overflow:hidden;margin-bottom:16px}
  .st-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #2b2d31;flex-wrap:wrap}
  .st-top>b{font-size:16px;color:#ecebe8}
  .st-top-act{display:flex;gap:8px;flex-wrap:wrap}
  .st-top .btn,.st-top-act .btn{background:#1e1f22;border:1px solid #2b2d31;color:#ecebe8;border-radius:9px;padding:9px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
  .st-top .btn:hover,.st-top-act .btn:hover{border-color:var(--gold-line);color:#fff}
  .st-top-act .tl-save{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-2);font-weight:800}
  .st-top-act .tl-save:hover{background:rgba(229,185,92,.2)}
  .st-view-map{font-weight:400;color:#8b9099;font-size:13px}
  /* map picker */
  .st-mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:16px;max-height:60vh;overflow-y:auto}
  .st-mapopt{background:#17181b;border:1px solid #2b2d31;border-radius:10px;padding:6px;cursor:pointer;color:#ecebe8;transition:.15s;display:flex;flex-direction:column;gap:5px;align-items:center}
  .st-mapopt img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px}
  .st-mapopt span{font-size:11px;font-weight:600;text-align:center;line-height:1.15}
  .st-mapopt:hover{border-color:var(--gold);transform:translateY(-2px)}
  /* toolbar */
  .st-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px;background:#0c0d0f;border-bottom:1px solid #202226}
  .st-tools{display:flex;gap:5px;flex-wrap:wrap}
  .st-tool{display:inline-flex;align-items:center;gap:6px;background:#1e1f22;border:1px solid #2b2d31;color:#c9ccd1;border-radius:9px;padding:7px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
  .st-tool-ic{font-size:14px;line-height:1}
  .st-tool:hover{border-color:var(--gold-line);color:#fff}
  .st-tool.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-2)}
  .st-colors{display:flex;gap:5px;flex-wrap:wrap;padding-left:6px;border-left:1px solid #24262a;margin-left:2px}
  .st-color{width:24px;height:24px;border-radius:50%;border:2px solid #2b2d31;cursor:pointer;padding:0;transition:.12s}
  .st-color:hover{transform:scale(1.12)}
  .st-color.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}
  .st-stroke{display:inline-flex;align-items:center;gap:5px;padding-left:10px;border-left:1px solid #24262a}
  .st-sbtn{width:30px;height:30px;background:#1a1b1e;border:1px solid #2b2d31;color:#c2c5cb;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;line-height:1}
  .st-sbtn.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
  .st-wsel{display:inline-flex;gap:3px}
  .st-wbtn{width:30px;height:30px;background:#1a1b1e;border:1px solid #2b2d31;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .st-wbtn i{display:block;width:16px;background:#c2c5cb;border-radius:3px}
  .st-wbtn.on{border-color:var(--gold)} .st-wbtn.on i{background:var(--gold)}
  .st-modewrap{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid #24262a}
  .st-modesel{background:#1e1f22;border:1px solid var(--gold-line);color:var(--gold);border-radius:8px;padding:7px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-transform:none;letter-spacing:0}
  .st-modesel:hover{border-color:var(--gold)}
  .st-ov{pointer-events:none}
  .st-tb-act{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
  .st-mini2{background:#1e1f22;border:1px solid #2b2d31;color:#c9ccd1;border-radius:8px;padding:7px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
  .st-mini2:hover{border-color:#c9484a;color:#e46b6d}
  .st-mini2.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
  .st-mini2:disabled{opacity:.35;cursor:default}
  .st-mini2:disabled:hover{border-color:#2b2d31;color:#c9ccd1}
  /* palette de chars (pions) */
  .st-tankbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:#0e0f11;border-bottom:1px solid #202226}
  .st-tankbar-l{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .st-classsel{display:inline-flex;gap:6px;--tc:#5dbb46}
  .st-class{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:56px;padding:7px 4px 5px;background:#1a1b1e;border:1px solid #2b2d31;border-radius:9px;cursor:pointer;transition:.1s}
  .st-class .ic{width:30px;height:30px;background:var(--tc);-webkit-mask-size:contain;mask-size:contain}
  .st-class .lbl{font-size:10px;font-weight:700;color:#aeb2b8;letter-spacing:.02em}
  .st-class:hover{border-color:#3a3d42}
  .st-class.on{border-color:var(--tc);background:#222428}
  .st-class.on .lbl{color:#e9ecef}
  .st-tank-cols{display:inline-flex;gap:6px;padding-left:12px;border-left:1px solid #24262a}
  .st-tcol{width:26px;height:26px;border-radius:50%;border:2px solid #2b2d31;cursor:pointer;padding:0;transition:.1s}
  .st-tcol:hover{transform:scale(1.12)}
  .st-tcol.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}
  .st-count{margin-left:auto;display:flex;gap:7px;align-items:center}
  .st-cnt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#e9ecef;padding:4px 11px 4px 8px;border-radius:999px;background:#1a1b1e;border:1px solid #2b2d31}
  .st-cnt i{width:11px;height:11px;border-radius:50%;display:inline-block}
  /* barre d'étapes (slideshow) */
  .st-stepsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:#0c0d0f;border-bottom:1px solid #202226}
  .st-steptabs{display:inline-flex;gap:5px;flex-wrap:wrap}
  .st-steptab{width:30px;height:30px;background:#1a1b1e;border:1px solid #2b2d31;color:#c2c5cb;border-radius:8px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
  .st-steptab.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
  .st-stepadd{width:30px;height:30px;background:#1a1b1e;border:1px dashed #3a3d42;color:#8fe07a;border-radius:8px;font-size:17px;font-weight:700;cursor:pointer;line-height:1}
  .st-stepadd:hover{border-color:#5dbb46}
  .st-steps-act{margin-left:auto;display:flex;gap:6px}
  .st-present{background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold);font-weight:700}
  .st-present:hover{background:var(--gold);color:#12110d}
  /* navigation d'étape en consultation */
  .st-viewnav{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px 0}
  /* .btn est en inline-flex SANS justify-content : sans le centrage ci-dessous, la
     flèche se collait au bord gauche du bouton (largeur fixe + padding horizontal nul). */
  .st-navbtn{width:42px;font-size:18px;font-weight:800;padding:6px 0;justify-content:center}
  .st-viewind{font-size:13px;font-weight:800;color:var(--gold);min-width:98px;text-align:center}
  /* overlay présentation plein écran */
  .st-present-ov{position:fixed;inset:0;z-index:9999;background:#08090b;display:flex;flex-direction:column;align-items:center;padding:14px;gap:12px}
  .st-present-top{width:100%;max-width:1100px;display:flex;align-items:center;gap:12px;color:#ece6d6}
  .st-present-top b{font-size:18px}
  .st-present-map{color:#9a9280;font-size:14px}
  .st-present-x{margin-left:auto;background:#1a1b1e;border:1px solid #2b2d31;color:#c2c5cb;width:38px;height:38px;border-radius:9px;font-size:16px;cursor:pointer}
  .st-present-x:hover{border-color:#c9484a;color:#e46b6d}
  .st-present-x.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
  .st-present-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;width:100%;position:relative}
  .st-present-stage svg{height:100%;max-height:100%;max-width:100%;aspect-ratio:1;border-radius:10px;background:#000;border:1px solid #2b2d31}
  

/* ══ LE PONT ════════════════════════════════════════════════════════
   Cinq étapes qui défilent horizontalement. Le rail occupe la hauteur
   d'un vrai en-tête ; on ne voit qu'une étape à la fois, et c'est ce
   qui règle « il y a du texte partout ». */
.dk{position:relative;margin:0 0 30px;border-radius:20px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-1)}
.dk-vp{position:relative;overflow:hidden;height:clamp(500px,80vh,780px);outline:none;
  cursor:grab;touch-action:pan-y}
.dk-vp.tire{cursor:grabbing}
.dk-vp:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
/* La piste porte les cinq panneaux et se déplace d'un bloc. Pas de
   transition CSS : l'animation est menée image par image en JavaScript,
   pour que la parallaxe reste synchrone avec elle. */
.dk-track{display:flex;height:100%;will-change:transform}
.dk-p{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;isolation:isolate}

/* ── les trois profondeurs ──────────────────────────────────────────
   Un panneau traverse toute la largeur de l'écran : les calques ont donc
   170, 300 et 110 px de course. C'est ce qui rend la parallaxe visible —
   mon essai précédent la faisait bouger de 70 px pendant un défilement
   vertical de 400, autant dire pas du tout.
   Les débordements (inset négatifs) ne sont pas décoratifs : sans eux,
   un calque décalé laisse voir le vide au bord. */
.dk-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.dk-map{position:absolute;inset:-14%;will-change:transform}
/* La vidéo occupe la même place que le relief et le recouvre quand elle
   existe. Le même traitement sombre : c'est le voile qui gère le
   contraste avec le texte, pas la source. */
.dk-vid{position:absolute;inset:-14%;will-change:transform}
/* La photo occupe exactement la place de la vidéo : même débord, même
   plan, même traitement. Deux calques qui jouent le même rôle doivent
   se comporter pareil, sinon changer l'un oblige à se souvenir de
   l'autre. */
.dk-photo{position:absolute;inset:-14%;will-change:transform}
.dk-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.18) contrast(1.05) brightness(.92)}
/* Le voile (.dk-veil) est déjà directionnel : quasi opaque à gauche où
   vit le texte, transparent à droite où vit l'image. Assombrir la vidéo
   par-dessus faisait donc le même travail une seconde fois — et sur un
   plan déjà nocturne, le résultat était un rectangle noir. On n'ajuste
   plus ici que la teinte, la lisibilité restant l'affaire du voile. */
.dk-vid video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.18) contrast(1.05) brightness(.92)}
/* Le relief est du TRAIT, pas de la photo : l'assombrir le ferait
   disparaitre. On le laisse tel quel et c'est le voile qui gere le
   contraste avec le texte. */
.dk-map img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62}
/* ── (5) Les instruments : reticule, echelle, equerres ─────────────
   Dessines en SVG, donc nets a n'importe quelle taille. Poses a droite :
   la moitie gauche appartient au texte. */
/* Cale sur la moitie droite : la gauche appartient au texte. */
/* Décalé vers le bas et la droite : le réticule encadre la figure au
   lieu de passer derrière elle. */
.dk-inst{position:absolute;inset:6% -10% -6% 30%;will-change:transform;opacity:.85;
  display:grid;place-items:center}
.dk-inst svg{width:100%;height:100%;display:block}

/* ── (3) L'embleme du clan ────────────────────────────────────────
   Tres grand et tres discret : a 6 % il ne se voit pas, il se sent. Plus
   opaque, il deviendrait un logo colle sur une page. */
/* En haut à droite, hors du passage de la figure : le fond entoure le
   contenu, il ne passe pas dessous. */
.dk-em{position:absolute;top:-6%;right:-2%;transform-origin:center;
  width:clamp(240px,26vw,460px);aspect-ratio:1;
  will-change:transform;opacity:.05;pointer-events:none}
.dk-em img{width:100%;height:100%;object-fit:contain;display:block;
  filter:grayscale(1) brightness(2.4)}

/* ── (4) Le char le plus joue ─────────────────────────────────────
   En silhouette, au premier plan a droite. C'est SON char : le reconnaitre
   fait plus pour l'attachement que n'importe quelle illustration. */
/* En bas à droite, hors du passage de la figure. La largeur est bornée
   à 420 px : au-delà, une image de référence commence à se voir grossie. */
.dk-char{position:absolute;right:-1%;bottom:2%;width:clamp(200px,24vw,420px);
  will-change:transform;opacity:.3;pointer-events:none}
.dk-char img{width:100%;height:auto;display:block;
  filter:grayscale(.65) contrast(1.15) brightness(.85)
         drop-shadow(0 24px 40px rgba(0,0,0,.7))}
/* La lueur dorée à droite donne un foyer au panneau : l'œil s'y pose,
   puis remonte vers le titre. Sans elle, le fond est un aplat. */
.dk-veil{position:absolute;inset:0;
  background:
    radial-gradient(110% 78% at 76% 44%, rgba(216,181,102,.15), transparent 60%),
    linear-gradient(96deg, var(--plane) 6%, rgba(12,12,11,.93) 36%,
                    rgba(12,12,11,.40) 70%, rgba(12,12,11,.70) 100%),
    linear-gradient(0deg, rgba(12,12,11,.92) 0, transparent 44%)}

/* ── le contenu : mots à gauche, figure à droite ────────────────── */
.dk-c{position:relative;z-index:2;height:100%;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
  gap:clamp(20px,4vw,64px);
  /* La marge basse ne degage QUE la barre d etapes (62 px environ).
     Plus large, elle volait la place au contenu et le titre anglais,
     plus long que le francais, poussait le bouton sous la barre. */
  padding:clamp(28px,3.4vw,52px) clamp(22px,4.4vw,72px) clamp(76px,5vw,86px);
  will-change:transform,opacity}
.dk-w{min-width:0;max-width:660px}
.dk-fig{min-width:0;display:grid;place-items:center}

/* ── LA HIÉRARCHIE ─────────────────────────────────────────────────
   Quatre niveaux, et un rapport de neuf entre le plus gros et le plus
   petit. C'est la seule chose qui dise à l'œil par où commencer. */
.dk-eb{display:flex;align-items:center;gap:12px;margin:0 0 clamp(15px,1.7vw,22px);
  font:700 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.dk-eb span{color:var(--plane);background:var(--accent);padding:5px 9px;
  border-radius:5px;letter-spacing:.1em}
.dk-t{margin:0 0 clamp(10px,1.2vw,16px);font-size:clamp(36px,5.6vw,84px);
  font-weight:800;line-height:.95;letter-spacing:-.044em;color:var(--ink);
  text-wrap:balance}
.dk-l{margin:0 0 clamp(18px,2vw,26px);font-size:clamp(13.5px,1.2vw,17px);
  line-height:1.5;color:var(--ink-2);max-width:46ch}
.dk-s{list-style:none;display:flex;gap:clamp(22px,3.2vw,48px);
  margin:0 0 clamp(20px,2.2vw,28px);padding:0}
.dk-s b{display:block;font-size:clamp(23px,2.4vw,34px);font-weight:800;line-height:1;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;color:var(--ink)}
.dk-s b.up{color:var(--good)} .dk-s b.dn{color:var(--bad)}
/* Le dénominateur du rang — le « /47 » de « 12/47 » — passe en retrait :
   le numérateur porte l information, le total ne fait que la situer. */
.dk-s b i{font-style:normal;font-size:.55em;font-weight:700;color:var(--muted);letter-spacing:0}
.dk-s span{display:block;margin-top:6px;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

.dk-more{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  border-radius:30px;cursor:pointer;font:600 11.5px/1 inherit;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-2);
  border:1px solid rgba(216,181,102,.42);background:var(--accent-soft);
  transition:background .2s,border-color .2s,transform .2s}
.dk-more:hover{background:rgba(216,181,102,.22);border-color:var(--accent);
  transform:translateY(-1px)}
.dk-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ══ LES CINQ FIGURES ═══════════════════════════════════════════════
   Une par étape, et cinq fois différentes. Le même anneau répété aurait
   fait gabarit. */

/* 01 — le rythme des dernières batailles */
.dkf-b{display:flex;align-items:flex-end;gap:clamp(5px,.8vw,11px);
  height:clamp(130px,19vh,210px);width:100%;max-width:440px}
.dkf-b i{flex:1 1 0;max-width:28px;border-radius:5px;display:block}
.dkf-b i.v{background:linear-gradient(180deg,var(--good),rgba(46,194,110,.22))}
.dkf-b i.d{background:linear-gradient(180deg,var(--bad),rgba(236,106,106,.2))}

/* 02 — l'anneau du geste, avec le repère doré du clan */
.dkf-a{position:relative;width:clamp(190px,23vw,260px);aspect-ratio:1}
.dkf-a svg{width:100%;height:100%;display:block}
.dka-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dka-c b{display:block;font-size:clamp(30px,3.3vw,46px);font-weight:800;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.dka-c span{display:block;margin-top:6px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* 03 — la carte, cadrée et légèrement inclinée : un objet posé, pas un
   fond. L'ombre portée la décolle du panneau. */
.dkf-m{position:relative;width:clamp(200px,25vw,320px);aspect-ratio:1;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  transform:rotate(-3deg);box-shadow:0 28px 64px rgba(0,0,0,.55)}
.dkf-m img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.1) saturate(.92)}
.dkm-t{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:20px;
  font:700 9.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.13em;
  text-transform:uppercase;color:#ec6a6a;background:rgba(12,12,11,.78);
  border:1px solid rgba(236,106,106,.45)}

/* 04 — la courbe du SR */
/* 03 bis — l entonnoir : quatre etages, deux barres par etage.
   Le repere de reference est un TRAIT, pas une seconde barre : deux
   barres pleines superposees rendent le depassement illisible. */
.dkf-e{width:100%;max-width:520px;display:grid;gap:clamp(12px,1.7vh,20px)}
.dke-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:7px}
.dke-h span{font-size:12.5px;color:var(--ink-2)}
.dke-h b{font-size:clamp(17px,1.9vw,23px);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.dke-b{position:relative;height:9px;border-radius:5px;background:var(--grid)}
.dke-moi{position:absolute;left:0;top:0;bottom:0;border-radius:5px;display:block;
  background:linear-gradient(90deg,rgba(216,181,102,.5),var(--accent))}
.dke-ref{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:2px;display:block;
  background:var(--ink);transform:translateX(-50%);box-shadow:0 0 0 2px var(--card)}
.dke-f{margin-top:7px;font:500 10.5px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* L etage qui fuit porte la seule couleur vive de la figure. */
/* L axe simplement DESIGNE, sans deficit : or, pas rouge. */
.dke-vise .dke-h b{color:var(--accent-2)}
.dke-vise .dke-moi{background:linear-gradient(90deg,rgba(216,181,102,.35),var(--accent-2))}
.dke-vise .dke-f{color:var(--accent)}
.dke-fuit .dke-h b{color:var(--bad)}
.dke-fuit .dke-moi{background:linear-gradient(90deg,rgba(236,106,106,.45),var(--bad))}
.dke-fuit .dke-f{color:var(--bad)}
.ent-fuit{background:rgba(236,106,106,.07)}
.ent-fuit td:first-child b{color:var(--bad)}
/* Une ligne trop mince pour conclure : montree, mais visiblement mise de
   cote. La cacher laisserait croire que le contexte n existe pas ; la
   presenter comme les autres inviterait a en tirer une lecon. */
/* La jauge de l horizon : ou en est le cycle sur ses dix batailles. */
.dkf-h{width:100%;max-width:460px}
.dkh-n{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.dkh-n b{font-size:clamp(34px,4vw,54px);font-weight:800;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.dkh-n span{font-size:clamp(18px,2vw,26px);font-weight:700;color:var(--muted)}
.dkh-b{position:relative;height:11px;border-radius:6px;background:var(--grid);overflow:hidden}
.dkh-b i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;display:block;
  background:linear-gradient(90deg,rgba(216,181,102,.5),var(--accent))}
.dkh-l{margin-top:9px;font:500 10.5px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ctx-mince{opacity:.42}
.ctx-mince b{font-weight:500}
.ctx-t{margin:22px 0 8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.ctx-t:first-of-type{margin-top:14px}
/* Ou l on meurt : la vue du dessus, et les morts posees dessus.
   Les points d equipe sont discrets, les morts vives : c est la mort
   qu on vient regarder, l equipe n est que le contexte. */
/* La carte a gauche, ce qu elle raconte a droite : seule, elle laissait
   les deux tiers de la largeur vides sur un grand ecran. */
.pm-duo{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:center;margin:6px 0 4px}
.pm-dit{align-self:center}
.pm-dit .ent-quoi{margin:0;font-size:15.5px;line-height:1.62}
@media(max-width:820px){ .pm-duo{grid-template-columns:1fr} }
.dkf-pm{width:100%;max-width:520px}
.pm-plan{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-2)}
.pm-plan img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.7) contrast(1.05) brightness(.62)}
.pm-plan i{position:absolute;display:block;border-radius:50%;transform:translate(-50%,-50%)}
i.pm-mort{width:13px;height:13px;background:var(--bad);
  box-shadow:0 0 0 3px rgba(236,106,106,.22),0 2px 8px rgba(0,0,0,.6)}
i.pm-eq{width:8px;height:8px;background:var(--accent);opacity:.55;
  box-shadow:0 0 0 2px rgba(12,12,11,.5)}
.pm-l{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:11px;
  font:500 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pm-l span{display:flex;align-items:center;gap:7px}
.pm-l i{position:static;transform:none;display:block;border-radius:50%}
.pm-n{color:var(--ink);font-weight:600;letter-spacing:.04em}

/* La carte du constat positionnel : trois nombres, puis la courbe. */
.pos-h{display:flex;gap:clamp(22px,3vw,44px);flex-wrap:wrap;margin:4px 0 18px}
.pos-n{display:flex;flex-direction:column;gap:3px}
.pos-n b{font-size:clamp(22px,2.3vw,30px);font-weight:800;line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pos-n b.dn{color:var(--bad)} .pos-n b.up{color:var(--good)}
.pos-n span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* L aire entre les deux traits EST le probleme : c est elle qu on
   remplit, pas les traits qu on epaissit. */
.dkf-ec{width:100%;margin:6px 0 4px}
.dkf-ec svg{width:100%;height:clamp(130px,17vh,190px);display:block;overflow:visible}
.dkec-l{display:flex;gap:18px;align-items:center;margin-top:10px;flex-wrap:wrap;
  font:500 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.dkec-l span{display:flex;align-items:center;gap:7px}
.dkec-l i{width:14px;height:2px;display:block;border-radius:2px}
.dkec-l i.moi{background:var(--bad)}
.dkec-l i.ref{background:var(--muted)}
.dkec-t{margin-left:auto}

.ent-quoi{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ent-quoi b{color:var(--ink)}

.dkf-c{width:100%;max-width:440px;height:clamp(140px,19vh,210px)}
.dkf-c svg{width:100%;height:100%;display:block}

/* 05 — la jauge des paliers. Le repère déborde volontairement de la
   barre : c'est ce qui le rend repérable au premier coup d'œil. */
.dkf-j{width:100%;max-width:460px}
.dkj-b{position:relative;height:20px;margin-bottom:18px}
.dkj-b s{position:absolute;top:0;height:20px;text-decoration:none;opacity:.85;
  border-radius:3px}
.dkj-b s:first-child{border-radius:8px 2px 2px 8px}
.dkj-b s:last-of-type{border-radius:2px 8px 8px 2px}
.dkj-m{position:absolute;top:-9px;height:38px;width:4px;border-radius:4px;
  background:var(--ink);transform:translateX(-50%);
  box-shadow:0 0 0 3px var(--plane),0 0 20px rgba(255,255,255,.55)}
.dkj-l{position:relative;height:16px}
.dkj-l span{position:absolute;transform:translateX(-50%);font-size:10px;
  color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ══ LA CONDUITE ════════════════════════════════════════════════════ */
.dk-arw{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;padding:0;
  border:1px solid var(--border);background:rgba(12,12,11,.62);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.dk-arw:hover:not(:disabled){background:var(--accent);color:var(--plane);border-color:var(--accent)}
.dk-arw:disabled{opacity:.2;cursor:default}
.dk-arw svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dk-prev{left:16px} .dk-next{right:16px}

/* La barre d'étapes en pied de pont : cinq segments plutôt que cinq
   pastilles. Un segment rempli dit à la fois OÙ l'on est et COMBIEN il
   en reste — une pastille ne dit que la première moitié. */
.dk-nav{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:3px;
  padding:0 clamp(18px,3.4vw,28px) clamp(16px,2vw,22px)}
.dk-nav button{flex:1 1 0;min-width:0;background:none;padding:13px 0 0;
  text-align:left;cursor:pointer;color:var(--muted);border:0;border-top:2px solid var(--grid);
  transition:color .22s,border-color .22s}
.dk-nav button:hover{color:var(--ink-2);border-top-color:var(--ink-2)}
.dk-nav button.on{color:var(--ink);border-top-color:var(--accent)}
.dk-nav b{font:700 9.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.15em;
  color:var(--accent);opacity:.5;transition:opacity .22s}
.dk-nav button.on b{opacity:1}
.dk-nav span{display:block;margin-top:6px;font-size:11.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ══ LES ANIMATIONS ═════════════════════════════════════════════════
   Rien n'est caché par défaut : les règles ci-dessous ne s'appliquent
   qu'aux panneaux portant « vif », posé par le JavaScript. Si un script
   casse, la page reste lisible — une opacité à zéro qui attend une
   classe est le moyen le plus sûr d'afficher du vide. */
@keyframes dkMonte{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes dkPousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dkTrace{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:var(--do)}}
@keyframes dkPose{from{opacity:0;transform:rotate(-9deg) scale(.88)}
                  to{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes dkEtale{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dkParait{from{opacity:0}to{opacity:1}}

/* L'ordre d'apparition EST l'ordre de lecture. Les regles sont plus bas,
   avec dkEntre : elles tiennent compte du SENS du deplacement, ce que
   dkMonte ne savait pas faire. Deux definitions concurrentes du meme
   effet auraient fini par diverger. */

/* Chaque figure se construit comme elle se lit. */
.dk-p.vif .dkf-b i{transform-origin:bottom;
  animation:dkPousse .62s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(.2s + var(--i,0) * .045s)}
.dk-p.vif .dka-arc{animation:dkTrace 1.05s cubic-bezier(.32,.72,.32,1) .22s both}
.dk-p.vif .dkf-a .dka-c{animation:dkParait .5s ease .6s both}
.dk-p.vif .dkf-m{animation:dkPose .72s cubic-bezier(.22,.61,.36,1) .12s both}
.dk-p.vif .dkj-b s{transform-origin:left;
  animation:dkEtale .6s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(.18s + var(--k,0) * .06s)}
.dk-p.vif .dkj-m{transform-origin:center;
  animation:dkMonte .6s cubic-bezier(.34,1.4,.5,1) .52s both}
.dk-p.vif .dkj-l span{animation:dkParait .5s ease .6s both}
/* La courbe se trace de gauche à droite : la longueur du tracé n'est
   connue qu'une fois le SVG dans la page, c'est donc le JavaScript qui
   la mesure et lance la transition. */
.dkc-l{transition:stroke-dashoffset 1.1s cubic-bezier(.32,.72,.32,1) .2s}
.dk-p.vif .dkf-c svg>path:first-child{animation:dkParait .8s ease .5s both}


/* ── L'entree suit le sens du geste ───────────────────────────────
   --sens vaut 1 quand on avance, -1 quand on recule. Le contenu entre
   donc par la ou l'on vient. Une seule serie de keyframes suffit. */
@keyframes dkEntre{
  from{opacity:0;transform:translate3d(calc(var(--sens,1) * 34px), 14px, 0)}
  to  {opacity:1;transform:none}
}
.dk-p.vif .dk-eb  {animation:dkEntre .55s cubic-bezier(.22,.61,.36,1) both}
.dk-p.vif .dk-t   {animation:dkEntre .68s cubic-bezier(.22,.61,.36,1) .07s both}
.dk-p.vif .dk-l   {animation:dkEntre .62s cubic-bezier(.22,.61,.36,1) .15s both}
.dk-p.vif .dk-s li{animation:dkEntre .6s  cubic-bezier(.22,.61,.36,1) both;
                   animation-delay:calc(.22s + var(--j,0) * .07s)}
.dk-p.vif .dk-more{animation:dkEntre .56s cubic-bezier(.22,.61,.36,1) .38s both}

/* ── Le fond vit ──────────────────────────────────────────────────
   Une derive tres lente, sur l'image INTERIEURE : le calque exterieur
   porte deja la parallaxe, et deux transformations sur le meme element
   se remplaceraient au lieu de s'ajouter.
   Vingt-huit secondes : assez lent pour ne jamais attirer l'oeil, assez
   present pour qu'une image figee se remarque par son absence. */
@keyframes dkDerive{
  0%  {transform:scale(1.06) translate3d(-1.2%, 0.6%, 0)}
  50% {transform:scale(1.11) translate3d(1.2%, -0.6%, 0)}
  100%{transform:scale(1.06) translate3d(-1.2%, 0.6%, 0)}
}
/* La derive lente animait une PHOTO. Un reseau de courbes de niveau qui
   respire donne le mal de mer : on la reserve a l'embleme, dont la forme
   pleine supporte le mouvement. */
.dk-em{animation:dkDerive 34s ease-in-out infinite}

/* ── La carte repond a la main ────────────────────────────────────
   Elle se redresse et se souleve : un objet qu'on peut prendre, pas une
   vignette collee au fond. */
.dkf-m{transition:transform .45s cubic-bezier(.22,.61,.36,1),
                  box-shadow .45s cubic-bezier(.22,.61,.36,1)}
.dkf-m:hover{transform:rotate(-1deg) translateY(-6px) scale(1.02);
  box-shadow:0 36px 80px rgba(0,0,0,.6)}

@media(prefers-reduced-motion:reduce){
  .dk-map img{animation:none}
  .dkf-m{transition:none}
  .dkf-m:hover{transform:rotate(-3deg)}
}

@media(prefers-reduced-motion:reduce){
  .dk-p.vif *{animation:none !important}
  .dkc-l{transition:none}
}

/* ══ LE DÉTAIL ══════════════════════════════════════════════════════
   Un seul à la fois. Les quatre autres restent dans la page — leurs
   cibles de rendu doivent exister — mais hidden les retire de
   l'affichage ET du parcours au clavier. */
.dk-d[hidden]{display:none}
.dk-dets{scroll-margin-top:78px}
.et-lead{margin:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:80ch}

@media(max-width:1000px){
  /* La figure passe au-dessus des mots : côte à côte, sous mille pixels,
     aucune des deux n'a plus la place de respirer. */
  .dk-c{grid-template-columns:minmax(0,1fr);align-content:center;
    gap:clamp(18px,3vw,28px)}
  .dk-fig{order:-1;justify-items:start}
  .dkf-b,.dkf-c,.dkf-j{max-width:340px}
  .dkf-a{width:clamp(150px,26vw,190px)}
  .dkf-m{width:clamp(150px,26vw,200px)}
}
@media(max-width:760px){
  .dk-rail{height:clamp(430px,74vh,600px)}
  .dk-t{font-size:clamp(32px,8.4vw,46px);letter-spacing:-.035em}
  .dk-arw{display:none}          /* au doigt, le balayage suffit */
  .dk-nav span{display:none}
  .dk-nav button{padding-top:11px}
  .dk-c{padding-bottom:clamp(60px,12vw,70px)}
}
@media(max-width:900px){ .tr{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  .dk-more{transition:none}
  .dk-rail{scroll-behavior:auto}
}

/* ══ L'ANNEAU ═══════════════════════════════════════════════════════ */
.an{position:relative;width:82px;height:82px;flex:0 0 auto}
.an svg{width:100%;height:100%;display:block}
.an-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05}
.an-c b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.an-c span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}

/* ══ LE TERRAIN ═════════════════════════════════════════════════════
   La vue du dessus de la carte, pas une photo d'ambiance : c'est la
   minimap sur laquelle le joueur raisonne pendant la partie. Le dégradé
   sombre en bas n'est pas un effet — il rend le libellé lisible quelle
   que soit la carte. */
.tr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tr-c{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.tr-dure{border-color:rgba(236,106,106,.28)}
.tr-facile{border-color:rgba(46,194,110,.24)}
.tr-img{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.tr-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.8) contrast(1.06) brightness(.92)}
.tr-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,11,.15) 0,transparent 34%,rgba(12,12,11,.82) 100%)}
.tr-img.tr-noimg{aspect-ratio:auto;height:8px}
.tr-img.tr-noimg img,.tr-img.tr-noimg .tr-tag{display:none}
.tr-tag{position:absolute;left:12px;bottom:11px;z-index:1;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:4px 10px;border-radius:20px;background:rgba(12,12,11,.72);
  border:1px solid var(--border);color:var(--ink-2)}
.tr-dure .tr-tag{color:#ec6a6a;border-color:rgba(236,106,106,.42)}
.tr-facile .tr-tag{color:#2ec26e;border-color:rgba(46,194,110,.42)}
.tr-b{padding:15px 17px 17px}
.tr-b h4{margin:0 0 11px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.tr-k{display:flex;gap:20px;margin-bottom:11px;flex-wrap:wrap}
.tr-k > span{display:flex;flex-direction:column;gap:2px;font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tr-k > span > b{font-size:17px;font-weight:800;letter-spacing:0;text-transform:none;
  color:var(--ink);font-variant-numeric:tabular-nums}
.tr-p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.tr-vide{padding:16px 18px;border:1px dashed var(--border);border-radius:var(--radius);
  color:var(--muted);font-size:13.5px;line-height:1.6}


/* ══ « Ce que je travaille » ════════════════════════════════════════
   Une seule carte, large. Le contraste de taille avec le reste de la
   page EST le message : voilà ce qu'on fait, le reste peut attendre. */
.tv{margin:4px 0 22px}
.tv-h{display:flex;align-items:baseline;gap:12px;margin:0 2px 10px}
.tv-lbl{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--accent)}
.tv-sub{font-size:12px;color:var(--muted)}
.tv-card{background:linear-gradient(180deg,var(--panel,var(--card)),var(--panel-2,var(--card)));
  border:1px solid var(--line,var(--border));border-left:3px solid var(--accent);
  border-radius:13px;padding:20px 22px}
.tv-top{display:flex;gap:22px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.tv-top h3{margin:0 0 6px;font-size:23px;font-weight:800;letter-spacing:-.02em}
.tv-constat{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2,var(--muted));max-width:56ch}
.tv-chiffres{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.tv-moi,.tv-clan{text-align:center}
.tv-moi b,.tv-clan b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.tv-clan b{color:var(--muted);font-weight:700}
.tv-moi span,.tv-clan span{display:block;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.tv-ecart{font-size:13px;font-weight:800;padding:3px 9px;border-radius:20px;
  background:rgba(226,104,95,.14);color:var(--dv-moins,#e2685f);font-variant-numeric:tabular-nums}
/* la jauge situe le joueur autour du repère du clan, plafonnée à ±50 %
   pour qu'un écart extrême n'écrase pas la lecture */
.tv-jauge{position:relative;height:6px;margin:16px 0 4px;border-radius:4px;
  background:var(--steel-2,rgba(255,255,255,.05));overflow:hidden}
.tv-jauge .tv-ref{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--muted);opacity:.55}
.tv-jauge i{position:absolute;top:0;bottom:0;background:var(--dv-moins,#e2685f);border-radius:4px}
.tv-evo{margin:18px 0 6px}
.tv-evo-h{display:flex;align-items:baseline;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,var(--muted));margin-bottom:8px}
.tv-evo-h .hint{font-weight:400;text-transform:none;letter-spacing:0;font-size:11.5px}
.tv-spark{display:block;width:100%;height:96px}
.tv-evo-non{margin:16px 0 4px;font-size:13px;color:var(--muted);
  padding:12px 14px;border:1px dashed var(--line,var(--border));border-radius:9px}
/* « ce que ça vaut » : la seule phrase qui transforme un pourcentage
   en raison d'agir */
.tv-vaut{margin:16px 0 4px;padding:14px 16px;border-radius:10px;
  background:rgba(216,181,102,.07);border:1px solid rgba(216,181,102,.22)}
.tv-vaut-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:6px}
.tv-vaut p{margin:0;font-size:14px;line-height:1.65}
.tv-gain{color:var(--dv-plus,#5fc27e);white-space:nowrap}
.tv-vaut footer{margin-top:7px;font-size:11px;color:var(--muted)}
.tv-action{display:flex;gap:9px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line,var(--border));font-size:14.5px;line-height:1.6}
.tv-action span{color:var(--accent);font-weight:800;flex:0 0 auto}
.tv-f{margin-top:12px;font-size:11px;color:var(--muted)}
.tv-next{margin-top:12px;border:1px solid var(--line,var(--border));border-radius:10px;
  padding:11px 14px;background:var(--card)}
.tv-next summary{cursor:pointer;font-size:13.5px;color:var(--ink-2,var(--muted));list-style:none}
.tv-next summary::-webkit-details-marker{display:none}
.tv-next summary::before{content:"▸ ";color:var(--accent)}
.tv-next[open] summary::before{content:"▾ "}
.tv-next-e{color:var(--muted);font-variant-numeric:tabular-nums}
.tv-p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2,var(--muted))}
.tv-fort{color:var(--dv-plus,#5fc27e)}
.tv-ok .tv-card{border-left-color:var(--dv-plus,#5fc27e)}
.tv-vide{padding:16px 18px;border:1px dashed var(--line,var(--border));border-radius:11px;color:var(--muted)}
/* la note qui réconcilie les deux lectures du bilan */
.pz-note{max-width:78ch;margin:-2px 2px 14px;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:760px){
  .tv-top{flex-direction:column;gap:14px}
  .tv-chiffres{align-self:stretch;justify-content:space-between}
  .tv-card{padding:16px 15px}
  .tv-top h3{font-size:20px}
}

  /* Sections en construction : visibles de tous, contenu réservé au mode test */
  .wip-msg{max-width:560px;margin:48px auto;padding:26px 28px;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius);text-align:center}
  .wip-ic{font-size:34px;line-height:1;margin-bottom:12px}
  .wip-msg h3{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--ink)}
  .wip-msg p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
  /* Décomposition du SR : trois barres signées + marge d'erreur */
  .sr-decomp,.sr-radar,.sr-curve{margin:0;padding:18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  /* Même registre que .card h2 : ces blocs sont désormais des cartes à part entière,
     leurs titres doivent se lire comme ceux des cartes voisines. */
  .srd-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;
            letter-spacing:.2px;color:var(--ink);font-weight:700;margin-bottom:16px}
  .srd-tag{font-size:10.5px;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:1px 7px;text-transform:none;letter-spacing:0}
  .srd-marge{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
  .srd-row{display:grid;grid-template-columns:96px 1fr 54px;align-items:center;gap:10px;margin:5px 0}
  .srd-lab{font-size:13px;color:var(--ink-2)}
  .srd-track{height:8px;background:var(--plane);border-radius:5px;overflow:hidden}
  .srd-fill{height:100%;background:var(--dv-plus);border-radius:5px}
  .srd-fill.neg{background:var(--dv-minus)}
  .srd-val{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  /* ---- Palette de données de « Ma progression » ----
     Échelle DIVERGENTE : au-dessus / en dessous de l'attendu.
     Vert/rouge assumé — c'est la convention du jeu vidéo, et elle prime ici sur
     ma préférence. ⚠️ Contrôle automatique : le vert est à ΔE 1,3 de l'or du site
     en protanopie, donc INDISTINGUABLE pour un daltonien. C'est pourquoi la
     couleur n'est JAMAIS seule à porter le sens : signe +/− sur les barres,
     ▲/▼ sur les axes du radar. Ne pas retirer ces marqueurs. */
  :root{
    --dv-plus:var(--good);   /* au-dessus de l attendu */
    --dv-minus:var(--bad);   /* en dessous */
    --dv-plus-soft:rgba(46,194,110,.16);
    --dv-minus-soft:rgba(236,106,106,.16);
  }
  /* ---- Structure de « Ma progression » ----
     Trois zones, dans l'ordre où on lit une fiche : où j'en suis, quoi travailler,
     est-ce que je progresse. Le détail chiffré vient après, replié. */
  .pz-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
            font-weight:800;margin:26px 0 10px}
  /* Sélecteur de rang : les rangs non couverts restent visibles mais éteints —
     ils annoncent ce qui vient, au lieu de faire croire qu'il n'existe qu'un rang. */
  .tiersel{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 14px}
  .ts-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
  .ts-seg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px}
  .ts-b{font-size:13px;padding:5px 13px;border-radius:6px;font-weight:600}
  .ts-b.on{background:var(--accent);color:#12110d}
  .ts-b.off{color:var(--muted);opacity:.55;cursor:not-allowed}
  .ts-note{font-size:12.5px;color:var(--muted);flex:1 1 240px;min-width:0}
  /* Réglette des paliers, dans le bloc du haut : situe le chiffre au lieu de le
     laisser seul. Les segments sont séparés par 2 px de fond, pas collés. */
  .sr-scale{flex:1 1 320px;min-width:260px;max-width:560px}
  .srs-track{position:relative;height:10px;border-radius:6px;background:var(--plane);overflow:hidden}
  .srs-seg{position:absolute;top:0;bottom:0;opacity:.5;
           border-right:2px solid var(--card);box-sizing:border-box}
  .srs-seg:last-of-type{border-right:0}
  .srs-band{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.30)}
  .srs-mark{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;
            background:var(--ink);border-radius:2px;box-shadow:0 0 0 2px var(--card)}
  .srs-ticks{position:relative;height:15px;margin-top:5px}
  .srs-tick{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--muted);
            font-variant-numeric:tabular-nums;white-space:nowrap}
  .srs-note{font-size:12px;color:var(--muted);margin-top:2px}
  .srs-note b{color:var(--ink-2);font-variant-numeric:tabular-nums}
  /* ⚠️ Les colonnes se règlent sur la largeur DISPONIBLE, pas sur celle de la
     fenêtre : la barre latérale mange ~210 px, donc une requête média se
     tromperait de presque une colonne. D'où le conteneur sur la vue elle-même. */
  #viewPlayer{container-type:inline-size}
  /* Diagnostic : le radar (le « où ») et le plan (le « quoi faire ») se lisent ensemble */
  /* ══ LE COACH ═════════════════════════════════════════════════════
     Six gestes comparés au clan. Chaque carte porte le constat ET
     l'action, plus l'échantillon sur lequel elle repose : un conseil
     sans son échantillon est une opinion. */
  #viewPlayer .coach{margin:14px 0 24px}
  /* ══ ÉTATS VIDES ══ un compte à rebours, pas une page morte ══════ */
  .cpv{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:32px 30px;margin:8px 0 18px;max-width:760px}
  .cpv-ic{font-size:30px;line-height:1;margin-bottom:14px;opacity:.9}
  .cpv h3{font-size:19px;font-weight:800;margin:0 0 8px;letter-spacing:-.015em}
  .cpv p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:62ch}
  .cpv-es{margin-top:20px;display:flex;flex-direction:column;gap:12px;max-width:420px}
  .cpv-el{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
    color:var(--muted);margin-bottom:5px}
  .cpv-el b{color:var(--ink);font-variant-numeric:tabular-nums}
  .cpv-eb{height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
  .cpv-eb i{display:block;height:100%;background:var(--accent);border-radius:4px;
    transform-origin:left center}
  .cpv-e.ok .cpv-eb i{background:var(--good)}
  .cpv-a{margin:20px 0 0;padding-left:20px;font-size:14px;line-height:1.65;color:var(--ink-2)}
  .cpv-a li{margin:0 0 9px}
  .cpv-a b{color:var(--ink)}
  .rev .cpv{animation:ccEntre .5s cubic-bezier(.16,1,.3,1) both}
  .rev .cpv-eb i{animation:ccPousse .8s cubic-bezier(.16,1,.3,1) .2s both}
  @media (prefers-reduced-motion:reduce){ .rev .cpv,.rev .cpv-eb i{animation:none} }
  /* ══ LES OBJECTIFS ════════════════════════════════════════════════
     La barre bouge parce que le joueur joue, pas parce qu on l anime :
     elle se calcule sur ses dix dernieres batailles. */
  .mss{margin:14px 0 22px}
  .mss-h h3{font-size:15.5px;margin:0 0 4px}
  .mss-h p{margin:0 0 13px;font-size:12.5px;color:var(--muted);max-width:74ch;line-height:1.55}
  .mss-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:1150px){ .mss-g{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:720px){ .mss-g{grid-template-columns:1fr} }
  .ms{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 16px;position:relative;overflow:hidden;min-width:0}
  .ms::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
  .ms.ok::before{background:var(--good)}
  .ms.rec::before{background:var(--bad)}
  .ms-r{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--bad);border:1px solid var(--bad);border-radius:20px;padding:1px 8px}
  .ms header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .ms-n{font-weight:700;font-size:14px}
  .ms-p{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;font-weight:700;
    color:var(--accent);font-variant-numeric:tabular-nums}
  .ms-b{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:#14120c;background:var(--good);border-radius:20px;padding:2px 9px}
  .ms-o{font-size:13px;color:var(--ink-2);margin:9px 0 10px}
  .ms-o b{color:var(--ink);font-variant-numeric:tabular-nums}
  .ms-j{height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
  .ms-j i{display:block;height:100%;border-radius:4px;background:var(--accent);
    transform-origin:left center}
  .ms.ok .ms-j i{background:var(--good)}
  .ms footer{margin-top:9px;font-size:11px;color:var(--muted)}
  .ms footer b{color:var(--ink-2);font-variant-numeric:tabular-nums}
  .rev #viewPlayer .ms{animation:ccEntre .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * .07s)}
  .rev #viewPlayer .ms-j i{animation:ccPousse .8s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.25s + var(--i,0) * .07s)}

  /* ══ LA FICHE, repliee par defaut ═════════════════════════════════ */
  .cc-f{margin-top:11px;border-top:1px solid var(--border);padding-top:10px}
  .cc-f summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
    font-size:12.5px;color:var(--accent);font-weight:600;user-select:none}
  .cc-f summary::-webkit-details-marker{display:none}
  .cc-fi{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:800;background:var(--accent-soft);color:var(--accent);flex:0 0 auto}
  .cc-f[open] summary{margin-bottom:9px}
  .cc-fb{font-size:12.5px;line-height:1.6;color:var(--ink-2);
    animation:ccOuvre .28s ease-out both}
  @keyframes ccOuvre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .cc-fb p{margin:0 0 8px}
  .cc-fb b{color:var(--ink)}
  .cc-fb ul{margin:0 0 8px;padding-left:18px}
  .cc-fb li{margin:0 0 5px}
  .cc-fr{border-left:2px solid var(--accent);padding-left:10px;color:var(--ink)}
  @media (prefers-reduced-motion:reduce){
    .rev #viewPlayer .ms,.rev #viewPlayer .ms-j i,.cc-fb{animation:none}
  }
  /* La carte SR poussait la page a 528 px sur un ecran de 420 : ses
     colonnes ne se repliaient jamais. Personne ne l avait vu parce que
     la carte ne rend que si le modele SR de la saison est charge. */
  @media (max-width:640px){
    #viewPlayer .sr-hero,#viewPlayer .sr-main{display:block}
    #viewPlayer .sr-main > *{min-width:0;max-width:100%}
    #viewPlayer .sr-lab,#viewPlayer .sr-name,#viewPlayer .sr-trend,
    #viewPlayer .sr-streak,#viewPlayer .hint{max-width:100%;overflow-wrap:anywhere}
    #viewPlayer .sr-scale,#viewPlayer .sr-ticks{overflow-x:auto}
  }
  #viewPlayer .sr-hero *,#viewPlayer .pz-diag > *{min-width:0}
  #viewPlayer .vd{margin:0 0 16px}
  .rev #viewPlayer .vd{animation:ccEntre .55s cubic-bezier(.16,1,.3,1) both}
  .coach-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    margin:0 0 10px;font-weight:700}
  .coach-t2{margin-top:22px}
  /* auto-FILL et non auto-fit : avec auto-fit, une carte seule s etire sur
     toute la largeur et donne l impression d un bloc rate. auto-fill garde
     les colonnes vides, la carte garde sa taille. */
  /* Trois colonnes fixes sur large : avec auto-fill, les deux groupes
     prenaient des largeurs differentes selon leur nombre de cartes et
     rien ne s alignait d un groupe a l autre. */
  .coach-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:1150px){ .coach-g{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:720px){ .coach-g{grid-template-columns:1fr} }
  .coach-c{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:15px 17px;position:relative;overflow:hidden;min-width:0}
  /* l'issue se lit dans le filet de gauche autant que dans la couleur */
  .coach-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .coach-c.ko::before{background:var(--bad)}
  .coach-c.ok::before{background:var(--good)}
  .coach-c header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .cc-n{font-weight:700;font-size:14.5px}
  .cc-e{font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700;
    font-variant-numeric:tabular-nums}
  .coach-c.ko .cc-e{color:var(--bad)} .coach-c.ok .cc-e{color:var(--good)}

  /* la jauge : le clan au centre, toi de part et d'autre */
  .cc-j{position:relative;height:6px;background:var(--surface-2);border-radius:3px;margin:11px 0 9px}
  .cc-ref{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--muted);opacity:.7}
  .cc-j i{position:absolute;top:0;bottom:0;border-radius:3px;transform-origin:left center}
  .coach-c.ko .cc-j i{background:var(--bad);transform-origin:right center}
  .coach-c.ok .cc-j i{background:var(--good)}

  .cc-v{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--muted);margin-bottom:9px}
  .cc-v b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
  .cc-v b.r{margin-left:10px;font-size:14px;color:var(--ink-2)}
  .cc-t{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
  .cc-a{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink);
    display:flex;gap:8px;padding-top:9px;border-top:1px solid var(--border)}
  .cc-a span{color:var(--accent);font-weight:700;flex:0 0 auto}
  .coach-c footer{margin-top:10px;font-size:10.5px;color:var(--muted);
    font-variant-numeric:tabular-nums}
  .coach-vide{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px;color:var(--muted);font-size:13.5px}

  /* les cartes arrivent l'une après l'autre, et les jauges poussent */
  .rev #viewPlayer .coach-c{animation:ccEntre .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * .07s)}
  @keyframes ccEntre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .rev #viewPlayer .cc-j i{animation:ccPousse .7s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.2s + var(--i,0) * .07s)}
  @keyframes ccPousse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){
    .rev #viewPlayer .coach-c,.rev #viewPlayer .cc-j i{animation:none}
  }

  .pz-diag{display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,.85fr);gap:14px;align-items:start}
  .pz-diag > *{margin:0 !important;container-type:inline-size}
  .pz-stack{display:flex;flex-direction:column;gap:14px}
  .pz-stack > *{margin:0 !important}
  #pPlanCard{margin:0 !important}
  /* Zone 3 : les deux courbes se lisent en parallèle */
  .pz-evo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:16px}
  .pz-evo > *{margin:0 !important}
  /* Seuil de la zone 2 : la colonne de gauche vaut 54 % de la place, et le radar
     ne tient en deux colonnes qu'à partir de 560 px — d'où 560/0,54 ≈ 1050. En
     dessous, une seule colonne vaut mieux : le radar y retrouve sa largeur au
     lieu de s'étirer en hauteur à côté d'un plan bien plus court.
     Zone 3 : 2 × 460 + 14, pour que la courbe ne passe pas sous sa taille de dessin. */
  @container (max-width:1050px){ .pz-diag{grid-template-columns:1fr} }
  @container (max-width:940px){ .pz-evo{grid-template-columns:1fr} }
  /* Chars : un point par char sur un axe commun, la bande étant sa marge d'erreur.
     Deux bandes qui se recouvrent = deux chars qu'on ne peut pas départager. */
  .pt-list{display:flex;flex-direction:column;gap:2px}
  .pt-r{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(120px,3fr) 92px 58px;
        gap:10px;align-items:center;padding:6px 0}
  .pt-n{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pt-b{position:relative;height:12px;background:var(--plane);border-radius:6px}
  .pt-band{position:absolute;top:2px;bottom:2px;background:var(--accent-soft);border-radius:4px}
  .pt-dot{position:absolute;top:1px;bottom:1px;width:3px;margin-left:-1.5px;background:var(--accent);border-radius:2px}
  .pt-v{font-size:13.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  .pt-m{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:5px}
  .pt-c{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
  @media (max-width:560px){
    .pt-r{grid-template-columns:1fr 76px 50px;gap:8px}
    .pt-b{grid-column:1/-1;order:3}
  }
  /* Comparaison du mois : six tuiles, la valeur d'abord, l'écart en second */
  .pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:2px;
           background:var(--border);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
  .pd-t{background:var(--card);padding:11px 13px}
  .pd-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .pd-v{font-size:21px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
  .pd-d{font-size:12.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
  .pd-up{color:var(--dv-plus)} .pd-down{color:var(--dv-minus)}
  .pd-flat,.pd-nil{color:var(--muted);font-weight:600}
  /* Records : la valeur porte, le contexte (char, carte, date) la rend rejouable */
  .pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
  .pr-t{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px}
  .pr-new{border-color:rgba(216,181,102,.45)}
  .pr-l{font-size:11.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .pr-tag{font-size:10px;background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:1px 6px;font-weight:700}
  .pr-v{font-size:22px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
  .pr-ctx{font-size:12px;color:var(--muted);margin-top:3px}
  /* Bloc repliable : les tableaux ne s'interposent plus entre le joueur et son diagnostic */
  .pz-more{margin:26px 0 16px;border-top:1px solid var(--border);padding-top:6px}
  .pz-more > summary{cursor:pointer;list-style:none;padding:12px 2px;display:flex;
    align-items:baseline;gap:10px;flex-wrap:wrap;user-select:none}
  .pz-more > summary::-webkit-details-marker{display:none}
  .pz-more > summary::before{content:"▸";color:var(--accent);font-size:13px;transition:transform .15s}
  .pz-more[open] > summary::before{transform:rotate(90deg)}
  .pz-sum{font-weight:800;font-size:15px;color:var(--ink)}
  .pz-hint{font-size:12.5px;color:var(--muted)}
  .pz-more > summary:hover .pz-sum{color:var(--accent)}
  .pz-more[open]{padding-bottom:4px}
  .pz-more > summary + *{margin-top:14px}
  /* Radar des aptitudes : la toile dorée est le niveau attendu du rôle */
  .srr-body{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:center}
  /* Le radar occupe une colonne, pas la pleine largeur : il replie son texte sous
     le graphique quand la colonne devient trop étroite pour les deux. Requête de
     CONTENEUR, pas de fenêtre — c'est la largeur de la colonne qui décide.
     Seuil : 300 (svg) + 18 (gouttière) + ~166 (texte) + 36 (marge interne).
     ⚠️ Doit rester APRÈS la règle .srr-body ci-dessus : même spécificité, c'est
     l'ordre qui tranche. */
  @container (max-width:520px){ .srr-body{grid-template-columns:1fr;gap:12px} }
  .srr-txt p{margin:0 0 9px;font-size:14px;color:var(--ink-2)}
  .srr-hint{font-size:12.5px;color:var(--muted)}
  .srd-legend{margin-top:6px;font-size:12px;color:var(--muted)}
  .sr-note{margin:12px 0 2px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--border);
    border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13.5px;color:var(--ink-2)}
  .st-present-stage.st-laser-on svg{cursor:none}
  .st-svg.st-laser-on{cursor:none}
  .st-present-note{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:82%;background:rgba(12,13,15,.9);border:1px solid var(--gold-line,#4a3f22);border-left:3px solid var(--gold);border-radius:8px;padding:9px 15px;color:#ece6d6;font-size:15px;font-weight:500;line-height:1.4;box-shadow:0 8px 26px rgba(0,0,0,.5);display:none}
  .st-present-nav{display:flex;align-items:center;gap:18px;padding-bottom:4px}
  .st-pbtn{background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:11px 20px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
  .st-pbtn:hover:not(:disabled){background:var(--gold);color:#12110d}
  .st-pbtn:disabled{opacity:.3;cursor:default}
  .st-present-ind{font-size:15px;font-weight:800;color:#ece6d6;min-width:112px;text-align:center}
  /* chat par stratégie */
  .st-chat{border-top:1px solid #202226;margin-top:6px;padding:14px 16px 16px}
  .st-chat-h{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .st-chat-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
  .st-chat-empty{color:#8b9099;font-size:13px;padding:8px 2px}
  .st-msg{background:#1a1b1e;border:1px solid #2b2d31;border-radius:11px;padding:8px 12px;max-width:82%;align-self:flex-start}
  .st-msg.mine{align-self:flex-end;background:var(--gold-soft);border-color:var(--gold-line)}
  .st-msg-who{font-size:11.5px;font-weight:700;color:var(--gold);margin-bottom:2px}
  .st-msg-t{color:#7a7f88;font-weight:500;margin-left:6px}
  .st-msg-b{font-size:14px;color:#e9ecef;white-space:pre-wrap;word-break:break-word;line-height:1.4}
  .st-chat-form{display:flex;gap:8px;margin-top:12px}
  .st-chat-in{flex:1;background:#141518;border:1px solid #2b2d31;color:#e9ecef;border-radius:9px;padding:10px 12px;font:inherit;font-size:14px}
  .st-chat-in:focus{outline:none;border-color:var(--gold)}
  /* collaborateurs (overlay) */
  .st-collab-ov{position:fixed;inset:0;z-index:9999;background:rgba(6,7,9,.72);display:flex;align-items:center;justify-content:center;padding:16px}
  .st-collab-box{background:#16171a;border:1px solid var(--gold-line);border-radius:14px;width:min(440px,100%);max-height:82vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .st-collab-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
  .st-collab-top b{font-size:16px;color:#ece6d6}
  .st-collab-hint{padding:0 18px 12px;color:#9a9280;font-size:13px}
  .st-collab-search{margin:0 18px 10px;background:#141518;border:1px solid #2b2d31;color:#e9ecef;border-radius:9px;padding:9px 12px;font:inherit;font-size:14px}
  .st-collab-search:focus{outline:none;border-color:var(--gold)}
  .st-collab-list{overflow-y:auto;padding:0 10px;display:flex;flex-direction:column}
  .st-collab-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:#e9ecef}
  .st-collab-row:hover{background:#1e1f22}
  .st-collab-row input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer}
  .st-collab-empty{color:#8b9099;padding:16px;text-align:center}
  .st-collab-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 16px;border-top:1px solid #202226;margin-top:6px}
  .st-collab-cnt{font-size:13px;color:#9a9280}
  /* présence en direct */
  .st-presence{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 6px;min-width:0}
  .st-pres{font-size:11.5px;font-weight:700;color:#9a9280;background:#1a1b1e;border:1px solid #2b2d31;border-radius:999px;padding:3px 10px;white-space:nowrap}
  .st-pres.editing{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
  /* ===== Éditeur pro : rail d'outils + options contextuelles ===== */
  .st-editor{overflow:hidden}
  .st-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#0e0f11;border-bottom:1px solid #202226;flex-wrap:wrap}
  .st-x{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:#1a1b1e;border:1px solid #2b2d31;color:#c2c5cb;font-size:14px;cursor:pointer;transition:.14s}
  .st-x:hover{border-color:#c9484a;color:#e46b6d}
  .st-name{flex:1;min-width:150px;font:inherit;font-size:16px;font-weight:800;color:#ecebe8;background:transparent;border:1px solid transparent;border-radius:8px;padding:8px 10px;transition:.14s}
  .st-name:hover{background:#141518}
  .st-name:focus{outline:none;background:#141518;border-color:var(--gold-line)}
  .st-bar-act{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
  .st-btn{display:inline-flex;align-items:center;gap:6px;background:#1e1f22;border:1px solid #2b2d31;color:#d4d7dc;border-radius:9px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap}
  .st-btn:hover{border-color:var(--gold-line);color:#fff}
  .st-btn-gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-2)}
  .st-btn-gold:hover{background:var(--gold);border-color:var(--gold);color:#12110d}
  .st-btn-save{background:var(--gold);border-color:var(--gold);color:#141207;font-weight:800}
  .st-btn-save:hover{filter:brightness(1.08);color:#141207}
  .st-work{display:flex;align-items:stretch}
  .st-rail{display:flex;flex-direction:column;gap:6px;padding:12px 10px;background:#0c0d0f;border-right:1px solid #202226;flex:0 0 auto}
  .st-rail .st-tool{flex-direction:column;gap:3px;width:58px;padding:8px 3px 6px;justify-content:center}
  .st-rail .st-tool .st-tool-ic{display:flex;align-items:center;justify-content:center}
  .st-rail .st-tool .st-tool-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .st-rail .st-tool .st-tool-l{font-size:9.5px;font-weight:700;letter-spacing:.01em;line-height:1}
  .st-canvas{flex:1;min-width:0;display:flex;flex-direction:column}
  .st-opts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;min-height:54px;background:#0e0f11;border-bottom:1px solid #202226}
  .optgrp{display:none;align-items:center;gap:7px}
  .opt-lbl{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .st-opts[data-tool="tank"] .opt-tank{display:flex}
  .st-opts[data-tool="stamp"] .opt-stamp{display:flex}
  .st-opts[data-tool="arrow"] .opt-colors,.st-opts[data-tool="line"] .opt-colors,.st-opts[data-tool="rect"] .opt-colors,.st-opts[data-tool="circle"] .opt-colors,.st-opts[data-tool="pen"] .opt-colors,.st-opts[data-tool="marker"] .opt-colors,.st-opts[data-tool="text"] .opt-colors,.st-opts[data-tool="stamp"] .opt-colors,.st-opts[data-tool="range"] .opt-colors,.st-opts[data-tool="cone"] .opt-colors,.st-opts[data-tool="path"] .opt-colors{display:flex}
  .st-opts[data-tool="arrow"] .opt-stroke,.st-opts[data-tool="line"] .opt-stroke,.st-opts[data-tool="rect"] .opt-stroke,.st-opts[data-tool="circle"] .opt-stroke,.st-opts[data-tool="pen"] .opt-stroke,.st-opts[data-tool="path"] .opt-stroke{display:flex}
  .st-opts[data-tool="cone"] .opt-cone{display:flex}
  .st-opts[data-tool="path"] .opt-path{display:flex}
  .opt-curve{display:none}
  .st-opts[data-tool="arrow"] .opt-curve,.st-opts[data-tool="line"] .opt-curve{display:inline-flex}
  .opt-stamp{flex-wrap:wrap}
  .st-stampb{width:34px;height:34px;padding:5px;background:#1a1b1e;border:1px solid #2b2d31;border-radius:9px;cursor:pointer;color:#c2c5cb;transition:.12s}
  .st-stampb .st-stamp-ic{width:100%;height:100%;display:block}
  .st-stampb:hover{border-color:#3a3d42;color:#fff}
  .st-stampb.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
  .st-szsel{display:inline-flex;gap:4px}
  .st-szb,.st-tkszb,.st-coneb,.st-formb{background:#1a1b1e;border:1px solid #2b2d31;color:#c2c5cb;border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
  .st-szb:hover,.st-tkszb:hover,.st-coneb:hover,.st-formb:hover{border-color:#3a3d42;color:#fff}
  .st-szb.on,.st-tkszb.on,.st-coneb.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
  .st-formb{border-style:dashed}
  .st-opt-hint2{font-size:12px;color:#8b9099}
  .st-textin{position:fixed;z-index:950;min-width:120px;max-width:340px;background:rgba(18,19,22,.92);border:1px solid #e5b95c;border-radius:8px;padding:4px 10px;font-family:inherit;font-weight:800;outline:none;box-shadow:0 6px 22px rgba(0,0,0,.55);caret-color:#e5b95c}
  .st-ctxmenu{position:fixed;z-index:1200;min-width:172px;background:rgba(20,21,24,.98);border:1px solid var(--gold-line,#4a3f22);border-radius:10px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:1px}
  .st-ctxitem{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:8px 12px;color:#e8e6df;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
  .st-ctxitem:hover{background:rgba(229,185,92,.15);color:#f4d78c}
  .st-ctxitem.off,.st-ctxitem:disabled{opacity:.36;cursor:default}
  .st-ctxitem.off:hover,.st-ctxitem:disabled:hover{background:none;color:#e8e6df}
  .st-ctxsep{height:1px;margin:4px 6px;background:var(--gold-line,#4a3f22);opacity:.5}
  .st-handle:hover{fill:#f4d78c}
  .opt-tank .st-count{margin-left:4px}
  .st-opt-hint{font-size:12px;color:#8b9099;flex:1 1 auto;min-width:80px}
  .st-opt-act{display:flex;gap:6px;align-items:center;margin-left:auto}
  .st-opt-sep{width:1px;height:22px;background:#2b2d31;margin:0 2px}
  .st-stage{flex:1;padding:16px;background:radial-gradient(120% 90% at 50% 0%,#131417,#0a0b0d);display:flex;justify-content:center;align-items:center;position:relative}
  /* frise de lecture du replay dans l'éditeur */
  .st-rp{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#0c0d0f;border-top:1px solid #202226}
  .st-rp-l{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);flex:0 0 auto}
  .st-rp-scrub{flex:1;min-width:120px;accent-color:var(--accent)}
  .st-rp-t{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:78px;text-align:right;flex:0 0 auto}
  .st-rp-spd{font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);background:#17181b;border:1px solid #202226;border-radius:7px;padding:4px 7px;cursor:pointer}
  .st-rp-name{font-size:11.5px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .st-rp-pin{white-space:nowrap;color:var(--accent-2)!important;border-color:rgba(216,181,102,.45)!important}
  .st-rp-prop{white-space:nowrap}
  .st-rp-prop.on{background:var(--accent-soft)!important;color:var(--accent-2)!important;border-color:var(--accent)!important}
  .st-steptab .tt{display:block;font-size:8.5px;font-weight:700;opacity:.75;line-height:1;margin-top:1px;font-variant-numeric:tabular-nums}
  .st-steps2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;background:#0e0f11;border-top:1px solid #202226}
  .st-steps2-l{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .st-stepnote{flex:1 1 220px;min-width:160px;background:#16171a;border:1px solid #2b2d31;border-radius:8px;padding:7px 11px;color:#e8e6df;font:inherit;font-size:13px;outline:none}
  .st-stepnote:focus{border-color:var(--gold);background:#1a1b1e}
  .st-stepnote::placeholder{color:#6b7079}
  .st-steps2 #stStepDel{margin-left:0}
  @media(max-width:760px){
    .st-work{flex-direction:column}
    .st-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;border-right:0;border-bottom:1px solid #202226}
    .st-rail .st-tool{width:54px}
    .st-opt-hint{display:none}
  }
  /* stage */
  .st-stage-wrap{padding:14px;background:#0c0d0f;display:flex;justify-content:center}
  .st-svg{width:100%;max-width:660px;aspect-ratio:1;border-radius:10px;background:#000;border:1px solid #2b2d31;touch-action:none;cursor:crosshair;display:block;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .st-svg image{border-radius:10px}
  .st-svg .st-el{cursor:inherit}
  .st-svg .st-sel{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px #fff)}
  .st-svg[data-tool="select"]{cursor:default}
  .st-svg[data-tool="erase"]{cursor:not-allowed}
  .st-svg[data-tool="text"],.st-svg[data-tool="marker"]{cursor:cell}
  .st-svg.spacing{cursor:grab}
  .st-svg.panning{cursor:grabbing}
  .st-marker{cursor:inherit}
  .st-svg-view{cursor:default;box-shadow:none}
  /* ===== plein écran + zoom + polish ===== */
  body.st-noscroll{overflow:hidden}
  .st-editor.st-full{position:fixed;inset:0;z-index:900;max-width:none;width:100%;height:100dvh;border-radius:0;margin:0;border:0;display:flex;flex-direction:column;box-shadow:none}
  .st-editor.st-full .st-work{flex:1;min-height:0}
  .st-editor.st-full .st-canvas{min-height:0}
  .st-editor.st-full .st-stage{padding:0;display:block;position:relative;min-height:0;overflow:hidden}
  .st-editor.st-full .st-svg{position:absolute;top:16px;left:16px;width:calc(100% - 32px);height:calc(100% - 32px);max-width:none;max-height:none;aspect-ratio:auto}
  .st-editor.st-full .st-mapgrid{max-height:none;flex:1;align-content:start}
  .st-zoom{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;background:rgba(18,19,22,.82);backdrop-filter:blur(8px);border:1px solid #2f3136;border-radius:11px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:5}
  .st-zoom button{appearance:none;border:0;background:transparent;color:#d4d7dc;cursor:pointer;font:inherit;font-weight:800;border-radius:8px;height:32px;transition:.12s}
  .st-zoom button:not(.z-lvl){width:32px;font-size:19px;line-height:1}
  .st-zoom button:hover{background:#26282c;color:#fff}
  .st-zoom .z-lvl{min-width:52px;font-size:12.5px;font-weight:700;color:var(--gold-2)}
  .st-minimap{position:absolute;left:16px;bottom:16px;width:132px;height:132px;border:1px solid #2f3136;border-radius:10px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:5;cursor:crosshair;background:#000;touch-action:none}
  .st-minimap img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;pointer-events:none;-webkit-user-select:none;user-select:none}
  .st-mini-vp{position:absolute;border:2px solid var(--gold);background:rgba(229,185,92,.14);box-shadow:0 0 0 9999px rgba(6,7,9,.42);pointer-events:none;border-radius:2px}
  .st-editor.st-full .st-minimap{width:168px;height:168px}
  .st-tool{position:relative}
  .st-tool.on{box-shadow:inset 3px 0 0 var(--gold)}
  .st-tool-k{position:absolute;top:3px;right:4px;font-size:8px;font-weight:800;color:#6b6f76;line-height:1}
  .st-tool.on .st-tool-k{color:var(--gold-2)}
  @media(max-width:760px){ .st-tool-k{display:none} .st-tool.on{box-shadow:none} }
  .st-hint{padding:9px 16px 14px;font-size:12px;color:#8b9099}
  .st-hint b{color:var(--gold-2)}
  /* strategy cards */
  .st-card-map{position:relative;aspect-ratio:16/7;overflow:hidden;background:#000}
  .st-card-map img{width:100%;height:100%;object-fit:cover}
  .st-card-mapn{position:absolute;left:8px;bottom:6px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;background:rgba(0,0,0,.4);padding:2px 7px;border-radius:6px}
  .lo-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .lo-pill{font-size:11px;font-weight:600;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .lo-cardact{display:flex;gap:6px;flex:0 0 auto;z-index:2}
  .lo-mini{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;font-size:13px;transition:.15s}
  .lo-mini:hover{border-color:var(--cls);color:var(--cls);transform:translateY(-1px)}
  .lo-minidel:hover{border-color:var(--bad);color:var(--bad)}
  .lo-sec2{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;border-top:1px solid var(--border)}
  .lo-sec2-l{width:100px;flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding-top:12px}
  .lo-dtiles{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:0}
  .lo-dtile{display:flex;flex-direction:column;align-items:center;gap:3px;width:54px}
  .lo-dtile-ic{width:46px;height:46px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;transition:transform .16s ease,border-color .16s ease}
  .lo-dtile-ic img{max-width:38px;max-height:30px;object-fit:contain}
  .lo-dtile:hover .lo-dtile-ic{transform:scale(1.14) translateY(-2px);border-color:var(--cls)}
  .lo-dtile span{font-size:9px;color:var(--ink-2);text-align:center;line-height:1.05;max-width:54px;overflow:hidden;max-height:22px}
  .lo-dtiles.sk .lo-dtile{width:40px} .lo-dtiles.sk .lo-dtile-ic{width:38px;height:38px;border-radius:9px}
  .lo-none{color:var(--muted);font-size:13px;padding-top:12px}
  .lo-note2{margin:8px 16px 0;padding:10px 12px;background:var(--surface-1);border-radius:9px;font-size:13px;color:var(--ink-2);border-left:3px solid var(--cls);line-height:1.5}
  .lo-by2{padding:9px 16px 14px;font-size:11px;color:var(--muted)}
  .lo-empty{text-align:center;padding:56px 20px;color:var(--muted)}
  .lo-empty-ic{font-size:40px;opacity:.5;margin-bottom:8px}
  .lo-empty-t{font-size:16px;font-weight:700;color:var(--ink)}
  .lo-empty-s{font-size:13px;margin-top:6px;max-width:420px;margin-left:auto;margin-right:auto}
  @keyframes loIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .lo-ed{display:flex;flex-direction:column;gap:16px}
  .lo-sec-h{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
  .lo-tilerow{display:flex;gap:10px;flex-wrap:wrap}
  .lo-tile{position:relative;width:104px;height:78px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;cursor:pointer}
  .lo-tile img{max-width:64px;max-height:40px;object-fit:contain}
  .lo-tile span{font-size:10px;line-height:1.1;text-align:center;color:var(--ink);max-width:94px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lo-tile.empty{border-style:dashed;color:var(--muted);font-size:20px;font-weight:400}
  .lo-tile.empty small{font-size:10px;font-weight:600}
  .lo-tile.filled{cursor:default;animation:loPop .22s ease}
  .lo-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
  .lo-tile{transition:transform .15s ease,border-color .15s ease}
  @keyframes loPop{from{transform:scale(.86)}to{transform:scale(1)}}
  .lo-chartile{width:154px} .lo-chartile img{max-width:132px;max-height:46px}
  .lo-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--ink-2);font-size:11px;cursor:pointer;display:grid;place-items:center;padding:0}
  .lo-x:hover{border-color:var(--accent);color:var(--accent)}
  .lu-lab textarea{width:100%}
  .lo-picker{margin-top:8px;animation:loIn .25s ease both}
  .lo-picker-box{border:1px solid var(--accent);border-radius:12px;background:var(--surface-1);padding:12px}
  .lo-picker-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .lo-picker-h b{flex:0 0 auto;font-size:13px}
  .lo-search{flex:1;min-width:140px}
  .lo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;max-height:340px;overflow-y:auto}
  .lo-fltrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .lo-fltrow select{font:inherit;font-size:12.5px;padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface-1);color:var(--ink);cursor:pointer}
  .lo-grid.lo-grid-char{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;max-height:460px}
  .lo-popt-char{padding:10px 8px;gap:6px}
  .lo-popt-char img{max-width:100%;width:150px;max-height:84px;object-fit:contain}
  .lo-popt-char span{font-size:12px;font-weight:600;max-height:none}
  .lo-popt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--border);border-radius:9px;background:var(--card);cursor:pointer;font-size:10px;transition:transform .12s ease,border-color .12s ease,background .12s ease}
  .lo-popt img{max-width:54px;max-height:36px;object-fit:contain}
  .lo-popt span{color:var(--ink);text-align:center;line-height:1.1;max-height:24px;overflow:hidden}
  .lo-popt:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px) scale(1.03)}

  /* ===== Loadouts — assistant étape par étape (thème noir/or) ===== */
  .lo-wiz{--wz-bg:#101113;--wz-pan:#17181b;--wz-rai:#1f2124;--wz-gold:#e5b95c;--wz-ink:#ecebe8;--wz-mut:#8b9099;--wz-good:#4cc077;--wz-bd:#2b2d31;--wz-bdg:rgba(229,185,92,.34);
    background:var(--wz-bg);border:1px solid var(--wz-bd);color:var(--wz-ink);padding:0;overflow:hidden}
  .wz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--wz-bd)}
  .wz-htitle{font-size:15px;font-weight:800;color:var(--wz-gold);letter-spacing:.2px}
  .wz-close{background:none;border:1px solid var(--wz-bd);color:var(--wz-mut);border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
  .wz-close:hover{border-color:#c9484a;color:#e46b6d}
  .wz-steps{display:flex;align-items:center;justify-content:center;padding:16px 20px;background:var(--wz-pan);border-bottom:1px solid var(--wz-bd);flex-wrap:wrap}
  .wz-step{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;color:var(--wz-mut);font:inherit;padding:4px 8px}
  .wz-step.lock{cursor:default;opacity:.55}
  .wz-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--wz-rai);border:1px solid var(--wz-bd);color:var(--wz-mut);transition:.18s}
  .wz-lbl{font-size:12.5px;font-weight:700;letter-spacing:.2px}
  .wz-step.cur .wz-num{background:var(--wz-gold);color:#141310;border-color:var(--wz-gold);box-shadow:0 0 0 4px rgba(229,185,92,.18)}
  .wz-step.cur .wz-lbl{color:var(--wz-ink)}
  .wz-step.done .wz-num{background:rgba(76,192,119,.18);color:var(--wz-good);border-color:rgba(76,192,119,.5)}
  .wz-step.done .wz-lbl{color:var(--wz-ink)}
  .wz-line{width:34px;height:2px;background:var(--wz-bd);margin:0 5px;border-radius:2px}
  .wz-line.on{background:rgba(76,192,119,.5)}
  .wz-body{display:grid;grid-template-columns:1fr 288px;gap:18px;padding:18px 20px}
  .wz-main{min-width:0}
  .wz-hdr{margin-bottom:14px}
  .wz-hdr h3{font-size:17px;font-weight:800;color:var(--wz-ink);margin:0 0 3px}
  .wz-hdr p{font-size:12.5px;color:var(--wz-mut);margin:0}
  .wz-cnt{color:var(--wz-gold);font-weight:800;font-variant-numeric:tabular-nums}
  .wz-cnt.over{color:#e46b6d;display:inline-block;animation:wzShake .4s}
  @keyframes wzShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  .wz-flt{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
  .wz-tier{font-size:12px;font-weight:800;color:#141310;background:var(--wz-gold);border-radius:7px;padding:7px 12px}
  .wz-flt select,.wz-flt .lo-search{font:inherit;font-size:12.5px;padding:8px 11px;border-radius:8px;border:1px solid var(--wz-bd);background:var(--wz-pan);color:var(--wz-ink)}
  .wz-flt .lo-search{flex:1;min-width:150px}
  .wz-flt select{cursor:pointer}
  .wz-grid{max-height:52vh}
  .wz-igrid,.wz-sgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .lo-wiz .lo-popt{background:var(--wz-pan);border-color:var(--wz-bd);color:var(--wz-ink)}
  .lo-wiz .lo-popt:hover{border-color:var(--wz-bdg);background:var(--wz-rai)}
  .lo-wiz .lo-popt-char.sel{border-color:var(--wz-gold);box-shadow:0 0 0 1px var(--wz-gold) inset;background:rgba(229,185,92,.10)}
  .lo-wiz .lo-popt-char.dis{opacity:.34;cursor:not-allowed;filter:grayscale(.7)}
  .lo-wiz .lo-popt-char.dis:hover{transform:none;border-color:var(--wz-bd);background:var(--wz-pan)}
  .lo-used{font-size:9px;font-weight:700;color:var(--wz-mut);text-transform:uppercase;letter-spacing:.4px}
  .lo-ok{font-size:9.5px;font-weight:800;color:var(--wz-gold)}
  .lo-wiz .lo-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:1px solid var(--wz-bd);border-radius:10px;background:var(--wz-pan);cursor:pointer;font-size:10.5px;color:var(--wz-ink);transition:transform .14s ease,border-color .14s ease,background .14s ease}
  .lo-wiz .lo-item img{max-width:56px;max-height:40px;object-fit:contain}
  .lo-wiz .lo-item span{text-align:center;line-height:1.15;max-height:26px;overflow:hidden}
  .lo-wiz .lo-item:hover{border-color:var(--wz-bdg);transform:translateY(-2px)}
  .lo-wiz .lo-item .lo-check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:var(--wz-gold);color:#141310;font-size:11px;font-weight:800;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:.16s}
  .lo-wiz .lo-item.sel{border-color:var(--wz-gold);background:rgba(229,185,92,.12);box-shadow:0 0 0 1px var(--wz-gold) inset}
  .lo-wiz .lo-item.sel .lo-check{opacity:1;transform:scale(1)}
  .lo-skill.perk img{border-radius:50%;background:var(--wz-rai)}
  .wz-rtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .wz-rtab{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid var(--wz-bd);background:var(--wz-pan);color:var(--wz-mut);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
  .wz-rtab:hover{border-color:var(--wz-bdg);color:var(--wz-ink)}
  .wz-rtab.cur{background:rgba(229,185,92,.14);border-color:var(--wz-gold);color:var(--wz-ink)}
  .wz-rn{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--wz-rai);color:var(--wz-gold);font-size:11px;font-weight:800;display:grid;place-items:center}
  .wz-rtab.cur .wz-rn{background:var(--wz-gold);color:#141310}
  .wz-rtab em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#6fb2ff;margin-left:2px}
  .wz-rtab.bonus{border-style:dashed}
  .wz-rtab.bonus.cur{border-style:solid;background:rgba(111,178,255,.12);border-color:#6fb2ff}
  .wz-rtab.bonus.cur .wz-rn{background:#6fb2ff}
  .wz-skln .wz-b{font-style:normal;font-size:8.5px;font-weight:800;text-transform:uppercase;color:#6fb2ff;margin-left:3px}
  .lo-wiz .lo-skill.univ{border-style:dashed}
  .lo-wiz .lo-skill.univ.sel{border-style:solid}
  .wz-notes{display:block;margin-top:14px;font-size:12px;font-weight:700;color:var(--wz-mut)}
  .wz-notes textarea{display:block;width:100%;margin-top:6px;background:var(--wz-pan);border:1px solid var(--wz-bd);border-radius:9px;color:var(--wz-ink);padding:9px 11px;font:inherit;font-size:13px;resize:vertical}
  .wz-side{background:var(--wz-pan);border:1px solid var(--wz-bd);border-radius:12px;padding:15px;align-self:start;position:sticky;top:12px}
  .wz-side-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--wz-gold);margin-bottom:12px}
  .wz-tk{text-align:center;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--wz-bd)}
  .wz-tk img{width:100%;max-width:170px;max-height:96px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
  .wz-tk-n{font-size:15px;font-weight:800;color:var(--wz-ink);margin-top:6px}
  .wz-tk-m{font-size:11px;color:var(--wz-mut);margin-top:2px}
  .wz-mut{color:var(--wz-mut);font-size:12px}
  .wz-sblk{margin-bottom:13px}
  .wz-sblk-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--wz-mut);margin-bottom:7px}
  .wz-chips{display:flex;gap:6px;flex-wrap:wrap}
  .wz-chip{display:flex;flex-direction:column;align-items:center;gap:2px;width:46px}
  .wz-chip img{width:38px;height:38px;object-fit:contain;background:var(--wz-rai);border:1px solid var(--wz-bd);border-radius:9px;padding:3px}
  .wz-chip span{font-size:8px;color:var(--wz-mut);text-align:center;line-height:1;max-height:18px;overflow:hidden}
  .wz-skln{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11px;color:var(--wz-ink)}
  .wz-skln span{flex:0 0 92px}
  .wz-skln b{flex:0 0 auto;font-size:10.5px;color:var(--wz-gold);font-variant-numeric:tabular-nums}
  .wz-bar{flex:1;height:6px;border-radius:4px;background:var(--wz-rai);overflow:hidden}
  .wz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--wz-gold),#f0d08a);border-radius:4px;transition:width .25s ease}
  .wz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid var(--wz-bd);background:var(--wz-pan)}
  .wz-btn{padding:11px 22px;border-radius:9px;border:1px solid var(--wz-bd);background:var(--wz-rai);color:var(--wz-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
  .wz-btn:hover{border-color:var(--wz-bdg)}
  .wz-go,.wz-save{background:var(--wz-gold);border-color:var(--wz-gold);color:#141310}
  .wz-go:hover,.wz-save:hover{background:#f0cd82;box-shadow:0 4px 14px rgba(229,185,92,.3)}
  .wz-save{background:linear-gradient(180deg,#e9c876,#e0b04f);font-weight:800}
  /* Familles d'équipement + sélecteur de grade */
  .lo-wiz{position:relative}
  .lo-gdots{display:flex;gap:3px;margin-top:1px;height:6px}
  .lo-gdot{width:6px;height:6px;border-radius:50%;background:var(--d);opacity:.4}
  .lo-gdot.on{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
  .lo-wiz .lo-eqfam.sel{border-color:var(--gcol,var(--wz-gold));box-shadow:0 0 0 1px var(--gcol,var(--wz-gold)) inset;background:rgba(255,255,255,.03)}
  .lo-wiz .lo-eqfam.sel .lo-check{background:var(--gcol,var(--wz-gold))}
  .wz-gpick{position:absolute;inset:0;background:rgba(6,7,8,.74);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:30;padding:22px;animation:loIn .18s ease both}
  .wz-gpick.hidden{display:none}
  .wz-gpick-bx{background:var(--wz-pan);border:1px solid var(--wz-bdg);border-radius:14px;padding:18px;max-width:560px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.6)}
  .wz-gpick-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
  .wz-gpick-h b{font-size:16px;color:var(--wz-ink)}
  .wz-gpick-h span{font-size:12px;color:var(--wz-mut);flex:1}
  .wz-gpick-x{background:none;border:1px solid var(--wz-bd);color:var(--wz-mut);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:13px}
  .wz-gpick-x:hover{border-color:#c9484a;color:#e46b6d}
  .lo-gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .lo-gcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:15px 10px;border:1.5px solid var(--wz-bd);border-radius:12px;background:var(--wz-bg);cursor:pointer;color:var(--wz-ink);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
  .lo-gcard:hover{transform:translateY(-2px);border-color:var(--gcol)}
  .lo-gcard.on{border-color:var(--gcol);box-shadow:0 0 0 1px var(--gcol) inset,0 8px 22px -8px var(--gcol)}
  .lo-gcard-ic{width:76px;height:56px;display:grid;place-items:center;border-radius:10px;background:var(--wz-rai);border:1px solid var(--wz-bd)}
  .lo-gcard-ic img{max-width:64px;max-height:46px;object-fit:contain}
  .lo-gcard.on .lo-gcard-ic{border-color:var(--gcol)}
  .lo-gtag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gcol)}
  .lo-gname{font-size:11px;color:var(--wz-mut);text-align:center;line-height:1.2}
  .lo-gon{font-size:10px;font-weight:800;color:var(--gcol)}
  .wz-gremove{margin-top:14px;width:100%;padding:9px;border-radius:9px;border:1px solid var(--wz-bd);background:none;color:var(--wz-mut);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
  .wz-gremove:hover{border-color:#c9484a;color:#e46b6d}
  .wz-chip[style*="--gcol"] img{border-color:var(--gcol);box-shadow:0 0 0 1px var(--gcol)}
  /* 2e configuration (barre config A/B) */
  .wz-cfg{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .wz-cfg-l{font-size:12px;font-weight:700;color:var(--wz-mut)}
  .wz-cfgb{width:34px;height:30px;border-radius:8px;border:1px solid var(--wz-bd);background:var(--wz-pan);color:var(--wz-ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
  .wz-cfgb.cur{background:var(--wz-gold);color:#141310;border-color:var(--wz-gold)}
  .wz-cfg-off{margin-left:4px;background:none;border:1px solid var(--wz-bd);color:var(--wz-mut);border-radius:8px;padding:6px 10px;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
  .wz-cfg-off:hover{border-color:#c9484a;color:#e46b6d}
  .wz-cfg-add{margin-bottom:12px;width:100%;padding:11px;border-radius:10px;border:1px dashed var(--wz-bdg);background:rgba(229,185,92,.06);color:var(--wz-gold);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
  .wz-cfg-add:hover{background:rgba(229,185,92,.12)}
  /* étape 5 : arbre de modifications de terrain par niveau (visuel, images larges + stats aérées) */
  .fm-tree{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow-y:auto;padding-right:6px}
  .fm-lvl{display:flex;align-items:flex-start;gap:14px}
  .fm-lvl-n{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--wz-rai);border:1px solid var(--wz-bd);color:var(--wz-gold);display:grid;place-items:center;font-size:14px;font-weight:800;margin-top:8px}
  .fm-lvl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
  .fm-base{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--wz-pan);border:1px solid var(--wz-bd);border-radius:11px}
  .fm-b-tag{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#141310;background:var(--wz-good);border-radius:5px;padding:3px 8px}
  .fm-base-st{flex:1;display:flex;flex-wrap:wrap;gap:6px 16px}
  .fm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fm-opt{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;min-height:96px;border:2px solid var(--wz-bd);border-radius:13px;background:var(--wz-pan);color:var(--wz-ink);cursor:pointer;font:inherit;text-align:left;transition:.15s}
  .fm-opt-ic{flex:0 0 72px;width:72px;height:72px;display:grid;place-items:center;background:var(--wz-rai);border:1px solid var(--wz-bd);border-radius:12px}
  .fm-opt-ic img{width:64px;height:64px;object-fit:contain}
  .fm-opt-ic.noimg{background:transparent;border-color:transparent}
  .fm-opt-ph{font-size:30px;color:var(--wz-mut);opacity:.5}
  .fm-opt-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .fm-st{font-size:13.5px;line-height:1.4;color:var(--wz-ink);font-variant-numeric:tabular-nums}
  .fm-base-st .fm-st{font-size:12.5px;color:var(--wz-mut)}
  .fm-opt:hover{border-color:var(--wz-bdg);transform:translateY(-2px)}
  .fm-opt.on{border-color:var(--wz-gold);background:rgba(229,185,92,.12);box-shadow:0 0 0 1px var(--wz-gold) inset}
  .fm-opt.on .fm-opt-ic{border-color:var(--wz-gold)}
  .fm-fcard{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border:2px solid var(--wz-bdg);border-radius:14px;background:rgba(229,185,92,.06);color:var(--wz-ink);cursor:pointer;font:inherit;transition:.15s}
  .fm-fcard img{width:64px;height:48px;object-fit:contain;flex:0 0 64px}
  .fm-fc-t{flex:1;font-size:16px;font-weight:800}
  .fm-fcard:hover{background:rgba(229,185,92,.12);transform:translateY(-1px)}
  .fm-fcard.on{border-color:var(--wz-good);background:rgba(76,192,119,.13)}
  .fm-chk{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--wz-bd);display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--wz-mut)}
  .fm-fcard.on .fm-chk,.fm-opt.on .fm-chk{background:var(--wz-good);color:#0b0c0c;border-color:var(--wz-good)}
  .wz-fmsum{display:flex;gap:5px;flex-wrap:wrap}
  .wz-fmtag{font-size:10px;font-weight:700;color:var(--wz-gold);background:rgba(229,185,92,.12);border:1px solid var(--wz-bd);border-radius:6px;padding:2px 7px}
  @media(max-width:640px){ .fm-pair{grid-template-columns:1fr} }
  @media(max-width:820px){ .wz-body{grid-template-columns:1fr} .wz-side{position:static} .wz-line{width:18px} .fm-pair{grid-template-columns:1fr} }

  @media(max-width:840px){ .bl-metar{display:none} }
  @media(max-width:720px){
    .bl-head{gap:10px;padding:10px 12px;min-height:78px}
    .bl-mapinfo{width:96px;flex-basis:96px} .bl-mapinfo .nm{font-size:13px}
    .bl-bg img{width:70%} .bl-bg .sh{background:linear-gradient(90deg,rgba(14,13,10,.45) 0%,rgba(14,13,10,.8) 20%,var(--card) 62%)}
    .bl-match{gap:10px} .bl-team{width:auto} .bl-team .tag{display:none}
    .bl-emblem{width:38px;height:38px}
    .bl-scorebox{min-width:70px} .bl-scorebox .sc{font-size:22px}
    .bl-sr{padding:5px 9px;min-width:52px} .bl-sr .val{font-size:14px}
  }

/* ══ ACCUEIL — même monde visuel que la page du mod ══════════════════
   Tout est scopé sous #landing : l'application garde ses propres règles. */
#landing{max-width:none;margin:0;padding:0;
  --ld-gold:#d8b566; --ld-gold-hi:#f0d497; --ld-ink:#f7f6f2; --ld-ink2:#c2beb4;
  --ld-ink3:#8d8a80; --ld-rule:rgba(255,255,255,.08); --ld-rule2:rgba(255,255,255,.15);
  --ld-plate:#1c1b18; --ld-live:#5fc27e; --ld-halt:#e2685f;
  --ld-cond:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --ld-sans:"IBM Plex Sans",system-ui,sans-serif;
  --ld-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-family:var(--ld-sans);color:var(--ld-ink);
  background:
    radial-gradient(ellipse 90% 50% at 50% -6%, rgba(216,181,102,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);}
#landing .sh{max-width:1180px;margin:0 auto;padding:0 24px}
#landing a{color:var(--ld-gold)}
#landing .lnav{display:flex;align-items:center;gap:16px;height:64px;
  border-bottom:1px solid var(--ld-rule);position:sticky;top:0;z-index:30;
  background:rgba(10,10,9,.84);backdrop-filter:blur(14px)}
#landing .lbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ld-ink);
  height:44px;padding-right:4px}
#landing .lbrand .mk{width:34px;height:34px;background:#141310;border-radius:9px;display:grid;
  place-items:center;padding:5px;box-shadow:inset 0 0 0 1px rgba(216,181,102,.3)}
#landing .lbrand .mk svg{width:100%;height:100%}
#landing .lbrand b{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
#landing .lbrand b em{font-style:normal;color:var(--ld-gold)}
#landing .lsp{margin-left:auto}
#landing .llk{font-size:14px;font-weight:500;color:var(--ld-ink2);text-decoration:none;height:44px;
  padding:0 14px;display:inline-flex;align-items:center;border-radius:3px;
  transition:color .16s,background .16s}
#landing .llk:hover{color:var(--ld-ink);background:rgba(255,255,255,.05)}
#landing .lgo{font-family:var(--ld-cond);font-weight:700;font-size:15px;color:#14120c;
  background:var(--ld-gold);text-decoration:none;height:44px;padding:0 20px;display:inline-flex;
  align-items:center;border-radius:3px;transition:background .16s,transform .16s;cursor:pointer;
  border:0;font-family:var(--ld-cond)}
#landing .lgo:hover{background:var(--ld-gold-hi);transform:translateY(-1px)}
@media(max-width:720px){#landing .llk{display:none}}

#landing .lhero{padding:70px 0 54px;text-align:center;position:relative;overflow:hidden}
#landing .lmark{width:96px;height:96px;margin:0 auto 26px;background:#141310;border-radius:24px;
  display:grid;place-items:center;padding:11px;
  box-shadow:inset 0 0 0 1px rgba(216,181,102,.28),0 18px 44px -18px rgba(0,0,0,.6)}
#landing .lkick{font-family:var(--ld-mono);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ld-gold);margin:0 0 16px}
#landing h1{font-family:var(--ld-cond);font-weight:700;font-size:clamp(42px,6.4vw,76px);
  line-height:.96;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance;color:var(--ld-ink)}
#landing h1 .dim{color:var(--ld-ink3)}
#landing .lled{font-size:clamp(16px,1.6vw,19px);color:var(--ld-ink2);max-width:56ch;
  margin:0 auto 32px;line-height:1.6}
#landing .lacts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
#landing .lbtn{font-family:var(--ld-cond);font-weight:700;font-size:17px;text-decoration:none;
  padding:0 28px;height:54px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:background .16s,transform .16s,border-color .16s,color .16s}
#landing .lbtn-1{background:var(--ld-gold);color:#14120c;box-shadow:0 12px 26px -12px rgba(0,0,0,.75)}
#landing .lbtn-1:hover{background:var(--ld-gold-hi);transform:translateY(-2px)}
#landing .lbtn-2{color:var(--ld-ink);border-color:var(--ld-rule2);background:rgba(255,255,255,.02)}
#landing .lbtn-2:hover{border-color:var(--ld-gold);color:var(--ld-gold);transform:translateY(-2px)}
#landing .lspec{font-family:var(--ld-mono);font-size:12px;color:var(--ld-ink3);letter-spacing:.04em;margin:0}

#landing .lsec{padding:70px 0;border-top:1px solid var(--ld-rule)}
#landing .lsh{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
#landing .lsn{font-family:var(--ld-mono);font-size:11.5px;color:var(--ld-gold);letter-spacing:.16em}
#landing h2{font-family:var(--ld-cond);font-weight:700;font-size:clamp(28px,3.6vw,42px);
  line-height:1.03;letter-spacing:-.022em;margin:0;color:var(--ld-ink);text-wrap:balance}
#landing .lsub{color:var(--ld-ink2);max-width:58ch;margin:0 0 40px;font-size:16.5px}

#landing .lscr{background:linear-gradient(180deg,#191d21,#141719);border:1px solid var(--ld-rule2);
  border-radius:6px;overflow:hidden;box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
#landing figure:hover .lscr{transform:translateY(-4px);border-color:rgba(216,181,102,.34)}
#landing .lscr-b{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#101315;
  border-bottom:1px solid rgba(0,0,0,.6)}
#landing .lscr-b i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.13)}
#landing .lscr-t{margin-left:10px;font-family:var(--ld-mono);font-size:11px;color:var(--ld-ink3)}
#landing .lmap{display:block;width:100%;height:auto}
#landing .lctl{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101315;
  border-top:1px solid rgba(0,0,0,.5)}
#landing .lctl .p{color:var(--ld-gold);font-size:12px}
#landing .lctl .b{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
#landing .lctl .b i{display:block;width:46%;height:100%;background:var(--ld-gold)}
#landing .lctl .s{font-family:var(--ld-mono);font-size:11px;color:var(--ld-ink3)}
#landing figure{margin:0}
#landing figcaption{color:var(--ld-ink2);font-size:15px;margin-top:18px;max-width:62ch;line-height:1.6}
#landing figcaption b{display:block;color:var(--ld-ink);font-family:var(--ld-cond);font-weight:700;
  font-size:19px;margin-bottom:5px}
#landing .lduo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;
  margin-top:26px;align-items:stretch}
#landing .lduo figure{display:flex;flex-direction:column}
#landing .lduo .lscr{flex:1;display:flex;flex-direction:column}
#landing .lduo .lscr>:not(.lscr-b){flex:1;display:flex;flex-direction:column;justify-content:center}
#landing .lsr{padding:26px 24px}
#landing .lsr-r{display:flex;align-items:center;gap:16px;margin-bottom:22px}
#landing .lsr-n{font-family:var(--ld-cond);font-weight:700;font-size:52px;line-height:1;color:#4f97ee}
#landing .lsr-t{font-family:var(--ld-cond);font-weight:700;font-size:17px;color:#4f97ee}
#landing .lsr-s{font-family:var(--ld-mono);font-size:11px;color:var(--ld-ink3);margin-top:3px}
#landing .lsr-k{position:relative;height:10px;background:#0d1012;border-radius:5px;overflow:hidden}
#landing .lsr-k s{position:absolute;top:0;bottom:0;opacity:.55;border-right:2px solid #191d21;
  text-decoration:none}
#landing .lsr-k u{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;
  background:var(--ld-ink);border-radius:2px;box-shadow:0 0 0 2px #191d21}
#landing .lsr-x{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--ld-mono);
  font-size:9.5px;color:var(--ld-ink3)}
#landing .lrad{padding:14px 10px}
#landing .lrad svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}

#landing .lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
#landing .lcard{background:linear-gradient(180deg,var(--ld-plate),#171614);
  border:1px solid var(--ld-rule);border-radius:3px;padding:24px 24px 22px;
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s}
#landing .lcard:hover{transform:translateY(-4px);border-color:rgba(216,181,102,.32)}
#landing .lcard .n{font-family:var(--ld-mono);font-size:11px;color:var(--ld-gold);letter-spacing:.14em}
#landing .lcard h3{font-family:var(--ld-cond);font-weight:700;font-size:20px;margin:8px 0 7px;
  color:var(--ld-ink)}
#landing .lcard p{color:var(--ld-ink2);font-size:14.5px;margin:0;line-height:1.6}

#landing .lend{padding:100px 0;text-align:center;
  background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(216,181,102,.1),transparent 70%)}
#landing .lend p{color:var(--ld-ink2);max-width:46ch;margin:14px auto 30px}
#landing .lfoot{border-top:1px solid var(--ld-rule);padding:34px 0 50px;color:var(--ld-ink3);font-size:13.5px}
#landing .lfn{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
#landing .lfn a,#landing .lfn button{color:var(--ld-ink2);text-decoration:none;padding:12px 13px;
  border-radius:3px;display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;
  cursor:pointer;background:none;border:0;font-family:inherit}
#landing .lfn a:hover,#landing .lfn button:hover{color:var(--ld-ink);background:rgba(255,255,255,.045)}
#landing .lfoot p{max-width:74ch;line-height:1.7;margin:0}

/* la bataille se joue — même boucle que sur la page du mod */
@keyframes ldTrace{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@keyframes ldRoule{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes ldTir{0%,54%{opacity:0}58%,70%{opacity:1}76%,100%{opacity:0}}
@keyframes ldBoom{0%,56%{opacity:0;transform:scale(.4)}62%{opacity:1;transform:scale(1)}
  78%,100%{opacity:0;transform:scale(1.5)}}
@keyframes ldMort{0%,72%{opacity:0;transform:scale(.5)}78%,100%{opacity:1;transform:scale(1)}}
@keyframes ldTete{from{width:2%}to{width:96%}}
#landing .lmap .v{stroke-dasharray:400;animation:ldTrace 11s linear infinite}
#landing .lmap .c{offset-rotate:0deg;animation:ldRoule 11s linear infinite}
#landing .lmap .c1{offset-path:path("M92 176C150 190 196 214 236 232")}
#landing .lmap .c2{offset-path:path("M96 126C154 108 200 86 238 72")}
#landing .lmap .c3{offset-path:path("M100 150C168 148 214 150 250 152")}
#landing .lmap .c4{offset-path:path("M92 176C140 184 174 190 196 196")}
#landing .lmap .c5{offset-path:path("M96 126C120 120 138 116 150 112")}
#landing .lmap .c6{offset-path:path("M628 124C566 104 512 86 470 74")}
#landing .lmap .c7{offset-path:path("M624 178C570 200 522 220 486 234")}
#landing .lmap .c8{offset-path:path("M636 150C592 150 552 150 520 150")}
#landing .lmap .sh2{animation:ldTir 11s linear infinite}
#landing .lmap .bo{transform-box:fill-box;transform-origin:center;animation:ldBoom 11s linear infinite}
#landing .lmap .ki{transform-box:fill-box;transform-origin:center;animation:ldMort 11s linear infinite}
#landing .lctl .b i{animation:ldTete 11s linear infinite}
@media (prefers-reduced-motion:reduce){
  #landing .lmap .v,#landing .lmap .c,#landing .lmap .sh2,#landing .lmap .bo,
  #landing .lmap .ki,#landing .lctl .b i{animation:none}
  #landing .lmap .v{stroke-dasharray:none}
  #landing .lmap .c{offset-distance:88%}
  #landing .lmap .sh2,#landing .lmap .bo,#landing .lmap .ki{opacity:1}
  #landing .lscr,#landing .lcard,#landing .lbtn{transition:none}
}
@media(max-width:620px){
  #landing .lhero{padding:48px 0 40px}
  #landing .lsec{padding:56px 0}
  #landing .lacts{flex-direction:column}
  #landing .lacts .lbtn{width:100%}
}


/* ══ MOTION ══════════════════════════════════════════════════════════
   Une séquence à l'ouverture, puis des révélations qui varient selon ce
   qu'elles montrent. Rien n'est caché par le CSS seul : la classe .lmo est
   posée par le script, donc sans JS tout reste visible. */
#landing .lprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
#landing .lprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,
  rgba(216,181,102,.35),var(--ld-gold));transition:width .1s linear}

/* le titre se dévoile par volet, comme une plaque qu'on découvre */
#landing h1 .ln{display:block;overflow:hidden}
#landing h1 .ln i{display:block;font-style:normal}
@keyframes ldVolet{from{transform:translateY(102%)}to{transform:none}}
@keyframes ldMonte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ldTrait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldPlaque{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ldGlisse{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes ldMarque{from{opacity:0;transform:scale(.7) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes ldSouffle{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes ldBalaye{0%{transform:translateX(0)}100%{transform:translateX(860px)}}
@keyframes ldRemplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldRepere{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes ldToile{from{opacity:0;transform:translate(160px,102px) scale(.72)}
                   to{opacity:1;transform:translate(160px,102px) scale(1)}}
@keyframes ldLueur{0%,100%{opacity:.55}50%{opacity:1}}

/* ouverture : la seule séquence orchestrée de la page */
.lmo #landing .lmark{animation:ldMarque .8s .05s cubic-bezier(.16,1,.3,1) both}
.lmo #landing .lmark::after{content:"";position:absolute;inset:-14px;border-radius:30px;
  background:radial-gradient(circle,rgba(216,181,102,.22),transparent 70%);
  animation:ldLueur 5s 1s ease-in-out infinite;pointer-events:none;z-index:-1}
.lmo #landing .lmark{position:relative}
.lmo #landing .lkick{animation:ldMonte .6s .34s cubic-bezier(.16,1,.3,1) both}
.lmo #landing h1 .ln:nth-child(1) i{animation:ldVolet .85s .44s cubic-bezier(.16,1,.3,1) both}
.lmo #landing h1 .ln:nth-child(2) i{animation:ldVolet .85s .56s cubic-bezier(.16,1,.3,1) both}
.lmo #landing .lled{animation:ldMonte .7s .74s cubic-bezier(.16,1,.3,1) both}
.lmo #landing .lacts{animation:ldMonte .7s .86s cubic-bezier(.16,1,.3,1) both}
.lmo #landing .lspec{animation:ldMonte .7s .96s cubic-bezier(.16,1,.3,1) both}

/* révélations au défilement, une par type de contenu */
.lmo #landing .rv2{opacity:0}
.lmo #landing .rv2.vu{opacity:1}
.lmo #landing .rv2[data-a="up"].vu{animation:ldMonte .75s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0)*90ms)}
.lmo #landing .rv2[data-a="plate"].vu{animation:ldPlaque .9s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0)*120ms)}
.lmo #landing .rv2[data-a="head"]{opacity:1}
.lmo #landing .rv2[data-a="head"] .lsn{opacity:0}
.lmo #landing .rv2[data-a="head"] h2{opacity:0}
.lmo #landing .rv2[data-a="head"].vu .lsn{animation:ldRepere .6s cubic-bezier(.16,1,.3,1) both}
.lmo #landing .rv2[data-a="head"].vu h2{animation:ldMonte .8s .1s cubic-bezier(.16,1,.3,1) both}
/* le filet de section se trace quand la section entre */
#landing .lsec{position:relative}
#landing .lsec::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--ld-gold),transparent 60%);transform-origin:left;transform:scaleX(0)}
.lmo #landing .lsec.vu::before{animation:ldTrait 1.1s cubic-bezier(.16,1,.3,1) both}

/* la carte : un balayage lent, comme un radar qui repasse */
#landing .lmap .scan{animation:ldBalaye 11s linear infinite}
/* le SR se remplit et son repère glisse en place */
#landing .lsr-k s{transform-origin:left}
.lmo #landing .lsr-k s{transform:scaleX(0)}
.lmo #landing figure.vu .lsr-k s{animation:ldRemplit .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--d,0)*70ms)}
.lmo #landing .lsr-k u{opacity:0}
.lmo #landing figure.vu .lsr-k u{animation:ldMonte .6s .5s cubic-bezier(.16,1,.3,1) both}
/* le radar se déploie depuis son centre */
.lmo #landing .lrad svg > g:first-of-type{transform-origin:0 0}
.lmo #landing figure.vu .lrad svg > g:first-of-type{animation:ldToile .9s .15s cubic-bezier(.16,1,.3,1) both}

/* micro-interactions : un reflet balaye le bouton principal */
#landing .lbtn-1,#landing .lgo{position:relative;overflow:hidden}
#landing .lbtn-1::after,#landing .lgo::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  left:-45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .55s cubic-bezier(.16,1,.3,1)}
#landing .lbtn-1:hover::after,#landing .lgo:hover::after{left:118%}
#landing .lbrand .mk{transition:transform .4s cubic-bezier(.16,1,.3,1)}
#landing .lbrand:hover .mk{transform:rotate(-8deg) scale(1.06)}
#landing .lcard .n{transition:letter-spacing .3s ease}
#landing .lcard:hover .n{letter-spacing:.22em}

@media (prefers-reduced-motion:reduce){
  .lmo #landing .lmark,.lmo #landing .lkick,.lmo #landing h1 .ln i,.lmo #landing .lled,
  .lmo #landing .lacts,.lmo #landing .lspec,.lmo #landing .rv2,.lmo #landing .rv2.vu,
  .lmo #landing .rv2[data-a="head"] .lsn,.lmo #landing .rv2[data-a="head"] h2,
  .lmo #landing .lsr-k s,.lmo #landing .lsr-k u,.lmo #landing .lsec::before,
  #landing .lmap .scan,.lmo #landing .lmark::after{animation:none!important;opacity:1!important;
    transform:none!important}
  #landing .lsec::before{transform:scaleX(1)}
  #landing .lprog i,#landing .lbtn-1::after,#landing .lgo::after,
  #landing .lbrand .mk,#landing .lcard .n{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════
   RÉCIT ET MISE EN SCÈNE DU TABLEAU DE BORD
   Le verdict (#cpVerdict) ouvre la vue clan : une phrase, un chiffre,
   la forme récente. Il reprend le rôle de la carte « Santé du clan »,
   qui est masquée tant qu'il s'affiche (classe .cp-verdict sur #viewClan).
   .cin = ouverture, jouée une seule fois puis retirée.
   .rev = révélation à l'approche, permanente.
   Aucun contenu n'est masqué par le CSS seul : les deux classes sont
   posées par le script, avec minuteurs de secours.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ 1. corrections mesurées (barre du haut, familles de menu) ══ */
.tb-title{font-size:16px}
.tb-sub{opacity:.85}
.nav-sec{font:600 10px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  padding:16px 16px 7px;user-select:none}
.nav-sec:first-child{padding-top:6px}
.sidebar.collapsed .nav-sec{padding:9px 12px 8px;font-size:0;letter-spacing:0}
.sidebar.collapsed .nav-sec::after{content:"";display:block;height:1px;background:var(--border)}
.side-item .si-lbl{overflow:visible;text-overflow:clip}
.side-item{padding-right:10px}
.side-item .si-new{margin-left:auto}
.d2sect .src{margin-left:auto;font:400 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--muted)}

/* ══ 2. LE VERDICT — le sommet de la hiérarchie ══ */
.vd{position:relative;overflow:hidden;margin:0 0 16px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
/* le balayage doré : une lumière passe une fois, à l'ouverture */
.vd::after{content:"";position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(229,185,92,.10) 45%,transparent);
  transform:translateX(-140%)}
.cin .vd::after{animation:vdBalaye 1.5s cubic-bezier(.3,0,.2,1) .25s both}
@keyframes vdBalaye{to{transform:translateX(360%)}}

.vd-t{font:800 clamp(26px,3.4vw,40px)/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.022em;margin:0 0 10px}
.vd-t em{font-style:normal;color:var(--accent-2)}
.vd-p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;max-width:62ch}
.vd-p b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.vd-p .up{color:var(--good);font-weight:700}
.vd-p .dn{color:var(--bad);font-weight:700}
.vd-p .who{color:var(--accent-2);font-weight:700}

/* le chiffre-clé : le seul de cette taille sur toute la page */
.vd-n{text-align:right;line-height:1}
.vd-n b{display:block;font:800 clamp(56px,7.4vw,86px)/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,var(--ink) 30%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vd-n i{display:block;font-style:normal;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
/* la forme récente, sous le chiffre : dix barres, la plus récente à droite */
.vd-f{display:flex;gap:4px;justify-content:flex-end;margin-top:14px;height:34px;align-items:flex-end}
.vd-f i{width:9px;border-radius:3px;display:block;font-style:normal;transform-origin:bottom}
.vd-f i.v{background:var(--good)}
.vd-f i.d{background:var(--bad);opacity:.62}
.cin .vd-f i{animation:vdMonte .5s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.42s + var(--i) * .045s)}
@keyframes vdMonte{from{transform:scaleY(.06);opacity:0}to{transform:scaleY(1);opacity:1}}
@media (max-width:820px){
  .vd{grid-template-columns:1fr;gap:18px;padding:22px}
  .vd-n{text-align:left}.vd-f{justify-content:flex-start}
}

/* ══ 3. la preuve rétrécit : elle appuie le verdict, elle ne le concurrence pas ══ */
/* Le verdict a repris le rôle exact de « Santé du clan » : même
   pourcentage, mêmes dix barres, même série en cours. Afficher les deux,
   c'est dire deux fois la même chose à 40 px d'écart. La classe .cp-verdict
   n'est posée QUE si le verdict s'est réellement affiché — sinon la carte
   d'origine reste, et rien n'est perdu. */
#viewClan.cp-verdict #dashHealth{display:none}
#viewClan.cp-verdict .d2top3{grid-template-columns:1fr 1fr}
#viewClan .d2top3 .d2card .big{font-size:34px}
#viewClan .d2mini4 .mini .v{font-size:24px}
#viewClan .d2off5 .off{background:var(--surface-1);box-shadow:none}
#viewClan .d2off5 .off .v{font-size:19px;color:var(--ink-2)}

/* ══ 4. la séquence d'ouverture ══ */
.cin .vd{animation:cinLeve .62s cubic-bezier(.16,1,.3,1) both}
.cin .d2top3 > *{animation:cinLeve .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.30s + var(--di,0) * .07s)}
.cin .d2mini4 > *{animation:cinLeve .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.52s + var(--di,0) * .055s)}
.cin .d2off5 > *{animation:cinLeve .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.72s + var(--di,0) * .045s)}
@keyframes cinLeve{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ══ 5. révélation à l'approche, pour tout ce qui est plus bas ══ */
/* .rv ne masque QUE si le script a posé .cin : sans JS, tout reste visible */
.rev .rv{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rev .rv.vu{opacity:1;transform:none}

/* les lignes du classement arrivent l'une après l'autre */
.rev .rv.vu #tbody tr{animation:cinLigne .42s ease-out both}
@keyframes cinLigne{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
.rev .rv.vu #tbody tr:nth-child(1){animation-delay:0ms}
.rev .rv.vu #tbody tr:nth-child(2){animation-delay:38ms}
.rev .rv.vu #tbody tr:nth-child(3){animation-delay:76ms}
.rev .rv.vu #tbody tr:nth-child(4){animation-delay:114ms}
.rev .rv.vu #tbody tr:nth-child(5){animation-delay:152ms}
.rev .rv.vu #tbody tr:nth-child(6){animation-delay:190ms}
.rev .rv.vu #tbody tr:nth-child(7){animation-delay:228ms}
.rev .rv.vu #tbody tr:nth-child(8){animation-delay:266ms}
.rev .rv.vu #tbody tr:nth-child(9){animation-delay:304ms}
.rev .rv.vu #tbody tr:nth-child(10){animation-delay:342ms}
.rev .rv.vu #tbody tr:nth-child(11){animation-delay:380ms}
.rev .rv.vu #tbody tr:nth-child(12){animation-delay:418ms}
.rev .rv.vu #tbody tr:nth-child(13){animation-delay:456ms}
.rev .rv.vu #tbody tr:nth-child(14){animation-delay:494ms}

/* les barres du top 5 se remplissent quand on les atteint */
#dashTop5 .tk .fl{transition:width .95s cubic-bezier(.16,1,.3,1)}
.rev #dashTop5.rv:not(.vu) .tk .fl{width:0 !important}

/* ══ 6. micro-interactions : ce qui est vivant le montre ══ */
#viewClan .d2card,#viewClan .mini,#viewClan .off{
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s ease,box-shadow .22s ease}
#viewClan .d2card:hover,#viewClan .mini:hover{
  transform:translateY(-3px);border-color:var(--ring);box-shadow:0 10px 26px -14px rgba(0,0,0,.65)}
#viewClan .off:hover{transform:translateY(-2px);border-color:var(--ring)}
/* la ligne survolée porte un repère doré à gauche */
#tbl tbody tr{position:relative}
#tbl tbody tr td:first-child{position:relative}
#tbl tbody tr td:first-child::before{
  content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:center;
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
#tbl tbody tr:hover td:first-child::before{transform:scaleY(1)}
/* le battement de la prochaine activité */
@keyframes vdPouls{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.cin .h2-star{animation:vdPouls 2.6s ease-in-out infinite}

/* ══ 7. mouvement réduit : tout se fige sur l'image finale ══ */
@media (prefers-reduced-motion:reduce){
  .cin .vd,.cin .vd::after,.cin .vd-f i,.cin .d2top3 > *,.cin .d2mini4 > *,
  .cin .d2off5 > *,.cin #tbody tr,.cin .h2-star{animation:none !important}
  .rev .rv{opacity:1 !important;transform:none !important;transition:none}
  #viewClan .d2card:hover,#viewClan .mini:hover,#viewClan .off:hover{transform:none}
  #dashTop5 .tk .fl{transition:none}
}


/* ═══ BANDEAU DE VERDICT — jauge, courbe de forme, barres ═══════════ */
/* Deux rangées : le chiffre accompagne le titre, la courbe a la largeur
   pour elle. Avant, la jauge, la courbe et les dix barres se disputaient
   la même bande — et le pourcentage était écrit deux fois. */
.vd{display:block}
.vd-haut{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start}
.vd-g{min-width:0}
.vd-n{text-align:right;line-height:1;flex:0 0 auto}
.vd-n b{letter-spacing:-.035em}
.vd-n i{margin-top:6px;font-size:10.5px}
.vd-f{display:flex;gap:4px;align-items:flex-end;height:26px}

/* la courbe de forme : la trajectoire, pas seulement le point d'arrivée */
.vd-c{margin:20px 0 0;min-width:0;position:relative;
  border-top:1px solid var(--border);padding-top:16px}
.vd-ch{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.vd-c figcaption{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.vd-c svg{width:100%;height:78px;display:block;overflow:visible}
/* preserveAspectRatio="none" étire le tracé : sans ceci l'épaisseur varie */
.vd-c path,.vd-c line{vector-effect:non-scaling-stroke}
.vd-c .ref{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 4;opacity:.75}
.vd-c .aire{fill:var(--accent);opacity:.13;stroke:none}
.vd-c .trait{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* le conteneur épouse exactement le cadre du tracé : l'étiquette peut
   donc s'aligner sur la ligne de référence au lieu du bas du cadre */
.vd-cw{position:relative}
.vd-c50{position:absolute;right:2px;top:var(--y50);transform:translateY(-50%);
  font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--card);padding:0 4px;line-height:1.3;border-radius:3px}
.cin .vd-c .trait{stroke-dasharray:1400;animation:vdTrace 1.4s cubic-bezier(.3,0,.2,1) .45s both}
@keyframes vdTrace{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.cin .vd-c .aire{animation:vdFond .8s ease-out .9s both}
@keyframes vdFond{from{opacity:0}to{opacity:.13}}

@media (max-width:640px){
  .vd-haut{grid-template-columns:1fr;gap:14px}
  .vd-n{text-align:left}
  .vd-ch{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ═══ TOP 5 — IMPACT DÉCOMPOSÉ ═════════════════════════════════════ */
/* ── Infobulle : trois couleurs ne veulent rien dire sans légende, et
      une légende de trois mots ne suffit pas non plus. Au survol, on
      donne le nom, la valeur, sa part, et la DÉFINITION. ── */
.t5bulle{position:fixed;top:0;left:0;z-index:300;max-width:290px;pointer-events:none;
  background:var(--panel-2,#101113);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;box-shadow:0 12px 32px -10px rgba(0,0,0,.75);
  display:flex;flex-direction:column;gap:4px;
  font:400 12.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.t5bulle[hidden]{display:none}
.t5bulle b{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.t5bulle .v{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.t5bulle .d{color:var(--ink-2);font-size:12px;line-height:1.5}

.t5leg{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px}
.t5l{cursor:help;border-radius:4px;padding:2px 4px;margin:-2px -4px;
  transition:background .14s}
.t5l:hover{background:rgba(255,255,255,.05)}
.t5s{cursor:help}
.t5s:focus-visible,.t5l:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.t5l{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.t5l i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
#dashTop5 .t5{position:relative;gap:15px;padding-top:14px}
#dashTop5 .t5row{align-items:flex-start}
#dashTop5 .t5rk{margin-top:2px}
.t5head{margin-bottom:6px}
/* la barre empilée : 2 px de fond entre les segments, sinon deux séries
   voisines se touchent et se lisent comme une seule */
.t5bar{display:flex;height:13px;border-radius:4px;overflow:hidden;background:var(--surface-2);
  transform-origin:left center}
.t5s{display:block;height:100%;border-right:2px solid var(--card);
  transition:filter .16s}
.t5s:last-child{border-right:0}
.t5row:hover .t5s{filter:brightness(1.1)}
/* le segment SURVOLÉ ressort, les autres s'effacent : on sait lequel on lit */
.t5bar:hover .t5s{opacity:.42;transition:opacity .14s,filter .14s}
.t5bar .t5s:hover{opacity:1;filter:brightness(1.22)}
.t5foot{display:flex;justify-content:space-between;gap:10px;margin-top:5px;
  font-size:10.5px;color:var(--muted)}
.t5e{font-variant-numeric:tabular-nums}
.t5e.up{color:var(--good)} .t5e.dn{color:var(--bad)} .t5e.eq{color:var(--muted)}
.t5b{font-variant-numeric:tabular-nums}
/* Le repère de moyenne vit DANS la géométrie de la barre : aucun calcul
   d'offset, donc aucun décalage possible quand la largeur change. */
.t5wrap{position:relative;display:block}
.t5ref{position:absolute;top:-4px;bottom:-4px;left:var(--moyp);width:0;
  border-left:1px dashed var(--ink-2);opacity:.55;pointer-events:none}
.t5reflbl{position:absolute;top:-20px;left:var(--moyp);
  font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;
  transform:translateX(-50%)}
@media (max-width:560px){ .t5reflbl{display:none} }

/* la barre pousse depuis la gauche, une ligne après l'autre */
.rev #dashTop5 .t5bar{transform:scaleX(0)}
.rev #dashTop5.vu .t5bar{animation:t5Pousse .75s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * .085s)}
@keyframes t5Pousse{to{transform:scaleX(1)}}
.rev #dashTop5 .t5ref,.rev #dashTop5 .t5reflbl{opacity:0}
.rev #dashTop5.vu .t5ref{animation:t5Rep .5s ease-out .6s both}
.rev #dashTop5.vu .t5reflbl{animation:t5RepL .5s ease-out .7s both}
@keyframes t5Rep{to{opacity:.55}}
@keyframes t5RepL{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .cin .vd-c .trait,.cin .vd-c .aire{animation:none;stroke-dasharray:none;opacity:.13}
  .cin .vd-c .trait{opacity:1}
  .vd-j .plein{transition:none}
  .rev #dashTop5 .t5bar{transform:none}
  .rev #dashTop5.vu .t5bar{animation:none}
  .rev #dashTop5 .t5ref,.rev #dashTop5.vu .t5ref{opacity:.55;animation:none}
  .rev #dashTop5 .t5reflbl,.rev #dashTop5.vu .t5reflbl{opacity:1;animation:none}
}




/* ══ La trajectoire type d'une carte ═══════════════════════════════
   Quatre couches, et chacune répond à une question :
     1. la vue du dessus      « où suis-je ? »
     2. le dégradé des poses  « où se poste-t-on, et ça paie ? »
     3. les courbes de niveau « où sont les pentes ? »
     4. les cernes            « et qu'est-ce qui est prouvé ? »
   L'ordre visuel n'est pas celui du balisage : le relief remonte
   au-dessus du dégradé pour rester lisible là où l'on se poste le
   plus. */
.tj-duo{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,460px);
  gap:clamp(18px,2.6vw,40px);align-items:start;justify-content:center}
@media(max-width:900px){ .tj-duo{grid-template-columns:1fr} }
.dkf-tj{margin:0}
.tj-plan{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-1);isolation:isolate}
.tj-plan>*{position:absolute;inset:0}
/* Plus clair qu'avant : le dégradé est translucide, c'est donc le sol
   qui doit porter la lecture du terrain. */
/* Assombri et désaturé : le mélange « screen » du dégradé se délavait
   sur un fond clair, et la couleur n'arrivait plus à l'œil. Le terrain
   reste parfaitement lisible — il porte, il ne parle pas. */
.tj-sol{width:100%;height:100%;object-fit:cover;z-index:1;
  filter:grayscale(.5) brightness(.66) contrast(1.1)}
.tj-heat{width:100%;height:100%;z-index:2;pointer-events:none;
  mix-blend-mode:screen}
/* Les courbes sont en or dans le fichier : on les ramène au blanc pour
   que le terrain ne se confonde pas avec l'analyse. */
.tj-relief{width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none;
  filter:grayscale(1) brightness(2.4);opacity:.28;mix-blend-mode:screen}

/* Le cerne : un contour, jamais un aplat. Il désigne sans masquer, et
   c'est le seul endroit de la figure où l'on affirme quelque chose. */
/* Les bordures sont posées côté par côté dans le style en ligne : seuls
   les côtés qui bordent le vide sont tracés. box-sizing est obligatoire,
   sinon chaque bordure élargirait sa case et le contour se décalerait.
   L'ombre portée creuse le trait sur un terrain clair. */
.tj-sur{inset:auto;display:block;pointer-events:none;z-index:4;
  box-sizing:border-box;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.95))}
.tj-moi{inset:auto;width:var(--d,7px);height:var(--d,7px);border-radius:50%;
  transform:translate(-50%,-50%);background:var(--ink);z-index:5;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.7);opacity:var(--a,.6);pointer-events:none}

/* ── La colonne de droite ───────────────────────────────────────── */
.tj-sel{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.tj-sel span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto}
.tj-sel select{flex:1 1 auto;min-width:0;font:inherit;font-size:13px;
  padding:9px 11px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-1);color:var(--ink);cursor:pointer}
.tj-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tj-load{margin:0 0 14px;font-size:12.5px;color:var(--accent-2)}

.tj-chif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;margin:0 0 18px}
.tj-n{display:flex;flex-direction:column;gap:1px}
.tj-n b{font:600 26px/1 "IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  color:var(--ink);font-variant-numeric:tabular-nums}
.tj-n b.up{color:var(--good)} .tj-n b.dn{color:var(--bad)}
.tj-n span{font-size:12px;color:var(--muted)}

.tj-leg{display:flex;flex-direction:column;gap:9px;margin:0 0 14px;
  padding-top:14px;border-top:1px solid var(--border)}
.tj-leg span{display:flex;align-items:center;gap:9px;font-size:13px;
  color:var(--ink-2);line-height:1.35}
.tj-leg i{position:static;display:inline-block;width:16px;height:16px;
  border-radius:3px;flex:0 0 auto}
/* La pastille des poses est un dégradé, pas un aplat : c'est la densité
   qui porte l'information, et la légende doit le montrer. */
.tj-lg-pose{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 12%,transparent),var(--accent))}
.tj-lg-g{background:var(--good)}
.tj-lg-p{background:var(--bad)}
.tj-lg-sur{background:transparent;
  box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px rgba(0,0,0,.5)}
.tj-leg b.tj-moi{position:static;display:inline-block;width:9px;height:9px;
  margin:0 3px;flex:0 0 auto;opacity:1;transform:none;box-shadow:none}
.tj-abs{font-style:italic;color:var(--muted)}
.tj-dit .ent-quoi{margin:0}
/* Le pied porte les deux mises en garde : centré et pleine largeur il
   devenait un pavé. Aligné et borné, il se lit. */
.dkf-tj ~ footer,.tj-duo ~ footer{text-align:left;max-width:104ch;margin-inline:0}


/* ══ Le métier de chaque classe ════════════════════════════════════
   Le sélecteur reprend l'habillage du filtre de rang : deux filtres
   côte à côte qui se ressembleraient à moitié seraient pires que deux
   filtres identiques. */
.cs-n{opacity:.55;font-variant-numeric:tabular-nums;margin-left:2px}
.cs-role{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.5}
.cs-role b{color:var(--ink)}
/* Un axe hors métier reste lisible — on l'affiche, on ne le prescrit
   pas — mais il recule d'un cran pour qu'on voie où porte le conseil. */
.cs-hors td{opacity:.62}
.cs-hors td .hint i{font-style:italic;color:var(--muted)}
.cs-note{margin:12px 0 0;font-size:13px;color:var(--ink-2);
  padding-left:11px;border-left:2px solid var(--border);line-height:1.5}

/* Un bouton DÉSACTIVÉ et un bouton simplement NON CHOISI se ressemblaient
   trait pour trait : on ne pouvait pas deviner ce qui était cliquable.
   Le premier perd son cadre et son curseur, le second reste vivant. */
#pClsSel .ts-b:disabled{opacity:.34;cursor:not-allowed;border-style:dashed}
#pClsSel .ts-b:not(:disabled){cursor:pointer}
#pClsSel .ts-b:not(:disabled):not(.on):hover{color:var(--ink);border-color:var(--accent)}

/* Ce qui est mesuré mais jamais prescrit : présent, en retrait, et
   expliqué — un chiffre en retard sans conseil passerait pour un oubli. */
.tv-hors{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;
  padding-left:11px;border-left:2px solid var(--border)}


/* ══ Défaite ← → Victoire ══════════════════════════════════════════
   Deux points, un trait. La seule grandeur portée par l'espace est
   l'écart en écarts-types : sept mesures et quatre unités n'ont aucune
   position absolue comparable, et prétendre le contraire serait un
   mensonge graphique. Les valeurs réelles sont écrites à côté.

   Bleu et or, et non vert et rouge : le couple du site donne ΔE 2,7 en
   deutéranopie — indistinguable. Celui-ci donne 22, et chaque point
   porte en plus son étiquette. */
:root{ --cp-vic:#63a4dd; --cp-def:#c8933c; }
.sp-rep{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sp-rep b{color:var(--ink)}
.sp-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 16px;
  font-size:12.5px;color:var(--muted)}
.sp-leg span{display:flex;align-items:center;gap:7px}
.sp-leg i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.sp-pd{background:var(--cp-def)} .sp-pv{background:var(--cp-vic)}
.sp-lg-x{font-style:italic}

.sp-g{display:flex;flex-direction:column;gap:2px}
.sp-l{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(0,2.4fr) minmax(112px,auto);
  align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--border)}
.sp-l:last-child{border-bottom:0}
@media(max-width:720px){
  .sp-l{grid-template-columns:1fr auto;gap:4px 10px}
  .sp-p{grid-column:1/-1;order:3}
}
.sp-n{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;line-height:1.3}
.sp-sur .sp-n{color:var(--ink);font-weight:600}
.sp-b{font-style:normal;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--plane);background:var(--accent);padding:2px 6px;border-radius:4px;cursor:help}

/* La piste. L'axe est un simple repère : il ne porte aucune graduation,
   parce qu'aucune graduation ne serait vraie pour sept unités. */
.sp-p{position:relative;height:20px}
.sp-axe{position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--grid);transform:translateY(-50%)}
.sp-t{position:absolute;top:50%;height:3px;border-radius:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--cp-def),var(--cp-vic))}
.sp-d,.sp-v{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  /* l'anneau de surface évite que deux points qui se touchent fusionnent */
  box-shadow:0 0 0 2px var(--card)}
.sp-d{background:var(--cp-def)} .sp-v{background:var(--cp-vic)}

.sp-c{display:flex;gap:12px;justify-content:flex-end;font-size:13px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-cd{color:var(--cp-def)} .sp-cv{color:var(--cp-vic);font-weight:600}

.sp-suite{margin:18px 0 0;border-top:1px solid var(--border);padding-top:14px}
.sp-suite summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.sp-suite summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sp-pq{margin:12px 0 14px;font-size:13px;color:var(--muted);line-height:1.55;
  padding-left:11px;border-left:2px solid var(--border)}


/* ══════════════════════════════════════════════════════════════════
   LE SYSTÈME DE CARTE DE LA PAGE PROGRESSION

   Une anatomie : un titre qui est une question, une réponse en une
   phrase, une figure, la méthode en pied. Trois rangs pour que douze
   cartes ne crient pas ensemble. Tout est confiné sous .pg-main :
   les huit vues de l'application partagent le même .card et ne
   doivent pas bouger tant qu'elles n'ont pas été reprises.
   ══════════════════════════════════════════════════════════════════ */

/* ── L'anatomie ─────────────────────────────────────────────────── */
.pg-main .dk-d .card{
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px);
  border-radius:14px;
  margin:0 0 clamp(14px,1.6vw,22px);
}
/* Le titre est une question : il se lit d'un bloc, et son contexte
   (« 25 batailles », « comparé au clan ») recule d'un cran au lieu de
   se battre avec lui. */
.pg-main .dk-d .card > h2{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  margin:0 0 14px;font-size:15.5px;font-weight:600;letter-spacing:0;
  color:var(--ink);line-height:1.35;
}
.pg-main .dk-d .card > h2 .hint{font-size:12.5px;font-weight:400;color:var(--muted)}

/* La réponse : la seule phrase qu'on est sûr de lire. Elle vient AVANT
   la figure, jamais après — une figure qu'on lit sans savoir ce qu'on
   y cherche ne se lit pas. */
.pg-main .dk-d .card > .ent-quoi,
.pg-main .dk-d .card > .sp-rep,
.pg-main .dk-d .card > .cs-role{
  margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2);
  max-width:88ch;
}
.pg-main .dk-d .card > .ent-quoi b,
.pg-main .dk-d .card > .sp-rep b{color:var(--ink);font-weight:600}

/* La méthode : présente, jamais au centre, jamais en pleine largeur.
   Un pavé centré de six lignes est un pavé qu'on saute. */
.pg-main .dk-d .card > footer,
.pg-main .dk-d .card > .hint:last-child{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border);
  text-align:left;max-width:104ch;font-size:12px;line-height:1.55;
  color:var(--muted);
}

/* ── Les trois rangs ────────────────────────────────────────────────
   La première carte d'une étape porte la réponse de l'étape. Le rang se
   lit sur la position et non sur une classe : une carte ajoutée demain
   se rangera toute seule. */
.pg-main .dk-d > div:first-of-type .card{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1px 0 var(--accent) inset;
}
.pg-main .dk-d > div:first-of-type .card > h2{font-size:18px}
.pg-main .dk-d > div:first-of-type .card > .ent-quoi,
.pg-main .dk-d > div:first-of-type .card > .sp-rep{font-size:16.5px}
/* Les suivantes reculent : même soin, moins de voix. */
.pg-main .dk-d > div:not(:first-of-type) .card{background:var(--surface-1)}

/* ── UNE tuile, partout ─────────────────────────────────────────────
   Quatre dessins différents coexistaient pour la même chose : un nombre
   et son libellé. Les trente derniers jours, les records, la position,
   la trajectoire. Un lecteur qui doit réapprendre la même tuile quatre
   fois ne lit aucune des quatre. */
.pg-main .pos-n,.pg-main .tj-n,.pg-main .pd-grid > *,.pg-main .pr-t{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.pg-main .pos-n b,.pg-main .tj-n b,.pg-main .pd-grid b,.pg-main .pr-v{
  font:600 26px/1.05 "IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.pg-main .pos-n span,.pg-main .tj-n span,.pg-main .pd-grid span,
.pg-main .pr-l,.pg-main .pr-ctx{
  font-size:11.5px;color:var(--muted);letter-spacing:.02em;line-height:1.35;
}
/* Les grilles de tuiles respirent de la même façon. */
.pg-main .pd-grid,.pg-main .pr-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(14px,1.8vw,26px);
}
.pg-main .pr-t{padding:14px 16px;border:1px solid var(--border);
  border-radius:11px;background:var(--card)}

/* ── Les figures ────────────────────────────────────────────────────
   Une figure a de l'air autour d'elle, sinon elle se lit comme un bloc
   de texte de plus. */
.pg-main .dk-d .dkf,.pg-main .dk-d .sp-g{margin:2px 0 4px}

/* ── Le repli ───────────────────────────────────────────────────────
   Rien n'est supprimé : ce qui est secondaire se replie, et son résumé
   reste une question à laquelle on peut décider de répondre. */
.pg-main .dk-d details > summary{
  cursor:pointer;font-size:13.5px;color:var(--ink-2);padding:4px 0;
  list-style:none;display:flex;align-items:center;gap:9px;
}
.pg-main .dk-d details > summary::-webkit-details-marker{display:none}
.pg-main .dk-d details > summary::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg);transition:transform .18s ease;
}
.pg-main .dk-d details[open] > summary::before{transform:rotate(45deg)}
.pg-main .dk-d details > summary:hover{color:var(--ink)}
.pg-main .dk-d details > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .pg-main .dk-d details > summary::before{transition:none}
}