:root{
  --bg:#000000;
  --panel:#000000;
  --card:#0b1020;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:rgba(148,163,184,.18);
  --primary:#3b82f6;
  --primary2:#60a5fa;
  --danger:#ef4444;
  --ok:#22c55e;
  --shadow:0 12px 40px rgba(0,0,0,.25);
  --radius:14px;
  --radius2:10px;
}
    /* ===== Header improvements only ===== */

    /* Logo */
    .brand-badge{
      width:60px;
      height:60px;
      border-radius:12px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(148,163,184,.25);
      background: rgba(148,163,184,.10);
      flex:0 0 auto;
    }
    .brand-badge img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      padding:1px;
    }

    .nav{
      position:relative; /* pour dropdown mobile */
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:nowrap;
    }

    /* Desktop links */
    .nav-links{
      display:flex;
      align-items:center;
      gap:14px;
    }

    /* Burger (à droite) */
    .burger{
      display:none;
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(148,163,184,.25);
      background: rgb(255 255 255 / 100%);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      margin-left:auto; /* ✅ pousse le burger à droite */
    }
    .burger svg{
      width:20px;height:20px;
      stroke: currentColor;
      fill:none;
      stroke-width:2;
    }

    /* User dropdown */
    .user-menu{
      position:relative;
      display:inline-flex;
      align-items:center;
    }
    .userpill{
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .user-dropdown{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      min-width:220px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.25);
      background: rgba(17,24,39,.95);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      padding:8px;
      display:none;
      z-index:2000;
      backdrop-filter: blur(8px);
    }
    .user-dropdown a{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 10px;
      border-radius:12px;
      text-decoration:none;
      color:inherit;
    }
    .user-dropdown a:hover{
      background: rgba(148,163,184,.12);
    }
    .user-dropdown .sep{
      height:1px;
      background: rgba(148,163,184,.18);
      margin:6px 6px;
    }

    /* Mobile dropdown overlay (même esprit que déconnexion) */
    .mobile-dropdown{
      position:absolute;
      right:0;
      top:calc(100% + 10px);
      width:min(360px, 92vw);
      border-radius:14px;
      border:1px solid rgba(148,163,184,.25);
      background: rgba(17,24,39,.95);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      padding:10px;
      display:none;
      z-index:2000;
      backdrop-filter: blur(8px);
    }
    .mobile-dropdown a{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 10px;
      border-radius:12px;
      text-decoration:none;
      color:inherit;
    }
    .mobile-dropdown a:hover{
      background: rgba(148,163,184,.12);
    }

    @media (max-width: 860px){
      .burger{ display:inline-flex; }
      .nav-links{ display:none; }
      .user-menu{ margin-left:12px; }
      .userpill{ max-width:55vw; overflow:hidden; text-overflow:ellipsis; }
    }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(0, 0, 0, 0.2), transparent 100%),
              radial-gradient(900px 600px at 90% 10%, rgba(0, 0, 0, 0.12), transparent 100%),
              var(--bg);
  color:var(--text);
}

a{color:var(--primary2); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(1100px, 92vw);
  margin: 18px auto 40px;
}

.topbar{
  background: rgba(11,18,32,.72);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.nav a{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--text);
  opacity:.92;
}
.nav a:hover{
  border-color:var(--line);
  background: rgba(148,163,184,.06);
  text-decoration:none;
}

.userpill{
  display:flex; gap:8px; align-items:center;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background: rgba(15,23,42,.35);
  font-size:13px;
}

.card{
  background: rgba(15,23,42,.55);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}

h1,h2,h3{margin:0 0 10px}
h2{font-size:20px}
h3{font-size:16px; color:rgba(229,231,235,.95)}
.small{font-size:12px; color:var(--muted)}
hr{border:none;border-top:1px solid var(--line); margin:14px 0}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
}

label{display:block; margin:10px 0 6px; color:rgba(229,231,235,.92)}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background: rgb(0, 0, 0);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.08);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.btn:hover{background: rgba(148,163,184,.14)}
.btn-primary{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.22);
}
.btn-primary:hover{background: rgba(59,130,246,.30)}
.btn-danger{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.20);
}
.btn-ok{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.18);
}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius: var(--radius2);
  border:1px solid var(--line);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.table th{
  color:rgba(229,231,235,.9);
  font-size:13px;
  background: rgba(2,6,23,.30);
}
.table tr:hover td{background: rgba(148,163,184,.05)}
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  margin-top: 4px;
  border:1px solid var(--line);
  color:var(--muted);
}
.badge.ok{color:#bbf7d0;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
.badge.warn{color:#fde68a;border-color:rgba(234,179,8,.35);background:rgba(234,179,8,.12)}
.badge.danger{color:#fecaca;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.12)}

.notice{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(2,6,23,.30);
}
.notice.ok{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10)}
.notice.err{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10)}


/* ==========================
   SIGNATURES – 2 COLONNES (DESKTOP) / 1 COLONNE (MOBILE)
   ========================== */

.sig-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.signature-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}

.signature-title{
  margin: 0 0 4px 0;
}

/* Zone signature (image ou placeholder) */
.signature-img,
.signature-placeholder{
  width: 100%;
  max-width: 360px;     /* ajuste si tu veux plus large */
  height: 220px;        /* même hauteur pour les deux */
  object-fit: contain;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.25);
  padding:8px;
  box-sizing:border-box;
}

.signature-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  border-style:dashed;
  opacity:.75;
  font-size:.9rem;
}

/* Bouton aligné sur la largeur de la signature */
.signature-btn{
  width: 100%;
  max-width: 360px;
  justify-content:center;
}

/* Mobile */
@media (max-width: 720px){
  .sig-grid{ grid-template-columns: 1fr; }
  .signature-img,
  .signature-placeholder{
    max-width: 100%;
    height: 200px; /* optionnel */
  }
  .signature-btn{
    max-width: 100%;
  }
}
.signature-btn{ position:relative; z-index:2; }
.signature-img, .signature-placeholder{ position:relative; z-index:1; }