/* Planning des cadres — POC Phase 0 */
:root {
  --bord: #d0d0d0;
  --bord-fort: #909090;
  --weekend: #ececec;
  --ferie: #e9e0f7;  /* violet clair — distinct du vert Disponible (#d9f2d9) */
  --n: #fff2b8;    /* non-garde : seule absence qui garde sa couleur propre */
  --abs: #bcd4f6;  /* toutes les autres absences (V/R/F/M) */
}

* { box-sizing: border-box; }
body {
  font: 14px/1.35 -apple-system, "Segoe UI", sans-serif;
  margin: 0; padding: 0; color: #222; background: #fafafa;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* en-tête fixe en permanence ; la grille défile dans .table-wrap en dessous */
header {
  background: #fafafa; padding: .6rem 1rem .4rem; flex: none;
  border-bottom: 1px solid var(--bord);
}
.table-wrap { flex: 1; overflow: auto; padding: 0 1rem 2rem; }
nav { display: flex; align-items: baseline; gap: 1.2rem; }
nav h1 { font-size: 1.25rem; margin: 0; }
nav a { text-decoration: none; color: #1a5fb4; }
nav .off { color: #bbb; }

.legende { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; font-size: .78rem; }
.legende span { padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--bord); }
.piquet-manquant-leg { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #fbe3e3 4px, #fbe3e3 8px); }

/* border-collapse: separate — collapse casse position:sticky sur Safari (fente au-dessus des th) */
table { border-collapse: separate; border-spacing: 0; background: #fff; }
th, td { border-left: 1px solid var(--bord); border-bottom: 1px solid var(--bord); padding: 0; }
th:last-child, td:last-child { border-right: 1px solid var(--bord); }
th {
  font-size: .78rem; font-weight: 600; padding: .3rem .5rem;
  background: #f0f0f0; position: sticky; top: 0; z-index: 3;
  border-top: 1px solid var(--bord);
  box-shadow: 0 1px 0 var(--bord);  /* la bordure basse reste visible en mode collant */
}
td { height: 1.9rem; }

.col-date { padding: .15rem .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nom-jour { color: #777; font-size: .8rem; margin-right: .15rem; }
.badge-ferie, .legende .badge-ferie {
  background: var(--ferie); border: 1px solid #b9a3d9; border-radius: 3px;
  font-size: .7rem; padding: 0 .3rem; margin-left: .3rem;
}

tr.weekend td { background: var(--weekend); }
/* ligne fériée : le vert traverse TOUTE la ligne, quel que soit le contenu des cellules
   (!important : prime sur les couleurs de motif, de catégorie et le style inline) */
tr.ferie td, tr.ferie .cell { background: var(--ferie) !important; }

/* séparateurs verticaux forts : avant Piquet, avant Vacation 1, avant la grille des absences */
th.col-piquet, td.col-piquet { border-left: 2px solid var(--bord-fort); }
th.col-piquet + th.col-salle, td.col-piquet + td.col-salle { border-left: 2px solid var(--bord-fort); }
th.col-salle + th.col-pres, td.col-salle + td.col-pres { border-left: 2px solid var(--bord-fort); }

/* cellules cliquables */
.cell {
  min-width: 6.5rem; height: 100%; padding: .15rem .5rem;
  cursor: pointer; white-space: nowrap;
}
.cell:hover { outline: 2px solid #1a5fb4; outline-offset: -2px; }
.cell.statique { cursor: default; }
.cell.statique:hover { outline: none; }
.piquet { font-weight: 600; min-width: 6rem; }
.piquet.manquant {
  color: #b33;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, #fbe3e3 4px, #fbe3e3 8px);
}
.vac .horaire { color: #777; font-size: .8rem; }

/* natures de catégorie (reservee_reclamable — Robot/Semi-urg./CDC — sans couleur, décision Riadh) */
.cat-realloc { background: #cfe6f5; }
.cat-remise { background: #e8e8e8; }
.cat-fermee { background: #cccccc; color: #555; }
.cat-disponible { background: #d9f2d9; }
.cat-hors_gestion { background: #f4f4f4; color: #999; }

/* colonnes de présence — saisie à la Excel : sélection puis lettre au clavier */
.col-pres { min-width: 2.4rem; text-align: center; font-size: .8rem; }
.cell.pres { min-width: 2.4rem; text-align: center; padding: .15rem .3rem;
             cursor: cell; user-select: none; -webkit-user-select: none; }
.cell.pres.selectionne { outline: 2px solid #1a5fb4; outline-offset: -2px;
                         background: #dcebff !important; }

/* colonne piquet — même sélection, attribution via barre flottante */
.cell.piquet { cursor: cell; user-select: none; -webkit-user-select: none; }
.cell.piquet.selectionne { outline: 2px solid #1a5fb4; outline-offset: -2px;
                           background: #dcebff !important; }
.barre-piquet {
  position: absolute; z-index: 20; display: flex; gap: .3rem; align-items: center;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: 5px;
  padding: .35rem .5rem; box-shadow: 0 3px 10px rgba(0,0,0,.18); font-size: .85rem;
}
.barre-piquet button {
  border: 1px solid var(--bord); background: #fff; border-radius: 3px;
  cursor: pointer; padding: .15rem .45rem;
}
.barre-piquet button:hover { background: #eef4fb; }
.motif-N { background: var(--n); }
.motif-V, .motif-R, .motif-F, .motif-M { background: var(--abs); }

/* alerte conflit : piquet ou vacation tenus par un absent */
.cell.conflit { outline: 2px solid #d33; outline-offset: -2px; }
.badge-conflit {
  background: #fbe3e3; border: 1px solid #d33; color: #b33;
  border-radius: 3px; padding: .1rem .45rem; font-weight: 600;
}

/* formulaire en cellule */
.cell-form { display: flex; gap: .2rem; align-items: center; padding: .1rem .2rem; }
.cell-form select { font-size: .82rem; max-width: 9rem; }
.form-absence { background: #fff; font-size: .82rem; }
.form-absence input[type="date"] { font-size: .8rem; }
.form-absence .btn-suppr { color: #b33; }
.cell-form button {
  border: 1px solid var(--bord); background: #fff; border-radius: 3px;
  cursor: pointer; padding: .1rem .4rem;
}
.cell-form button:hover { background: #eef4fb; }

footer { margin-top: .8rem; color: #888; font-size: .78rem; }

/* page référentiel opérateurs */
.table-ops th, .table-ops td { padding: .3rem .6rem; }
.op-ligne { cursor: pointer; }
.op-ligne:hover td { background: #eef4fb; }
.op-archive td { color: #999; background: #f4f4f4; }
td.manque { background: #fbe3e3; font-weight: 600; }  /* canton manquant pour un cadre */
.op-edit { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; padding: .3rem .2rem; }
.op-edit label { font-size: .82rem; white-space: nowrap; }
.op-edit input, .op-edit select { font-size: .82rem; }
.op-edit input[name="nom"] { width: 8rem; }
.op-edit input[type="number"] { width: 4rem; }
.btn-ajout {
  border: 1px solid var(--bord); background: #fff; border-radius: 4px;
  padding: .3rem .8rem; cursor: pointer; margin: .6rem 0;
}
.btn-ajout:hover { background: #eef4fb; }

/* page décomptes */
.table-dec th, .table-dec td { padding: .3rem .6rem; }
.table-dec td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-dec td.solde.negatif { background: #fbe3e3; color: #b33; }

/* vue année */
tr.sep-mois td {
  background: #dfe7f2; font-weight: 600; padding: .3rem .5rem;
  border-top: 2px solid #9db4d0;
}
tr.sep-mois a { color: #1a5fb4; text-decoration: none; }
tr.aujourdhui { scroll-margin-top: 45vh; }
tr.aujourdhui td { border-top: 2px solid #1a5fb4; border-bottom: 2px solid #1a5fb4; }
tr.aujourdhui td.col-date { background: #dcebff; font-weight: 700; }

/* --- rôles & connexion (Phase 1) --- */
.motif-X { background: var(--abs); }          /* absent sans motif — vue non-éditeur */
.cell.ro { cursor: default; }
nav .qui { margin-left: auto; font-size: .82rem; color: #555; }
nav .qui a { color: #888; }

.boite-login {
  max-width: 22rem; margin: 16vh auto; padding: 1.6rem;
  background: #fff; border: 1px solid var(--bord); border-radius: 8px;
}
.boite-login h1 { font-size: 1.15rem; margin: 0 0 1rem; }
.boite-login label { display: block; margin: .6rem 0; font-size: .85rem; }
.boite-login input { width: 100%; padding: .4rem; margin-top: .2rem; }
.boite-login button { margin-top: .9rem; padding: .45rem 1.1rem; }
.login-erreur { color: #a33; font-size: .85rem; }