/* assets/css/app.css — thème sombre (sans framework)
   - responsive (pc/tablette/mobile)
   - unités adaptatives : clamp() / min()
*/

*{ box-sizing:border-box; }
html{ color-scheme: dark; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b0b0f;
  color: rgba(255,255,255,.92);
}

.container{
  width:min(1200px, 100%);
  width: 100%;
  margin:0 auto;
  padding: min(2.2rem, 6vw);
}

a{ color: inherit; }

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(11,11,15,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar__inner{
  width:min(1200px, 100%);
  margin:0 auto;
  padding: min(1rem, 4vw) min(2.2rem, 6vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.9rem; }
.brand__logo{
  width: clamp(2.3rem, 4vw, 2.9rem);
  height: clamp(2.3rem, 4vw, 2.9rem);
  border-radius: 1rem;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  letter-spacing:.08em;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 1rem 2.4rem rgba(0,0,0,.25);
}

.brand__txt strong{
  display:block;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}
.brand__txt small{
  display:block;
  color: rgba(255,255,255,.62);
  margin-top: .1rem;
}

.nav{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.nav__link{
  padding: .65rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight: 800;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.nav__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
}
.nav__link--ghost{ background: transparent; }

/* Flash */
.flash{
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.12);
}
.flash--ok{ background: rgba(46,204,113,.12); }
.flash--bad{ background: rgba(231,76,60,.12); }

/* Cards */
.card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 1.4rem;
  padding: min(2rem, 5.5vw);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.35);
}

.h1{
  margin:0 0 .6rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}
.p-muted{
  margin:0;
  color: rgba(255,255,255,.65);
  font-size: clamp(1rem, 1.5vw, 1.05rem);
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }

@media (max-width: 900px){
  .col-8,.col-6,.col-4,.col-3{ grid-column: span 12; }
}

/* Forms */
.field span{ display:block; font-weight: 900; margin-bottom:.45rem; }
.input, .select, .textarea{
  width:100%;
  padding: .9rem 1rem;
  border-radius: 1rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline:none;
}
.textarea{ min-height: 8rem; resize: vertical; }
.small{ color: rgba(255,255,255,.60); font-size: .95rem; margin-top:.35rem; display:block; }

.row-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top: 1rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .85rem 1.15rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}
.btn--primary{ background: rgba(255,255,255,.18); }
.btn--danger{
  background: rgba(231, 76, 60, .16);
  border-color: rgba(231, 76, 60, .30);
}
.btn--ghost{ background: transparent; }

/* Toolbar & table */
.toolbar{
  display:flex;
  gap: .8rem;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  margin: 1rem 0;
}
.search{ display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; }

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 1.2rem;
  border:1px solid rgba(255,255,255,.10);
}
.table th, .table td{
  text-align:left;
  padding: .85rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.table th{
  font-size:.95rem;
  color: rgba(255,255,255,.72);
  font-weight:900;
  background: rgba(255,255,255,.06);
}
.table tr:hover td{ background: rgba(255,255,255,.04); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-weight: 900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: .92rem;
  white-space: nowrap;
}
.badge--ok{
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.30);
  margin-top: 1%;
}
.badge--warn{
  background: rgba(241,196,15,.14);
  border-color: rgba(241,196,15,.30);
  margin-top: 1%;
}
.badge--bad{
  background: rgba(231,76,60,.14);
  border-color: rgba(231,76,60,.30);
  margin-top: 1%;
}
.kbd{
  padding:.2rem .45rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.6rem;
  font-weight:900;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
}

.hr{
  border:none;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 1.2rem 0;
}

/* Footer */
.footer{
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.footer__inner{
  width:min(1200px, 100%);
  margin:0 auto;
  padding: min(1rem, 4vw) min(2.2rem, 6vw);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.7rem;
}
.footer__muted{ color: rgba(255,255,255,.55); }