:root{
    --bg: #060a12;
    --panel: #0d1420;
    --panel-2: #121a2b;
    --panel-3: #182337;
    --line: #24344d;
    --line-soft: #1a2439;
    --red: #ff4d6d;
    --red-dim: #8a1f36;
    --amber: #38bdf8;
    --amber-dim: #0e7ba8;
    --cream: #eaf3fb;
    --green: #4ee08a;
    --text: #e6edf6;
    --text-dim: #8fa2ba;
    --text-faint: #5a6f8c;
    --radius: 12px;
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh;
    position:relative; transition:background .4s ease;
  }
  /* fond dégradé sombre, propre et pro — remplace l'ancienne texture "circuit" */
  body::before{
    content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(1200px 800px at 15% -10%, rgba(56,189,248,.10), transparent 60%),
      radial-gradient(1000px 700px at 100% 110%, rgba(56,189,248,.07), transparent 55%),
      linear-gradient(180deg, #050810 0%, #060a12 45%, #04070d 100%);
  }
  /* vignette douce pour concentrer l'oeil sur le contenu */
  body::after{
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(2,4,8,.55) 100%);
  }

  /* ---------- fond animé : orage électrique (canvas, thème Novawise) ---------- */
  #lightningCanvas{
    position:fixed; inset:0; z-index:-1; pointer-events:none; display:block;
  }
  .display{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:.01em; }
  h2{ font-family:'Inter',sans-serif; font-weight:700; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  .eyebrow, .tabbtn, th, .stat .lab, .weeknav .label, .weeknav .tag{ font-family:'Oswald',sans-serif; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--red-dim); }

  button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--amber); outline-offset:2px; border-radius:6px;
  }

  .banner{
    display:none; align-items:center; gap:12px; padding:11px 22px; font-size:13px; font-weight:600;
    border-bottom:1px solid var(--line);
  }
  .banner .close{ margin-left:auto; cursor:pointer; opacity:.7; font-weight:700; padding:2px 8px; border-radius:6px; }
  .banner .close:hover{ opacity:1; background:rgba(0,0,0,.15); }
  .banner.demo{ background:#2b2007; color:var(--amber); }
  .banner.issue{ background:#2c1414; color:#ff9d9d; }
  .issue-detail{ font-family:'JetBrains Mono',monospace; font-size:11.5px; opacity:.85; }

  #cashFlash{ position:fixed; inset:0; pointer-events:none; z-index:70; opacity:0; }
  #cashFlash.flash{ animation:cashFlashAnim .6s ease; }
  @keyframes cashFlashAnim{ 0%{ opacity:0; background:rgba(76,194,106,.28);} 55%{opacity:1;} 100%{opacity:0; background:transparent;} }

  .storefront{
    display:flex; align-items:center; gap:16px; padding:18px 26px; background:#03050a;
    border-bottom:3px solid var(--amber); flex-wrap:wrap; transition:border-color .4s ease;
    box-shadow:0 1px 24px rgba(56,189,248,.15);
  }
  .sign{
    width:52px; height:52px; border-radius:8px;
    background:linear-gradient(155deg,#2a3648,#0c121c 65%); border:2px solid var(--amber);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-family:'Archivo Black'; color:var(--cream); font-size:13px; line-height:1;
    animation: signPulse 2.6s ease-in-out infinite; transition:background .4s ease, border-color .4s ease;
  }
  @keyframes signPulse{ 0%,100%{ box-shadow:0 0 0 rgba(56,189,248,0);} 50%{ box-shadow:0 0 18px rgba(56,189,248,.65);} }
  .storefront-text .t1{
    font-family:'Archivo Black'; font-size:22px; letter-spacing:.02em; line-height:1.05;
    background:linear-gradient(90deg, var(--amber), var(--red), var(--amber));
    background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:titleShine 7s linear infinite;
  }
  @keyframes titleShine{ to{ background-position:-220% center; } }
  .storefront-text .t2{ font-size:12px; color:var(--amber); text-transform:uppercase; letter-spacing:.14em; margin-top:2px; transition:color .4s ease; }
  .storefront .spacer{ flex:1; }

  .hazard-tape{
    height:5px;
    background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 22px);
    box-shadow:0 0 10px rgba(56,189,248,.6);
    opacity:.9; transition: background .4s ease;
  }

  .weeknav{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px dashed var(--line); border-radius:8px; padding:8px 12px; }
  .weeknav button{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:6px 10px; cursor:pointer; font-size:13px;
    transition:border-color .15s ease, color .15s ease;
  }
  .weeknav button:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }
  .weeknav button:disabled{ opacity:.3; cursor:not-allowed; pointer-events:none; }
  .weeknav .label{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; min-width:180px; text-align:center; }
  .weeknav .tag{ font-size:10px; padding:3px 8px; border-radius:20px; font-weight:700; letter-spacing:.05em; white-space:nowrap; text-transform:uppercase; }
  .weeknav .tag.live{ background:rgba(76,194,106,.15); color:var(--green); animation:tagPulse 2s ease-in-out infinite; }
  .weeknav .tag.archived{ background:rgba(56,189,248,.15); color:var(--amber); }
  @keyframes tagPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

  .tabstrip{
    display:flex; gap:6px; padding:14px 26px 0; overflow-x:auto; background:#0d0b09; border-bottom:1px solid var(--line);
  }
  .tabbtn{
    display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px 8px 0 0; cursor:pointer;
    color:var(--text-dim); font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; border:1px solid transparent; border-bottom:none;
    transition:color .15s ease, background .15s ease, transform .15s ease; text-decoration:none;
  }
  .tabbtn:hover{ color:var(--text); transform:translateY(-1px); }
  .tabbtn.active{ background:var(--bg); color:var(--amber); border-color:var(--line); }
  .tabbtn .ic{ font-size:15px; }
  .tabbtn .kbd{ font-size:9px; color:var(--text-faint); border:1px solid var(--line); border-radius:4px; padding:0 4px; margin-left:2px; }

  .main{ padding:26px; max-width:1200px; margin:0 auto; }

  .card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
    animation:cardIn .3s cubic-bezier(.2,.8,.3,1) both; transition:border-color .2s ease, box-shadow .2s ease;
  }
  .card:hover{ border-color:#463c2f; }
  @keyframes cardIn{ from{ opacity:0; transform:translateY(8px) scale(.99); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; transition:color .4s ease; }
  .card h2{ font-size:17px; margin:0 0 4px; }
  .card .hint{ color:var(--text-dim); font-size:12.5px; margin-bottom:16px; line-height:1.5; }

  .grid2{ display:grid; grid-template-columns:1.05fr 1.6fr; gap:18px; align-items:start; }
  @media (max-width:980px){ .grid2{ grid-template-columns:1fr; } }

  label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; font-weight:600; letter-spacing:.02em;}
  select, input[type=number], input[type=text], input[type=password]{
    width:100%; background:#0d0b09; border:1px solid var(--line); color:var(--text); border-radius:7px;
    padding:10px 12px; font-size:14px; font-family:'Inter',sans-serif; transition:border-color .15s ease, box-shadow .15s ease;
  }
  select:hover, input:hover{ border-color:#4a4032; }
  select:focus, input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(56,189,248,.18); }
  .field{ margin-bottom:14px; }

  .filebox{
    border:1.5px dashed var(--line); border-radius:8px; padding:16px 14px; text-align:center; cursor:pointer;
    color:var(--text-dim); font-size:13px; position:relative; background:#0d0b09; transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .filebox:hover{ border-color:var(--amber); color:var(--text); }
  .filebox.dragover{ border-color:var(--amber); background:rgba(56,189,248,.08); color:var(--text); }
  .filebox input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .thumb-preview{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .thumb-preview img{ width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
  .thumb-preview .x{ cursor:pointer; color:var(--text-dim); font-weight:700; font-size:16px; padding:2px 6px; border-radius:6px; }
  .thumb-preview .x:hover{ color:var(--red); background:rgba(229,56,59,.1); }

  .btn{
    position:relative; overflow:hidden;
    background:var(--red); color:var(--cream); border:1px solid var(--red); border-radius:8px;
    padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer; letter-spacing:.02em;
    transition:filter .15s ease, transform .1s ease, background .3s ease, border-color .3s ease;
  }
  .btn:hover:not(:disabled){ filter:brightness(1.1); }
  .btn:active:not(:disabled){ transform:translateY(1px); }
  .btn:disabled{ opacity:.35; cursor:not-allowed; filter:none; }
  .btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--text-dim); }
  .btn.ghost:hover:not(:disabled){ color:var(--amber); border-color:var(--amber); }
  .btn.amber{ background:var(--amber); color:#241a02; border-color:var(--amber); }
  .btn.danger{ background:transparent; border:1px solid rgba(229,56,59,.4); color:var(--red); padding:6px 10px; font-size:12px;}
  .btn.danger:hover:not(:disabled){ background:rgba(229,56,59,.1); border-color:var(--red); }
  .btn.small{ padding:7px 12px; font-size:12.5px; }
  .ripple{ position:absolute; width:10px; height:10px; background:rgba(255,255,255,.55); border-radius:50%; transform:translate(-50%,-50%) scale(0); animation:rippleAnim .6s ease-out; pointer-events:none; }
  @keyframes rippleAnim{ to{ transform:translate(-50%,-50%) scale(16); opacity:0; } }

  table{ width:100%; border-collapse:collapse; font-size:13px; }
  th{ text-align:left; color:var(--text-dim); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
      padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
  td{ padding:10px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  tbody tr{ transition:background .12s ease; }
  tbody tr:hover{ background:rgba(56,189,248,.05); }
  tfoot td{ border-top:1.5px solid var(--line); border-bottom:none; font-weight:700; color:var(--amber); background:rgba(56,189,248,.04); }
  .num{ font-family:'JetBrains Mono',monospace; text-align:right; }
  .empty-row td{ text-align:center; color:var(--text-dim); padding:34px 10px; font-size:13px; }
  .empty-row .eicon{ font-size:26px; display:block; margin-bottom:8px; opacity:.7; }
  .thumb-cell img{ width:38px; height:38px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:zoom-in; transition:transform .12s ease, border-color .12s ease; }
  .thumb-cell img:hover{ transform:scale(1.08); border-color:var(--amber); }
  .thumb-spinner{ width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--amber); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .thumb-missing{ color:var(--red); font-size:16px; }

  .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:6px; }
  .stat{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; transition:transform .15s ease, border-color .2s ease; }
  .stat:hover{ transform:translateY(-2px); border-color:#463c2f; }
  .stat .lab{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
  .stat .val{ font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; }
  .stat .val.pos{ color:var(--green); } .stat .val.neg{ color:var(--red); }

  .trend-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:700; }
  .trend-badge.up{ background:rgba(76,194,106,.15); color:var(--green); }
  .trend-badge.down{ background:rgba(229,56,59,.15); color:var(--red); }
  .trend-badge.flat{ background:rgba(169,157,135,.15); color:var(--text-dim); }

  .chart-wrap{ width:100%; }
  .chart-wrap canvas{ display:block; width:100%; }

  .podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:6px; }
  .podium .slot{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:16px; text-align:center; transition:transform .15s ease; }
  .podium .slot:hover{ transform:translateY(-3px) scale(1.02); }
  .podium .slot.gold{ border-color:var(--amber); box-shadow:0 0 18px rgba(56,189,248,.14); animation:goldGlow 2.4s ease-in-out infinite; }
  @keyframes goldGlow{ 0%,100%{ box-shadow:0 0 14px rgba(56,189,248,.12);} 50%{ box-shadow:0 0 22px rgba(56,189,248,.28);} }
  .podium .slot.silver{ border-color:#cfcabb; }
  .podium .slot.bronze{ border-color:#c98a4b; }
  .podium .medal{ font-size:24px; }
  .podium .name{ font-weight:700; margin:6px 0 2px; word-break:break-word; }
  .podium .amount{ font-family:'JetBrains Mono',monospace; color:var(--amber); font-weight:600; margin-top:6px; font-size:12.5px; }
  @media (max-width:640px){ .podium{ grid-template-columns:1fr; } }

  .folder{ border:1px solid var(--line); border-radius:12px; padding:0 12px; background:var(--panel-2); }
  .folder summary{ list-style:none; }
  .folder summary::-webkit-details-marker{ display:none; }
  .folder[open]{ padding-bottom:10px; }
  .chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:12.5px; display:flex; align-items:center; gap:8px; transition:transform .12s ease; }
  .chip:hover{ transform:translateY(-1px); }
  .chip select{ width:auto; padding:4px 8px; font-size:12px; }
  .chip .x{ cursor:pointer; color:var(--text-dim); font-weight:700; padding:0 3px; border-radius:4px; }
  .chip .x:hover{ color:var(--red); }

  .switch-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .track{ position:absolute; inset:0; background:var(--line); border-radius:20px; cursor:pointer; transition:background .15s ease; }
  .switch .track::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--cream); border-radius:50%; transition:transform .15s ease; }
  .switch input:checked + .track{ background:var(--red); }
  .switch input:checked + .track::before{ transform:translateX(18px); }

  .theme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
  .theme-swatch{
    border:2px solid var(--line); border-radius:10px; padding:10px; cursor:pointer; text-align:center; font-size:12px; font-weight:700;
    transition:transform .15s ease, border-color .15s ease; background:var(--panel-2);
  }
  .theme-swatch:hover{ transform:translateY(-2px); }
  .theme-swatch.active{ border-color:var(--amber); }
  .theme-swatch .dots{ display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
  .theme-swatch .dot{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }

  .badge-icon{ filter:drop-shadow(0 0 3px rgba(56,189,248,.5)); }

  .modal-bg{ position:fixed; inset:0; background:rgba(5,4,3,.82); display:flex; align-items:center; justify-content:center; z-index:50; animation:fadeBg .15s ease; cursor:zoom-out; padding:20px; overflow-y:auto; }
  @keyframes fadeBg{ from{ opacity:0; } to{ opacity:1; } }
  .modal-bg img{ max-width:90vw; max-height:85vh; border-radius:8px; border:1px solid var(--line); cursor:default; }

  #toastRoot{ position:fixed; bottom:20px; right:20px; z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
  .toast{
    background:var(--panel-2); border:1px solid var(--amber); color:var(--text); padding:12px 16px 12px 14px; border-radius:8px;
    font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.5); display:flex; align-items:center; gap:9px; animation:toastIn .25s cubic-bezier(.2,.8,.3,1);
    max-width:340px;
  }
  .toast.err{ border-color:var(--red); }
  .toast.record{ border-color:var(--green); }
  @keyframes toastIn{ from{ opacity:0; transform:translateX(20px) scale(.95); } to{ opacity:1; transform:translateX(0) scale(1); } }

  .two-col-form{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
  @media (max-width:520px){ .two-col-form{ grid-template-columns:1fr; } }
  .bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .bar-row .bname{ width:150px; font-size:12.5px; color:var(--text-dim); flex-shrink:0; }
  .bar-track{ flex:1; height:9px; background:var(--panel-3); border-radius:6px; overflow:hidden; }
  .bar-fill{ height:100%; background:var(--red); border-radius:6px; transition:width .5s cubic-bezier(.2,.8,.3,1), background .3s ease; }
  .bar-val{ width:110px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); flex-shrink:0; }

  .feed-list{ display:flex; flex-direction:column; gap:2px; }
  .feed-item{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line-soft); }
  .feed-item:last-child{ border-bottom:none; }
  .feed-icon{ font-size:18px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; flex-shrink:0; }
  .feed-body{ min-width:0; }
  .feed-main{ font-size:13px; }
  .feed-main b{ color:var(--amber); }
  .feed-sub{ font-size:11.5px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }

  .led-panel{ background:#0b0906; border:1px solid var(--line); border-radius:9px; padding:14px 16px; position:relative; overflow:hidden; }
  .led-panel::before{ content:''; position:absolute; inset:0; background:radial-gradient(120px 60px at 15% 0%, rgba(56,189,248,.08), transparent 70%); }
  .led-panel .lab{ font-family:'Oswald',sans-serif; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:6px; }
  .led-panel .val{ font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; color:var(--green); text-shadow:0 0 10px rgba(78,224,138,.35); }

  .locked-badge{ font-size:11px; color:var(--text-faint); font-style:italic; margin-top:4px; }

  @keyframes progressGrow{ from{ width:0; } }
  .goal-track{ height:16px; border-radius:8px; background:var(--panel-3); overflow:hidden; border:1px solid var(--line); }
  .goal-fill{ height:100%; background:linear-gradient(90deg, var(--amber), var(--red)); border-radius:8px; animation:progressGrow 1s cubic-bezier(.2,.8,.3,1); transition:width .5s ease; }

  #loadingScreen{
    position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px; transition:opacity .4s ease;
  }
  #loadingScreen .lsign{
    width:74px; height:74px; border-radius:14px;
    background:linear-gradient(155deg,#2a3648,#0c121c 65%); border:2px solid var(--amber);
    display:flex; align-items:center; justify-content:center; font-family:'Archivo Black'; color:var(--cream); font-size:18px;
    animation: signPulse 1.4s ease-in-out infinite;
  }
  #loadingScreen .ltitle{ font-family:'Archivo Black'; letter-spacing:.03em; font-size:15px; color:var(--amber); text-transform:uppercase; }
  #loadingScreen .lbar{ width:220px; height:5px; border-radius:6px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line); }
  #loadingScreen .lbar::after{
    content:''; display:block; height:100%; width:40%; background:linear-gradient(90deg, var(--amber), var(--red));
    border-radius:6px; animation:loadSlide 1s ease-in-out infinite;
  }
  @keyframes loadSlide{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(340%);} }
  #loadingScreen .lsub{ font-size:11.5px; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; }

  #loginScreen{
    position:fixed; inset:0; z-index:150; background:var(--bg); display:none; align-items:center; justify-content:center; padding:20px;
  }
  #loginScreen.show{ display:flex; }
  .login-card{
    width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:30px 28px; animation:cardIn .35s cubic-bezier(.2,.8,.3,1) both;
  }
  .login-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
  .login-role-tabs{ display:flex; gap:8px; margin-bottom:20px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:4px; }
  .login-role-tabs button{
    flex:1; background:transparent; border:none; color:var(--text-dim); padding:9px 8px; border-radius:6px; font-weight:700;
    font-size:13px; cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .login-role-tabs button.active{ background:var(--bg); color:var(--amber); }
  .login-error{ color:var(--red); font-size:12.5px; margin-top:8px; min-height:16px; }
  .login-foot{ margin-top:16px; font-size:11.5px; color:var(--text-faint); text-align:center; line-height:1.5; }

  .presence-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
  .presence-dot.on{ background:var(--green); box-shadow:0 0 6px rgba(76,194,106,.7); }
  .presence-dot.off{ background:var(--text-faint); }
  .session-pill{
    display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:20px;
    padding:6px 8px 6px 12px; font-size:12.5px; color:var(--text-dim);
  }
  .session-pill b{ color:var(--text); }
  .session-pill .logout{ background:transparent; border:1px solid var(--line); color:var(--text-dim); border-radius:16px; padding:4px 10px; font-size:11.5px; cursor:pointer; }
  .session-pill .logout:hover{ color:var(--red); border-color:var(--red); }

  @media (max-width:820px){
    .storefront{ padding:14px 16px; }
    .weeknav{ order:3; width:100%; justify-content:space-between; }
    .tabstrip{ padding:10px 14px 0; }
    .tabbtn .kbd{ display:none; }
    .main{ padding:16px; }
    #toastRoot{ bottom:20px; right:12px; left:12px; align-items:stretch; }
    .toast{ max-width:none; }
  }

  @media print{
    body *{ visibility:hidden; }
    #payslipPrintArea, #payslipPrintArea *{ visibility:visible; }
    #payslipPrintArea{ position:absolute; left:0; top:0; width:100%; }
    .no-print{ display:none !important; }
  }

  textarea{
    width:100%; background:#0d0b09; border:1px solid var(--line); color:var(--text); border-radius:7px;
    padding:10px 12px; font-size:14px; font-family:'Inter',sans-serif; resize:vertical;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea:hover{ border-color:#4a4032; }
  textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(56,189,248,.18); }
  input[type=date], input[type=time]{
    width:100%; background:#0d0b09; border:1px solid var(--line); color:var(--text); border-radius:7px;
    padding:9px 12px; font-size:13.5px; font-family:'JetBrains Mono',monospace;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input[type=date]:focus, input[type=time]:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(56,189,248,.18); }

  /* ---------- cloche de notifications ---------- */
  .notif-bell{
    position:relative; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    border-radius:50%; width:38px; height:38px; font-size:16px; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, transform .15s ease;
  }
  .notif-bell:hover{ border-color:var(--amber); transform:translateY(-1px); }
  .notif-count{
    position:absolute; top:-4px; right:-4px; background:var(--red); color:var(--cream); font-family:'JetBrains Mono',monospace;
    font-size:10px; font-weight:700; min-width:16px; height:16px; padding:0 3px; border-radius:9px; display:flex;
    align-items:center; justify-content:center; border:1.5px solid var(--bg);
  }
  .notif-bg{ align-items:flex-start; justify-content:flex-end; padding:78px 22px; }
  .notif-panel{
    width:100%; max-width:360px; max-height:76vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:14px; cursor:default; animation:cardIn .2s cubic-bezier(.2,.8,.3,1) both;
  }
  .notif-panel-head{ display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:10px; padding:0 4px; }
  .notif-list{ display:flex; flex-direction:column; gap:2px; }
  .notif-item{
    display:flex; gap:10px; padding:10px 8px; border-radius:8px; text-decoration:none; color:var(--text);
    border-bottom:1px solid var(--line-soft); transition:background .12s ease;
  }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item:hover{ background:rgba(56,189,248,.06); }
  .notif-icon{ font-size:17px; width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; }
  .notif-body{ min-width:0; }
  .notif-title{ font-size:12.5px; font-weight:700; }
  .notif-sub{ font-size:11.5px; color:var(--text-dim); margin-top:1px; }
  .notif-ts{ font-size:10.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; margin-top:2px; }

  /* ---------- annonces ---------- */
  .announce-list{ display:flex; flex-direction:column; gap:12px; }
  .announce-item{ background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:14px 16px; }
  .announce-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
  .announce-head b{ color:var(--amber); font-size:14px; }
  .announce-ts{ font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
  .announce-body{ font-size:13px; color:var(--text-dim); line-height:1.55; }

  /* ---------- réunions ---------- */
  .meeting-emp-check{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; cursor:pointer; margin:0 6px 6px 0; }
  .meeting-emp-check input{ accent-color:var(--red); }
  .meeting-card{ background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:9px; padding:14px 16px; margin-bottom:12px; }
  .meeting-card.past{ border-left-color:var(--text-faint); opacity:.75; }
  .meeting-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
  .meeting-card-head b{ font-size:14px; }
  .meeting-card-meta{ font-size:12px; color:var(--text-dim); margin-bottom:6px; }
  .meeting-card-desc{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:6px; }
  .meeting-card-who{ font-size:12px; color:var(--text-faint); }

  /* ---------- absences ---------- */
  .status-pill{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; }
  .status-pill.pending{ background:rgba(56,189,248,.15); color:var(--amber); }
  .status-pill.ok{ background:rgba(76,194,106,.15); color:var(--green); }
  .status-pill.no{ background:rgba(229,56,59,.15); color:var(--red); }
  .absence-req{ background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:12px; }
  .absence-req-main{ font-size:13.5px; margin-bottom:4px; }
  .absence-req-reason{ font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }
  .absence-req-actions{ display:flex; gap:8px; flex-wrap:wrap; }

  /* ---------- fiche personnelle / carte d'identité RP ---------- */
  .idcard{ background:linear-gradient(160deg, var(--panel-2), var(--panel-3)); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
  .idcard-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--line); }
  .idcard-sign{ width:44px; height:44px; border-radius:8px; background:linear-gradient(155deg,#2a3648,#0c121c 65%); border:2px solid var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Archivo Black'; color:var(--cream); font-size:11px; flex-shrink:0; }
  .idcard-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em; }
  .idcard-sub{ font-size:12px; color:var(--amber); margin-top:2px; }

  /* ---------- dossier RH (patron uniquement) ---------- */
  .rhnote{ background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--text-faint); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:12.5px; }
  .rhnote-avertissement{ border-left-color:var(--red); }
  .rhnote-felicitation{ border-left-color:var(--amber); }
  .rhnote-head{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-faint); margin-bottom:5px; font-family:'JetBrains Mono',monospace; }
  .rhnote-head .x{ margin-left:auto; cursor:pointer; color:var(--text-dim); font-weight:700; padding:0 4px; }
  .rhnote-head .x:hover{ color:var(--red); }