/* Pitch ta boîte — charte 42 UI Kit (Kode Mono + Lato, brand / teal / pink) */
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&family=Lato:wght@400;700;900&display=swap');

:root{
  --bg:#030D20;          /* brand-950 */
  --bg-2:#0A1E41;        /* intercalaires / panneaux */
  --panel:rgba(10,30,65,0.72);
  --line:rgba(184,205,255,0.16);
  --line-strong:rgba(184,205,255,0.32);
  --text:#EDF2FF;
  --muted:#9AAACB;
  --dim:#64759A;
  --brand-700:#365399;
  --brand-500:#6388E3;
  --brand-300:#B8CDFF;
  --teal-500:#15B79E;
  --teal-700:#107569;
  --pink-500:#EE46BC;
  --pink-700:#C11574;
  --success:#17B26A;
  --warn:#FAC515;
  --danger:#FF4E41;
  --info:#2E90FA;
  --mono:'Kode Mono', ui-monospace, monospace;
  --sans:'Lato', system-ui, sans-serif;
  --r:6px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 45% at 10% -5%, rgba(99,136,227,0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(238,70,188,0.14), transparent 60%),
    linear-gradient(rgba(184,205,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,205,255,0.035) 1px, transparent 1px);
  background-size:auto, auto, 32px 32px, 32px 32px;
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-300); }
h1,h2,h3,.mono{ font-family:var(--mono); font-weight:600; letter-spacing:-0.01em; }
h1{ font-size:clamp(1.6rem, 3.2vw, 2.2rem); line-height:1.15; margin:0; }

/* Libellé façon terminal : [ TEXTE ] */
.k-label{
  font-family:var(--mono); font-size:0.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--teal-500);
}
.k-label::before{ content:'[ '; color:var(--dim); }
.k-label::after{ content:' ]'; color:var(--dim); }
.k-label.pink{ color:var(--pink-500); }
.k-label.brand{ color:var(--brand-300); }

.logo-42{ display:block; height:auto; }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(6px);
}

/* Boutons */
.btn{
  font-family:var(--mono); font-weight:600; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.06em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:var(--r); cursor:pointer; text-decoration:none;
  border:1px solid var(--line-strong); background:rgba(184,205,255,0.06); color:var(--text);
  transition:background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:hover{ border-color:var(--brand-300); background:rgba(184,205,255,0.12); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--teal-500); border-color:var(--teal-500); color:var(--bg); }
.btn-primary:hover{ background:#1fd0b4; border-color:#1fd0b4; box-shadow:0 0 0 4px rgba(21,183,158,0.18); }
.btn-pink{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; }
.btn-pink:hover{ background:#f45fca; border-color:#f45fca; box-shadow:0 0 0 4px rgba(238,70,188,0.2); }
.btn-danger{ color:#ff8a80; border-color:rgba(255,78,65,0.45); background:transparent; }
.btn-danger:hover{ background:rgba(255,78,65,0.12); border-color:var(--danger); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 22px; font-size:1rem; }
.btn-sm{ padding:8px 12px; font-size:0.74rem; }

/* Champs */
.input{
  width:100%; padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:rgba(3,13,32,0.6);
  color:var(--text); font-family:var(--sans); font-size:1rem;
}
.input::placeholder{ color:var(--dim); }
.input:focus{ outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(21,183,158,0.22); }
.field-label{ display:block; font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin:0 0 6px; }

/* Badges d'état */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  padding:4px 10px; border-radius:999px; border:1px solid currentColor;
}
.badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.open{ color:var(--success); }
.badge.open::before{ animation:blink 1.2s infinite; }
.badge.pending{ color:var(--warn); }
.badge.closed{ color:var(--muted); }
@keyframes blink{ 50%{ opacity:0.2; } }

.error{ color:#ff8a80; font-size:0.9rem; }
.error:empty{ display:none; }
.hidden{ display:none !important; }

/* Barre utilisateur (pages staff) */
.userbar{
  position:fixed; top:14px; right:16px; z-index:30;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:0.72rem; color:var(--muted);
}
.userbar:empty{ display:none; }