:root {
  --fond: #f5f6f8;
  --surface: #ffffff;
  --bord: #dfe3e8;
  --texte: #1c2128;
  --texte-doux: #5c6773;
  --accent: #1c5da8;
  --accent-doux: #e8f0fa;
  --danger: #b42318;
  --ok: #1a7f52;
  --alerte: #b45309;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

/* Thème clair imposé : le tableau se consulte en journée, souvent à plusieurs
   devant un écran, et le fond sombre suivait aveuglément le réglage Windows.
   Un basculement manuel reste possible à ajouter si le besoin apparaît. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
}

/* --- Barre supérieure --- */

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
}

.barre h1 { margin: 0; font-size: 18px; font-weight: 600; }
.barre-actions { display: flex; align-items: center; gap: 10px; }

.etat { font-size: 12px; color: var(--texte-doux); min-height: 1em; }
.etat.erreur-etat { color: var(--danger); }

.qui { font-size: 13px; color: var(--texte-doux); }
.lien-deconnexion {
  background: none; border: none; color: var(--texte-doux); text-decoration: underline;
  padding: 0; font-size: 12px; font-weight: 400; cursor: pointer;
}

/* Lecture seule : la vraie frontière est côté serveur, ceci n'est qu'un
   confort visuel pour ne pas laisser cliquer sur une action qui échouerait. */
body.lecture-seule #btn-nouvelle,
body.lecture-seule #btn-ajouter-tache,
body.lecture-seule #btn-ajouter-autorisation,
body.lecture-seule #btn-enregistrer,
body.lecture-seule #btn-supprimer,
body.lecture-seule #btn-ajout-activite,
body.lecture-seule .tech-avertissement { display: none; }
body.lecture-seule .planning-barre.activite { pointer-events: none; }
body.lecture-seule #table td input:not([type=search]),
body.lecture-seule #table td select,
body.lecture-seule #table td textarea,
body.lecture-seule #formulaire input,
body.lecture-seule #formulaire select,
body.lecture-seule #formulaire textarea,
body.lecture-seule .planning-piste,
body.lecture-seule .planning-bac { pointer-events: none; opacity: .75; }

/* --- Connexion --- */
.carte-connexion {
  max-width: 380px;
  margin: 15vh auto 0;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  box-shadow: var(--ombre);
  text-align: center;
}
.carte-connexion h1 { font-size: 19px; margin: 0 0 10px; }
.carte-connexion .note { color: var(--texte-doux); font-size: 13px; margin: 0 0 18px; }
.carte-connexion button { width: 100%; }

button {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.secondaire { background: transparent; color: var(--texte); border-color: var(--bord); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }

/* --- Onglets --- */

.onglets { display: flex; gap: 4px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--bord); }

.onglet {
  background: none;
  color: var(--texte-doux);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
}
.onglet.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* --- Filtres --- */

.filtres {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
}

input, select, textarea {
  font: inherit;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 6px 9px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#f-recherche { min-width: 260px; flex: 1 1 260px; max-width: 420px; }

.case-masquer { display: flex; align-items: center; gap: 6px; color: var(--texte-doux); }

/* Sélecteur de portée du calendrier : boutons jointifs, un seul actif. */
.portee { display: inline-flex; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
.portee-choix {
  background: var(--surface);
  color: var(--texte-doux);
  border: none;
  border-radius: 0;
  padding: 6px 14px;
  font-size: 13px;
}
.portee-choix + .portee-choix { border-left: 1px solid var(--bord); }
.portee-choix:hover { background: var(--accent-doux); color: var(--texte); filter: none; }
.portee-choix.actif { background: var(--accent); color: #fff; font-weight: 600; }
.portee-choix.actif:hover { background: var(--accent); color: #fff; }

.navigation { display: inline-flex; gap: 4px; }
.navigation button {
  width: 32px;
  padding: 6px 0;
  font-size: 17px;
  line-height: 1;
}
.compteur { margin-left: auto; color: var(--texte-doux); font-size: 13px; }

/* --- Tableau --- */

.table-conteneur { overflow-x: auto; padding: 0 20px 40px; }

table { width: 100%; border-collapse: collapse; background: var(--surface); box-shadow: var(--ombre); border-radius: 8px; overflow: hidden; }

th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { background: var(--surface); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); position: sticky; top: 0; z-index: 1; }
th[data-tri] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-tri]:hover { color: var(--accent); }
th .fleche { font-size: 10px; }
td.centre, th.centre { text-align: center; }
tbody tr:hover { background: var(--accent-doux); }
tbody tr:last-child td { border-bottom: none; }

.client { font-weight: 600; }
.stock { font-variant-numeric: tabular-nums; color: var(--texte-doux); white-space: nowrap; }

/* Rattachement à HubSpot : bande verte si une transaction est renseignée,
   orange sinon. Posée en ombre intérieure et non en bordure, elle ne décale
   pas les lignes d'un pixel et toutes gardent exactement la même largeur. */
tr.synchro-hubspot td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.sans-hubspot td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }

/* --- Rattachement guidé aux transactions HubSpot --- */

.hs-progression { font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.hs-client { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.hs-note { font-size: 12px; font-weight: 400; color: var(--texte-doux); }
.hs-resultats { margin: 14px 0; max-height: 45vh; overflow-y: auto; }
.hs-vide { color: var(--texte-doux); font-style: italic; font-size: 13px; margin: 6px 0; }

.hs-entreprise { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.hs-entreprise-nom { font-weight: 600; margin-bottom: 6px; }

/* Une transaction par ligne, cliquable en entier : la validation se fait au
   rythme d'un clic par installation, la cible doit être large. */
.hs-transaction {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 10px;
  margin-top: 4px;
  font-size: 13px;
}
.hs-transaction:hover { background: var(--accent-doux); border-color: var(--accent); filter: none; }
.hs-transaction-nom { font-weight: 600; }

.lien-discret {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.lien-discret:hover { text-decoration: underline; }
.machines { max-width: 220px; white-space: pre-wrap; }
.retard { color: var(--danger); font-weight: 600; }
.proche { color: var(--alerte); font-weight: 600; }

.pastille { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-a-prevoir { background: #fdecec; color: #a3312a; }
.st-planifiee { background: #e8f0fa; color: #1c5da8; }
.st-en-cours  { background: #fff3e0; color: #a35b00; }
.st-terminee  { background: #e6f4ec; color: #1a7f52; }
/* Attente d'une confirmation extérieure : volontairement distinct du orange
   d'« En cours », qui signale au contraire une action de notre côté. */
.st-attente-confirmation-date-livraison { background: #efe9fb; color: #5b3fa8; }


/* --- Édition directe dans le tableau --- */

.modifiable { cursor: text; border-radius: 4px; }
.modifiable:hover { box-shadow: inset 0 0 0 1px var(--bord); }
.cellule-vide { color: var(--texte-doux); }
.cellule-divergente { color: var(--texte-doux); font-style: italic; }

/* --- Lignes fusionnées (plusieurs machines d'une même commande) --- */

.ligne-groupe { background: var(--accent-doux); }
.ligne-groupe:hover { background: var(--accent-doux); filter: brightness(.97); }

.badge-groupe {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: help;
}

.stock-groupe { cursor: help; color: var(--texte-doux); }

.actions-groupe { display: flex; flex-wrap: wrap; gap: 2px; align-items: baseline; font-size: 12px; }
.lien-detail-groupe {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
}
.lien-detail-groupe:hover { filter: brightness(.8); }

/* Champs de saisie apparaissant dans une cellule : ils doivent occuper la
   largeur disponible sans élargir la colonne au moment du clic. */
.en-ligne {
  width: 100%;
  min-width: 0;
  padding: 3px 5px;
  font: inherit;
}
textarea.en-ligne { resize: vertical; }

select.en-ligne { cursor: pointer; }
select.en-ligne.pastille { border-color: transparent; padding-right: 4px; }
select.en-ligne.pastille:hover { border-color: var(--bord); }

/* `min-width: 0` sur .en-ligne laisse les colonnes se rétracter jusqu'à
   l'illisible : le menu Statut tombait à 45 px, soit deux ou trois lettres.
   On rend donc leur plancher aux colonnes dont le contenu est long. Le tableau
   défile horizontalement si nécessaire, c'est préférable à des libellés coupés. */
select.en-ligne.pastille { min-width: 150px; }
.machines { min-width: 190px; }
.client { min-width: 140px; }

/* Confirmation visuelle brève après une écriture réussie. */
@keyframes flash-enregistre {
  from { background: var(--ok); }
  to   { background: transparent; }
}
.enregistre { animation: flash-enregistre .9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .enregistre { animation: none; }
}

/* Colonne « à faire » : liste d'actions entièrement modifiable dans le tableau */
.todo-cellule { min-width: 210px; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.todo input[type="checkbox"] { margin-top: 3px; flex: none; }
.todo .texte { flex: 1; cursor: text; border-radius: 3px; }
.todo .texte:hover { box-shadow: inset 0 0 0 1px var(--bord); }
.todo .faite { text-decoration: line-through; color: var(--texte-doux); }
.todo-resume { font-size: 12px; color: var(--texte-doux); margin-top: 3px; }

/* Le bouton de retrait n'apparaît qu'au survol : sur une colonne dense, une
   croix par ligne en permanence rend le tableau illisible. */
.todo .retirer {
  flex: none;
  background: none;
  border: none;
  color: var(--texte-doux);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-size: 15px;
  visibility: hidden;
}
.todo li:hover .retirer { visibility: visible; }
.todo .retirer:hover { color: var(--danger); }

.todo-ajouter {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 0;
  font-size: 12px;
  opacity: .55;
}
tbody tr:hover .todo-ajouter { opacity: 1; }
.todo-ajouter:hover { text-decoration: underline; }

.todo-saisie { margin-top: 3px; }

.vide { text-align: center; color: var(--texte-doux); padding: 40px; }

/* --- Calendrier --- */

/* Frise mensuelle : une colonne par jour ouvré, un couloir par intervention
   simultanée. Les mois s'empilent pour laisser aux barres une largeur lisible. */
.calendrier { display: flex; flex-direction: column; gap: 16px; padding: 20px; }

.mois { background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; box-shadow: var(--ombre); }
.mois h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; font-size: 14px; text-transform: capitalize;
}
.mois-compte { font-size: 12px; font-weight: 400; color: var(--texte-doux); text-transform: none; }

/* Densité par défaut, celle de la vue 6 mois. Les portées plus courtes la
   redéfinissent plus bas : mêmes règles, valeurs différentes. */
/* Densité par défaut, celle de la vue 6 mois : condensée, pour que les six
   mois tiennent à l'écran sans défilement. Chaque mois y occupe une seule
   ligne de jours ouvrés. */
.calendrier {
  --largeur-jour: 16px;
  --hauteur-barre: 13px;
  --texte-barre: 9.5px;
  --texte-jour: 9.5px;
  --ecart-frise: 2px;
}
.calendrier.portee-6 { gap: 6px; padding: 8px 20px 12px; }
.calendrier.portee-6 .mois { padding: 6px 10px; }
.calendrier.portee-6 .mois h3 { font-size: 12px; margin-bottom: 4px; }
.calendrier.portee-6 .mois-compte { font-size: 10.5px; }
.calendrier.portee-6 .barre { padding: 1px 4px; border-radius: 3px; }
.calendrier.portee-6 .frise-jour { padding-bottom: 0; }
.calendrier.portee-6 .semaine-etiquette { font-size: .8em; line-height: 1.2; }
/* La barre de filtres du calendrier n'a pas besoin de la même respiration que
   celle du tableau : chaque pixel gagné ici évite un défilement en vue 6 mois. */
#vue-calendrier .filtres { padding: 10px 20px; }

/* Une frise par semaine, empilées : cinq colonnes au lieu de vingt-deux, donc
   des journées quatre fois plus larges et des libellés enfin lisibles. */
.frise {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(var(--largeur-jour), 1fr));
  gap: var(--ecart-frise);
  align-items: stretch;
}

/* Étiquette de semaine (vues 1/3 mois, une ligne par semaine) : sert aussi de
   séparateur entre deux semaines via son trait supérieur — sauf la première,
   déjà séparée du titre du mois. */
.semaine-entete {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-doux);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--bord);
}
.mois h3 + .semaine-entete { margin-top: 0; padding-top: 0; border-top: none; }

/* Repère de semaine dans l'en-tête du lundi (vue 6 mois, ligne continue sans
   place pour une étiquette dédiée). */
.semaine-etiquette {
  display: block;
  font-size: .85em;
  font-weight: 700;
  color: var(--texte-doux);
  line-height: 1.4;
}

/* Trait centré dans l'espace séparant deux journées, sous les barres. */
.colonne-trait {
  border-left: 1px solid var(--bord);
  margin-left: calc(var(--ecart-frise) / -2 - 0.5px);
  pointer-events: none;
  z-index: 0;
}
.colonne-trait.debut-semaine { border-left-color: var(--texte-doux); }

.frise-jour {
  grid-row: 1;
  display: flex; flex-direction: column; align-items: center;
  font-size: var(--texte-jour); color: var(--texte-doux);
  padding-bottom: 3px; border-bottom: 1px solid var(--bord);
}
.frise-jour .lettre { font-size: .8em; opacity: .65; }
/* Jours du mois voisin : conservés pour que les colonnes restent alignées d'une
   semaine à l'autre, mais estompés car ils appartiennent à une autre carte. */
.frise-jour.hors-mois { opacity: .3; }
.frise-jour.aujourdhui { color: var(--accent); font-weight: 700; }
.frise-jour.aujourdhui .lettre { opacity: 1; }

.barre {
  position: relative;   /* passe devant les séparateurs de colonnes */
  z-index: 1;
  min-width: 0;
  min-height: var(--hauteur-barre);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: none;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: var(--texte-barre);
  font-weight: 600;
  cursor: pointer;
}
.barre:hover { filter: brightness(1.12); }
.barre[draggable="true"] { cursor: grab; }
.barre:active { cursor: grabbing; }
.barre.en-glissement { opacity: .4; }

/* Jour visé pendant un déplacement. */
.frise-jour.cible {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  background: var(--accent-doux);
  border-radius: 4px 4px 0 0;
}
/* Bords francs du côté où l'intervention déborde sur le mois voisin. */
.barre.depuis-avant { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.barre.vers-apres { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Un seul mois affiché : toute la largeur pour ~22 jours, on en profite. */
.calendrier.portee-1 {
  --largeur-jour: 44px;
  --hauteur-barre: 34px;
  --texte-barre: 14px;
  --texte-jour: 14px;
  --ecart-frise: 5px;
}
.calendrier.portee-1 .mois { padding: 18px 20px; }
.calendrier.portee-1 .mois h3 { font-size: 17px; margin-bottom: 14px; }
.calendrier.portee-1 .barre { padding: 5px 10px; border-radius: 5px; }

.calendrier.portee-3 {
  --largeur-jour: 30px;
  --hauteur-barre: 25px;
  --texte-barre: 12.5px;
  --texte-jour: 12px;
  --ecart-frise: 4px;
}
.calendrier.portee-3 .mois { padding: 15px 17px; }
.calendrier.portee-3 .mois h3 { font-size: 15px; }
.calendrier.portee-3 .barre { padding: 4px 8px; }

.mois-vide { color: var(--texte-doux); font-size: 12px; font-style: italic; margin: 10px 0 0; }
.calendrier-note { color: var(--texte-doux); font-size: 12px; font-style: italic; margin: 0; }

/* --- Planning techniciens (prototype) --- */

.etiquette-proto {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--alerte);
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: 1px;
}

.tech-mois { text-transform: capitalize; font-size: 15px; }

/* Réglage de la largeur des journées : poignée que l'on tire à la souris. */
.reglage-largeur { display: flex; align-items: center; gap: 8px; }
.reglage-libelle { font-size: 12px; color: var(--texte-doux); }

.poignee {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 6px;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;   /* sans quoi le navigateur intercepte le geste */
}
.poignee:hover, .poignee:focus-visible { border-color: var(--accent); }
.poignee.en-cours { border-color: var(--accent); background: var(--accent-doux); }

/* Trois barres verticales, code visuel usuel d'une zone que l'on tire. */
.poignee-grip {
  width: 9px; height: 14px;
  background-image: repeating-linear-gradient(
    to right, var(--texte-doux) 0 1px, transparent 1px 4px);
}
.poignee-valeur {
  font-size: 12px;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
}
.tech-avertissement {
  margin: 0;
  padding: 8px 20px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--texte-doux);
}

.planning { padding: 0 20px 30px; overflow-x: auto; }

/* Une colonne de libellés, puis un jour par colonne, à largeur fixe : la grille
   ne s'étire pas pour remplir l'écran, elle reste dense et défile si besoin. */
.planning { --largeur-case: 22px; }

.planning-grille {
  display: grid;
  grid-template-columns: 120px repeat(var(--jours), var(--largeur-case));
  gap: 2px;
  min-width: max-content;
}

.planning-coin { grid-column: 1; }
.planning-jour {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: var(--texte-doux);
  padding-bottom: 3px; border-bottom: 1px solid var(--bord);
}
.planning-jour .lettre { font-size: 9px; opacity: .6; }
.planning-jour.aujourdhui { color: var(--accent); font-weight: 700; }
.planning-jour.debut-semaine { border-left: 1px solid var(--texte-doux); }
.planning-jour .semaine-etiquette { font-size: 8.5px; line-height: 1.3; }

.planning-libelle {
  display: flex; align-items: center;
  font-size: 13px; font-weight: 600;
  padding: 6px 8px 6px 0;
  border-right: 1px solid var(--bord);
}
.planning-libelle.attente { color: var(--texte-doux); font-weight: 500; }
/* Fiche technicien sans compte Microsoft 365 : il ne pourra pas se connecter
   à sa FDD, autant que ça se voie dès le planning. */
.planning-libelle.sans-compte { color: var(--alerte); }
.planning-libelle.sans-compte::after { content: " ⚠"; font-size: 11px; }

/* Réserve : installations sans date exploitable, hors de la grille temporelle
   mais toujours glissables vers un technicien. */
.planning-reserve { margin-top: 14px; max-width: 900px; }
.planning-reserve-titre {
  font-size: 12px; color: var(--texte-doux); margin-bottom: 5px;
}
.planning-bac {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px;
  min-height: 42px;
  padding: 5px;
  background: var(--fond);
  border: 1px dashed var(--bord);
  border-radius: 6px;
}
.planning-bac.cible { border-color: var(--accent); background: var(--accent-doux); }
.planning-vide { font-size: 12px; font-style: italic; color: var(--texte-doux); }

.planning-jeton {
  background: #f7d154;
  color: #4a3a00;
  border: 1px solid #e0b93a;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: grab;
}
.planning-jeton:active { cursor: grabbing; }
.planning-jeton.en-glissement { opacity: .4; }

/* Piste d'un technicien : mêmes colonnes que l'en-tête, les barres s'y posent. */
.planning-piste {
  display: grid;
  grid-template-columns: repeat(var(--jours), var(--largeur-case));
  gap: 2px;
  min-height: 34px;
  align-content: start;
  padding: 3px 0;
}
/* Piste d'attente : fond hachuré pour se distinguer des pistes de techniciens,
   sans quoi on ne verrait pas d'un coup d'œil ce qui reste à affecter. */
.planning-piste.attente .planning-case {
  background: var(--fond);
  border-style: dashed;
}
.planning-piste.attente.cible .planning-case { border-color: var(--accent); }

.planning-case {
  grid-row: 1;
  min-height: 28px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--bord);
}
.planning-case.cible { border-color: var(--accent); background: var(--accent-doux); }
/* Même repère de semaine que l'en-tête, prolongé sur toutes les pistes. */
.planning-case.debut-semaine { border-left-color: var(--texte-doux); }

.planning-barre {
  grid-row: 1;
  z-index: 1;
  align-self: center;
  min-height: 24px;
  display: flex; align-items: center;
  background: #f7d154;
  color: #4a3a00;
  border: 1px solid #e0b93a;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: grab;
}
.planning-barre:active { cursor: grabbing; }
.planning-barre.en-glissement { opacity: .4; }
.planning-barre.depuis-avant { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.planning-barre.vers-apres { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Activités : cursor par défaut (pas de glisser-déposer), une couleur par
   type pour les distinguer d'un coup d'œil des installations (jaune). */
.planning-barre.activite { cursor: pointer; min-height: 20px; font-weight: 500; }
.planning-barre.activite-conge { background: #e2e5ea; color: #3d4450; border-color: #c7ccd6; }
.planning-barre.activite-demo { background: #d9ecff; color: #12467a; border-color: #a9d2f7; }
.planning-barre.activite-maintenance { background: #fddede; color: #7a1f1f; border-color: #f4b3b3; }

/* --- Modale --- */

.modale { position: fixed; inset: 0; background: rgba(16, 24, 40, .55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
/* Sans cette règle, le `display: flex` ci-dessus l'emporte sur le `display: none`
   que le navigateur applique aux éléments porteurs de l'attribut `hidden`, et la
   fenêtre reste ouverte en permanence. */
.modale[hidden] { display: none; }
.modale-boite { background: var(--surface); border-radius: 10px; padding: 22px; width: min(620px, 100%); max-height: 90vh; overflow-y: auto; }
.modale-boite h2 { margin: 0 0 16px; font-size: 17px; }

form label { display: block; margin-bottom: 12px; color: var(--texte-doux); font-size: 13px; }
form label input, form label select, form label textarea { display: block; width: 100%; margin-top: 4px; color: var(--texte); font-size: 14px; }
.requis { color: var(--danger); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo.cases { align-items: center; }
label.case { display: flex; align-items: center; gap: 7px; color: var(--texte); }
label.case input { width: auto; margin: 0; }

.taches { border: 1px solid var(--bord); border-radius: 8px; padding: 12px; margin: 0 0 14px; }
.taches legend { font-size: 13px; color: var(--texte-doux); padding: 0 5px; }
#taches-liste { list-style: none; margin: 0 0 10px; padding: 0; }
#taches-liste li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
#taches-liste .texte { flex: 1; }
#taches-liste .faite { text-decoration: line-through; color: var(--texte-doux); }
#taches-liste .retirer { background: none; border: none; color: var(--texte-doux); cursor: pointer; padding: 0 4px; font-size: 16px; }
#taches-liste .retirer:hover { color: var(--danger); }
.taches-ajout { display: flex; gap: 8px; }
.taches-ajout input { flex: 1; }

.modale-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.espace { flex: 1; }
.erreur { color: var(--danger); margin: 0 0 10px; }