/* Forum HG Développement - CSS sans framework */
*{box-sizing:border-box}
:root{
  --bg:#0b1020;
  --surface:#0f1730;
  --surface2:#111c38;
  --text:#e6e9f2;
  --muted:rgba(230,233,242,.72);
  --border:rgba(230,233,242,.12);
  --accent:#ffb020;
  --accent2:#f97316;

  --radius:clamp(.9rem,1.2vw,1.2rem);
  --shadow:0 18px 45px rgba(0,0,0,.35);

  --fs-0:clamp(.95rem,1.0vw,1.05rem);
  --fs-1:clamp(1.1rem,1.35vw,1.35rem);
  --fs-2:clamp(1.35rem,2.1vw,2rem);
  --fs-3:clamp(1.7rem,3vw,2.6rem);

  --pad: min(5em, 8%);
  --gap: clamp(.7rem, 1.2vw, 1.1rem);
}

html,body{}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--fs-0);
  color:var(--text);
  background: radial-gradient(1200px 700px at 10% 10%, rgba(255,176,32,.18), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(249,115,22,.16), transparent 55%),
              linear-gradient(180deg, var(--bg), #070a14);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

.wrap{width:min(1100px, calc(100vw - (var(--pad) * 2))); margin-inline:auto}
.main{padding: clamp(1rem, 2.5vw, 2rem) 0;
    min-height: 100vh;
}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(7,10,20,.72);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding: clamp(.8rem, 1.6vw, 1.1rem) 0}

.brand{display:flex; align-items:center; gap:.65rem}
.brand__logo{
  width: clamp(2.2rem, 3.5vw, 3rem);
  height: clamp(2.2rem, 3.5vw, 3rem);
  border-radius: 999px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,176,32,.95), rgba(249,115,22,.85));
  color:#111;
  font-weight:800;
  box-shadow: var(--shadow);
}
.brand__name{font-size:var(--fs-1); font-weight:700; letter-spacing:.02em}

.nav{display:flex; align-items:center; gap: clamp(.5rem, 1vw, .9rem); flex-wrap:wrap; justify-content:flex-end}
.nav a{padding:.55rem .8rem; border-radius:999px; border:1px solid transparent}
.nav a:hover{border-color:var(--border); background: rgba(255,255,255,.03)}
.badge{border-color: rgba(255,176,32,.35)!important}

.btn{
  background: linear-gradient(135deg, rgba(255,176,32,.95), rgba(249,115,22,.95));
  color:#111;
  border:none;
  font-weight:800;
  padding:.55rem .9rem;
  border-radius:999px;
  box-shadow: var(--shadow);
}
.btn--ghost{
  background: transparent;
  border:1px solid var(--border);
  color: var(--text);
  box-shadow:none;
}

.card{
  background: linear-gradient(180deg, rgba(17,28,56,.92), rgba(15,23,48,.92));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 900px){
  .grid-2{grid-template-columns: 1.1fr .9fr}
  .grid-3{grid-template-columns: repeat(3, 1fr)}
}

.h1{font-size:var(--fs-3); margin:0 0 .35rem}
.h2{font-size:var(--fs-2); margin:0 0 .25rem}
.h3{font-size:var(--fs-1); margin:0 0 .25rem}
.muted{color:var(--muted)}
.sep{height:1px; background:var(--border); margin: clamp(.9rem, 2vw, 1.2rem) 0}

.list{display:flex; flex-direction:column; gap: .6rem}
.item{
  display:flex; align-items:flex-start; justify-content:space-between; gap: var(--gap);
  padding: .85rem 1rem;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
.item:hover{background: rgba(255,255,255,.05)}
.item__title{font-weight:800}
.item__meta{color:var(--muted); font-size: clamp(.85rem, .95vw, .95rem)}
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--border);
  padding:.25rem .55rem;
  border-radius:999px;
  font-size: clamp(.8rem, .9vw, .9rem);
  color: var(--muted);
}

.alert{
  border-radius: var(--radius);
  padding: .85rem 1rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  margin-bottom: var(--gap);
}
.alert--error{border-color: rgba(255,99,71,.35)}
.alert--success{border-color: rgba(34,197,94,.35)}
.alert--info{border-color: rgba(59,130,246,.35)}

form{display:grid; gap:.65rem}
label{display:grid; gap:.3rem; font-weight:700}
input, textarea, select{
  width:100%;
  padding:.7rem .85rem;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
textarea{min-height: 22lvh; resize:vertical}
small{color:var(--muted)}
.actions{display:flex; gap:.65rem; flex-wrap:wrap; align-items:center}

.site-footer{
  border-top:1px solid var(--border);
  background: rgba(7,10,20,.72);
}
.footer-inner{
  padding: 1.2rem 0;
  display:flex; justify-content:space-between; gap: var(--gap);
  flex-wrap:wrap;
}
code{background: rgba(255,255,255,.06); padding:.12rem .4rem; border-radius:.5rem; border:1px solid var(--border)}


/* Avatar */
.avatar{width:clamp(3.2rem,5vw,4rem);height:clamp(3.2rem,5vw,4rem);border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);display:grid;place-items:center;overflow:hidden;font-weight:900;color:var(--text)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--sm{width:clamp(2.2rem,2.8vw,2.6rem);height:clamp(2.2rem,2.8vw,2.6rem)}

/* Pagination */
.pager{margin-top:var(--gap)}
.pager__inner{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center;justify-content:center}
.pill[data-disabled="1"]{opacity:.5;pointer-events:none}