:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --card:#0b1626;
  --border:#1c2a3b;
  --fg:#e7eef7;
  --muted:#9fb2c8;
  --acc:#1be4b6;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:12px;
  --radius-lg:16px;
  --gap:10px;
  --trans:160ms cubic-bezier(.2,.6,.2,1)
}

@media (prefers-color-scheme:light){
  :root{
    --bg:#f7f8fb;
    --panel:#fff;
    --card:#fbfcfe;
    --border:#e6e9ef;
    --fg:#0b1220;
    --muted:#4b5563;
    --acc:#0bbd95;
    --shadow:0 10px 30px rgba(16,24,40,.08)
    }
  }
  
*{
  box-sizing:border-box
  }
  
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial
}

a{
  color:inherit;
  text-decoration:none
}

.wrap{
  display:flex;
  flex-direction:column;min-height:100vh
}

header{
  position:sticky;
  top:0;
  z-index:10;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,transparent),color-mix(in srgb,var(--bg) 65%,transparent));
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border)
}

.bar{
  display:flex;
  align-items:center;
  gap:var(--gap);
  padding:10px clamp(12px,3vw,18px)
}

.title{
  text-align:center;
  font-weight:800
}

.spacer{
  flex:1
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  cursor:pointer;
  transition:transform var(--trans),box-shadow var(--trans)
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow)
}

.btn.primary{
  background:var(--acc);
  color:#07211b;border-color:transparent
}

main{
  padding:14px clamp(12px,3vw,18px)
}

.card{
  background:var(--panel);
  border:5px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin-bottom:15px
}

.h1{
  text-align:center;
  font-weight:800;
  margin:4px 0 6px
}

.muted{
  color:var(--muted);
  font-size:13px
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 280px;
  min-width:220px
}

.label{
  font-weight:600
}

.input,.textarea{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--fg);
  border-radius:12px;
  padding:10px 12px
}

.textarea{
  min-height:110px;
  resize:vertical
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0
}

th,td{
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;vertical-align:top
}

th{
  font-weight:700;
  color:var(--muted)
}

tr:hover td{
  background:color-mix(in srgb,var(--panel) 92%,var(--card))
}

footer{
  margin-top:auto;
  padding:16px clamp(12px,3vw,18px);
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12.5px
}
 
.toast{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--panel);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  opacity:0;
  transition:.16s;
  z-index:60
}

.toast.show{
  opacity:1;
  transform:translateX(-50%)
}

.tag{
  display:inline-block;
  margin-left:8px;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  color:var(--muted)
}

  /* Style personnalisé du bouton */
.swal2-confirm-custom {
  background-color: #16a3ad !important; /* couleur HAXES */
  color: white !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  transition: background-color 0.2s ease;
}
.swal2-confirm-custom:hover {
  background-color: #118c95 !important; /* survol */
}