/* Apparence de la grille « Projets en cours » : celle de l'Excel (police Calibri, quadrillage fin,
   en-tête vert foncé, codes colorés). La police, le quadrillage et l'en-tête d'AG Grid se règlent
   dans js/grille.js (THEME) ; ici, tout le reste. */

:root {
  --vert-fonce: #1e5b3a;
  --vert-moyen: #2f7a4f;
  --vert-pale: #e8f2ec;
  --quadrillage: #d4d4d4;
  --texte: #1b1b1b;
  --texte-discret: #5c5c5c;
  --alerte: #a4261c;
  --alerte-fond: #fdecea;
  --police: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.35 var(--police);
  color: var(--texte);
  background: #fff;
}

h1 { margin: 0; font-size: 18px; font-weight: 700; }

/* ---------- Boutons et champs ---------- */

.bouton {
  display: inline-block;
  padding: 4px 10px;
  font: inherit;
  color: var(--texte);
  background: #f6f6f6;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover:not(:disabled) { background: #ececec; }
.bouton:disabled { opacity: .55; cursor: default; }
.bouton-principal { color: #fff; background: var(--vert-fonce); border-color: var(--vert-fonce); }
.bouton-principal:hover:not(:disabled) { background: var(--vert-moyen); }
.bouton-alerte { font-weight: 700; color: #7a5200; background: #fff4d6; border-color: #e8cf8a; }
.bouton-alerte:hover:not(:disabled) { background: #ffe9a8; }
.bouton:focus-visible, input:focus-visible { outline: 2px solid var(--vert-moyen); outline-offset: 1px; }

input[type="search"], input[type="text"] {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
}

/* ---------- Page de connexion ---------- */

.page-connexion { display: grid; place-items: center; background: var(--vert-pale); }
.connexion {
  width: min(420px, calc(100vw - 32px));
  padding: 28px 28px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--quadrillage);
  border-radius: 6px;
}
.connexion h1 { margin-bottom: 10px; color: var(--vert-fonce); }
.connexion .bouton { margin-top: 8px; padding: 9px 16px; font-size: 15px; }
.connexion__message {
  padding: 8px 10px;
  color: var(--alerte);
  background: var(--alerte-fond);
  border-radius: 3px;
  text-align: left;
}
.connexion__demo { margin: 18px 0 0; font-size: 13px; color: var(--texte-discret); }

/* ---------- Page de la grille : barre du haut, grille, barre d'état ---------- */

.page-grille { display: flex; flex-direction: column; }

.barre-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--quadrillage);
}
.barre-haut h1 { margin-right: 6px; color: var(--vert-fonce); }
.barre-haut__espace, .barre-etat__espace { flex: 1; }
.recherche { width: min(300px, 100%); }
.archives { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.utilisateur { color: var(--texte-discret); }

/* L'en-tête commun aux pages (js/navigation.js) : Grille · Prévisionnel · Mes heures, la page courante marquée. */
.navigation { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.navigation__lien {
  padding: 3px 10px;
  color: var(--vert-fonce);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}
.navigation__lien:hover { background: var(--vert-pale); }
.navigation__lien[aria-current="page"] { font-weight: 700; color: #fff; background: var(--vert-fonce); }
.navigation__lien:focus-visible { outline: 2px solid var(--vert-moyen); outline-offset: 1px; }

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 6px 10px;
}
.bandeau-demo { color: #4a3b00; background: #fff1b8; border-bottom: 1px solid #e2c85a; }
.bandeau-info { color: #243a5e; background: #e5eefb; border-bottom: 1px solid #b9cdea; }

.message {
  position: fixed;
  bottom: 38px;
  left: 50%;
  z-index: 1000;
  max-width: min(720px, calc(100vw - 24px));
  padding: 8px 14px;
  color: #fff;
  background: #333;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transform: translateX(-50%);
  white-space: pre-line;
}
.message--erreur { background: var(--alerte); }

.grille { flex: 1; min-height: 0; }
.chargement { margin: 0; padding: 16px; color: var(--texte-discret); }
.erreur-chargement { padding: 24px; text-align: center; }

.barre-etat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 3px 10px;
  font-size: 13px;
  color: var(--texte-discret);
  background: #f3f3f3;
  border-top: 1px solid var(--quadrillage);
}
.barre-etat span:empty { display: none; }
.etat--alerte { color: var(--alerte); }

.presse-papiers-cache { position: fixed; top: 0; left: -9999px; }

/* ---------- Fenêtres déroulantes : colonnes, vues ---------- */

.fenetre {
  position: fixed;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 230px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 80px);
  padding: 8px;
  overflow: auto;
  background: #fff;
  border: 1px solid #a8a8a8;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.fenetre__titre { font-weight: 700; color: var(--vert-fonce); }
.fenetre__liste { margin: 0; padding: 0; list-style: none; }
.fenetre__liste label { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.fenetre__vide { color: var(--texte-discret); }
.fenetre__ligne { display: flex; gap: 4px; }
.fenetre__vue {
  flex: 1;
  padding: 3px 6px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.fenetre__vue:hover { background: var(--vert-pale); }
.fenetre__supprimer { color: var(--texte-discret); background: none; border: 0; cursor: pointer; }
.fenetre__supprimer:hover { color: var(--alerte); }

/* ---------- Grille : aspect Excel ---------- */

.ag-cell { line-height: 20px; }
.ag-cell-focus:not(.ag-cell-inline-editing) {
  outline: 2px solid var(--vert-fonce);
  outline-offset: -2px;
}

/* Numéros de ligne, comme l'en-tête de ligne d'Excel. */
.ag-cell.cellule-numero {
  padding: 0;
  color: #4d4d4d;
  text-align: center;
  background: #efefef;
  border-right: 1px solid #b0b0b0;
  cursor: pointer;
  user-select: none;
}
.ag-row-selected .ag-cell.cellule-numero { color: #fff; background: var(--vert-fonce); }
.entete-coin {
  width: 100%;
  height: 100%;
  padding: 0;
  background: #d9d9d9;
  border: 0;
  cursor: pointer;
}
.entete-coin:hover { background: #c4c4c4; }

/* Ligne grisée selon « A facturer » : la teinte vient de la table statuts_facturation (couleur_texte),
   posée en style sur la ligne par grille.js ; les cellules la reprennent. Les codes (plus bas) gardent leurs couleurs. */
.ag-row.ligne-grisee .ag-cell { color: inherit; }
.ag-row.ligne-archivee .ag-cell { font-style: italic; }
.ag-row.ligne-archivee .ag-cell.cellule-numero { text-decoration: line-through; }
/* Un projet fusionné dans un autre (statut « fusionné ») se lit comme un archivé : en italique, numéro barré. */
.ag-cell.cellule-lien a, .ag-row .ag-cell .lien-erp { color: #0b5cad; }

/* La pastille du système d'une référence de l'ERP (js/systemes-erp.js : « Dolibarr », « Furious »… — une référence n'est unique que
   dans son système) : devant le lien ERP de la grille, devant la référence d'un devis de l'écran du prévisionnel, dans la phrase de la
   boîte de choix. Le libellé est écrit en toutes lettres : la teinte ne fait que le renforcer. Coins à peine arrondis, pour ne pas la
   confondre avec les pastilles rondes de l'origine d'une ligne ; un système que cette feuille ne connaît pas reste en gris. */
.pastille-erp {
  display: inline-block;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: 1px;
  color: #3d3d3d;
  background: #f1f1f1;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  cursor: help;
}
.pastille-erp--dolibarr { color: #233a5c; background: #e8eef7; border-color: #b4c5de; }
.pastille-erp--furious { color: #6e2c00; background: #fdefe4; border-color: #ecc29f; }

/* Codes : mêmes couleurs que la table « codes_prestation ». */
.ag-cell.cellule-code { font-weight: 700; text-align: center; }
.ag-row .ag-cell.code-0 { color: #1b2320; background: #b9bfbc; }
.ag-row .ag-cell.code-1 { color: #0e2a18; background: #3fa45b; }
.ag-row .ag-cell.code-2 { color: #3b2f00; background: #f1c232; }
.ag-row .ag-cell.code-3 { color: #fff; background: #1b2320; }

.ag-cell.cellule-date, .ag-cell.cellule-intervention, .ag-cell.cellule-previsionnel, .ag-cell.cellule-alertes { text-align: center; }

/* « % consommé » : le passé en pourcentage du prévu. À partir de 85 % il va être dépassé (ambre) ; au-delà de 100 % il l'est (rouge). */
.ag-row .ag-cell.pct-proche { color: #7a5200; font-weight: 700; }
.ag-row .ag-cell.pct-depasse { color: #b3261e; font-weight: 700; }

/* « Prévisionnel » : un pictogramme par statut de la table statuts_previsionnel (grille.js : pictoPrevisionnel) ;
   la bulle dit ce que le statut demande. Le statut n'est jamais porté par la couleur seule : le symbole change aussi. */
.picto-previsionnel { display: inline-block; min-width: 1.2em; font-weight: 700; cursor: help; }
a.picto-previsionnel { text-decoration: none; cursor: pointer; }
a.picto-previsionnel:hover { text-decoration: underline; }
.picto-previsionnel--a_valider { color: #9a6700; }
.picto-previsionnel--a_revoir { color: #b3261e; }
.picto-previsionnel--valide { color: #1e7a45; }
/* « Alertes » : un pictogramme par alerte que la table alertes_projet demande de montrer (grille.js : pictosAlertes). « Devis partagé »
   (⇄) est un bouton, qui ouvre le choix du devis (choix-rattachement.js) ; le symbole porte le sens, la couleur le renforce. */
.alertes { display: inline-flex; gap: 4px; align-items: center; }
.picto-alerte { display: inline-block; min-width: 1.2em; font: inherit; font-weight: 700; line-height: 1; color: #b3261e; cursor: help; }
button.picto-alerte { padding: 0 3px; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
button.picto-alerte:hover { background: #fdecea; border-color: #e3b3ae; }
button.picto-alerte:focus-visible { outline: 2px solid var(--vert-moyen); outline-offset: 1px; }
.picto-alerte--devis_partage { color: #9a6700; }
.ag-cell.cellule-notes { text-overflow: ellipsis; }
.personne-volontaire { font-style: italic; }

/* En-têtes : cadenas, titre, sens du tri, flèche de filtre. */
.ag-header-cell { padding-inline: 3px; }
.entete {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  color: #fff;
}
.entete--code .entete__titre, .entete--date .entete__titre, .entete--intervention .entete__titre,
.entete--previsionnel .entete__titre { text-align: center; }
.entete--nombre .entete__titre, .entete--montant .entete__titre, .entete--pourcentage .entete__titre { text-align: right; }
.entete__cadenas { display: inline-flex; flex: none; opacity: .65; }
.entete__titre {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.15;
  cursor: pointer;
  user-select: none;
}
.entete__tri { flex: none; font-size: 10px; }
.entete__filtre {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2px;
  cursor: pointer;
}
.entete__filtre:hover { background: rgba(255, 255, 255, .3); }
.entete__filtre--actif { color: var(--vert-fonce); background: #ffd966; border-color: #ffd966; }

/* Filtre « cases à cocher ». */
.filtre-cases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 250px;
  padding: 8px;
  font: 14px/1.3 var(--police);
  color: var(--texte);
}
.filtre-cases__liste {
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--quadrillage);
}
.filtre-cases label { display: flex; align-items: center; gap: 6px; padding: 2px 6px; }
.filtre-cases__liste label:hover { background: var(--vert-pale); }
.filtre-cases__texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtre-cases__nombre { color: var(--texte-discret); }
.filtre-cases__effacer { padding: 3px 8px; font: inherit; }

/* Éditeurs de cellule. */
.editeur { font: inherit; color: var(--texte); background: #fff; }
.editeur-code, .editeur-date { width: 100%; height: 100%; padding: 0 4px; border: 0; outline: 0; }
.editeur-code { text-align: center; font-weight: 700; }
.editeur-notes {
  width: 340px;
  min-height: 96px;
  padding: 6px;
  border: 2px solid var(--vert-fonce);
  resize: both;
}
.editeur-liste {
  min-width: 150px;
  margin: 0;
  padding: 2px;
  list-style: none;
  border: 2px solid var(--vert-fonce);
}
.editeur-liste__valeur { padding: 3px 8px; cursor: pointer; }
.editeur-liste__valeur:hover { background: var(--vert-pale); }
.editeur-liste__valeur:focus, .editeur-liste__valeur[aria-selected="true"] { color: #fff; background: var(--vert-fonce); outline: 0; }
.editeur-attribution {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  padding: 8px;
  border: 2px solid var(--vert-fonce);
}
.editeur-attribution__titre { font-weight: 700; color: var(--vert-fonce); }
.editeur-attribution__liste { margin: 0; padding: 0; list-style: none; }
.editeur-attribution__liste label { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.editeur-attribution__note { margin: 0; max-width: 260px; font-size: 13px; color: var(--alerte); }
.editeur-attribution__mention { margin-left: auto; padding-left: 8px; font-size: 13px; color: #6f6f6f; }
.editeur-attribution__mention + .editeur-attribution__mention { margin-left: 0; }
.editeur-attribution__intertitre {
  margin-top: 6px;
  padding-top: 6px;
  font-weight: 700;
  color: var(--vert-fonce);
  border-top: 1px solid #d4d4d4;
}
.editeur-attribution__inactif { color: #8c8c8c; }
.editeur-attribution__boutons { display: flex; gap: 6px; }

/* Petits écrans : la barre du haut passe sur plusieurs lignes, la grille garde la place restante. */
@media (max-width: 700px) {
  .recherche { flex: 1 1 100%; }
  .utilisateur { display: none; }
}