:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --texte: #1d2433;
  --texte-2: #5b6474;
  --bord: #d9dde3;
  --bord-fort: #b9bfc8;
  --accent: #1f6feb;
  --accent-clair: #e3edfd;
  --danger: #c62828;

  --chantier: #c9e7a6;      /* vert du fichier Excel, adouci */
  --chantier-txt: #24420c;
  --cp: #cfe0f7;
  --rtt: #dfd7f5;
  --maladie: #f6cfcf;
  --formation: #fbe2b6;
  --autre: #fff2a8;
  --weekend: #e3e5e8;
  --aujourdhui: #fff7d6;

  --ok: #2e7d32;
  --nok: #c62828;
  --reserve: #ef8f00;

  --col-nom: 220px;
  --col-jour: 96px;
  --col-we: 60px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); }

/* ---------- Barre du haut ---------- */
.barre {
  display: flex; align-items: stretch; gap: 28px; height: 56px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--bord);
  position: relative; z-index: 10;
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.marque .logo {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, #1f6feb, #17324d); color: #fff;
}
.marque .logo svg { width: 18px; height: 18px; }
.marque h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -.1px; }
.barre nav { display: flex; gap: 4px; }
.barre nav a {
  display: flex; align-items: center; padding: 0 12px; color: var(--texte-2); text-decoration: none;
  font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.barre nav a:hover { color: var(--texte); }
.barre nav a.actif { color: var(--accent); border-bottom-color: var(--accent); }
.barre nav a[hidden] { display: none; }
.barre .moi { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.moi-texte { display: flex; flex-direction: column; line-height: 1.15; }
.moi-texte strong { font-size: 14px; font-weight: 600; }
.moi-texte span { font-size: 12px; color: var(--texte-2); }
.avatar.petit { width: 32px; height: 32px; font-size: 12px; }

.btn {
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--accent); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover { background: #1a5fd0; }
.btn.danger { color: var(--danger); }
.btn.lien { border: none; background: none; color: var(--accent); padding: 4px 6px; }
.btn.fantome { border-color: transparent; background: transparent; color: var(--texte-2); font-size: 13px; padding: 6px 10px; }
.btn.fantome:hover { background: var(--bg); color: var(--texte); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Filtres ---------- */
.filtres {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--bord);
}
.filtre { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.filtre > .titre { color: var(--texte-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; }
.puce > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte-2); transition: background .12s, border-color .12s;
}
.puce input:checked + span { background: var(--c-profil-fond, var(--accent-clair)); border-color: var(--c-profil, var(--accent)); color: var(--texte); font-weight: 600; }
.puce input:not(:checked) + span .pastille-profil { opacity: .35; }
.puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.navigation-semaine { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: 8px; overflow: hidden; background: var(--surface); }
.navigation-semaine > * { border: none; border-radius: 0; background: transparent; }
.navigation-semaine > * + * { border-left: 1px solid var(--bord); }
.navigation-semaine select { padding: 6px 8px; max-width: 240px; }
.navigation-semaine .btn { padding: 6px 10px; }
.navigation-semaine .btn:hover { background: var(--bg); }
.filtres select { font-size: 14px; color: var(--texte); }
.filtres > .filtre select#filtre-annee { padding: 6px 8px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--surface); }
.compte-lignes { font-size: 13px; color: var(--texte-2); }
.legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--texte-2); margin-left: auto; }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legende i.rond { border-radius: 50%; width: 9px; height: 9px; }
.groupe { display: contents; }
.groupe[hidden] { display: none; }

/* ---------- Grille du planning ---------- */
.zone-grille { overflow: auto; height: calc(100vh - 115px); background: var(--surface); }
table.planning { border-collapse: separate; border-spacing: 0; user-select: none; -webkit-user-select: none; font-size: 12px; }
.planning th, .planning td { border-right: 1px solid #e9ecf0; border-bottom: 1px solid #e9ecf0; }
.planning thead th { position: sticky; background: #f7f9fc; z-index: 2; text-align: center; white-space: nowrap; border-bottom-color: var(--bord); }
.planning thead tr:nth-child(1) th { top: 0; height: 32px; font-size: 12px; font-weight: 700; color: var(--texte); text-align: left; padding: 0 10px; }
.planning thead tr:nth-child(1) th .periode { font-weight: 400; color: var(--texte-2); margin-left: 6px; }
.planning thead tr:nth-child(2) th { top: 32px; height: 40px; font-weight: 500; color: var(--texte-2); }
.planning thead th .j { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.planning thead th .d { display: inline-block; font-size: 13px; font-weight: 600; color: var(--texte); padding: 1px 6px; border-radius: 10px; margin-top: 1px; }
.planning thead th.auj .j { color: var(--accent); font-weight: 700; }
.planning thead th.auj .d { background: var(--accent); color: #fff; }
.planning thead th.sem, .planning td.dim { border-right: 2px solid var(--bord); }
.planning thead th.coin {
  left: 0; z-index: 4; width: var(--col-nom); min-width: var(--col-nom); text-align: left; padding: 0 14px;
  vertical-align: bottom; padding-bottom: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2);
  border-right: 1px solid var(--bord); box-shadow: 4px 0 6px -4px rgba(0,0,0,.12);
}
.planning thead th.we { background: #eef0f3; }
.planning th.nom {
  position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left;
  width: var(--col-nom); min-width: var(--col-nom); max-width: var(--col-nom);
  padding: 4px 14px; border-right: 1px solid var(--bord); box-shadow: 4px 0 6px -4px rgba(0,0,0,.12);
}
.planning th.nom .ligne-nom { display: flex; align-items: center; gap: 10px; }
.planning th.nom .avatar { width: 28px; height: 28px; font-size: 11px; }
.planning th.nom .nom-txt { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 13px; color: var(--texte); }
.planning th.nom .tel { font-weight: 400; color: var(--texte-2); font-size: 11px; white-space: nowrap; }
.planning tbody tr:hover th.nom { background: #f6f8fb; }
.planning tr.moi th.nom { background: var(--accent-clair); }
.planning td.case {
  width: var(--col-jour); min-width: var(--col-jour); max-width: var(--col-jour); height: 44px;
  padding: 3px 6px; cursor: cell; overflow: hidden; position: relative; line-height: 1.25;
}
.planning td.case.we { width: var(--col-we); min-width: var(--col-we); max-width: var(--col-we); background: #f3f4f6; }
.planning td.case:hover { background-color: #eef4fe; }
.planning td.case .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.planning td.auj { box-shadow: inset 0 0 0 9999px rgba(31, 111, 235, .05); }
.planning td.t-CHANTIER { background: var(--chantier); color: var(--chantier-txt); font-weight: 600; --c-type: #6aa531; }
.planning td.t-CP { background: var(--cp); --c-type: #5b8fd6; }
.planning td.t-RTT { background: var(--rtt); --c-type: #8a6fd1; }
.planning td.t-MALADIE { background: var(--maladie); --c-type: #d36a6a; }
.planning td.t-FORMATION { background: var(--formation); --c-type: #d9962a; }
.planning td.t-AUTRE { background: var(--autre); --c-type: #c9b030; }
.planning td.debut { box-shadow: inset 3px 0 0 var(--c-type); }
.planning td.suite .txt { opacity: .55; }
.planning td.case[class*="t-"]:hover { filter: brightness(.96); }
.planning td.sel, .planning td.sel.debut { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: inset 0 0 0 9999px rgba(31, 111, 235, .16); }
.pastille { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; }
.pastille.OK { background: var(--ok); }
.pastille.NOK { background: var(--nok); }
.pastille.Réserve { background: var(--reserve); }
.vide { padding: 40px; color: var(--texte-2); text-align: center; }

/* ---------- Pop-up ---------- */
dialog.popup {
  border: none; border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px));
  box-shadow: 0 18px 50px rgba(0,0,0,.25); color: var(--texte);
}
dialog.popup::backdrop { background: rgba(15, 25, 40, .35); }
.popup header { padding: 16px 20px 10px; border-bottom: 1px solid var(--bord); }
.popup header h2 { margin: 0; font-size: 17px; }
.popup header p { margin: 4px 0 0; color: var(--texte-2); font-size: 13px; }
.popup section { padding: 14px 20px; border-bottom: 1px solid var(--bord); }
.popup section h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.popup section h3 .note { font-weight: 400; color: var(--texte-2); font-size: 12px; }
.champs { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; align-items: center; font-size: 14px; }
.champs label { color: var(--texte-2); font-size: 13px; }
.champs input, .champs select, .champs textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--bord-fort); border-radius: 6px; background: var(--surface);
}
.champs input:disabled, .champs select:disabled, .champs textarea:disabled { background: #f2f3f5; color: var(--texte); border-color: var(--bord); }
.champs textarea { min-height: 64px; resize: vertical; }
.champs .label { color: var(--texte-2); font-size: 13px; }
.equipe { display: flex; flex-wrap: wrap; gap: 6px; }
.membre { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 14px; background: var(--chantier); color: var(--chantier-txt); font-size: 13px; }
.membre .retirer { border: none; background: none; cursor: pointer; color: var(--chantier-txt); font-size: 12px; width: 22px; height: 22px; border-radius: 50%; }
.membre .retirer:hover { background: rgba(0,0,0,.12); color: var(--danger); }
.ligne-dep { display: flex; gap: 8px; }
.ligne-dep input { flex: 1; }
.aide { font-size: 12px; color: var(--texte-2); grid-column: 2; margin-top: -4px; }
.aide.alerte { color: var(--reserve); }
.lignes-retour { display: grid; grid-template-columns: 1fr 110px; gap: 6px 12px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.lignes-retour select { padding: 5px 8px; border: 1px solid var(--bord-fort); border-radius: 6px; }
.lignes-retour select.v-OK { background: #e3f3e4; }
.lignes-retour select.v-NOK { background: #fbe1e1; }
.lignes-retour select.v-SO { background: #eef0f3; }
.actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.actions .gauche { margin-right: auto; }
.info { font-size: 13px; color: var(--texte-2); margin: 0; }
.message { padding: 8px 20px; font-size: 13px; }
.message.erreur { color: var(--danger); }
.message.ok { color: var(--ok); }
.popup footer { padding: 12px 20px; display: flex; justify-content: flex-end; }

/* ---------- Connexion ---------- */
.page-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #17324d, #2b5378); }
.carte-login { background: var(--surface); padding: 28px; border-radius: 14px; width: min(360px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.carte-login h1 { margin: 0 0 4px; font-size: 21px; }
.carte-login p { margin: 0 0 20px; color: var(--texte-2); font-size: 14px; }
.carte-login label { display: block; font-size: 13px; color: var(--texte-2); margin: 12px 0 4px; }
.carte-login input { width: 100%; padding: 9px 10px; border: 1px solid var(--bord-fort); border-radius: 8px; }
.carte-login button { width: 100%; margin-top: 20px; padding: 10px; }
.carte-login .message { padding: 10px 0 0; }

/* ---------- Utilisateurs ---------- */
.p-RT { --c-profil: #1f6feb; --c-profil-fond: #e3edfd; }
.p-TECHNICIEN { --c-profil: #0f8a7a; --c-profil-fond: #dcf3ef; }
.p-MONTEUR { --c-profil: #d06a00; --c-profil-fond: #fdebd8; }

.page { padding: 24px 16px 40px; max-width: 980px; margin: 0 auto; }
.entete-page { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.entete-page h2 { font-size: 22px; margin: 0; }
.sous-titre { margin: 4px 0 0; color: var(--texte-2); font-size: 14px; }
.outils { display: flex; gap: 8px; flex-wrap: wrap; }
.outils input[type="search"] {
  padding: 7px 12px; border: 1px solid var(--bord-fort); border-radius: 8px; min-width: 220px; background: var(--surface);
}
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 22px; }
.compteur {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; color: var(--texte-2); display: flex; align-items: center; gap: 8px;
}
.compteur strong { font-size: 20px; color: var(--texte); }
.pastille-profil { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-profil); flex: none; }

.groupe-personnes { margin-bottom: 22px; }
.groupe-personnes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-2); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.groupe-personnes h3 .nb { background: var(--bord); color: var(--texte); border-radius: 10px; padding: 0 7px; font-size: 12px; letter-spacing: 0; }
.liste-personnes { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.personne {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left;
  border: none; border-bottom: 1px solid var(--bord); background: none; cursor: pointer; color: var(--texte);
}
.personne:last-child { border-bottom: none; }
.personne:hover, .personne:focus-visible { background: #f6f8fb; outline: none; }
.personne.inactive { opacity: .55; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--c-profil-fond); color: var(--c-profil); font-weight: 650; font-size: 13px;
}
.personne .infos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.personne .nom { font-weight: 600; font-size: 15px; }
.personne .details { font-size: 13px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.personne .etats { display: flex; gap: 6px; }
.etiquette { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent-clair); color: #0b4bb3; font-weight: 600; }
.etiquette.grise { background: var(--bord); color: var(--texte-2); }
.personne .modifier { font-size: 13px; color: var(--accent); opacity: 0; transition: opacity .15s; }
.personne:hover .modifier, .personne:focus-visible .modifier { opacity: 1; }

.choix-profil { display: flex; flex-wrap: wrap; gap: 6px; }
.option-profil { position: relative; }
.option-profil input { position: absolute; opacity: 0; }
.option-profil > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--bord-fort); font-size: 13px; color: var(--texte-2);
}
.option-profil input:checked + span { border-color: var(--c-profil); background: var(--c-profil-fond); color: var(--texte); font-weight: 600; }
.option-profil input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.option-profil:has(.p-RT) { --c-profil: #1f6feb; --c-profil-fond: #e3edfd; }
.option-profil:has(.p-TECHNICIEN) { --c-profil: #0f8a7a; --c-profil-fond: #dcf3ef; }
.option-profil:has(.p-MONTEUR) { --c-profil: #d06a00; --c-profil-fond: #fdebd8; }
.interrupteur { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.interrupteur input { width: 18px; height: 18px; accent-color: var(--accent); }
.pied-fiche { padding: 12px 20px; display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 700px) {
  .outils, .outils input[type="search"] { width: 100%; min-width: 0; }
  .personne .modifier { display: none; }
}

@media (max-width: 700px) {
  :root { --col-nom: 130px; --col-jour: 78px; }
  .barre nav { display: none; }
  .legende { display: none; }
  .zone-grille { height: auto; max-height: 75vh; }
  .champs { grid-template-columns: 1fr; }
  .aide { grid-column: 1; }
}

@media (max-width: 700px) {
  .barre { gap: 12px; padding: 0 12px; }
  .marque h1, .moi-texte { display: none; }
  .barre nav { display: flex; }
  :root { --col-we: 48px; }
  .planning th.nom .avatar { display: none; }
}