/* Reset de base */
*{margin:0;padding:0;box-sizing:border-box}

/* Layout global */
html,body{height:100%}
body{
  font-family:'Roboto',sans-serif;
  background:#1a1a1a;
  color:#fff;
  display:flex; flex-direction:column;
  min-height:100vh;
}
header{
  background:#333; width:100%;
  padding:20px 0; text-align:center;
  position:sticky; top:0; z-index:10;
}
nav ul{display:flex;justify-content:center;list-style:none}
nav ul li{margin:0 20px}
a{color:#fff;text-decoration:none;font-weight:bold}
a:hover{color:#4CAF50}

main{flex:1;padding:24px;text-align:center}

/* Footer sticky via flex */
footer{
  background:#333;color:#fff;padding:20px;text-align:center;width:100%;margin-top:auto;position:static
}
footer p{margin:0}

/* Messages */
.message{
  background:#4CAF50;color:#fff;padding:10px;margin:20px 0;border-radius:5px;
  text-align:center;font-weight:bold
}

/* Formulaire d’édition */
.form-container{
  display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;
  margin:18px auto;padding:20px;background:#333;border:1px solid #444;border-radius:10px;
  max-width:1100px;width:100%
}
.form-left,.form-right{flex:1;min-width:300px}
.form-left{border-right:1px solid #444;padding:15px}
.form-right{padding:15px;max-width:420px}
.form-container label{display:block;margin:10px 0 6px;font-weight:700}
.form-container input,.form-container select,.form-container textarea{
  width:100%;padding:10px;border:1px solid #444;border-radius:6px;background:#222;color:#fff;margin-bottom:12px
}
.form-container button[name="update_entretien"]{width:100%;padding:12px;margin-top:8px}
@media (max-width:768px){
  .form-container{flex-direction:column}
  .form-left{border-right:none}
}

/* Champs génériques */
input,select,textarea{
  width:100%;padding:10px;border:1px solid #666;border-radius:5px;background:#444;color:#fff;font-size:1rem
}
input:focus,select:focus,textarea:focus{border-color:#4CAF50;outline:0;background:#555}

/* Boutons génériques */
button{
  width:50%;padding:10px;margin:10px 0;border-radius:5px;border:1px solid #444;
  background:#4CAF50;color:#fff;font-size:1rem;cursor:pointer
}
button:hover{background:#45a049}

/* Tables */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:640px}
table{width:100%;border-collapse:collapse;background:#333}
th,td{padding:12px;border:1px solid #444;text-align:left}
th{background:#222;color:#fff;font-weight:bold}
td{color:#fff}
tr:nth-child(even){background:#444}
tr:hover{background:#555}
table,th,td{word-break:break-word;hyphens:auto}
td .nowrap{white-space:nowrap}
td .breakall{word-break:break-all}

/* Table “stack” mobile */
@media (max-width:768px){
  table{font-size:.95rem}
  th,td{padding:8px}
  .table-stack{border:0}
  .table-stack thead{display:none}
  .table-stack tbody,.table-stack tr,.table-stack td{display:block;width:100%}
  .table-stack tr{margin:0 0 12px;border:1px solid #444;border-radius:8px;overflow:hidden;background:#2a2a2a}
  .table-stack td{border:0;border-top:1px solid #3a3a3a;padding:10px 12px}
  .table-stack td:first-child{border-top:0}
  .table-stack td::before{content:attr(data-label);display:block;font-weight:700;color:#9bdc9b;margin-bottom:4px}
  .table-stack td.actions{display:flex;gap:8px;flex-wrap:wrap}
}

/* Boutons d’action */
a.btn-action{display:inline-block;padding:6px 10px;font-size:.9rem;color:#fff;text-decoration:none;border-radius:5px}
a.btn-action.edit{background:#4CAF50}
a.btn-action.delete{background:#FF6347}
a.btn-action:hover{opacity:.85}
.btn-danger{background:#d9534f;color:#fff;padding:8px 15px;border-radius:5px;font-size:14px;display:inline-block}
.btn-danger:hover{background:#c9302c}

/* Pages login/inscription uniquement */
.auth-form{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:40px auto;max-width:340px;background:#2a2a2a;padding:25px;border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.4)
}
.auth-form input{width:100%;padding:12px 14px;border:1px solid #444;border-radius:6px;background:#1a1a1a;color:#fff}
.auth-form input:focus{border-color:#4CAF50;background:#222}
.auth-form button{width:100%;padding:12px;background:#4CAF50;border:0;border-radius:6px;color:#fff;font-weight:600}
.auth-form button:hover{background:#45a049}

/* Divers */
h1{text-align:center;margin:40px 0 10px;color:#fff;font-size:1.8rem}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#333}
.app-header .nav-left ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.app-header a{color:#fff;text-decoration:none;font-weight:600}
.app-header a:hover{color:#9bdc9b}
.user-badge{display:flex;align-items:center;gap:10px;background:#2a2a2a;padding:6px 10px;border-radius:999px}
.user-badge .avatar{font-size:.95rem}
.user-badge .name{color:#fff;font-weight:600}
.user-badge .logout{color:#9bdc9b;margin-left:6px}
.user-badge .logout:hover{opacity:.85}

/* Petits écrans */
@media (max-width:480px){
  .form-container{padding:14px}
  input,select,textarea{font-size:.95rem;padding:9px}
  button{font-size:.95rem;padding:10px}
}
#remarques-status{color:#9bdc9b}
#remarques-status.error{color:#f88}