/* ========== Core ========== */
:root{
  --bg:#0b1220; --panel:#0f172a; --card:#0e1528; --line:#1f2a44; --soft:#16223b;
  --text:#e6ecff; --muted:#a8b3cf;
  --brand:#6ea8ff; --primary:#2e6df6; --primary-600:#2557c9;
  --radius:14px; --shadow:0 8px 26px rgba(0,0,0,.35);
  --z-max:2147483647;
}
*{box-sizing:border-box} html,body{margin:0;background:transparent;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:none} a:hover{opacity:.9}
.container{max-width:1150px;margin:0 auto;padding:0 18px}

/* Layers + thèmes */
#bgStars{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;background:#0b1220}
#bg-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg)}
.nav,main,.footer{position:relative;z-index:2}
body.theme-luna    #bgStars{display:block} body.theme-luna    #bg-layer{display:none}
body.theme-noir    #bg-layer{background:radial-gradient(1200px 800px at 10% -10%,#0b1220 0%,#090e1a 40%,#080d17 100%)}
@keyframes nebulaPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.75;transform:scale(1.02)}}
body.theme-galaxy  #bg-layer{
  background:
    radial-gradient(80vw 60vh at 80% 20%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(70vw 50vh at 20% 30%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(60vw 45vh at 50% 80%, rgba(168,85,247,.10), transparent 60%), #0b1020;
}

/* ========== Navbar ========== */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,16,30,.35);backdrop-filter:blur(8px) saturate(1.1);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-brand{display:flex;align-items:center;gap:10px;color:#cfe0ff;font-weight:900}
.brand-logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(110,168,255,.25))}
.brand-name{font-size:20px}
.links{display:flex;gap:10px;align-items:center}
.links a{padding:8px 10px;border-radius:10px;color:#d6def6}
.links a:hover{background:var(--soft)}
.btn{background:var(--primary);color:#fff;padding:10px 14px;border-radius:12px;border:1px solid var(--primary);box-shadow:var(--shadow)}
.btn:hover{background:var(--primary-600)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:10px 14px;border-radius:12px}
.btn-ghost-sm{background:transparent;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:10px;font-size:12.5px}

/* ========== Dropdown Thème (petit) ========== */
.theme-dd{position:relative}
.theme-dd>summary{list-style:none;cursor:pointer}
.theme-dd>summary::-webkit-details-marker{display:none}
.theme-dd .theme-menu{
  position:fixed; left:var(--theme-x,0px); top:var(--theme-y,0px);
  z-index:var(--z-max); min-width:160px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:0 10px 24px rgba(0,0,0,.35); display:none;
}
.theme-dd[open] .theme-menu{display:block}
.theme-menu button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;background:transparent;color:var(--text);border-radius:8px;font:inherit;cursor:pointer;font-size:14px}
.theme-menu button:hover{background:var(--soft)}
.theme-dd .theme-menu::before{content:"";position:absolute;width:10px;height:10px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);top:-6px;right:14px}

/* ========== Home (hero + features + CTA) ========== */
.home-wrap{padding-top:10px}
.hero-landing,.home-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;padding:24px 0 12px}
@media (max-width:980px){.hero-landing,.home-hero{grid-template-columns:1fr}}
.hero-left .pill{display:inline-block;font-size:12px;color:#cfe0ff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:#0d1730;margin-bottom:12px}
.hero-left h1{font-size:36px;line-height:1.15;margin:6px 0 10px}
.hero-left h1 .grad{background:linear-gradient(90deg,#7c8cff,#6ea8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#b7c3e3;max-width:60ch;margin:8px 0 0}
.cta-row{display:flex;gap:10px;margin:14px 0 14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:12px;margin:6px 0 0;flex-wrap:wrap}
.hero-stats .stat{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#0f172a,#0b1425);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-height:36px}
.hero-right{display:flex;justify-content:center}
.hero-card{width:min(560px,96%);background:linear-gradient(180deg,#0f172a,#0d162b);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.hc-head{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#0c1426}
.hc-dot{width:10px;height:10px;border-radius:999px;border:1px solid #0003;display:inline-block}
.hc-dot.r{background:#ef4444}.hc-dot.y{background:#f59e0b}.hc-dot.g{background:#22c55e}
.hc-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px}
@media (max-width:600px){.hc-body{grid-template-columns:1fr}}
.hc-col{background:#0e1528;border:1px solid var(--line);border-radius:12px;padding:10px}
.hc-title{font-size:12.5px;letter-spacing:.14em;color:#cdd6ff;margin:2px 0 8px}
.hc-item{height:36px;border:1px solid var(--line);border-radius:10px;background:radial-gradient(120% 120% at 0% 0%,#0e172a,#0b1324);margin:8px 0}
.hc-item.long{height:56px}
.hc-item.done{background:linear-gradient(90deg,rgba(34,197,94,.16),rgba(34,197,94,.06));border-color:#1f3e2c}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 10px}
@media (max-width:980px){.features{grid-template-columns:1fr}}
.feature{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:14px;background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid var(--line);border-radius:var(--radius)}
.f-ico{width:44px;height:44px;display:grid;place-items:center;font-size:22px;background:#0e162b;border:1px solid var(--line);border-radius:12px}
.feature h3{margin:0;line-height:1.15}
.feature p{margin:4px 0 0;color:var(--muted)}
.cards-cta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 28px}
@media (max-width:980px){.cards-cta{grid-template-columns:1fr}}
.cards-cta .card{padding:16px 18px}
.cards-cta .card h3{margin:0 0 6px}
.cards-cta .card p{margin:0 0 14px;line-height:1.5}

/* ========== Projets (liste) ========== */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:14px}
.project-card{background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .12s,border-color .12s,box-shadow .12s}
.project-card:hover{transform:translateY(-2px);border-color:#2b3b66;box-shadow:var(--shadow)}
.project-cover{position:relative;height:190px;background:#0e1528;overflow:hidden}
.project-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.project-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.62) 100%)}
.project-cover-footer{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.project-cover-title{font-weight:800}
.project-body{padding:14px}
.project-desc{color:var(--muted);font-size:14px;line-height:1.45;min-height:40px}
.project-meta{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.badge{padding:4px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px}

/* ========== Page projet (kanban) ========== */
.proj-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}
.proj-head .left{display:flex;align-items:center;gap:12px}
.proj-title{margin:0;font-size:24px;font-weight:850}
.meta{display:flex;gap:12px;color:var(--muted);font-size:13px}
.right{display:flex;gap:8px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
@media (max-width:980px){.board{grid-template-columns:1fr}}
.col{background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid var(--line);border-radius:16px;padding:12px;min-height:240px}
.col-title{margin:4px 6px 12px;letter-spacing:.12em;font-size:13px;color:#cdd6ff}
.task-card{background:radial-gradient(140% 120% at 0% 0%,#0e172a 0%,#0c1426 45%,#0a1222 100%);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.task-title{margin:0 0 6px;font-weight:750}
.task-desc{margin:0 0 10px;color:var(--muted);line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tag{font-size:12.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;background:#0f172a}
.tag.due{background:#1d1b12;border-color:#3a3117;color:#f7e3a1}
.tag.by{background:#101826}
.tag.status{background:#0f1522}
.prio-basse{color:#9df0c5;border-color:#14532d;background:#0f1a15}
.prio-moyenne{color:#fde68a;border-color:#7c2d12;background:#1e140b}
.prio-haute{color:#ffb4b4;border-color:#7f1d1d;background:#1c0f10}
.row-actions{display:flex;gap:8px}

/* ========== Forms / Auth (déjà propres) ========== */
.form{display:flex;flex-direction:column;gap:10px}
label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input,textarea,select{background:linear-gradient(180deg,#0c1426,#0a1222);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px}
input:focus,textarea:focus,select:focus{border-color:#2b4a86;box-shadow:0 0 0 3px rgba(110,168,255,.15)}
textarea{min-height:110px;resize:vertical}
.alert{background:#2a1216;border:1px solid #5c1e27;color:#ffc9c9;padding:10px 12px;border-radius:12px;margin-bottom:10px}
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,17,32,.94),rgba(10,17,32,.94));color:var(--muted);padding:18px 0}

/* ===================== AUTH — look clean & glass ===================== */
.auth-wrap{
  min-height: calc(100vh - 140px);
  padding: 28px 0;
  display: grid;
  place-items: center;
}
.auth-card{
  width: min(480px, 96%);
  border-radius: 18px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
    linear-gradient(180deg, var(--card), var(--panel));
  border: 1px solid var(--line);
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}
.auth-card h1{
  margin: 4px 0 10px;
  font-weight: 800;
  font-size: 24px;
}
.auth-card .muted{ color: var(--muted); margin: 0 0 16px; }
.auth-row{ display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px){ .auth-row.two{ grid-template-columns: 1fr 1fr; } }

.auth-card label{ font-size: 13px; color: var(--muted); gap: 6px; }
.auth-card input{
  background: linear-gradient(180deg, #0c1426, #0a1222);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 12px;
  outline: none;
}
.auth-card input:focus{
  border-color: #2b4a86;
  box-shadow: 0 0 0 3px rgba(110,168,255,.15);
}
.auth-actions{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.auth-actions .btn{ padding: 11px 16px; }
.auth-help{ font-size: 12.5px; color: var(--muted); }
.auth-help a{ color: var(--brand); }

.auth-divider{ height: 1px; background: var(--line); margin: 14px 0; }

/* Alert propre */
.alert{
  background: #2a1216; border: 1px solid #5c1e27; color: #ffc9c9;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 12px;
}

/* ===================== AURORA — CSS only, smooth blobs ===================== */
/* On réutilise #bg-layer et on y peint des auroras animés */
body.theme-aurora #bgStars{ display: none; }
body.theme-aurora #bg-layer{
  display: block;
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(34,197,94,.06), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(59,130,246,.06), transparent 60%),
    linear-gradient(180deg, #091124 0%, #0a1222 55%, #091124 100%);
  overflow: hidden;
}
body.theme-aurora #bg-layer::before,
body.theme-aurora #bg-layer::after{
  content:"";
  position: absolute;
  inset: -20%;
  filter: blur(60px);
  opacity: .65;
  mix-blend-mode: plus-lighter;       /* beaux mélanges lumineux */
  animation: auroraFloat 22s ease-in-out infinite alternate;
}
body.theme-aurora #bg-layer::before{
  background:
    radial-gradient(35vw 35vw at 30% 40%, rgba(34,197,94,.25), transparent 60%),
    radial-gradient(28vw 28vw at 70% 65%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(30vw 30vw at 55% 20%, rgba(59,130,246,.18), transparent 60%);
}
body.theme-aurora #bg-layer::after{
  background:
    radial-gradient(36vw 36vw at 65% 45%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(28vw 28vw at 35% 70%, rgba(147,51,234,.20), transparent 60%),
    radial-gradient(32vw 32vw at 45% 25%, rgba(139,92,246,.18), transparent 60%);
  animation-duration: 26s;
  animation-delay: -6s;
}

@keyframes auroraFloat{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00) rotate(0.2deg); }
  50%  { transform: translate3d( 1%,  2%, 0) scale(1.04) rotate(-0.2deg); }
  100% { transform: translate3d(-1%,  1%, 0) scale(1.02) rotate(0.0deg); }
}


/* Barre d'actions Projets — bouton + recherche sur une ligne */
.projects-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;          /* passe à la ligne en petit écran */
  margin:12px 0 18px;
}

.projects-actions .btn{ position:relative; z-index:auto; }

.projects-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 340px;         /* prend l’espace à droite du bouton */
}

.projects-search input[type="text"]{
  flex: 1 1 auto;          /* s’étire sans écraser le bouton */
  min-width: 260px;
}
/* Sûreté: aucun overlay ne bloque les clics sur la page */
#bgStars, #bgAurora, #bg-layer { pointer-events: none !important; }

/* ---------------------------- */
/* Inputs génériques + spacing  */
/* ---------------------------- */
.form .row{ display:grid; gap:12px; }
@media (min-width: 900px){
  .form-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start; }
}
.form .card-soft{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
              linear-gradient(180deg, var(--card), var(--panel));
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(6px) saturate(1.06);
}
.form h2{ font-size:18px; margin:0 0 10px; }

/* ---------------------------- */
/* SELECT custom (thème friendly) */
/* ---------------------------- */
.select{
  position: relative;
}
.select select{
  appearance: none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width: 100%;
  padding: 12px 42px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0c1426, #0a1222);
  color: var(--text);
  outline: none;
}
.select select:focus{
  border-color: #2b4a86;
  box-shadow: 0 0 0 3px rgba(110,168,255,.15);
}
.select::after{
  content:"";
  position:absolute;
  right:12px; top:50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  background: conic-gradient(from 45deg, transparent 0 75%, var(--text) 0) no-repeat;
  /* petite flèche ▼ */
  mask: radial-gradient(circle at 70% 70%, #0000 7px, #000 8px);
  opacity:.7;
}
select option{
  background: #0b1220;     /* lisible même menu natif */
  color: #e6ecff;
}
select option:checked{
  background: #2b4a86 linear-gradient(#2b4a86,#2b4a86);
  color: #fff;
}

/* ---------------------------- */
/* File picker stylé + drag&drop */
/* ---------------------------- */
.file-drop{
  border: 1px dashed #2a3a63;
  background: linear-gradient(180deg, #0b1426, #0a1222);
  border-radius: 14px;
  padding: 18px;
  display: grid;
  gap: 8px;
  cursor: pointer;
}
.file-drop:hover{ border-color:#3b59a6; }
.file-drop .hint{ font-size:12.5px; color: var(--muted); }
.file-drop .name{ font-size:13px; color: var(--text); opacity:.9; }
.file-drop input[type="file"]{ display:none; }
.file-drop.drag{ border-color:#6ea8ff; box-shadow: 0 0 0 3px rgba(110,168,255,.15) inset; }

.preview{
  border-radius: 14px; overflow:hidden;
  border: 1px solid var(--line);
  background: #0b1420;
  aspect-ratio: 16/10;
  display:grid; place-items:center;
  color: var(--muted);
}
.preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------- */
/* Boutons + helpers            */
/* ---------------------------- */
.actions{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.small{ font-size:12.5px; color:var(--muted); }

/* ---------------------------- */
/* Barre actions pages projets  */
/* ---------------------------- */
.projects-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 18px;
}
.projects-search{ display:flex; align-items:center; gap:10px; flex:1 1 340px; }
.projects-search input[type="text"]{ flex:1 1 auto; min-width:260px; }


/* ---------- HERO PROJET ---------- */
.project-hero{
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: 16px;
  border:1px solid var(--line);
  background: #0b1220;
}
.project-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  filter: brightness(.6);
}
.project-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.35) 70%, rgba(0,0,0,.55));
}
.project-hero-content{
  position: absolute; left:22px; right:22px; bottom:18px;
}
.project-title{ margin:0 0 6px; }

/* ---------- TOOLBAR EDIT ---------- */
.project-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:16px 0 18px;
  flex-wrap: wrap;
}
.toolbar-form{
  display:flex; align-items:center; gap:10px; flex-wrap: wrap;
}
.toolbar-form .ctl{
  height: 38px; padding: 8px 10px; border-radius: 10px;
  border:1px solid var(--line); background: var(--panel); color: var(--text);
}
.toolbar-form .ctl.small{ width: 46px; padding:0; }
.toolbar-form .ctl.file{ display:inline-grid; align-items:center; padding:0 10px; }
.toolbar-form .ctl.file input[type="file"]{ display:none; }
.toolbar-form .ctl.file span{ font-size: 13px; opacity:.9; }

/* ---------- GRID TÂCHE ---------- */
.triple{ display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:10px; }
@media (max-width: 880px){ .triple{ grid-template-columns:1fr; } }

/* ---------- KANBAN ---------- */
.kanban{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 24px;
}
@media (max-width: 1024px){ .kanban{ grid-template-columns: 1fr; } }

.kanban-col{ border:1px solid var(--line); background: var(--panel); border-radius:14px; padding:12px; }
.kanban-head{ font-weight:700; opacity:.9; margin-bottom:8px; }

.task-card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-radius: 12px;
  padding: 10px;
  margin-bottom:10px;
}
.task-title{ font-weight:600; margin-bottom:4px; }
.task-desc{ opacity:.9; margin-bottom:6px; }
.task-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.task-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Modals */
.modal::backdrop{ background: rgba(0,0,0,.45); }
.modal{ border:none; border-radius:16px; padding:0; }
.modal-card{ width:min(720px, 92vw); background: var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.modal-backdrop{ position:fixed; inset:0; background:transparent; border:none; }
.preview{ border:1px solid var(--line); border-radius:10px; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; }
.preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Modals propres (pas d'overlay interne qui capte les clics) */
.modal::backdrop{ background: rgba(0,0,0,.45); }
.modal{ border:none; padding:0; border-radius:16px; }
.modal-card{ width:min(720px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.preview{ border:1px solid var(--line); border-radius:10px; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; }
.preview img{ width:100%; height:100%; object-fit:cover; }

/* Barre d'actions */
.project-toolbar{ display:flex; gap:10px; margin:14px 0 18px; flex-wrap:wrap; }

/* Kanban + cartes tâches plus jolies */
.kanban{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-bottom:24px; }
@media (max-width:1024px){ .kanban{ grid-template-columns:1fr; } }

.kanban-col{ border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:12px; }
.kanban-head{ font-weight:700; opacity:.9; margin-bottom:8px; letter-spacing:.4px; }

.task-card{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px;
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.task-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; }
.task-title{ font-weight:600; }
.task-desc{ opacity:.92; margin:6px 0 8px; }
.task-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.chip{ border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; background:var(--panel); }
.chip.haute{ border-color:#e35; }
.chip.moyenne{ border-color:#6ea8ff; }
.chip.basse{ border-color:#2ecc71; }

.task-edit summary{ list-style:none; cursor:pointer; }
.task-edit summary::marker{ content:''; }
.task-edit > summary{ padding:4px 10px; border:1px solid var(--line); border-radius:8px; }
.task-edit .card.soft{ margin-top:8px; }

/* Hero */
.project-hero{ position:relative; height:340px; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#0b1220; }
.project-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6); }
.project-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.35) 70%, rgba(0,0,0,.55)); }
.project-hero-content{ position:absolute; left:22px; right:22px; bottom:18px; }
.project-title{ margin:0 0 6px; }

/* Grids */
.triple{ display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:10px; }
@media (max-width:880px){ .triple{ grid-template-columns:1fr; } }

/* Boutons */
.btn-outline{
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  transition: .15s ease;
}
.btn-outline:hover{ background: rgba(255,255,255,.05); }

.btn-danger{
  --danger: #ef4444;
  border:1px solid color-mix(in oklab, var(--danger), black 20%);
  background: linear-gradient(180deg,
             color-mix(in oklab, var(--danger), white 8%),
             color-mix(in oklab, var(--danger), black 6%));
  color:#fff;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 0 color-mix(in oklab, var(--danger), black 30%);
  transition: transform .05s ease, filter .15s ease;
}
.btn-danger:hover{ filter: brightness(1.03); }
.btn-danger:active{ transform: translateY(1px); }
.btn-danger.solid{ box-shadow: 0 3px 0 color-mix(in oklab, var(--danger), black 35%); }

.small{ padding:6px 10px; font-size: 13px; border-radius: 9px; }

.btn-danger{
  --danger: #ef4444;
  border:1px solid color-mix(in oklab, var(--danger), black 25%);
  background: linear-gradient(180deg,
             color-mix(in oklab, var(--danger), white 10%),
             color-mix(in oklab, var(--danger), black 8%));
  color:#fff;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 3px 0 color-mix(in oklab, var(--danger), black 35%);
  transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-danger:hover{ filter: brightness(1.06); }
.btn-danger:active{ transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in oklab, var(--danger), black 40%); }
.btn-danger.small{ padding:6px 10px; font-size:13px; border-radius:10px; }

.btn-outline{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  color: var(--text);
  padding: 8px 12px;
  border-radius: 12px;
  transition: .15s ease;
}
.btn-outline.small{ padding:6px 10px; font-size:13px; border-radius:10px; }
.btn-outline:hover{ background: rgba(255,255,255,.06); }

/* ---------- NAV BRAND / LOGO ---------- */
.nav .brand-img{
  height: 28px;           /* taille fixe et petite */
  width: auto;
  display: block;
  margin-right: .5rem;
  flex-shrink: 0;
}
.nav .nav-brand{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* ---------- AVATAR ---------- */
.avatar-btn{
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.avatar-circle{
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  background: rgba(120, 144, 255, .1);
  color: #cfe0ff; border: 1px solid rgba(120,144,255,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
}

/* ---------- POPOVER (menu discret) ---------- */
.menu-anchor{ position: relative; display: inline-block; }
.menu-pop{
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 220px;
  background: rgba(7,12,24,.85);
  border: 1px solid rgba(120,144,255,.18);
  border-radius: 14px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(120,144,255,.10) inset;
  backdrop-filter: blur(10px);
  padding: 8px;
  z-index: 5000;
  animation: popIn .14s ease-out;
}
.menu-pop::before{ /* petit caret */
  content:"";
  position:absolute; right:14px; top:-7px;
  width:12px; height:12px; transform: rotate(45deg);
  background: rgba(7,12,24,.85);
  border-left:1px solid rgba(120,144,255,.18);
  border-top:1px solid rgba(120,144,255,.18);
}
@keyframes popIn{ from{ opacity:0; transform: translateY(-6px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }

.menu-sec{ padding: 6px 6px; }
.menu-head{
  font-weight: 600; color:#dbe7ff; padding: 8px 10px 6px 10px;
  border-bottom: 1px solid rgba(120,144,255,.12); margin-bottom: 6px;
}
.menu-item,
.menu-item button{
  width: 100%;
  display: flex; align-items: center; gap: .6rem;
  padding: 9px 10px; border-radius: 10px;
  color:#cfe0ff; text-decoration: none; border:0; background:transparent;
  cursor: pointer; font: inherit; text-align: left;
}
.menu-item:hover,
.menu-item button:hover{
  background: rgba(120,144,255,.10);
}

/* version alignée à gauche (pour le bouton Thème si tu veux) */
.menu-pop.left{ left: 0; right: auto; }

/* empêche les images de prendre toute la largeur si un style global affecte img */
.nav .brand-img, .menu-pop img{ max-height: 100%; max-width: 100%; }

/* ===== ÉTOILES : toujours derrière tout, impossible de griser la page ===== */
html, body { background:#0b1220; }
#bgStars{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  display:block;
  z-index: -1;            /* <--- derrière TOUT */
  pointer-events:none;
  opacity: .8;
}

/* Le contenu n'a plus besoin de z-index spéciaux */
.nav{ position: sticky; top:0; z-index: 10; } /* nav devant le contenu, mais derrière le popover root */
.menu-anchor{ position: relative; }

/* Styles du menu (on va le porter dans #popoverRoot en fixed) */
.menu-pop{
  position: fixed;            /* <--- plus 'absolute' */
  left: 0; top: 0;            /* coordonnées appliquées par JS */
  min-width: 220px;
  padding: 8px;
  background: rgba(7,12,24,.92);
  border: 1px solid rgba(120,144,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,144,255,.10) inset;
  pointer-events:auto;        /* car #popoverRoot est pointer-events:none */
}
.menu-pop[hidden]{ display:none !important; }
.menu-sec{ padding:6px; }
.menu-item,
.menu-item button{
  width:100%;
  display:flex; align-items:center; gap:.6rem;
  padding:9px 10px; border-radius:10px;
  color:#cfe0ff; text-decoration:none; border:0; background:transparent;
  cursor:pointer; font:inherit; text-align:left;
}
.menu-item:hover,
.menu-item button:hover{ background: rgba(120,144,255,.10); }

/* ====== fond de page ====== */
/* le background se met sur <html>, pas sur <body>,
   comme ça le canvas peut passer AU-DESSUS de la couleur de fond */
html { background:#0b1220; }
body { background: transparent; }

/* ====== étoiles : plein écran au-dessus du fond, sous le contenu ====== */
#bgStars{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: 0;          /* AU-DESSUS du fond (html), SOUS le contenu */
  opacity: .8;
}

/* le contenu passe au-dessus des étoiles */
header, .nav, main, footer, .container, .card { position: relative; z-index: 1; }

/* nav et menus */
.nav{
  position: sticky; top:0;
  z-index: 10;         /* > contenu, < popovers */
  overflow: visible;   /* pour sécurité */
}

.menu-anchor{ position: relative; }

/* menus en fixed (portalisés dans <body>) */
.menu-pop{
  position: fixed;     /* coordonnées données par JS */
  left: 0; top: 0;
  min-width: 220px;
  padding: 8px;
  background: rgba(7,12,24,.92);
  border: 1px solid rgba(120,144,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,144,255,.10) inset;
  pointer-events: auto;        /* important: #popoverRoot est none */
  z-index: 2147483647;         /* toujours devant */
}
.menu-pop[hidden]{ display:none !important; }

.menu-sec{ padding:6px; }
.menu-item,
.menu-item button{
  width:100%;
  display:flex; align-items:center; gap:.6rem;
  padding:9px 10px;
  border-radius:10px;
  color:#cfe0ff; text-decoration:none; border:0; background:transparent;
  cursor:pointer; font:inherit; text-align:left;
}
.menu-item:hover,
.menu-item button:hover{ background: rgba(120,144,255,.10); }

/* logo nav (évite qu'il grossisse) */
.nav .brand-img{ height:28px; width:auto; display:block; }

/* ==== Fond global ==== */
html { background: #0b1220; }      /* couleur de base sous le canvas */
body { background: transparent; }  /* body transparent pour laisser voir le canvas */

/* Canvas étoiles : plein écran, derrière le contenu, au-dessus de la couleur html */
#bgStars{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;              /* <== sous le contenu, mais au-dessus de html */
  pointer-events: none;
  opacity: .8;
}

/* Contenu > étoiles */
header, .nav, main, footer, .container, .card, .panel, .sheet {
  position: relative;
  z-index: 1;
}

/* >>> TRÈS IMPORTANT <<<
   Beaucoup de layouts mettent un fond opaque sur ces conteneurs.
   On les force transparents pour que les étoiles restent visibles.
   Ajuste si tu veux, mais c’est la cause de "j’ai des étoiles que sous le footer". */
main, .content, .page, .wrapper, .app, .page-wrap, .content-wrap {
  background: transparent !important;
}

/* Nav et popovers devant tout le contenu (mais pas trop élevé) */
.nav{
  position: sticky; top:0;
  z-index: 5000;
  overflow: visible;
}

/* Dropdowns (Thème / Profil) — ancrés sous le bouton */
.menu-anchor{ position: relative; }
.menu-pop{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: rgba(7,12,24,.92);
  border: 1px solid rgba(120,144,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,144,255,.10) inset;
  z-index: 10000;                       /* devant le contenu + étoiles */
}
.menu-pop[hidden]{ display:none !important; }
.menu-pop.left{ left:0; right:auto; }

.menu-sec{ padding:6px; }
.menu-item, .menu-item button{
  width:100%;
  display:flex; align-items:center; gap:.6rem;
  padding:9px 10px;
  border-radius:10px;
  color:#cfe0ff; text-decoration:none; border:0; background:transparent;
  cursor:pointer; font:inherit; text-align:left;
}
.menu-item:hover, .menu-item button:hover{
  background: rgba(120,144,255,.10);
}

/* Logo nav (évite qu'il change de taille) */
.nav .brand-img{ height:28px; width:auto; display:block; }

/* --- FIX THEME LUNA : enlever tout overlay/pseudo-élément qui cache les étoiles --- */
.theme-luna::before,
.theme-luna::after,
.theme-luna body::before,
.theme-luna body::after,
.theme-luna .page::before,
.theme-luna .page::after,
.theme-luna .hero::before,
.theme-luna .hero::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Wrappers souvent opaques dans Luna → transparents pour voir #bgStars */
.theme-luna main,
.theme-luna .content,
.theme-luna .page,
.theme-luna .wrapper,
.theme-luna .app,
.theme-luna .page-wrap,
.theme-luna .content-wrap {
  background: transparent !important;
}

/* Et si Luna pose un "fond" via une classe utilitaire */
.theme-luna [class*="bg-"],
.theme-luna .bg,
.theme-luna .overlay {
  background: transparent !important;
}

/* Assure la pile : étoiles sous le contenu, au-dessus de html */
html { background:#0b1220; }
body { background: transparent; }
#bgStars{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.8; }
header, .nav, main, footer, .container, .card { position:relative; z-index:1; }

/* =========================
   FIX FINAL THEME “LUNA”
   étoiles visibles sur TOUTE la page
   ========================= */

/* 1) base: étoiles au-dessus de html, sous le contenu */
html { background:#0b1220; }
body { background:transparent; }
#bgStars { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.8; }
header, .nav, main, footer, .container, .card { position:relative; z-index:1; }

/* 2) Luna: désactive TOUT fond global/overlay qui recouvre la page */
.theme-luna::before,
.theme-luna::after,
.theme-luna body::before,
.theme-luna body::after {
  content:none !important; display:none !important; background:transparent !important;
}

/* 3) Luna: force les wrappers “page” à être transparents */
.theme-luna main,
.theme-luna #main,
.theme-luna .site-main,
.theme-luna .page,
.theme-luna .page-wrap,
.theme-luna .wrapper,
.theme-luna .content,
.theme-luna .content-wrap,
.theme-luna .app,
.theme-luna .hero,
.theme-luna .hero-wrap,
.theme-luna .section,
.theme-luna .section--hero,
.theme-luna .layout,
.theme-luna .container {
  background: transparent !important;
  background-image: none !important;
}

/* 4) Luna: neutralise les classes utilitaires de fond et overlays génériques */
.theme-luna [class*="bg-"],
.theme-luna .bg,
.theme-luna .overlay,
.theme-luna [style*="background"] {
  background: transparent !important;
  background-image: none !important;
}

/* --- base déjà posée ailleurs, je rappelle juste l'empilement --- */
html{background:#0b1220;}
body{background:transparent; position:relative;}
#bgStars{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.85;}
header,.nav,main,footer,.container,.card{position:relative; z-index:1;}

/* ===== THEMES : on utilise body::after comme VOILE décoratif
   - fixé en plein écran
   - pointer-events:none
   - z-index:-1 => derrière le canvas (0) et devant le fond html
   - donc : on voit TOUJOURS les étoiles par-dessus
*/
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;           /* derrière #bgStars (0), au-dessus du fond html */
  background: none;
  opacity: 1;
}

/* LUNA : aucune teinte (voile transparent) ==> étoiles pures partout */
.theme-luna::after{
  background: none !important;
}

/* GALAXY : halos violet/bleu très discrets */
.theme-galaxy::after{
  background:
    radial-gradient(60rem 60rem at 20% 20%, rgba(121,85,255,.22), transparent 60%),
    radial-gradient(50rem 50rem at 80% 70%, rgba(0,180,255,.18), transparent 60%);
}

/* NOIR : pas de halo, contraste plus “dur” */
.theme-noir::after{
  background: none !important;
}

/* AURORA : dégradé animé doux (reste devant html, derrière les étoiles) */
.theme-aurora::after{
  background:
    radial-gradient(55rem 35rem at 15% 30%, rgba(0,255,180,.20), transparent 60%),
    radial-gradient(65rem 45rem at 85% 65%, rgba(120,80,255,.18), transparent 60%);
  animation: auroraMove 16s ease-in-out infinite alternate;
  filter: blur(3px) saturate(115%);
}
@keyframes auroraMove{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-2vh,0) scale(1.03); }
  100% { transform: translate3d(0,1vh,0)  scale(1.02); }
}

/* dropdowns devant tout */
.menu-anchor{position:relative;}
.menu-pop{position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  padding:8px; background:rgba(7,12,24,.92); border:1px solid rgba(120,144,255,.18);
  border-radius:14px; backdrop-filter:blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,144,255,.10) inset;
  z-index:10000; pointer-events:auto;
}
.menu-pop[hidden]{display:none!important;}
.menu-item,.menu-item button{width:100%; display:flex; gap:.6rem; align-items:center;
  padding:9px 10px; border-radius:10px; background:transparent; border:0; color:#cfe0ff; cursor:pointer;}
.menu-item:hover,.menu-item button:hover{background:rgba(120,144,255,.10);}

/* base pile */
html{background:#0b1220;}
body{background:transparent; position:relative; min-height:100%;}
#bgStars{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.85;}
header,.nav,main,footer,.container,.card{position:relative; z-index:1;}

/* Quand les étoiles sont actives (Luna/Aurora), on force la transparence des wrappers
   pour éviter le "les étoiles ne sont visibles qu'en bas". */
.stars-on main,
.stars-on .content,
.stars-on .page,
.stars-on .wrapper,
.stars-on .app,
.stars-on .page-wrap,
.stars-on .content-wrap,
.stars-on .hero,
.stars-on .section {
  background: transparent !important;
  background-image: none !important;
}

/* Voile de thème : placé DERRIÈRE le canvas (z-index:-1),
   donc ne masque jamais les étoiles quand elles sont visibles. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:none; opacity:1;
}

/* LUNA : pas de voile -> étoiles pures */
.theme-luna::after{ background:none !important; }

/* GALAXY : halos doux, étoiles MASQUÉES par JS (canvas opacity=0) */
.theme-galaxy::after{
  background:
    radial-gradient(60rem 60rem at 20% 20%, rgba(121,85,255,.15), transparent 60%),
    radial-gradient(50rem 50rem at 80% 70%, rgba(0,180,255,.12), transparent 60%);
}

/* NOIR : noir pur, étoiles MASQUÉES par JS */
.theme-noir::after{
  background:#0a0f1a; /* plus profond que #0b1220 */
}

/* AURORA : aurora animée, étoiles visibles */
.theme-aurora::after{
  background:
    radial-gradient(55rem 35rem at 15% 30%, rgba(0,255,180,.18), transparent 60%),
    radial-gradient(65rem 45rem at 85% 65%, rgba(120,80,255,.15), transparent 60%);
  animation: auroraMove 16s ease-in-out infinite alternate;
  filter: blur(3px) saturate(115%);
}
@keyframes auroraMove{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-2vh,0) scale(1.03); }
  100%{ transform: translate3d(0,1vh,0) scale(1.02); }
}

/* Dropdowns bien au premier plan */
.menu-anchor{position:relative;}
.menu-pop{position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  padding:8px; background:rgba(7,12,24,.92); border:1px solid rgba(120,144,255,.18);
  border-radius:14px; backdrop-filter:blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,144,255,.10) inset;
  z-index:10000; pointer-events:auto;
}
.menu-pop[hidden]{display:none!important;}
.menu-item,.menu-item button{width:100%; display:flex; gap:.6rem; align-items:center;
  padding:9px 10px; border-radius:10px; background:transparent; border:0; color:#cfe0ff; cursor:pointer;}
.menu-item:hover,.menu-item button:hover{background:rgba(120,144,255,.10);}

/* --- TOP BAR & WRAPPERS : transparents quand les étoiles sont actives --- */
.stars-on header,
.stars-on .site-header,
.stars-on .nav,
.stars-on .navbar,
.stars-on .topbar,
.stars-on .header,
.stars-on .container,
.stars-on .container-fluid,
.stars-on .shell,
.stars-on .layout-header {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* coupe les overlays/pseudo-éléments éventuels du header/nav */
.stars-on header::before,
.stars-on header::after,
.stars-on .nav::before,
.stars-on .nav::after,
.stars-on .navbar::before,
.stars-on .navbar::after,
.stars-on .site-header::before,
.stars-on .site-header::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}


/* Layout sticky-footer */
html, body { height: 100%; }
body{
  min-height: 100dvh;           /* couvre toute la hauteur */
  display: flex;
  flex-direction: column;
}

/* ta zone de contenu principale (au moins une de ces classes existe partout) */
main, .site-main, .page, .content, .page-wrap, .content-wrap {
  flex: 1 0 auto;               /* prend l’espace restant */
}

/* le footer/copyright colle en bas */
.footer{
  margin-top: auto;             /* pousse le footer en bas */
}

/* quand les étoiles sont actives, footer transparent aussi */
.stars-on .footer{
  background: transparent !important;
  box-shadow: none !important;
}

.icon-btn{ position:relative; display:inline-flex; align-items:center; gap:.4rem; }
.badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  border-radius:999px; background:#2563eb; color:#fff; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
}
.menu-title{font-weight:600; color:#dce6ff; padding:4px 6px 8px;}
.menu-list.small .notif{padding:8px; border-radius:10px;}
.menu-list.small .notif + .notif{margin-top:6px;}
.notif .meta{font-size:12px; opacity:.7; margin-top:4px;}
.btn-ghost.w-full{width:100%;}

.toast{
  position:fixed; top:18px; right:18px; z-index:10050;
  background:rgba(21,28,45,.96); color:#dce6ff; border:1px solid rgba(120,144,255,.2);
  padding:10px 14px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.4);
  animation: slideIn .2s ease-out;
}
.toast.success{ border-color: rgba(34,197,94,.35); }
.toast.error{ border-color: rgba(239,68,68,.35); }
@keyframes slideIn{ from{ transform:translateY(-6px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* cache/affiche via l'attribut [hidden] */
.modal[hidden] { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  z-index: 9999; /* au-dessus de tout */
}

.modal-box {
  width: min(680px, 92vw);
  background: var(--panel, #0f172a);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

/* Badges */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:9999px;
  font-size:12px; line-height:1; font-weight:600;
  letter-spacing:.01em; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 3px rgba(0,0,0,.3);
}

/* Indicateur rond dans le badge */
.badge::before{
  content:""; width:8px; height:8px; border-radius:9999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Priorité */
.badge-low   { color:#22c55e; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); }
.badge-low::before   { background:#22c55e; }

.badge-mid   { color:#f59e0b; background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.22); }
.badge-mid::before   { background:#f59e0b; }

.badge-high  { color:#ef4444; background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22); }
.badge-high::before  { background:#ef4444; }

/* Échéance */
.due {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:9999px;
  font-size:12px; font-weight:600; line-height:1;
  margin-left:8px; border:1px solid transparent;
}
.due::before{ content:"⏰"; opacity:.9; }

.due-ok       { color:#93c5fd; background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.25); }
.due-soon     { color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); }
.due-overdue  { color:#ef4444; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28); }

/* Ligne meta d’une tâche */
.task-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:8px;
}

/* (optionnel) rendre les cartes un poil plus clean si besoin */
.task-card {
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.task-card h4 { margin:0 0 6px 0; }

/* Harmonise les boutons fantômes */
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.10);color:#e8eeff;border-radius:10px;padding:8px 12px}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
/* Bouton primaire */
.btn{background:#6477ff;border:1px solid rgba(100,119,255,.5);color:white;border-radius:10px;padding:8px 12px;font-weight:700}
.btn:hover{filter:brightness(1.07)}

/* ligne auteur / claim */
.task-line{
  display:flex; align-items:center; gap:10px;
  margin:6px 0 6px;
}
.task-line .mini{font-size:12px}
.task-line .spacer{flex:1}

/* chip assignée */
.chip-assigned{
  color:#c7d2fe; background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.28);
}

/* bouton claim discret */
.btn-claim{padding:6px 10px; border-radius:9999px}

/* header projet plus élégant */
.project-hero{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
}
.project-title-wrap .page-title{margin:0 0 4px}


.task-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-top:8px;
}
.btn-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

/* tag Claimé par ... */
.claim-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:9999px;
  font-size:12px; font-weight:700; line-height:1;
  color:#c7d2fe; background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.28);
}
.btn-claim{ padding:6px 10px; border-radius:9999px }

/* assure que le canvas reste derrière tout */
#bg { position: fixed; inset: 0 auto auto 0; z-index: 0; }

/* la topbar/entête passe au-dessus du canvas et du contenu */
.topbar { position: relative; z-index: 2000; overflow: visible; }

/* le conteneur qui tient tes liens (selon ton markup : .nav ou .left/.right) */
.topbar .nav, .topbar .left, .topbar .right { position: relative; z-index: 2100; overflow: visible; }

/* l’ancre du menu (cloche) doit laisser déborder le popover */
.menu-anchor { position: relative; z-index: 2200; overflow: visible; }

/* le menu de notifications passe tout en premier plan */
#notifMenu.menu-pop {
  position: fixed;
  top: 56px;         /* ajuste selon la hauteur de ta barre */
  right: 18px;       /* ajuste selon l’alignement voulu */
  z-index: 99999;
}


/* au cas où un parent a un transform qui crée un nouveau stacking-context,
   on neutralise sur la topbar (facultatif si tu sais qu’il n’y en a pas) */
.topbar { transform: none !important; }

/* (optionnel) évite que des couches de contenu masquent le menu */
main, .shell, .content, .canvas, .wrapper { position: relative; z-index: 100; overflow: visible; }

/* boutons du menu notifs : clique garanti */
#notifMenu .menu-item button,
#notifMenu .menu-item form button {
  position: relative;
  z-index: 100000;
  pointer-events: auto;
}
.topbar, .topbar * { overflow: visible !important; }