/* = Module finances — styles propres aux gabarits de templates/finances/.
   Un block utilisé par un second module remonte dans components.css.
   Issu du découpage de main.css (15/09/2026), chargé sur toutes les pages
   dans l'ordre fixé par templates/partials/feuilles_de_style.html.  */

.dv-add-ligne-row {
  margin-top: var(--space-1-5);
  text-align: left;
}

.custom-field-marker {
  color: var(--color-cat-violet);
}

.dv-client-contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1-5);
}

.pre-line {
  white-space: pre-line;
}

.dv-adresse-row {
  display: flex;
  gap: var(--space-1-5);
}

.dv-inline-field__display--editable {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}

.dv-date-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.devis-bulk-bar {
  display: none;
  margin-bottom: var(--space-3);
  padding: var(--space-2-5) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: var(--space-3);
}

.dv-doc__totaux-row--bordered {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-1);
}

.dv-doc__totaux-label--strong {
  font-weight: var(--weight-semibold);
}

.evo-chart__header {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--text-12);
}

.evo-chart__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-1);
  align-items: end;
  height: 200px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.evo-chart__month-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  height: 100%;
}

.evo-chart__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.2em;
  width: 100%;
}

.evo-bar--n1 {
  flex: 1;
  background: var(--color-border-strong);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 2px;
}

.evo-bar--n {
  flex: 1;
  background: var(--color-primary);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 2px;
}

.evo-bar--encaisse {
  flex: 1;
  background: var(--color-success);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 2px;
}

.evo-chart__month-label {
  font-size: var(--text-10);
  color: var(--color-text-secondary);
}

.pdf-edit__info {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-13);
  color: var(--color-warning-dark);
  margin-bottom: var(--space-5);
  line-height: var(--leading-snug);
}

.pdf-edit__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2-5) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.pdf-edit__toolbar-label {
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.pdf-edit__spacer {
  flex: 1;
}

.pdf-edit__download-icon {
  vertical-align: -1px;
  margin-right: 3px;
}

.wysiwyg-editor--hidden {
  visibility: hidden;
}

/* ═══════════════════════════════════════════════════
   Frise de facturation : les échéances posées en jalons sur le socle
   Gantt (gantt.css, lot D-7). Reste ici ce qui n'est qu'à elle : la piste
   haute (66 px) rayée de ses douze mois, le jalon (losange + montant) et
   ses tons.
   ═══════════════════════════════════════════════════ */

.bgantt__track {
  height: 66px;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent calc(100% / 12 - 1px),
    var(--color-border) calc(100% / 12 - 1px),
    var(--color-border) calc(100% / 12)
  );
}

.bgantt__jalon {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  text-decoration: none;
  z-index: 2;
}

.bgantt__jalon--clamp {
  transform: none;
  left: 8px;
}

.bgantt__diamond {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 1.5px solid;
  box-sizing: border-box;
}

.bgantt__montant {
  font-size: var(--text-10);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  background: var(--color-surface);
  padding: 0 var(--space-0-5);
  border-radius: var(--radius-xs);
}

.bgantt__diamond--avenir {
  background: var(--color-info-bg);
  border-color: var(--color-info);
}

.bgantt__diamond--facture {
  background: var(--color-cat-teal-bg);
  border-color: var(--color-cat-teal);
}

.bgantt__diamond--paye {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.bgantt__diamond--partiel {
  background: var(--color-cat-yellow-bg);
  border-color: var(--color-cat-yellow);
}

.bgantt__diamond--retard {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.dv-doc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--color-shadow) 4%, transparent),
    0 4px 12px color-mix(in srgb, var(--color-shadow) 3%, transparent);
  position: relative;
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
  min-height: 297mm;
  background-color: var(--color-surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(297mm - 6px),
    var(--color-border) calc(297mm - 6px),
    var(--color-border) calc(297mm + 6px),
    transparent calc(297mm + 6px),
    transparent 297mm
  );
}

.dv-page-num {
  position: absolute;
  right: 8px;
  font-size: var(--text-9);
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 5;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  user-select: none;
}

.dv-doc__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-9) var(--space-10) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.dv-doc__left-col {
  flex: 0 0 auto;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dv-doc__right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dv-doc__logo-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3-5) var(--space-4);
  min-height: 56px;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.dv-doc__logo-lien:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

.dv-doc__logo-img {
  max-height: 48px;
  max-width: 180px;
  display: block;
}

.dv-doc__logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-11);
  color: var(--color-text-secondary);
}

.dv-doc__agence-lien {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.dv-doc__agence-lien:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

.dv-doc__agence-name {
  font-size: var(--text-13);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: 3px;
}

.dv-doc__agence-line {
  font-size: var(--text-11);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.dv-client {
  text-align: left;
  width: 100%;
  max-width: 360px;
}

.dv-client__org,
.dv-client__contact {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  transition: border-color 0.15s;
}

.dv-client__detail {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
}

.dv-client__edit-link {
  font-size: var(--text-11);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--space-1-5);
  font-weight: var(--weight-medium);
}

.dv-client__edit-link:hover {
  text-decoration: underline;
}

.dv-client__placeholder {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-12);
}

.dv-doc__section {
  padding: var(--space-3-5) var(--space-10);
  border-bottom: 1px solid var(--color-border-light);
}

.dv-doc__section:last-of-type {
  border-bottom: none;
}

.dv-doc__section-label {
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--space-2-5);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}

.dv-doc__doc-ref {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2-5);
}

.dv-doc__doc-ref-type {
  font-weight: var(--weight-bold);
  font-size: var(--text-14);
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.dv-doc__doc-ref-sep {
  color: var(--color-border);
}

.dv-doc__fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-2-5) var(--space-9);
}

.dv-doc__field {
  min-height: 21px;
  font-size: var(--text-13);
}

.dv-doc__field--wide {
  grid-column: 1 / -1;
}

.dv-doc__field-label {
  font-size: var(--text-10);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.dv-doc__section--legal {
  padding: var(--space-2-5) var(--space-10);
  font-size: var(--text-12);
}

.dv-doc__phases {
  font-size: var(--text-12);
  margin-bottom: var(--space-2-5);
}

.dv-doc__phases th {
  font-size: var(--text-9);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: var(--space-1) var(--space-3);
}

.dv-doc__phases td {
  padding: var(--space-1-5) var(--space-3);
}

.dv-doc__totaux {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1-5);
  margin-top: var(--space-3);
}

.dv-doc__totaux-row {
  display: flex;
  gap: var(--space-7);
  align-items: baseline;
  font-size: var(--text-13);
}

.dv-doc__totaux-label {
  text-align: right;
  color: var(--color-text-secondary);
  min-width: 160px;
  white-space: nowrap;
}

.dv-doc__totaux-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  min-width: 120px;
  color: var(--color-text);
}

.dv-doc__totaux-row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-2-5);
  border-top: 2px solid var(--color-text);
}

.dv-doc__totaux-value--total {
  font-weight: var(--weight-bold);
  font-size: var(--text-16);
}

.dv-doc__legal-section {
  background: var(--color-bg-subtle);
}

.dv-doc__notes {
  margin: 0 var(--space-10) var(--space-7);
  padding: var(--space-4) var(--space-5);
  background: var(--color-cat-yellow-bg);
  border: 1px dashed var(--color-cat-yellow);
  border-radius: var(--radius-md);
  font-size: var(--text-12);
}

.dv-doc__notes-label {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1-5);
  color: var(--color-warning-dark);
  font-size: var(--text-11);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dv-doc__footer {
  padding: var(--space-4) var(--space-10);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-11);
  color: var(--color-text-secondary);
}

/* ── Téléphone : la maquette A4 devient fluide (#176) ──
   Le document garde son dessin (filets, sections, totaux à droite) mais plus
   sa largeur : l'en-tête empile agence et client, les marges de 40 px
   tombent à 16, la référence et les totaux passent à la ligne au lieu de
   déborder. La pagination A4 (le repère de saut de page dessiné tous les
   297 mm par le dégradé de `.dv-doc`, le `.dv-page-num` posé par script au
   même pas) ne correspond plus à rien sur une colonne étroite : masquée. */
@media (width <= 480px) {
  .dv-doc {
    background-image: none;
  }

  .dv-doc__top {
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4) var(--space-4);
  }

  .dv-doc__left-col {
    max-width: none;
  }

  .dv-doc__right-col {
    align-items: stretch;
  }

  .dv-doc__section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .dv-doc__notes {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

  .dv-doc__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .dv-doc__doc-ref {
    flex-wrap: wrap;
  }

  .dv-doc__totaux-row {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .dv-doc__totaux-label {
    min-width: 0;
    white-space: normal;
  }

  .dv-doc__totaux-value {
    min-width: 0;
  }

  .dv-page-num {
    display: none;
  }
}

/* ── Fiche devis : ce qui s'ajoute à la maquette A4 `.dv-*` ci-dessus ──
   Sorti du bloc style de templates/finances/devis_detail.html (chantier CSS, lot 3 bis-7)
   sous le scope `.page-devis-detail`, dé-scopé au lot D-5 du design system (21/09/2026) :
   les 32 copies de la maquette sont parties, les sept divergences se sont alignées sur
   elle (la fiche facture rendait déjà ainsi), les lignes éditables gardent leur police
   de 10 px sous `.dv-doc__phases--compact`. Reste ici l'édition en place (client,
   champs, totaux) ; la colonne latérale est faite de composants (S-6, PR 10). */

.dv-client__org:hover,
.dv-client__contact:hover {
  border-color: var(--color-border);
}

/* DE.7.15 - icone crayon sous le bouton X (organisme et contact) */
.dv-client__edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.dv-client__edit-icon:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.dv-client__remove {
  background: none;
  border: none;
  font-size: var(--text-16);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-0-5) var(--space-1-5);
  line-height: var(--leading-none);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.dv-client__remove:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.dv-client__contact-list {
  max-height: 120px;
  overflow-y: auto;
}

/* La section « informations légales », densifiée (DE.7.10). */
.dv-doc__section--legal .dv-doc__field {
  min-height: 28px;
}

.dv-doc__section--legal .dv-doc__field-label {
  font-size: var(--text-9);
  margin-bottom: 1px;
}

.dv-doc__section--legal .dv-doc__fields-grid {
  gap: var(--space-1-5) var(--space-7);
}

/* Les lignes du devis, éditables : la police descend à 10 px (DE.7.19), le reste est celui
   de la maquette. */
.dv-doc__phases--compact {
  font-size: var(--text-10);
}

/* Un total éditable en place reste sur sa ligne. */
.dv-doc__totaux-label .dv-inline-field,
.dv-doc__totaux-label .dv-inline-field form {
  display: inline;
}

/* Édition en place : la valeur affichée, soulignée au survol. */
.dv-inline-field__display {
  transition:
    border-color 0.15s,
    color 0.15s;
}

.dv-inline-field__display:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.dv-inline-field__display--pointer {
  cursor: pointer;
}

.dv-inline-field__display--cta {
  cursor: pointer;
  font-size: var(--text-13);
  color: var(--color-primary);
}

/* Les deux colonnes de la section légale, écrites après la base `.dv-doc__fields-grid`
   (auto-fill) pour la battre à spécificité égale. Un tiers / deux tiers : validité et
   conditions du devis. Deux moitiés : dates et IBAN/BIC de la facture (#310). */
.dv-doc__fields-grid--thirds {
  grid-template-columns: 1fr 2fr;
}

.dv-doc__fields-grid--halves {
  grid-template-columns: 1fr 1fr;
}