:root{
  --bg:#111216; --fg:#f2f4f8; --muted:#a8b0bd;
  --pri:#f6b26b; --pri-hi:#ffd7a3; --pri-dk:#b97a3d;
  --ok:#30d158; --err:#ff6b6b; --card:#171a22; --edge:#2a3242;
  --g1:#76e3ff; --g1b:#2b99ff; --g2:#ffd7a3; --g2b:#f6b26b; --g3:#b8f7d0; --g3b:#30d158;
    /* Palette alternative pour lvl2.g1 (évite doublon visuel avec lvl1.g1) */
  --g1l2:#d4caff; --g1l2b:#9b8cff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--pri);text-decoration:none}

#fileViewerOverlay{ --overlay-fg: #1b1b1b; }  /* change la couleur ici */
#fileViewerBox, #fileViewerHeader, #fileViewerClose{ color: var(--overlay-fg) !important; }

.masthead{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--edge);background:#141823;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.masthead .brand{margin-left:auto}
.logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--pri),var(--pri-dk))}
.logo-img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#2a2a2a}
.title small{display:block;color:var(--muted);font-size:.85rem;margin-top:1px}

.admin-quick{margin-left:auto;display:flex;gap:8px}

.mainnav{display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--edge);backdrop-filter:saturate(140%) blur(8px)}
.nav-groups{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.group{display:flex;gap:8px;align-items:center}
.sep{width:12px;height:16px;border-left:1px solid var(--edge);opacity:.7}
.group.g1 .navbtn{background:linear-gradient(180deg,var(--g1),var(--g1b));color:#00132b}
.group.g2 .navbtn{background:linear-gradient(180deg,var(--g2),var(--g2b));color:#2b1400}
.group.g3 .navbtn{background:linear-gradient(180deg,var(--g3),var(--g3b));color:#00210d}

.navbtn{padding:8px 12px;border-radius:10px;font-weight:700;border:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);cursor:pointer}
.navbtn.active{outline:2px solid var(--pri-hi)}

header,nav,main{max-width:1200px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--edge);border-radius:14px;margin:16px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.35)}

.btn{background:linear-gradient(180deg,var(--pri),var(--pri-dk));color:#2b1400;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.pill{padding:1.5px 8px;border-radius:999px;background:#202737;border:1px solid var(--edge);color:var(--fg);cursor:pointer}
.pill.warn{background:#2c1a1a;border-color:#5a2b2b}

.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align: left; padding:3px;border-bottom:1px solid var(--edge)}
.row{display:flex;gap:12px;flex-wrap:wrap}.col{flex:1 1 320px}
.input,select{width:100%;padding:10px;background:#0e1118;color:var(--fg);border:1px solid var(--edge);border-radius:10px;appearance:none}
select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23f2f4f8" d="M1 1l5 5 5-5"/></svg>');background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}

.actions-inline{display:flex;gap:8px;align-items:center}
.editing .panel{background:#1a2130;border:1px solid #3b4a68;box-shadow:0 0 0 2px rgba(118,227,255,.2) inset}
.panel{border:1px solid var(--edge);border-radius:12px;padding:12px;margin:12px 0}

.badge-yes{background:#10321b;color:#8ff3a4;border:1px solid #1e6a33;padding:2px 8px;border-radius:6px;font-weight:700}
.badge-no{background:#381313;color:#ff9b9b;border:1px solid #6a1e1e;padding:2px 8px;border-radius:6px;font-weight:700}

.chf{text-align:right;white-space:nowrap}.chf .num{display:inline-block;min-width:120px;text-align:right}

.dropzone{border:2px dashed var(--edge);border-radius:12px;padding:16px;text-align:center;margin:12px 0;background:#0f1420}
.dropzone.drag{background:#0b1828;border-color:#3fa9f5}

.grid-months{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}
.grid-months .month{border:1px solid var(--edge);border-radius:12px;padding:10px}
.grid-months .mname{font-weight:700;margin-bottom:6px}
.stat-ok{color:#21d07a;font-weight:700}
.stat-err{color:#ff6b6b;font-weight:700}

body.guest *{-webkit-user-select:none;user-select:none}
body.guest{-webkit-touch-callout:none}
@media print{
  body{background:#fff;color:#000}
  .no-print,.masthead,.mainnav{display:none !important}
  .card{box-shadow:none;border:1px solid #000}
}
.print-mode .masthead,.print-mode .mainnav{display:none}
/* Séparateur entre groupes (optionnel) */
.group-sep{width:1px;background:var(--edge);align-self:stretch;opacity:.9}

/* Palette par groupe (tu peux ajuster les teintes) */
.group.g3 .navbtn{
  background:linear-gradient(180deg,#9be7ff,#47b7e8);
  color:#041d2a;
}
.group.g3 .navbtn.active{ outline:2px solid #c9f1ff }

.group.g4 .navbtn{
  background:linear-gradient(180deg,#ffd166,#f6b26b);
  color:#2b1400;
}
.group.g4 .navbtn.active{ outline:2px solid var(--pri-hi) }

/* ==== Niveaux de navigation ==== */
.mainnav.lvl1{ border-bottom:1px solid var(--edge); }
.mainnav.lvl2{ border-bottom:1px dashed var(--edge); }

/* Menu principal intégré dans le header */
.masthead .mainnav.lvl1.mast-inline{
  padding:0;            /* pas de padding supplémentaire dans le header */
  border:none;          /* évite double bordure avec le header */
  flex:1 1 auto;        /* prend la place à gauche */
}
.masthead .mainnav.lvl1 .primary{ width:100%; }
.masthead .brand{ margin-left:auto } /* déjà présent plus haut, confirme l’alignement à droite */

/* Compactage supplémentaire sur petits écrans */
@media (max-width: 720px){
  .masthead .mainnav.lvl1.mast-inline{ margin-bottom:4px; }
}

/* Réutilisation des palettes g1/g2/g3 pour chaque niveau (groupes distincts) */
.mainnav.lvl1 .group.g1 .navbtn{ background:linear-gradient(180deg,var(--g1),var(--g1b)); color:#00132b; }
.mainnav.lvl1 .group.g2 .navbtn{ background:linear-gradient(180deg,var(--g2),var(--g2b)); color:#2b1400; }

/* Quitter / Connexion (groupe 3 de lvl1) */
.mainnav.lvl1 .group.quit .navbtn{
  background:linear-gradient(180deg,#ffb3b3,#ff6b6b);
  color:#2b0000;
  font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.mainnav.lvl1 .group.quit .navbtn:hover{ filter:brightness(1.05); }

/* Niveau 2 : on garde g1/g2/g3 existants (déjà définis plus haut) */
.mainnav.lvl2 .group.g1 .navbtn{ background:linear-gradient(180deg,var(--g1l2),var(--g1l2b)); color:#0c0833; }
.mainnav.lvl2 .group.g2 .navbtn{ background:linear-gradient(180deg,var(--g2),var(--g2b)); color:#2b1400; }
.mainnav.lvl2 .group.g3 .navbtn{ background:linear-gradient(180deg,var(--g3),var(--g3b)); color:#00210d; }

/* Responsive : pile les groupes si écran étroit */
@media (max-width: 720px){
  .nav-groups{ gap:10px; }
  .sep{ display:none; }
}
/* Bouton "Fermer l'année" (Niveau 2, à droite) */
.mainnav.lvl2 .year-close { margin-left: auto; }
.mainnav.lvl2 .year-close .navbtn.toggle{
  background: linear-gradient(180deg,#e2e8f0,#cbd5e1);
  color:#0f172a;
  font-weight:800;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(0,0,0,0.08);
  background:#f5f5f5;
  color:#222;
  vertical-align:middle;
}
.badge-open { background:#e8f7ee; color:#11693a; border-color:#bfe6cf; }
.badge-closed { background:#fff7e6; color:#7a4b00; border-color:#ffe0a8; }
.badge-locked { background:#f3e8ff; color:#4a1faa; border-color:#d8c4ff; }
.app-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.alert {
  position: relative;
  margin: 8px auto 12px auto;
  padding: 10px 40px 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  max-width: 1200px;
}
.alert-info    { background:#eef6ff; border-color:#cfe6ff; color:#0b3a66; }
.alert-success { background:#edfdf4; border-color:#c9f0dc; color:#125a37; }
.alert-error   { background:#fff1f2; border-color:#ffd2d6; color:#8a0f1b; }
.alert-content { font-size:14px; font-weight:600; }
.alert-close {
  position:absolute; right:10px; top:8px;
  border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer;
  color: inherit;
}