/* Feuille de style du COMPTE-RENDU DE CHANTIER en tant que DOCUMENT (et non écran de saisie).
 *
 * Pourquoi un fichier à part : jusqu'ici, « Imprimer » lançait window.print() sur l'écran de
 * travail. Le PDF sortait donc avec les listes déroulantes, les zones de texte et les champs de
 * date visibles, et un point occupait une carte entière — quinze points tenaient sur trois pages.
 * Le gabarit Excel de Managea tient le même contenu sur une page et demie, parce que c'est un
 * TABLEAU, pas un formulaire.
 *
 * Tout est scopé sous .cr-doc : aucune règle d'ici ne peut déteindre sur le reste de l'app.
 *
 * Les couleurs de statut sont volontairement saturées et rappelées par un liseré à gauche de la
 * ligne : à l'impression noir et blanc, ou pour un daltonien, la couleur seule ne suffit pas.
 */

.cr-doc {
  --cr-navy: #1b3a4b;
  --cr-entete: #8db3e2;        /* en-tête de tableau, repris du gabarit Excel */
  --cr-bandeau: #dce6f1;       /* bandeau d'informations projet */
  --cr-section: #d9d9d9;       /* bande grise de section par lot */
  --cr-trait: #9aa7b1;
  --cr-vert: #1e7e34;
  --cr-vert-fond: #e3f4e8;
  --cr-orange: #b45309;
  --cr-orange-fond: #fdf0dd;
  --cr-rouge: #b3261e;
  --cr-rouge-fond: #fdeaea;
  --cr-bleu: #1f5c99;
  --cr-bleu-fond: #e7f0f9;
  --cr-gris: #5a6b80;
  --cr-gris-fond: #eef1f4;

  background: #fff;
  color: #1c2b33;
  font-family: var(--police);
  font-size: 11px;
  line-height: 1.35;
  max-width: 900px;
  margin: 0 auto;
  padding: 14mm 12mm 22mm;
}

/* ---------------------------------------------------------------- En-tête du document */

.cr-doc .cr-entete-doc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 14px;
}
.cr-doc .cr-titre { text-align: center; }
.cr-doc .cr-titre h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: .01em; }
.cr-doc .cr-titre .cr-num { font-size: 11px; font-weight: 700; margin-top: 3px; }
.cr-doc .cr-logo { justify-self: end; text-align: right; }
/* Le logo Managea est un bloc presque carré (le M, le nom, puis « Ingénieurs conseils ») :
   à 46 px de haut, la baseline devenait illisible. 58 px laisse les trois niveaux lisibles
   sans que le logo prenne le pas sur le titre du document. */
.cr-doc .cr-logo img { height: 58px; width: auto; }
/* Repli si le fichier est absent : on écrit le nom en toutes lettres plutôt que d'afficher
   une image cassée en tête d'un document envoyé à l'extérieur. */
.cr-doc .cr-logo .cr-logo-texte {
  font-size: 17px; font-weight: 800; letter-spacing: .16em; color: var(--cr-navy);
}

.cr-doc .cr-bandeau {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 10px;
  background: var(--cr-bandeau);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.cr-doc .cr-bandeau .cr-champ { display: grid; grid-template-columns: 105px 1fr; }
.cr-doc .cr-bandeau .cr-champ span:first-child { color: #33506b; }
.cr-doc .cr-bandeau .cr-champ span:last-child { font-weight: 600; }
.cr-doc .cr-bandeau .cr-projet { text-align: center; align-self: center; }
.cr-doc .cr-bandeau .cr-projet strong { display: block; font-size: 13px; }
.cr-doc .cr-bandeau .cr-projet span { font-size: 10.5px; }

/* ---------------------------------------------------------------- Tableaux */

.cr-doc h2 {
  font-size: 11px; font-weight: 700; margin: 14px 0 3px;
}
.cr-doc table { width: 100%; border-collapse: collapse; }
.cr-doc thead th {
  /* La feuille globale met tous les <th> en majuscules : le gabarit Excel, lui, est en casse
     normale, et c'est nettement plus lisible sur des libellés longs. */
  text-transform: none;
  background: var(--cr-entete);
  color: #12283a;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  padding: 3px 6px;
  border: 1px solid #fff;
}
.cr-doc tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid #e6eaee;
  vertical-align: top;
}
.cr-doc .cr-centre { text-align: center; }

/* Cases à cocher imprimables : un vrai carré, coché ou non. Les <input type=checkbox> sortent
   gris et illisibles sur beaucoup d'imprimantes, et disparaissent dans certains PDF. */
.cr-doc .cr-case {
  display: inline-block; width: 10px; height: 10px;
  border: 1px solid #3a4a58; line-height: 9px; font-size: 9px; text-align: center;
}
.cr-doc .cr-case.coche::after { content: "\2713"; font-weight: 700; }

.cr-doc .cr-registre { table-layout: fixed; }
.cr-doc .cr-registre td { overflow-wrap: anywhere; }
.cr-doc .cr-registre td:first-child { font-weight: 700; }

/* ---------------------------------------------------------------- Points suivis */

.cr-doc .cr-section-lot td {
  background: var(--cr-section);
  font-weight: 700;
  font-size: 10.5px;
  padding: 3px 6px;
  border-bottom: none;
}
.cr-doc .cr-section-lot.cr-vide td { color: #5a6b80; font-weight: 600; font-style: italic; }

.cr-doc .cr-points td { font-size: 10.5px; }
.cr-doc .cr-points .cr-col-cr      { width: 48px; }
.cr-doc .cr-points .cr-col-article { width: 56px; }
.cr-doc .cr-points .cr-col-concerne{ width: 72px; text-align: center; }
.cr-doc .cr-points .cr-col-statut  { width: 74px; text-align: center; }
.cr-doc .cr-points .cr-col-date    { width: 62px; text-align: center; }

/* Indentation des sous-articles : « 4a » sous « 4 », « 4a1 » sous « 4a ». Le niveau se déduit
   de la forme du numéro (chiffres / chiffres+lettre / chiffres+lettre+chiffre), exactement
   comme dans le gabarit Excel — aucun champ supplémentaire à saisir. */
.cr-doc .cr-points .cr-n1 .cr-remarque { padding-left: 14px; }
.cr-doc .cr-points .cr-n2 .cr-remarque { padding-left: 28px; }

/* Le liseré de couleur porte l'information même en noir et blanc, par son épaisseur. */
.cr-doc .cr-points tr[data-statut] .cr-col-cr { border-left: 3px solid transparent; }
.cr-doc .cr-points tr[data-statut="FAIT"]    .cr-col-cr { border-left-color: var(--cr-vert); }
.cr-doc .cr-points tr[data-statut="ENCOURS"] .cr-col-cr { border-left-color: var(--cr-orange); }
.cr-doc .cr-points tr[data-statut="RAPPEL"]  .cr-col-cr { border-left-color: var(--cr-rouge); }
.cr-doc .cr-points tr[data-statut="URGENT"]  .cr-col-cr { border-left-color: var(--cr-rouge); }
.cr-doc .cr-points tr[data-statut="INFO"]    .cr-col-cr { border-left-color: var(--cr-bleu); }

.cr-doc .cr-points tr[data-statut="FAIT"]    { background: var(--cr-vert-fond); }
.cr-doc .cr-points tr[data-statut="RAPPEL"]  { background: var(--cr-rouge-fond); }
.cr-doc .cr-points tr[data-statut="URGENT"]  { background: var(--cr-rouge-fond); }
.cr-doc .cr-points tr[data-statut="ENCOURS"] { background: var(--cr-orange-fond); }

.cr-doc .cr-pastille {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid;
}
.cr-doc .cr-pastille.FAIT    { color: var(--cr-vert);   border-color: var(--cr-vert);   background: #fff; }
.cr-doc .cr-pastille.ENCOURS { color: var(--cr-orange); border-color: var(--cr-orange); background: #fff; }
.cr-doc .cr-pastille.RAPPEL  { color: #fff; border-color: var(--cr-rouge);  background: var(--cr-rouge); }
.cr-doc .cr-pastille.URGENT  { color: #fff; border-color: var(--cr-rouge);  background: var(--cr-rouge); }
.cr-doc .cr-pastille.INFO    { color: var(--cr-bleu);   border-color: var(--cr-bleu);   background: #fff; }
.cr-doc .cr-pastille.NA      { color: var(--cr-gris);   border-color: var(--cr-trait);  background: #fff; }

.cr-doc .cr-mention {
  text-align: center; font-style: italic; font-size: 10.5px; margin: 14px 0 4px; color: #33506b;
}
.cr-doc .cr-reunion { margin: 12px 0 0; }
.cr-doc .cr-reunion .cr-champ { display: grid; grid-template-columns: 240px 1fr; margin: 2px 0; }
.cr-doc .cr-reunion .cr-champ span:last-child { font-weight: 600; }

/* ---------------------------------------------------------------- Annexe photos */

.cr-doc .cr-annexe { page-break-before: always; }
.cr-doc .cr-grille-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px;
}
.cr-doc .cr-photo { break-inside: avoid; }
.cr-doc .cr-photo img { width: 100%; height: 135px; object-fit: cover; display: block; }
.cr-doc .cr-photo figcaption { font-size: 9px; color: #5a6b80; margin-top: 2px; }

/* ---------------------------------------------------------------- Pied de page */

.cr-doc .cr-pied {
  text-align: center; font-size: 9px; color: #46586a; line-height: 1.5;
  border-top: 1px solid var(--cr-trait); padding-top: 6px; margin-top: 18px;
}

/* ---------------------------------------------------------------- Impression */

@media print {
  @page { size: A4 portrait; margin: 10mm 9mm 16mm; }

  body { background: #fff !important; }
  header, nav, .no-print, #nav, .note { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }

  /* Les fonds de couleur ne s'impriment pas par défaut : sans cette règle, tout le codage
     couleur des statuts disparaît à l'export PDF. */
  .cr-doc, .cr-doc * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cr-doc { max-width: none; margin: 0; padding: 0; font-size: 10px; }
  .cr-doc thead { display: table-header-group; }   /* l'en-tête se répète à chaque page */
  .cr-doc tr { break-inside: avoid; }
  .cr-doc .cr-section-lot { break-after: avoid; }  /* jamais une bande de lot seule en bas de page */

  /* Pied de page répété sur chaque feuille. Le numéro de page vient des options d'impression
     du navigateur : Chrome ne sait pas générer de compteur de pages en CSS. */
  .cr-doc .cr-pied {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; margin: 0; padding: 4px 0;
  }
}