/* style_contributeur.css - design sobre, header à gauche et contenu à droite */

/* Reset léger */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; -webkit-font-smoothing:antialiased; color:#0f1724; background:#f6f7f9; }

/* Corps : layout flex pour header + container côte à côte */
body {
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:20px;
  min-height:100vh;
}

/* ----- HEADER (barre latérale) ----- */
.side-header {
  flex: 0 0 260px;             /* largeur fixe pour rester aligné */
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding:18px;
  box-shadow: 0 8px 24px rgba(12,18,32,0.04);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:flex-start;       /* évite le stretch vertical */
  min-height: 120px;
}

/* Branding */
.brand .logo { font-weight:800; font-size:16px; color:#0b1220; }
.brand .sm { font-size:12px; color:#6b7280; margin-top:4px; }

/* Profile bref */
.profile-brief { display:flex; gap:12px; align-items:center; }
.avatar-wrap { width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid #e6e9ef; }
.avatar { width:100%; height:100%; object-fit:cover; display:block; }
.who .hello { font-size:12px; color:#6b7280; }
.who .name { font-weight:700; font-size:14px; margin-top:2px; }

/* Navigation sidebar */
.side-nav { display:flex; flex-direction:column; gap:8px; }
.side-nav .nav-link {
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#0f1724;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  border:1px solid transparent;
}
.side-nav .nav-link:hover { background:#f3f6fb; border-color:#e6e9ef; }
.side-nav .nav-link.logout { margin-top:8px; color:#b91c1c; font-weight:700; }

/* Footer du côté */
.side-footer { margin-top:auto; color:#9aa0a6; font-size:12px; }

/* ----- MAIN CONTAINER ----- */
.container {
  flex: 1 1 auto;
  max-width: 800px; /* moins large que 1180px pour les formulaires */
  margin: 0 auto;   /* centre la colonne principale */
  padding: 20px;
}

/* Top */
.top h1 { margin:0; font-size:20px; color:#0b1220; }
.top .lead { margin:6px 0 0 0; color:#6b7280; font-size:14px; }

/* Cards section */
.cards { margin-top:18px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.card {
  background:#fff;
  border:1px solid #e6e9ef;
  padding:14px;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(12,18,32,0.03);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
  color:inherit;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(12,18,32,0.06); }
.card h3 { margin:0 0 6px 0; font-size:15px; font-weight:800; }
.card p { margin:0; color:#6b7280; font-size:13px; }

/* Stats area */
.stats.card { display:flex; gap:12px; margin-top:18px; padding:12px; align-items:center; }
.stat { flex:1 1 0; padding:10px; border-radius:8px; border:1px solid #eaeef4; background:transparent; }
.info-label { font-size:12px; color:#6b7280; }
.info-value { font-weight:800; font-size:18px; color:#0f1724; margin-top:6px; }
.form-container {
  max-width: 480px;       /* largeur max du formulaire */
  width: 100%;            /* prend tout l'espace disponible si < 480px */
  margin: 0 auto;         /* centre horizontalement */
  padding: 20px 16px;     /* petit padding interne */
  background: #fff;       /* blanc sobre */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(12,18,32,0.05);
}

@media (max-width:500px) {
  .form-container { padding: 16px 12px; }
}

/* Responsive : empile header / container sur petits écrans */
@media (max-width:920px) {
  body { display:block; padding:12px; }
  .side-header { width:100%; flex: none; margin-bottom:12px; }
  .container { width:100%; }
  .stats.card { flex-direction:column; align-items:stretch; }
}