/* CODE COULEUR TROV : voir le bloc de référence en tête d'assets/css/index.css.
   Une couleur = un rôle. Sur l'Académie, l'accent de page est l'OR. */
:root{
    --role-action:#7c6cf6;--role-premium:#f0c060;--role-money:#3ce8a8;
    --role-caution:#f5b544;--role-alert:#f56a7f;--role-data:#5aa7ff;
    --bg:#05060a;
    --surface:rgba(255,255,255,.028);
    --surface-2:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.07);
    --border-strong:rgba(255,255,255,.13);
    --text:#eef1f8;
    --muted:#7d8598;
    --muted-2:#565e70;
    --accent:#7c6cf6;
    --accent-2:#a89bff;
    --accent-glow:rgba(124,108,246,.35);
    --gold:#f0c060;
    --gold-dim:rgba(240,192,96,.12);
    --green:#3ce8a8;
    --green-dim:rgba(60,232,168,.12);
    --amber:#f5b544;
    --amber-dim:rgba(245,181,68,.12);
    --red:#f56a7f;
    --red-dim:rgba(245,106,127,.12);
    --blue:#5aa7ff;
    --blue-dim:rgba(90,167,255,.12);
    --wa:#25d366;
    --r-lg:20px;--r-md:14px;--r-sm:10px;
    --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    --display:'Space Grotesk','Plus Jakarta Sans',sans-serif;
    --grid:rgba(255,255,255,.015);
    --modal-1:#12141d;
    --sb:rgba(255,255,255,.1);
  }
  body.light{
    /* Rôles (voir le CODE COULEUR en tête d'index.css) - versions claires */
    --role-action:#6a58e8;--role-premium:#a8741a;--role-money:#0a7a54;
    --role-caution:#c05621;--role-alert:#dc3d55;--role-data:#1565c0;
    --bg:#f4f5fa;
    --surface:#ffffff;
    --surface-2:#eef0f6;
    --border:rgba(13,18,30,.09);
    --border-strong:rgba(13,18,30,.18);
    --text:#0e1320;
    --muted:#5c6472;
    --muted-2:#98a0ae;
    --accent-2:#6a58e8;
    --accent-glow:rgba(124,108,246,.25);
    --gold:#a8741a;
    --gold-dim:rgba(168,116,26,.1);
    --green:#0aa971;
    --green-dim:rgba(10,169,113,.1);
    --amber:#c47f0e;
    --amber-dim:rgba(196,127,14,.1);
    --red:#dc3d55;
    --red-dim:rgba(220,61,85,.09);
    --blue:#2673d6;
    --blue-dim:rgba(38,115,214,.09);
    --grid:rgba(13,18,30,.035);
    --modal-1:#ffffff;
    --sb:rgba(13,18,30,.2);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  ::selection{background:rgba(240,192,96,.35)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb);border-radius:10px;border:3px solid var(--bg)}
  body{
    font-family:var(--font);background:var(--bg);color:var(--text);
    min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;
  }
  body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 500px at 20% -10%, rgba(240,192,96,.1), transparent 60%),
      radial-gradient(800px 500px at 105% 15%, rgba(217,155,43,.06), transparent 55%),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto,auto,48px 48px,48px 48px;
  }
  button{font-family:inherit}
  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px 80px}

  /* ===== HEADER ===== */
  .head{
    display:flex;align-items:center;gap:14px;
    padding:16px 0;
    position:sticky;top:0;z-index:50;
    background:linear-gradient(180deg,var(--bg) 78%,transparent);
  }
  /* Marque : la loupe-T dorée sur fond transparent (même mark que le site) */
  .logo-mark{
    width:40px;height:40px;flex-shrink:0;
    display:grid;place-items:center;
    filter:drop-shadow(0 4px 14px rgba(240,192,96,.35));
  }
  .logo-mark img{width:100%;height:100%;object-fit:contain}
  .h-name{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.4px}
  .vip-chip{
    font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.8px;
    padding:2.5px 8px;border-radius:6px;margin-left:7px;vertical-align:middle;
    background:var(--gold-dim);border:1px solid rgba(240,192,96,.45);color:var(--gold);
  }
  .h-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .h-right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .icon-btn{
    width:36px;height:36px;border-radius:11px;flex-shrink:0;
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);cursor:pointer;font-size:15px;
    display:grid;place-items:center;transition:.2s;text-decoration:none;
  }
  .icon-btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}
  .back-btn{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;
    padding:9px 14px;border-radius:11px;
    background:var(--surface);border:1px solid var(--border);transition:.2s;
  }
  .back-btn:hover{color:var(--text);border-color:var(--border-strong)}
  .avatar{
    width:36px;height:36px;border-radius:11px;flex-shrink:0;
    background:linear-gradient(135deg,#f5b544,#f56a7f);
    display:grid;place-items:center;font-weight:700;font-size:12px;color:#1a1205;
  }

  /* ===== BANNIÈRE ===== */
  .vip-banner{
    display:flex;align-items:center;gap:12px;
    padding:11px 16px;margin-bottom:18px;
    background:linear-gradient(90deg,var(--gold-dim),rgba(124,108,246,.07));
    border:1px solid rgba(240,192,96,.35);
    border-radius:var(--r-md);
    font-size:12.5px;color:var(--text);
  }
  .vip-banner b{color:var(--gold)}

  /* ===== TABS ===== */
  .tabs{
    display:flex;gap:4px;padding:4px;margin-bottom:22px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    overflow-x:auto;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    padding:10px 18px;border:none;border-radius:10px;background:none;
    color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.18s;
    white-space:nowrap;display:flex;align-items:center;gap:7px;
  }
  .tabs button:hover{color:var(--text)}
  .tabs button.active{
    background:linear-gradient(135deg,#f0c060,#d99b2b);color:#1a1205;
    box-shadow:0 4px 14px rgba(240,192,96,.3);
  }
  .tab-badge{font-size:10px;font-weight:700;background:var(--red);color:#fff;padding:1px 6px;border-radius:12px}
  .tabs button.active .tab-badge{background:#1a1205;color:var(--gold)}

  /* ===== LAYOUT COMMUNAUTÉ ===== */
  .layout{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
  .col-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
  .panel{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:18px;
  }
  .panel h3{font-family:var(--display);font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
  .side-stat{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--border)}
  .side-stat:last-child{border:none}
  .side-stat b{color:var(--text);font-family:var(--display)}
  .lb-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
  .lb-rank{font-family:var(--display);font-weight:700;width:18px;color:var(--muted-2)}
  .lb-row:nth-child(2) .lb-rank{color:var(--gold)}
  .mini-av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
  .lb-name{flex:1;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-pts{font-family:var(--display);font-weight:700;color:var(--gold);font-size:12px}
  .rules{font-size:12px;color:var(--muted);line-height:1.7}
  .rules b{color:var(--text)}

  /* ===== COMPOSER + FILTRES ===== */
  .composer{
    display:flex;gap:12px;align-items:center;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:14px 16px;margin-bottom:14px;cursor:pointer;transition:.2s;
  }
  .composer:hover{border-color:var(--border-strong)}
  .composer .fake-input{
    flex:1;font-size:13.5px;color:var(--muted-2);
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:11px 16px;
  }
  .cat-pills{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
  .cat-pill{
    padding:7px 14px;border-radius:30px;font-size:12px;font-weight:600;
    background:var(--surface);border:1px solid var(--border);color:var(--muted);
    cursor:pointer;transition:.18s;
  }
  .cat-pill:hover{color:var(--text);border-color:var(--border-strong)}
  .cat-pill.active{background:linear-gradient(135deg,#f0c060,#d99b2b);color:#1a1205;border-color:transparent}

  /* ===== POSTS ===== */
  .post{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:18px 20px;margin-bottom:14px;
    animation:rise .4s ease both;transition:.2s;
  }
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .post:hover{border-color:var(--border-strong)}
  .post-head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
  .post-av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
  .post-who{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .role{font-size:9.5px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:6px}
  .role.admin{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(240,192,96,.4)}
  .role.coach{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(90,167,255,.35)}
  .post-when{font-size:11px;color:var(--muted-2);margin-top:2px}
  .post-cat{
    margin-left:auto;font-size:10.5px;font-weight:700;
    padding:5px 11px;border-radius:20px;flex-shrink:0;
  }
  .pc-discussion{background:var(--blue-dim);color:var(--blue)}
  .pc-question{background:var(--amber-dim);color:var(--amber)}
  .pc-resultat{background:var(--green-dim);color:var(--green)}
  .pc-trouvaille{background:var(--gold-dim);color:var(--gold)}
  .pc-annonce{background:var(--red-dim);color:var(--red)}
  .post h4{font-size:14.5px;font-weight:700;margin-bottom:7px;letter-spacing:-.1px}
  .post p{font-size:13px;color:var(--muted);line-height:1.65}
  .post-foot{display:flex;align-items:center;gap:18px;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
  .post-act{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;
    cursor:pointer;transition:.18s;padding:0;
  }
  .post-act:hover{color:var(--text)}
  .post-act.liked{color:var(--red)}

  /* ===== CHAT ===== */
  .chat-layout{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
  .chat-box{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    display:flex;flex-direction:column;height:600px;overflow:hidden;
  }
  .chat-head{padding:14px 18px;border-bottom:1px solid var(--border);font-family:var(--display);font-size:14px;font-weight:700;display:flex;align-items:center;gap:9px}
  .online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(60,232,168,.5);animation:pulse 2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 6px rgba(60,232,168,0)}100%{box-shadow:0 0 0 0 rgba(60,232,168,0)}}
  .chat-head small{font-weight:400;font-size:11.5px;color:var(--muted);font-family:var(--font)}
  .chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
  .msg{display:flex;gap:10px;max-width:85%}
  .msg .m-body{background:var(--surface);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:9px 13px}
  .msg .m-who{font-size:11px;font-weight:700;margin-bottom:3px}
  .msg .m-txt{font-size:12.5px;color:var(--text);line-height:1.55}
  .msg .m-time{font-size:10px;color:var(--muted-2);margin-top:3px}
  .msg.me{align-self:flex-end;flex-direction:row-reverse}
  .msg.me .m-body{background:rgba(240,192,96,.1);border-color:rgba(240,192,96,.3);border-radius:14px 4px 14px 14px}
  .chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border)}
  .chat-input input{
    flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:11px 16px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:.2s;
  }
  .chat-input input:focus{border-color:var(--gold)}
  .btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 18px;border:none;border-radius:var(--r-sm);
    background:linear-gradient(135deg,#f0c060,#d99b2b);
    box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 20px rgba(240,192,96,.25);
    color:#1a1205;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;
  }
  .btn-gold:hover{transform:translateY(-1px)}
  .member-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
  .member-row .st{width:7px;height:7px;border-radius:50%;margin-left:auto}
  .st.on{background:var(--green)} .st.off{background:var(--muted-2)}

  /* ===== FORMATION ===== */
  .prog-banner{
    display:flex;align-items:center;gap:16px;
    background:linear-gradient(90deg,var(--gold-dim),rgba(124,108,246,.06));
    border:1px solid rgba(240,192,96,.3);border-radius:var(--r-lg);
    padding:16px 20px;margin-bottom:18px;
  }
  .prog-banner .pb-txt{font-size:13px}
  .prog-banner .pb-txt b{font-family:var(--display)}
  .prog-banner small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
  .prog-track{flex:1;height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden;min-width:120px}
  .prog-track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#f0c060,#d99b2b)}
  .prog-pct{font-family:var(--display);font-weight:700;color:var(--gold)}
  .module{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    margin-bottom:14px;overflow:hidden;animation:rise .4s ease both;
  }
  .mod-head{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;transition:.2s}
  .mod-head:hover{background:var(--surface-2)}
  .mod-num{
    width:40px;height:40px;border-radius:12px;flex-shrink:0;
    display:grid;place-items:center;
    font-family:var(--display);font-weight:700;font-size:15px;
    background:var(--gold-dim);border:1px solid rgba(240,192,96,.35);color:var(--gold);
  }
  .mod-info{flex:1;min-width:0}
  .mod-title{font-size:14.5px;font-weight:700}
  .mod-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
  .mod-prog{width:110px;flex-shrink:0;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted)}
  .mod-prog .prog-track{min-width:0}
  .mod-lock{color:var(--gold);font-size:14px}
  .mod-body{border-top:1px solid var(--border);display:none}
  .module.open .mod-body{display:block}
  .lesson{
    display:flex;align-items:center;gap:13px;
    padding:12px 20px;border-bottom:1px solid var(--border);
    cursor:pointer;transition:.18s;font-size:13px;
  }
  .lesson:last-child{border-bottom:none}
  .lesson:hover{background:var(--surface-2)}
  .play-ico{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    background:var(--surface);border:1px solid var(--border);
    display:grid;place-items:center;font-size:10px;color:var(--gold);
  }
  .lesson.done .play-ico{background:var(--green-dim);border-color:rgba(60,232,168,.35);color:var(--green)}
  .lesson-title{flex:1}
  .lesson.done .lesson-title{color:var(--muted);text-decoration:line-through}
  .lesson-dur{font-size:11.5px;color:var(--muted-2)}

  /* ===== ACCOMPAGNEMENT ===== */
  .help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase}
  .field input,.field textarea,.field select{
    width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
    padding:11px 14px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:.2s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
  /* Options des listes déroulantes lisibles (Windows : sinon blanc sur blanc) */
  .field select{color-scheme:dark}
  body.light .field select{color-scheme:light}
  .field select option{background:#12141d;color:var(--text)}
  body.light .field select option{background:#fff;color:#0e1320}
  .field textarea{min-height:110px;resize:vertical}
  .coach{
    display:flex;align-items:center;gap:13px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    padding:13px 15px;margin-bottom:11px;
  }
  .coach-info{flex:1;min-width:0}
  .coach-name{font-size:13.5px;font-weight:700}
  .coach-spec{font-size:11.5px;color:var(--muted);margin-top:2px}
  .coach-dispo{font-size:10.5px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:5px;margin-top:4px}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:9px 14px;border-radius:var(--r-sm);
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:.2s;flex-shrink:0;
  }
  .btn-ghost:hover{border-color:var(--gold)}

  /* ===== CONTACT ===== */
  .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
  .contact-card{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:22px 18px;text-align:center;transition:.2s;cursor:pointer;text-decoration:none;color:var(--text);
  }
  .contact-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
  .contact-card .cc-ico{font-size:26px;margin-bottom:10px}
  .contact-card .cc-t{font-family:var(--display);font-size:14px;font-weight:700;margin-bottom:5px}
  .contact-card .cc-s{font-size:11.5px;color:var(--muted);line-height:1.5}
  details{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    padding:14px 18px;margin-bottom:10px;
  }
  details summary{font-size:13.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  details summary::after{content:'+';font-family:var(--display);font-size:17px;color:var(--gold)}
  details[open] summary::after{content:'–'}
  details p{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:10px}

  /* ===== TOAST ===== */
  .toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
    z-index:200;opacity:0;pointer-events:none;
    display:flex;align-items:center;gap:10px;
    padding:13px 20px;border-radius:14px;
    background:var(--modal-1);border:1px solid var(--border-strong);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    font-size:13.5px;font-weight:600;
    transition:.35s cubic-bezier(.2,.8,.3,1.1);
  }
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}

  .demo-note{text-align:center;font-size:11px;color:var(--muted-2);margin-top:30px}

  @media(max-width:960px){
    .layout,.chat-layout,.help-grid{grid-template-columns:1fr}
    .col-side{position:static}
    .contact-grid{grid-template-columns:1fr}
    .post-cat{display:none}
  }

  /* ============================================================
     FINITIONS AUDIT (2026-07-22) - application d'AUDIT-DESIGN.md :
     couche premium OR de la page Académie. Verre du header, vraie
     hiérarchie typo, focus clavier, ombres teintées or, accordéon
     animé, tabular-nums, reduced-motion. GPU only.
     ============================================================ */

  /* 1. Header sticky : vrai verre (le feed passait sous une zone transparente sèche) */
  .head{
    backdrop-filter:blur(16px) saturate(1.3);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    background:color-mix(in srgb,var(--bg) 72%,transparent);
    border-bottom:1px solid var(--border);
  }

  /* 2. Typographie : le nom respire, chaque onglet a un vrai titre de section */
  .h-name{font-size:23px;letter-spacing:-.03em}
  .sec-title{
    font-family:var(--display);font-size:clamp(22px,3vw,28px);
    letter-spacing:-.02em;line-height:1.1;text-wrap:balance;margin-bottom:16px;
  }
  .post h4{font-size:15.5px;letter-spacing:-.2px;text-wrap:balance;max-width:60ch}
  .post p{max-width:65ch}

  /* 3. Navigation clavier visible partout (accent OR sur cette page) */
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .chat-input input:focus,.field input:focus,.field textarea:focus,.field select:focus{
    border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);
  }

  /* 4. Identité OR affirmée : radiaux or au lieu des linéaires plats or->violet */
  .vip-banner,.prog-banner{
    background:radial-gradient(120% 200% at 0% 0%, rgba(240,192,96,.16), rgba(240,192,96,.02) 65%);
  }

  /* 5. Cartes en relief + hover teinté or qui se lit vraiment */
  .post,.panel,.module{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -20px rgba(20,14,4,.6)}
  .post{transition:transform .2s,border-color .2s,box-shadow .2s}
  .post:hover,.contact-card:hover{
    transform:translateY(-2px);border-color:rgba(240,192,96,.28);
    box-shadow:0 16px 36px -16px rgba(240,192,96,.16);
  }

  /* 6. Toast : ombre teintée, plus de noir pur */
  .toast{box-shadow:0 20px 60px rgba(46,32,8,.55),0 0 0 1px rgba(240,192,96,.1)}

  /* 8. Noms du chat : theme-aware (les hex clairs étaient illisibles en mode clair) */
  .who-blue{color:var(--blue,#5aa7ff)}
  .who-purple{color:#a89bff}
  .who-green{color:var(--green,#3ce8a8)}
  .who-orange{color:#ffab91}
  body.light .who-blue{color:#1565c0}
  body.light .who-purple{color:#6a58e8}
  body.light .who-green{color:#0a7a54}
  body.light .who-orange{color:#c05621}

  /* 10. Retour tactile au clic sur tous les contrôles */
  .btn-gold:active,.btn-ghost:active,.tabs button:active,.cat-pill:active,.icon-btn:active,.post-act:active{transform:scale(.97)}

  /* 11. Chiffres à chasse fixe : les colonnes ne vibrent plus au re-render */
  .side-stat b,.lb-pts,.lesson-dur,.m-time,.prog-pct,.post-act,.mod-prog{font-variant-numeric:tabular-nums}

  /* 12. Accordéon des modules : ouverture animée (grid-template-rows) */
  .mod-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;border-top-color:transparent}
  .mod-body>.mod-inner{overflow:hidden;min-height:0}
  .module.open .mod-body{display:grid;grid-template-rows:1fr;border-top:1px solid var(--border)}

  /* 13. Bord droit des modules aligné (verrou = même largeur que la barre) */
  .mod-lock{width:110px;flex-shrink:0;font-size:11px;text-align:right;color:var(--muted)}

  /* 14. Barre de progression : volume + lueur or + largeur animée */
  .prog-track i{
    background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 45%),linear-gradient(90deg,#f0c060,#d99b2b);
    box-shadow:0 0 10px rgba(240,192,96,.35);
    transition:width .6s cubic-bezier(.2,.8,.2,1);
  }

  /* Skip-link clavier : invisible jusqu'au focus (accessibilité) */
  .skip-link{
    position:fixed;top:-48px;left:16px;z-index:2147483001;
    padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;
    background:var(--gold);color:#1a1205;text-decoration:none;transition:top .2s;
  }
  .skip-link:focus{top:12px}

  /* ============================================================
     SIGNATURE TROV (2026-07-22 soir) - académie. Même système de
     formes que le reste du site : boutons et onglets en pilule,
     l'or reste l'accent de la page.
     ============================================================ */
  .tabs{border-radius:999px}
  .tabs button{border-radius:999px}
  .btn-gold,.btn-ghost,.back-btn{border-radius:999px}
  .composer{border-radius:999px}
  .chat-input input{border-radius:999px}
  .chat-input .btn-gold{border-radius:999px}

  /* ============================================================
     V3 LOOK (2026-07-22 nuit) - académie : l'or s'assume.
     ============================================================ */

  /* Fond : nappe dorée profonde (fini le noir plat) */
  body{
    background:
      radial-gradient(1000px 620px at -8% -10%, rgba(240,192,96,.13), transparent 60%),
      radial-gradient(900px 560px at 110% 30%, rgba(217,155,43,.06), transparent 55%),
      var(--bg);
  }
  /* Mode clair : même traitement que le dashboard - fond teinté OR,
     panneaux blancs qui flottent (avant : blanc sur blanc = plat) */
  body.light{
    --bg:#f1f0f7;
    background:
      radial-gradient(1000px 600px at -8% -10%, rgba(217,155,43,.16), transparent 60%),
      radial-gradient(900px 560px at 110% 8%, rgba(124,108,246,.09), transparent 55%),
      var(--bg);
  }
  body.light :is(.panel,.post,.module,.chat-box,.contact-card,.coach-card){
    background:#fff;
    box-shadow:0 1px 2px rgba(13,18,30,.05),0 10px 28px -14px rgba(26,18,5,.18);
  }
  body.light .tabs{background:#fff;box-shadow:0 1px 2px rgba(13,18,30,.05)}

  /* Onglet actif : pilule OR pleine (l'équivalent de la pilule violette du dash) */
  .tabs button.active{
    background:linear-gradient(135deg,#f0c060,#d99b2b);
    color:#1a1205;
    box-shadow:0 8px 22px -8px rgba(240,192,96,.55),inset 0 1px 0 rgba(255,255,255,.35);
  }

  /* Le nom de la page respire */
  .h-name{font-size:26px}

  /* 9. Respect des préférences de mouvement */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }