/* Étapes 1 à 3 du pointage : bordereaux reçus, registre pointé avec notes en marge, réclamations. */
.defile { overflow-x: auto; }
.carte-info { padding: 18px 20px; display: grid; gap: 12px; }
.carte-info h2 { font-size: 17px; }

/* Étape 1 : bordereaux reçus */
.bordereaux__action { display: grid; justify-items: end; gap: 10px; text-align: right; }
.bordereaux__action .chiffre { font-size: 28px; }
.bordereaux__action [aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.bordereaux__grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.bordereaux__cote { display: grid; gap: 20px; }
.tableau--bordereaux td { padding-block: 8px; }
.bordereau__branche { display: block; color: var(--encre-2); font-size: 13px; }
.bordereau--attente td { color: var(--filet-fort); }
.bordereau--attente strong { font-weight: 500; }
.bordereau--encours { background: var(--carmin-voile); }
.lecture { font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.lecture--lu { color: var(--pointe); font-weight: 600; }
.lecture--lu::before { content: '✓ '; }
.lecture--encours { color: var(--carmin); font-weight: 600; }
.formats, .references { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.formats li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.references li { display: grid; font-size: 14px; }
.references span { color: var(--encre-2); font-size: 13px; }

/* Étape 2 : pendant le pointage */
.compteurs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.compteur { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px 20px; display: grid; gap: 4px; }
.compteur span { font-size: 13px; color: var(--encre-2); }
.compteur strong { font-size: 36px; line-height: 1.1; }
.compteur small { font-size: 18px; color: var(--encre-2); }
.compteur--ecarts strong { color: var(--carmin); }
.jauge { display: block; height: 6px; border-radius: 3px; background: var(--papier); overflow: hidden; margin-top: 6px; }
.jauge b { display: block; height: 100%; background: var(--carmin); transform-origin: left; }

.pointage__scene { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.registre { overflow: hidden; }
.registre__entete, .registre__ligne {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 110px 120px; gap: 12px; align-items: center; padding: 0 18px;
}
.registre__entete { font-size: 12px; font-weight: 600; color: var(--encre-2); height: 38px; border-bottom: 1px solid var(--filet); }
.registre__fenetre { height: 440px; overflow: hidden; }
.registre__lignes { list-style: none; margin: 0; padding: 0; will-change: transform; }
.registre__ligne { height: 40px; font-size: 14px; border-bottom: 1px dashed var(--filet); white-space: nowrap; }
.registre__ligne > span { overflow: hidden; text-overflow: ellipsis; }
.registre__compagnie { color: var(--encre-2); }
.registre__contrat { color: var(--encre-2); font-size: 13px; }
.registre__montant { text-align: right; }
.registre__ligne--attente { color: var(--filet-fort); }
.registre__ligne--encours { background: var(--carmin-voile); box-shadow: inset 0 1px 0 var(--carmin), inset 0 -1px 0 var(--carmin); }
.registre__ligne--ecart { box-shadow: inset 3px 0 0 var(--carmin); }
.registre__coche { color: var(--pointe); font-weight: 700; }
.registre__note { color: var(--carmin); font-weight: 700; font-size: 13px; }

.marge { border-left: 2px solid var(--carmin); padding: 4px 0 4px 18px; min-height: 478px; }
.marge h2 { font-size: 16px; color: var(--carmin); margin-bottom: 12px; }
.marge__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.marge__item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--filet-fort); }
.marge__item span { display: grid; min-width: 0; }
.marge__item small { color: var(--encre-2); font-size: 12px; }
.marge__item strong { white-space: nowrap; }
.marge__item--reclamer strong { color: var(--carmin); }
.marge__reste { color: var(--encre-2); font-size: 13px; margin-top: 10px; }

/* Étape 2 : résultat du pointage */
.pointage--revele .bilan, .pointage--revele .pointage__resultats { animation: entree 0.45s ease-out both; }
.pointage--revele .pointage__resultats { animation-delay: 0.12s; }
.bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; }
.bilan__case { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 14px 18px; display: grid; gap: 2px; }
.bilan__case span { font-size: 13px; color: var(--encre-2); }
.bilan__case strong { font-size: 30px; line-height: 1.15; }
.bilan__case small { font-size: 13px; color: var(--encre-2); }
.bilan__case--reclamer { border-color: var(--carmin); box-shadow: inset 0 3px 0 var(--carmin); }
.bilan__case--reclamer strong { color: var(--carmin); }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtre {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--filet-fort); background: var(--feuille); cursor: pointer; font-size: 14px; font-weight: 600;
}
.filtre span { color: var(--encre-2); font-weight: 500; }
.filtre[aria-pressed='true'] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre[aria-pressed='true'] span { color: #fff; opacity: 0.75; }

.pointage__resultats { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.ecarts { max-height: 760px; overflow-y: auto; }
.ecarts__liste { list-style: none; margin: 0; padding: 6px; }
.ecart {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  text-align: left; padding: 10px 12px; border: 0; border-radius: var(--rayon-petit); background: none; cursor: pointer;
}
.ecart:hover { background: var(--papier); }
.ecart[aria-current='true'] { background: var(--carmin-voile); box-shadow: inset 3px 0 0 var(--carmin); }
.ecart__qui { display: grid; min-width: 0; }
.ecart__qui strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecart__qui small { color: var(--encre-2); font-size: 12px; }
.ecart__montant { font-weight: 600; white-space: nowrap; }
.ecart__montant--reclamer { color: var(--carmin); }
.ecart__decision { grid-column: 1 / -1; font-size: 12px; color: var(--encre-2); }
.ecart--decide .ecart__qui strong, .ecart--decide .ecart__montant { color: var(--encre-2); text-decoration: line-through; }

.pointage__detail { padding: 22px; }
.detail { display: grid; gap: 16px; }
.detail__entete { display: grid; gap: 6px; justify-items: start; }
.detail__entete h2 { font-size: 24px; outline: none; }
.detail__explication { font-size: 16px; max-width: 64ch; }
.detail__pieces { display: grid; gap: 12px; }
.detail__annexes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.piece { margin: 0; border: 1px solid var(--filet); border-radius: var(--rayon-petit); padding: 12px 14px; display: grid; gap: 6px; align-content: start; font-size: 14px; }
.piece figcaption { display: grid; }
.piece figcaption span { color: var(--encre-2); font-size: 12px; }
.piece mark { background: none; color: var(--carmin); font-weight: 700; }
.piece--doc { background: var(--papier); }
.doc { overflow-x: auto; background: var(--feuille); border-radius: 4px; box-shadow: 0 1px 2px rgba(50, 50, 51, 0.08); }
.doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc th { text-align: left; font-weight: 600; font-size: 11px; color: var(--encre-2); padding: 6px 10px; border-bottom: 1px solid var(--filet); }
.doc td { padding: 6px 10px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.doc .nombre { text-align: right; }
.doc__marque td { background: var(--carmin-voile); color: var(--carmin-fonce); font-weight: 600; }
.doc__marque td:first-child { box-shadow: inset 3px 0 0 var(--carmin); }
.doc__manque td { font-style: italic; }
.doc__saut td { text-align: center; color: var(--encre-2); }
.detail__calcul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.detail__calcul dt { font-size: 12px; color: var(--encre-2); }
.detail__calcul dd { margin: 0; font-family: var(--police-titre); font-size: 22px; }
.detail__ecart--reclamer dd { color: var(--carmin); }
.detail__decision { display: flex; flex-wrap: wrap; gap: 8px; }

/* Étape 3 : réclamations */
.reclamations__grille { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.reclamations__cote, .reclamations__principal { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.compagnies { list-style: none; margin: 0; padding: 0 6px 6px; }
.compagnie {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--rayon-petit); background: none; cursor: pointer;
}
.compagnie:hover { background: var(--papier); }
.compagnie[aria-current='true'] { background: var(--carmin-voile); box-shadow: inset 3px 0 0 var(--carmin); }
.compagnie span { display: grid; }
.compagnie small { color: var(--encre-2); font-size: 12px; }
.compagnie__droite { text-align: right; justify-items: end; }
.compagnie__envoyee { color: var(--pointe) !important; font-weight: 600; }
.courriel { overflow: hidden; }
.courriel__entete { margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--filet); display: grid; gap: 6px; font-size: 14px; }
.courriel__entete div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.courriel__entete dt { color: var(--encre-2); }
.courriel__entete dd { margin: 0; outline: none; }
.courriel__corps { padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 860px; }
.tableau--courriel { font-size: 13px; }
.tableau--courriel td { white-space: nowrap; }
.courriel__pj { list-style: none; margin: 0; padding: 0 22px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.courriel__pj li { font-size: 13px; padding: 6px 12px; border-radius: var(--rayon-petit); background: var(--papier); }
.courriel__pj li::before { content: '📎 '; }
.courriel__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 22px; border-top: 1px solid var(--filet); background: var(--papier); }
.courriel__statut { color: var(--pointe); font-weight: 600; }
.ecriture__note { padding: 4px 20px 16px; font-size: 13px; }

@media (max-width: 1080px) {
  .pointage__resultats, .reclamations__grille { grid-template-columns: minmax(0, 1fr); }
  .ecarts { max-height: 360px; }
}
@media (max-width: 900px) {
  .bordereaux__grille, .pointage__scene { grid-template-columns: minmax(0, 1fr); }
  .bordereaux__action { justify-items: start; text-align: left; }
  .marge { min-height: 0; }
  .registre__entete, .registre__ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 96px 64px; }
  .registre__contrat { display: none; }
}
@media (max-width: 560px) {
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compteur--principal { grid-column: 1 / -1; }
  .compteur strong { font-size: 28px; }
  .registre__entete, .registre__ligne { grid-template-columns: minmax(0, 1fr) 88px 56px; padding: 0 12px; }
  .registre__compagnie { display: none; }
  .registre__fenetre { height: 320px; }
  .bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bilan__case { padding: 12px 14px; }
  .bilan__case strong { font-size: 22px; }
  .bilan__case--reclamer { grid-column: 1 / -1; }
  .bilan__case--reclamer strong { font-size: 30px; }
  .doc thead th:nth-child(-n + 2),
  .doc tbody tr:not(.doc__total):not(.doc__manque):not(.doc__saut) td:nth-child(-n + 2) { display: none; }
  .detail__calcul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail__ecart--reclamer, .detail__ecart--reverser { grid-column: 1 / -1; }
  .pointage__detail { padding: 16px; }
  .tableau--bordereaux th:nth-child(3), .tableau--bordereaux td:nth-child(3),
  .tableau--bordereaux th:nth-child(4), .tableau--bordereaux td:nth-child(4) { display: none; }
}