/* Vue Devis (ADR-0009, ADR-0011) : le dépôt de l'export et son compte rendu, les familles, la
   table dont la ligne s'ouvre sur sa fiche. Reprise des trois maquettes validées le 8 septembre
   2026 (`docs/maquettes/devis-*.html`), classe pour classe.

   Aucune couleur, aucun rayon, aucune ombre inventés : les jetons du DS, et rien d'autre. La
   typographie sur l'échelle nommée, jamais un corps ni une graisse en chiffres.
   `.sb-refus`, `.sb-vide` et `.sb-pied` viennent d'`app.css` : ce sont des classes de la page.

   Les classes que la page emploie ailleurs — `.sb-journal` et `.sb-fin` dans le panneau d'un sujet,
   `.sb-ou` dans son journal — ne se redéfinissent QUE sous `.sb-relances`. Sans cette précaution,
   la grille du journal des devis s'appliquait à celui d'un sujet et recouvrait son bouton
   « Corriger l'entrée » : un test de page l'a attrapé, pas un œil. */

/* `min-width: 0` tout au long de la colonne : sans lui, un enfant de flex refuse de rétrécir
   sous son contenu et c'est la PAGE qui défile horizontalement — interdit (`carte/CLAUDE.md`).
   C'est le cadre du tableau qui doit défiler, pas elle. */
.sb-relances { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sb-relances > * { min-width: 0; }

/* ── Le dépôt d'un export ─────────────────────────────────────────────────────────────────── */

/* La cible du glisser-déposer : une surface en retrait, pointillés, sans rien qui bouge au survol
   (« la règle du sans-déplacement »). Le survol change la teinte et la bordure, c'est tout. */
.sb-depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 16px; border: 1px dashed var(--border-strong); border-radius: var(--ds-radius-surface);
  background: var(--surface-2);
}
.sb-depot.est-survol { border-color: var(--accent); background: var(--surface-3, var(--surface-2)); }
.sb-depot-titre { font: var(--type-label); color: var(--text-2); }
/* Encre 2 et non 3 : sous 18 px, l'encre de détail du DS tombe à 3:1, sous les 4,5:1 exigés
   (`carte/CLAUDE.md`, « contraste ≥ 4,5:1 sous 18 px »). */
.sb-relances .sb-aide {
  margin: 6px 0 0; color: var(--text-2);
  font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}

/* Le compte rendu du dépôt reste DANS le panneau où le fichier a été déposé : ce que l'export
   contient se lit en chiffres, le détail juste dessous. */
.sb-bilan-bloc { display: flex; flex-direction: column; gap: 12px; }
.sb-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px 14px; margin: 0; }
.sb-bilan-case { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-bilan-case dt { font: var(--type-overline); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-2); }
.sb-bilan-case dd {
  margin: 0; color: var(--text-1);
  font: var(--weight-black) var(--text-2xl)/var(--leading-tight) var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.sb-bilan-case small {
  color: var(--text-2);
  font: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Les lignes que le lecteur n'a pas su lire : une par une, avec leur numéro de ligne. Elles se
   corrigent dans le back-office, pas ici. */
.sb-ignorees { list-style: none; margin: 0; padding: 0; }
.sb-ignorees li {
  display: grid; grid-template-columns: 92px 168px 1fr; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--border-subtle); color: var(--text-1);
  font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}
.sb-ignorees li:first-child { border-top: none; padding-top: 0; }
.sb-relances .sb-ignorees .sb-ou { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sb-plus { align-self: flex-start; }

/* ── Les familles ─────────────────────────────────────────────────────────────────────────── */

/* Un seul axe : des choix qui ne se recouvrent pas, plus « Tous ». Chacun porte son compte. */
.sb-vues { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Le « i » de la règle : il désigne sans décorer, et se focalise au clavier. */
.sb-aide-i { display: inline-flex; align-items: center; color: var(--text-2); cursor: help; border-radius: var(--ds-radius-control); }
.sb-aide-i:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }

/* Le compte des lignes, dans le titre de la carte.
   [09/09/2026 — arbitrage de Célian] Il se lisait un cran AU-DESSUS du titre (21 px, gras
   noir) : deux tailles de police dans une même ligne de titre. Il reprend maintenant la
   fonte du titre qui le porte — une seule taille, un seul poids, un seul œil. Restent
   l'écart qui le détache du libellé et les chiffres tabulaires, qui empêchent la ligne de
   sautiller quand le compte change. */
.sb-compte-titre {
  color: var(--text-1);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

/* Les filtres vivent dans l'en-tête de la table qu'ils filtrent. */
.sb-relances .sb-filtres { display: flex; align-items: center; gap: 8px; }
.sb-relances .sb-filtres .sb-recherche { width: 178px; }
.sb-relances .sb-filtres .sb-mini { width: 124px; }

/* ── La table ─────────────────────────────────────────────────────────────────────────────── */

/* La marque de tri d'une colonne de chiffres est à gauche du libellé : son écart change de côté. */
.sb-relances .ds-table__ta-right .ds-table__sort { margin-left: 0; margin-right: 5px; }
.sb-relances .sb-num { font-variant-numeric: tabular-nums; color: var(--text-1); }
.sb-relances .sb-date { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sb-relances .sb-montant { font-variant-numeric: tabular-nums; color: var(--text-1); }
.sb-relances .sb-calme {
  color: var(--text-2);
  font: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.sb-relances .sb-retrait {
  color: var(--text-2);
  font: italic var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
}
.sb-ligne-ouverte > td { background: var(--surface-2); }

/* ── La fiche, dans la ligne ──────────────────────────────────────────────────────────────── */

.sb-fiche-cellule { white-space: normal !important; padding: 0 !important; background: var(--surface-1); }
.sb-fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 0; }
.sb-fiche-champs { padding: 18px 20px 16px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sb-fiche-cote { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); min-width: 0; }

/* Ce que le back-office donne ne s'édite pas ici : on le montre, on ne le déguise pas en champ. */
.sb-donnees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
.sb-donnee { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-donnee dt { font: var(--type-overline); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-2); }
/* Même écriture que le mail, à la demande de Célian (11/09/2026) : ce bloc et le mail se lisent
   l'un après l'autre, et le demi-gras faisait deux voix pour un seul texte.
   `font-variant-numeric` vient APRÈS le raccourci `font:`, qui le remet à zéro : dans l'ordre
   inverse, les chiffres tabulaires étaient écrits et jamais appliqués. */
.sb-donnee dd {
  margin: 0; color: var(--text-1);
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.sb-donnee.est-large { grid-column: span 2; }

/* Chaque info du devis se copie d'un clic sur son texte : le survol le dit, le geste se lit sur
   place (« Copié » à côté de la valeur), jamais dans un message flottant. */
.sb-copiable {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 -6px; padding: 2px 6px;
  border: 0; background: transparent; border-radius: var(--ds-radius-control); font: inherit; color: inherit;
  text-align: left; cursor: copy; font-variant-numeric: tabular-nums; transition: background-color 150ms ease-out;
}
.sb-copiable > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sb-copiable:hover, .sb-copiable:focus-visible { background: var(--surface-2); }
.sb-copiable:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.sb-copiable .sb-copiable-icone { flex: none; color: var(--text-3); opacity: 0; transition: opacity 150ms ease-out; }
.sb-copiable:hover .sb-copiable-icone, .sb-copiable:focus-visible .sb-copiable-icone { opacity: 1; }
.sb-copiable-fait {
  flex: none; color: var(--success-ink);
  font: var(--weight-medium) var(--text-2xs)/var(--leading-tight) var(--font-sans);
}
@media (prefers-reduced-motion: reduce) {
  .sb-copiable, .sb-copiable .sb-copiable-icone { transition: none; }
}

/* Le mail est un texte qu'on lit et qu'on copie, pas un champ : un bloc qui prend la hauteur de son
   contenu, jamais coupé. Même corps que les infos du devis, en graisse normale. */
.sb-message { display: flex; flex-direction: column; gap: 8px; position: relative; }
.sb-message-copier { position: absolute; top: 6px; right: 6px; background: var(--surface-1); border-radius: var(--ds-radius-control); }
.sb-message-texte {
  margin: 0; padding: 10px 40px 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--text-1); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--ds-radius-control);
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
}

/* La règle sur le client, sous les infos du devis : elle vaut pour tous ses devis, d'aujourd'hui et
   des prochains exports. Le geste est à côté du fait, jamais dans le menu de l'appel. */
.sb-regle-client { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sb-regle-client .sb-motif { margin-top: 4px; }

/* ── Le suivi, à droite de la fiche ───────────────────────────────────────────────────────── */

/* Le seul geste de la fiche vit dans la ligne du titre « Suivi », à droite. Ce qu'il ouvre passe à
   la ligne, pleine largeur. */
/* [09/09/2026 — arbitrage de Célian] Les trois titres de la fiche étaient des h3 de 17 px ;
   ils sont maintenant des en-têtes de section du DS, en overline, comme la fiche d'une
   commande — et comme la règle d'interface le demande partout ailleurs. */
.sb-suivi-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sb-suivi-tete > .ds-sechead { flex: none; }
/* Ce qui s'est passé se relit sous le titre avant d'être enregistré : pas de modale, pas de message
   flottant. Rien n'est écrit tant qu'on n'a pas appuyé sur Enregistrer. */
.sb-motif {
  display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; box-sizing: border-box; padding: 10px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--ds-radius-control);
}
.sb-motif-gestes { display: flex; gap: 8px; justify-content: flex-end; }

.sb-statut {
  display: flex; align-items: baseline; gap: 8px; color: var(--text-2);
  font: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
}
.sb-relances .sb-statut .sb-fin { margin-left: auto; }
.sb-statut b {
  color: var(--text-1);
  font: var(--weight-semibold) var(--text-sm)/var(--leading-snug) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Le journal : le plus récent en tête, chaque entrée datée et signée, aucune réécrite. */
.sb-relances .sb-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-relances .sb-journal li {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--border-subtle); color: var(--text-1);
  font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}
.sb-relances .sb-journal li:first-child { border-top: none; padding-top: 0; }
.sb-relances .sb-journal time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sb-relances .sb-journal small {
  display: block; color: var(--text-2);
  font: var(--weight-regular) var(--text-2xs)/var(--leading-snug) var(--font-sans);
}
/* Un commentaire libre se distingue d'une ligne calculée : entre guillemets, à l'encre du texte. */
.sb-relances .sb-journal .sb-journal-note { color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Sous le journal, la note libre : le champ, qui l'écrit, et son bouton, sur une ligne. */
.sb-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.sb-note > :first-child { flex: 1; min-width: 0; }
.sb-note-qui { width: 112px; flex: none; }

/* ── Les réglages des devis, carte de la page Paramètres (maquette 3) ─────────────────────── */

/* Préfixe `sb-devis-` : `.sb-bloc` et `.sb-ajout` existent déjà ailleurs dans la page, avec un
   autre sens (le panneau d'un sujet, l'ajout d'un accès). Deux règles homonymes se marcheraient
   dessus sans que rien ne le dise. */

/* Chaque section de la carte est un bloc : son en-tête, son contenu, un écart franc avec la
   suivante. Sans lui, l'en-tête de section colle à la phrase du bloc d'avant. */
.sb-devis-bloc { display: flex; flex-direction: column; gap: 10px; }
.sb-devis-bloc + .sb-devis-bloc { margin-top: 22px; }

.sb-devis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.sb-devis-regle {
  margin: 0; color: var(--text-1);
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
}
.sb-devis-regle b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.sb-devis-modele {
  width: 100%; box-sizing: border-box; min-height: 148px; margin: 0;
  font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}
/* Encre 2 et non 3 : sous 18 px, l'encre de détail du DS tombe à 3:1, sous les 4,5:1 exigés. */
.sb-devis-aide {
  margin: 0; color: var(--text-2);
  font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}

/* Une ligne par personne, ou par client qu'on ne rappelle plus : le nom, son détail, « Retirer ». */
.sb-devis-liste { list-style: none; margin: 0; padding: 0; }
.sb-devis-liste li {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--border-subtle); color: var(--text-1);
  font: var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-sans);
}
.sb-devis-liste li:first-child { border-top: none; padding-top: 0; }
.sb-devis-liste b { font-weight: var(--weight-semibold); }
.sb-devis-liste .sb-devis-depuis {
  flex: 1; color: var(--text-2);
  font: italic var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
}


.sb-devis-pied { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
/* Ce que l'enregistrement a fait se lit sur place, à côté du bouton : jamais un message flottant. */
.sb-devis-fait {
  color: var(--success-ink);
  font: var(--weight-medium) var(--text-xs)/var(--leading-snug) var(--font-sans);
}

/* Une ligne qui représente plusieurs saisies du même devis : la marque suit le numéro, discrète.
   Le détail — les numéros absorbés — est dans la fiche, jamais deux fois. */
.sb-relances .sb-doublon {
  margin-left: 6px; padding: 1px 5px; border-radius: var(--ds-radius-control);
  background: var(--surface-3); color: var(--text-2);
  font: 600 11px/1.4 var(--font-sans); font-variant-numeric: tabular-nums;
}
.sb-relances .sb-copies { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* L'en-tête du suivi porte ses deux gestes à droite ; le panneau de la règle passe à la ligne. */
.sb-suivi-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-suivi-gestes .ds-tip { display: inline-flex; }
.sb-regle-panneau { flex-basis: 100%; }

/* Le geste qui ferme une porte, en icône seule : le design system n'a pas de variante critique
   pour `IconButton` — il n'a que `solid` et `accent`. Rattrapage local, aux tokens du DS et sans
   aucune couleur inventée, à retirer quand la variante existera en amont (Press-Start). */
.sb-relances .sb-critique {
  background: var(--critical); border-color: var(--critical); color: var(--on-critical);
}
/* Au survol, seule la bordure se marque : assombrir le fond passerait l'encre sous le seuil. */
.sb-relances .sb-critique:hover:not([disabled]) { border-color: var(--critical-ink); }