/* ===================================================================
   CTMN — Espace de gestion  |  Thème clair, moderne et propre
   =================================================================== */
:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --line:#e6e9ef;
  --line-strong:#d6dbe4;
  --text:#1e2733;
  --muted:#6b7688;
  --brand:#b3122b;          /* rouge « tir », profond et sobre */
  --brand-dark:#8f0e22;
  --brand-soft:#fdeaed;
  --accent:#2563eb;
  --ok:#0f9d58; --ok-soft:#e6f5ec;
  --warn:#c77700; --warn-soft:#fbf1e2;
  --danger:#d92d20; --danger-soft:#fdecec;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.10);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.55rem; font-weight:700; margin:.1rem 0 1.2rem; letter-spacing:-.01em}
h2{font-size:1.05rem; font-weight:650; margin:1.6rem 0 .7rem}

/* ---- Navigation ---- */
.topnav{
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:.55rem 1.4rem; position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.brand a{display:flex; flex-direction:column; line-height:1.1}
.brand a:hover{text-decoration:none}
.brand-mark{
  font-weight:800; font-size:1.15rem; letter-spacing:.04em; color:var(--brand);
}
.brand-name{font-size:.72rem; color:var(--muted); font-weight:500; letter-spacing:.01em}
.topnav ul{list-style:none; display:flex; gap:.15rem; margin:0; padding:0; flex-wrap:wrap; flex:1}
.topnav ul a{
  color:var(--muted); padding:.45rem .8rem; border-radius:9px; display:block; font-size:.92rem; font-weight:550;
}
.topnav ul a:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.topnav ul a.active{background:var(--brand-soft); color:var(--brand)}
.topnav .user{color:var(--muted); font-size:.86rem; white-space:nowrap}
.topnav .user a{color:var(--brand)}
.nav-toggle{display:none; background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  border-radius:9px; padding:.35rem .65rem; font-size:1.1rem; cursor:pointer}

/* ---- Conteneur ---- */
.container{max-width:1140px; margin:0 auto; padding:1.6rem 1.4rem 4rem}

/* ---- Cartes / grilles ---- */
.grid{display:grid; gap:1.1rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
.card h2{margin-top:0}
.stat{display:flex; flex-direction:column; gap:.25rem}
.stat .num{font-size:2rem; font-weight:750; letter-spacing:-.02em}
.stat .label{color:var(--muted); font-size:.85rem; font-weight:500}
.stat.brand .num{color:var(--brand)}

/* ---- Tableaux ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:.92rem}
th,td{padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:var(--surface-2); color:var(--muted); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.actions{white-space:nowrap}

/* ---- Badges ---- */
.badge{display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.76rem; font-weight:650}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.danger{background:var(--danger-soft); color:var(--danger)}
.badge.muted{background:var(--surface-2); color:var(--muted)}

/* ---- Formulaires ---- */
form.stack{display:grid; gap:1rem; max-width:660px}
.field{display:grid; gap:.35rem}
label{color:var(--text); font-size:.86rem; font-weight:550}
input,select,textarea{
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  border-radius:10px; padding:.6rem .7rem; font:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
textarea{min-height:95px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.check{display:flex; align-items:center; gap:.5rem}
.check input{width:auto}

/* ---- Boutons ---- */
.btn{display:inline-block; background:var(--surface); color:var(--text); border:1px solid var(--line-strong);
  padding:.55rem 1rem; border-radius:10px; cursor:pointer; font:inherit; font-weight:550; text-decoration:none; transition:.12s}
.btn:hover{background:var(--surface-2); text-decoration:none; border-color:var(--muted)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn.danger{color:var(--danger); border-color:var(--danger-soft)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.small{padding:.35rem .65rem; font-size:.84rem}
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap}

/* ---- Flash ---- */
.flash{padding:.8rem 1.1rem; border-radius:11px; margin-bottom:1.1rem; border:1px solid; font-weight:500}
.flash-success{background:var(--ok-soft); border-color:#bfe6cd; color:#0b7a44}
.flash-error{background:var(--danger-soft); border-color:#f5c6c3; color:#b42318}
.flash-info{background:#eaf1fe; border-color:#c7dbfb; color:#1d4ed8}

/* ---- Rappels ---- */
.alert-item{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.alert-item:last-child{border-bottom:0}
.muted{color:var(--muted)}
.empty{color:var(--muted); padding:1.1rem; text-align:center}

/* ---- Connexion ---- */
.auth{max-width:400px; margin:9vh auto}
.auth .card{padding:2rem; box-shadow:var(--shadow-lg)}
.auth h1{text-align:center; margin-bottom:.3rem}
.auth .logo{text-align:center; margin-bottom:1.3rem}
.auth .logo .mark{font-weight:800; font-size:1.7rem; color:var(--brand); letter-spacing:.04em}
.auth .logo .name{display:block; color:var(--muted); font-size:.85rem; margin-top:.15rem}

/* ---- Responsive ---- */
@media (max-width:860px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .nav-toggle{display:block; margin-left:auto}
  .brand-name{display:none}
  .topnav ul{display:none; flex-direction:column; flex-basis:100%; width:100%; padding-top:.4rem}
  .topnav.open ul{display:flex}
  .topnav .user{flex-basis:100%; padding-bottom:.3rem}
}