/* ── Module Suivi de chantier — dashboard ─────────────────────────
   Charte UX 16/07 + passe fluidité 17/07 : transitions douces, squelettes
   de chargement, visionneuse photo, états hover/focus soignés.
   Sobriété Calm Precision — le mouvement sert la lecture, jamais le décor. */

.chx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* ── Le tableau de bord : une ligne par affaire, de l'atelier à la pose.
   Forme « tableau de vol » — dense à 1 affaire comme à 20, jamais de vide. ── */
.chx-board { display: flex; flex-direction: column; gap: 8px; }
.chx-brow {
  display: grid; grid-template-columns: minmax(170px, 1.1fr) 215px minmax(120px, 0.7fr) minmax(150px, 1fr) minmax(180px, 1fr);
  gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 13px 18px; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.chx-brow:hover { border-color: var(--paper-4); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.chx-brow.alerte { border-left: 3px solid var(--rust); }
.chx-brow b { font-size: 14.5px; }
.chx-brow .chx-psub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Trajectoire : 6 jalons reliés, le jalon courant plein + libellé dessous */
.chx-traj { min-width: 0; }
.chx-traj-dots { display: flex; align-items: center; }
.chx-tdot {
  width: 10px; height: 10px; border-radius: 99px; flex-shrink: 0;
  background: var(--paper-2); border: 2px solid var(--paper-4);
}
.chx-tdot.faite { background: var(--moss); border-color: var(--moss); }
.chx-tdot.actuelle {
  background: var(--ink-1); border-color: var(--ink-1);
  box-shadow: 0 0 0 3px var(--moss-ring); transform: scale(1.25);
}
.chx-tseg { height: 2px; flex: 1; background: var(--paper-3); min-width: 8px; }
.chx-tseg.faite { background: var(--moss); }
.chx-traj-label { font-size: 11px; font-weight: 700; color: var(--ink-2); margin-top: 5px; letter-spacing: 0.03em; }
.chx-traj-label span { color: var(--text-muted); font-weight: 500; }

.chx-bpose { font-variant-numeric: tabular-nums; }
.chx-bpose .chx-bar { margin: 0 0 4px; }
.chx-bpose .chx-psub { margin: 0; }

.chx-balertes { display: flex; flex-direction: column; gap: 3px; }
.chx-palerte {
  font-size: 11.5px; font-weight: 650; color: var(--rust);
  display: flex; align-items: center; gap: 5px;
}
.chx-palerte::before { content: "●"; font-size: 8px; }
.chx-palerte.douce { color: var(--amber); }
.chx-ok { font-size: 11.5px; color: var(--moss-deep); font-weight: 600; }

.chx-baction {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 7px;
}
.chx-baction::before { content: "→"; color: var(--moss); font-weight: 800; flex-shrink: 0; }
.chx-baction.urgente { color: var(--rust); }
.chx-baction.urgente::before { color: var(--rust); }

@media (max-width: 1100px) {
  .chx-brow { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .chx-baction { grid-column: 1 / -1; }
}

/* ── Stepper de production (fiche) ── */
.chx-stepper { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chx-step {
  font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 99px; cursor: pointer;
  padding: 6px 13px; border: 1.5px solid var(--paper-4); background: var(--card); color: var(--text-muted);
  transition: all var(--transition-fast);
}
.chx-step.faite { border-color: var(--moss); color: var(--moss-deep); background: var(--moss-soft); }
.chx-step.actuelle { border-color: var(--ink-1); background: var(--ink-1); color: #fff; }
.chx-step:hover { border-color: var(--ink-2); }
.chx-step-fleche { color: var(--ink-4); font-size: 11px; }

/* ── Prochaine action ── */
.chx-action {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--accent-soft, var(--moss-soft)); border: 1px solid var(--moss);
  border-radius: var(--radius-lg); padding: 11px 16px; font-size: 13.5px; font-weight: 600;
}
.chx-action.urgente { background: var(--rust-soft); border-color: var(--rust); }
.chx-action .chx-action-lbl {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  font-weight: 750; flex-shrink: 0;
}

/* ── Journal d'activité ── */
.chx-journal { position: relative; padding-left: 18px; }
.chx-journal::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--paper-3);
}
.chx-jitem { position: relative; padding: 5px 0 5px 6px; font-size: 13px; }
.chx-jitem::before {
  content: ""; position: absolute; left: -17px; top: 11px; width: 8px; height: 8px;
  border-radius: 99px; background: var(--paper-4); border: 2px solid var(--card);
}
.chx-jitem.vert::before { background: var(--moss); }
.chx-jitem.rouge::before { background: var(--rust); }
.chx-jitem.bleu::before { background: var(--ocean); }
.chx-jitem .chx-jdate { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; margin-right: 8px; }

.chx-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.chx-card:hover { border-color: var(--paper-4); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.chx-card:active { transform: translateY(0); }
.chx-card h4 { margin: 0; font-size: 15px; }
.chx-card .chx-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.chx-bar { height: 6px; background: var(--paper-2); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.chx-bar i { display: block; height: 100%; background: var(--moss); border-radius: 99px; transition: width 0.4s var(--ease-out); }
.chx-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); }

.chx-pill {
  display: inline-block; font-size: 11px; font-weight: 650; border-radius: 99px;
  padding: 2px 9px; letter-spacing: 0.04em;
}
.chx-pill.rouge { background: var(--rust-soft); color: var(--rust); }
.chx-pill.orange { background: var(--amber-soft); color: var(--amber); }
.chx-pill.vert { background: var(--moss-soft); color: var(--moss-deep); }
.chx-pill.gris { background: var(--paper-2); color: var(--text-muted); }

/* Fiche chantier */
.chx-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.chx-zone {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 14px; transition: border-color var(--transition), box-shadow var(--transition);
}
.chx-zone:hover { border-color: var(--paper-4); }
.chx-zone b { font-size: 14px; }
.chx-zone .chx-pct { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; float: right; transition: color var(--transition-fast); }

/* Sliders : piste fine, pouce net, halo au focus clavier */
.chx-zone input[type=range] {
  width: 100%; margin-top: 10px; appearance: none; -webkit-appearance: none;
  height: 22px; background: transparent; cursor: pointer;
}
.chx-zone input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--moss) 0%, var(--moss) var(--pct, 0%), var(--paper-2) var(--pct, 0%));
}
.chx-zone input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 99px;
  background: #fff; border: 2px solid var(--moss); margin-top: -6px;
  box-shadow: var(--shadow-sm); transition: transform var(--transition-fast);
}
.chx-zone input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.chx-zone input[type=range]:focus-visible { outline: none; }
.chx-zone input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--moss-ring); }
.chx-zone input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--paper-2); }
.chx-zone input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--moss); }
.chx-zone input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 99px; background: #fff; border: 2px solid var(--moss);
}

.chx-obs { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.chx-obs:last-child { border-bottom: none; }
.chx-obs .chx-num { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.chx-num.res-ouverte { color: var(--rust); }
.chx-num.res-tiers { color: var(--amber); }
.chx-num.res-levee { color: var(--moss-deep); }
.chx-num.av { color: var(--moss-deep); }
.chx-num.info { color: var(--ocean); }
.chx-obs p { margin: 1px 0 0; font-size: 13.5px; }
.chx-obs .chx-obs-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.chx-obs img[data-photo] { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.chx-obs img[data-photo]:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }

.chx-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

/* ── Apparition douce des vues (liste ⇄ fiche) ── */
.chx-enter { animation: chx-fade 0.22s var(--ease-out); }
@keyframes chx-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── Squelettes de chargement (jamais de page blanche) ── */
.chx-skel { border-radius: var(--radius-lg); background: var(--paper-2); position: relative; overflow: hidden; }
.chx-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: chx-shimmer 1.1s infinite;
}
@keyframes chx-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Visionneuse photo (clic = plein écran, Échap/clic pour fermer) ── */
.chx-lightbox {
  position: fixed; inset: 0; z-index: 10000; background: rgba(15, 15, 14, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: chx-lb-in 0.18s var(--ease-out); cursor: zoom-out;
}
.chx-lightbox img {
  max-width: 96%; max-height: 92vh; border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5); animation: chx-lb-img 0.22s var(--ease-out);
}
.chx-lightbox .chx-lb-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 99px;
  border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 20px; cursor: pointer;
  transition: background var(--transition-fast);
}
.chx-lightbox .chx-lb-close:hover { background: rgba(255,255,255,0.24); }
@keyframes chx-lb-in { from { opacity: 0; } }
@keyframes chx-lb-img { from { opacity: 0; transform: scale(0.96); } }

/* Boutons segmentés du formulaire d'observation (parité mobile) */
.chx-types { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.chx-type {
  font: inherit; text-align: center; padding: 12px 6px; border-radius: var(--radius-lg); cursor: pointer;
  border: 1.5px solid var(--paper-4); background: var(--card); font-weight: 650; font-size: 13.5px; color: var(--ink-2);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.chx-type small { display: block; font-weight: 500; font-size: 10.5px; color: var(--text-muted); }
.chx-type.on-av { border-color: var(--moss); background: var(--moss-soft); color: var(--moss-deep); }
.chx-type.on-res { border-color: var(--rust); background: var(--rust-soft); color: var(--rust); }
.chx-type.on-info { border-color: var(--ocean); background: var(--ocean-soft); color: var(--ocean); }

@media (prefers-reduced-motion: reduce) {
  .chx-card, .chx-zone, .chx-bar i, .chx-enter, .chx-lightbox, .chx-lightbox img,
  .chx-obs img[data-photo], .chx-zone input[type=range]::-webkit-slider-thumb { animation: none !important; transition: none !important; }
}

/* ── Impression du CR (même mécanique que docs-rh) ── */
#cr-print-root { display: none; }
body.cr-printing #cr-print-root { display: block; }
@media print {
  /* Tout masquer SAUF le document — le seul sélecteur qui ne ment jamais */
  body.cr-printing > *:not(#cr-print-root) { display: none !important; }
  body.cr-printing #cr-print-root { display: block; }
}
/* Le CR est LE document qui sort de l'app — niveau cabinet d'architecte.
   Hiérarchie franche, photos en planches légendées, A4 maîtrisé. */
@page { size: A4; margin: 13mm 12mm; }
#cr-print-root { font-size: 11.5px; color: #17181B; background: #fff; padding: 26px; line-height: 1.45; }
@media print { #cr-print-root { padding: 0; } }

#cr-print-root .crp-band {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  border-bottom: 3px solid #17181B; padding-bottom: 12px;
}
#cr-print-root .crp-entreprise { font-size: 21px; font-weight: 800; letter-spacing: 0.02em; }
#cr-print-root .crp-doctype { text-align: right; }
#cr-print-root .crp-doctype .crp-eyebrow {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #6B7280; font-weight: 700;
}
#cr-print-root .crp-doctype .crp-ref { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

#cr-print-root .crp-infos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 26px;
  margin: 12px 0 4px; font-size: 11px;
}
#cr-print-root .crp-infos .crp-lbl {
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #A8ABB0; font-weight: 700;
}
#cr-print-root .crp-infos .crp-val { font-weight: 600; }

#cr-print-root .crp-stats { display: flex; gap: 10px; margin: 14px 0 4px; }
#cr-print-root .crp-stat {
  flex: 1; border: 1px solid #ECEAE4; border-radius: 8px; padding: 8px 12px; break-inside: avoid;
}
#cr-print-root .crp-stat b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
#cr-print-root .crp-stat span { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; font-weight: 700; }
#cr-print-root .crp-stat.rouge { border-color: #FCA5A5; background: #FEF2F2; }
#cr-print-root .crp-stat.rouge b { color: #DC2626; }
#cr-print-root .crp-stat.vert b { color: #15803D; }

#cr-print-root h2 {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #17181B;
  margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid #17181B;
  break-after: avoid;
}
#cr-print-root h2 .crp-h2num { color: #A8ABB0; margin-right: 6px; }

#cr-print-root table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
#cr-print-root th {
  text-align: left; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #6B7280; padding: 5px 8px; border-bottom: 1.5px solid #D6D3CC; font-weight: 700;
}
#cr-print-root td { padding: 6px 8px; border-bottom: 1px solid #ECEAE4; vertical-align: top; }
#cr-print-root tr { break-inside: avoid; }

#cr-print-root .crp-zonebar { display: flex; align-items: center; gap: 8px; min-width: 110px; }
#cr-print-root .crp-zonebar .crp-track { flex: 1; height: 6px; background: #F4F3EF; border-radius: 99px; overflow: hidden; }
#cr-print-root .crp-zonebar .crp-fill { height: 100%; background: #16A34A; border-radius: 99px; }
#cr-print-root .crp-zonebar b { font-variant-numeric: tabular-nums; font-size: 11px; min-width: 34px; text-align: right; }

#cr-print-root .crp-planche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 4px; }
#cr-print-root .crp-photo { break-inside: avoid; }
#cr-print-root .crp-photo img {
  width: 100%; height: 128px; object-fit: cover; border-radius: 6px; border: 1px solid #E5E1D8; display: block;
}
#cr-print-root .crp-photo.levee img { outline: 2.5px solid #16A34A; outline-offset: -2.5px; }
#cr-print-root .crp-photo .crp-cap { font-size: 8.5px; color: #6B7280; margin-top: 3px; line-height: 1.3; }
#cr-print-root .crp-photo .crp-cap b { color: #17181B; }

#cr-print-root .crp-vignette { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #E5E1D8; margin: 1px 3px 1px 0; }
#cr-print-root .crp-vignette.levee { outline: 2px solid #16A34A; outline-offset: -2px; }

#cr-print-root .crp-etat-retard { color: #DC2626; font-weight: 800; }
#cr-print-root .crp-etat-ouverte { color: #B45309; font-weight: 700; }
#cr-print-root .crp-etat-levee { color: #15803D; font-weight: 700; }

#cr-print-root .crp-info-item { padding: 5px 0 5px 12px; border-left: 2.5px solid #2563EB; margin: 6px 0; break-inside: avoid; }
#cr-print-root .crp-info-item .crp-info-zone { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #6B7280; font-weight: 700; }

#cr-print-root .crp-validation {
  margin-top: 22px; display: flex; gap: 12px; break-inside: avoid;
}
#cr-print-root .crp-validation > div {
  flex: 1; border: 1px solid #D6D3CC; border-radius: 8px; padding: 10px 14px; min-height: 64px; font-size: 10px; color: #6B7280;
}
#cr-print-root .crp-validation b { color: #17181B; font-size: 10.5px; }

#cr-print-root .crp-footer {
  margin-top: 18px; padding-top: 8px; border-top: 1px solid #ECEAE4;
  font-size: 9px; color: #A8ABB0; display: flex; justify-content: space-between; gap: 12px;
}

#cr-print-root .crp-watermark {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
}
#cr-print-root .crp-watermark span {
  font-size: 96px; font-weight: 900; letter-spacing: 0.1em; color: rgba(220, 38, 38, 0.07);
  transform: rotate(-27deg); text-transform: uppercase;
}

/* ── Étapes par zone : checklist fab/pose, le % en découle ── */
.chx-et-grp {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 6px;
}
.chx-et-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary, #94A3B8);
  min-width: 34px;
}
.chx-etape {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border, #CBD5E1); background: #fff;
  color: var(--text-secondary, #64748B); cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.chx-etape:hover { border-color: var(--text, #334155); color: var(--text, #334155); }
.chx-etape.on {
  background: var(--success-light, #ECFDF5);
  border-color: var(--success, #16A34A);
  color: var(--success, #047857); font-weight: 600;
}
.chx-etape.ro { cursor: default; opacity: 0.75; }
.chx-etape.ro:hover { border-color: var(--border, #CBD5E1); color: var(--text-secondary, #64748B); }
.chx-etape.ro.on { opacity: 1; }