/* Étape Devis : famille « dev- » de la planche Editeur-Devis (et Sombre-Editeur-Devis). Ce fichier est la seule définition de dev- ;
   l'en-tête de dossier, le bloc de décision, les repères, le déroulé et les replis viennent de systeme.css et d'etape/etape.css.
   La comparaison est le bloc de niveau 1 (graphite) ; quand une autre décision porte ce bloc, elle devient une carte blanche (dev-zone--plain). */

.dev-zone {
  --dv-ink: var(--z1-ink); --dv-ink-2: var(--z1-ink-2); --dv-ink-3: var(--z1-ink-3); --dv-line: var(--z1-line);
  --dv-card: var(--z1-card); --dv-card-2: var(--z1-card-2); --dv-warn: var(--z1-warn);
  gap: 14px;
}
.dev-zone--plain {
  --dv-ink: var(--ink); --dv-ink-2: var(--ink-2); --dv-ink-3: var(--ink-3); --dv-line: var(--line);
  --dv-card: var(--surface); --dv-card-2: var(--surface-2); --dv-warn: var(--clarify);
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-strong); padding: 18px 20px 20px;
}
.dev-h { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.018em; color: var(--dv-ink); }
.dev-zone--plain .dev-h { font-size: 17px; line-height: 24px; letter-spacing: -.012em; }
.dev-zone .t-2 { color: var(--dv-ink-2); }
.dev-zone .avatar { background: var(--dv-card-2); color: var(--dv-ink-2); }

/* La comparaison : une carte intérieure, les offres en colonnes */
.dev-cmp { position: relative; background: var(--dv-card); border-radius: 16px; padding: 4px 0; }
.dev-zone--plain .dev-cmp { background: transparent; padding: 0; }
.dev-tbl { table-layout: fixed; }
.dev-tbl .dev-col1 { width: 168px; }
.dev-tbl th, .dev-tbl td { vertical-align: top; padding: 16px; white-space: normal; text-align: left; }
.dev-tbl th:first-child, .dev-tbl td:first-child { padding-left: 20px; }
.dev-tbl th:last-child, .dev-tbl td:last-child { padding-right: 20px; }
.dev-zone--plain .dev-tbl th:first-child, .dev-zone--plain .dev-tbl td:first-child { padding-left: 0; }
.dev-zone--plain .dev-tbl th:last-child, .dev-zone--plain .dev-tbl td:last-child { padding-right: 0; }
.dev-tbl thead th { vertical-align: bottom; padding-top: 14px; padding-bottom: 14px; border-bottom-color: var(--dv-line); }
.dev-tbl td { border-bottom-color: var(--dv-line); }
.dev-tbl tbody th { background: transparent; color: var(--dv-ink-2); font-size: 13.5px; font-weight: 550; border-bottom: 1px solid var(--dv-line); }
.dev-tbl tbody tr:last-child th { border-bottom: 0; }
.dev-tbl tbody tr:hover td, .dev-tbl tbody tr:hover th { background: var(--dv-card-2); }
.dev-zone--plain .dev-tbl tbody tr:hover td, .dev-zone--plain .dev-tbl tbody tr:hover th { background: transparent; }
.dev-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dev-offer > div { flex: 1 1 96px; min-width: 0; }
.dev-offer-name { font-size: 14.5px; line-height: 20px; font-weight: 620; color: var(--dv-ink); letter-spacing: -.008em; overflow-wrap: anywhere; }
.dev-offer-meta { font-size: 12.5px; line-height: 18px; font-weight: 450; color: var(--dv-ink-3); }
.dev-offer .status { margin-top: 2px; }
.dev-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dev-v { font-size: 15px; line-height: 22px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--dv-ink); }
.dev-v--key { font-size: 18px; line-height: 24px; font-weight: 620; letter-spacing: -.01em; }
.dev-sub-v { font-size: 12.5px; line-height: 18px; font-weight: 450; color: var(--dv-ink-2); font-variant-numeric: tabular-nums; }
.dev-low { font-size: 12.5px; line-height: 18px; font-weight: 650; color: var(--dv-ink); }
.dev-gap { font-size: 15px; line-height: 22px; font-weight: 620; color: var(--dv-warn); }
.dev-retain th, .dev-retain td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.dev-tbl td:last-child .src__pop { left: auto; right: 0; }
/* Une seule offre : la source s'ouvre vers la droite (la carte défile, une fenêtre qui déborde à gauche serait rognée). */
@media (min-width: 768px) { .dev-tbl td:first-of-type:last-child .src__pop { left: 0; right: auto; } }
.dev-tbl .src[open] { z-index: 40; }
.dev-zone .src > summary { text-decoration-color: var(--dv-ink-3); }
.dev-zone--plain .src > summary { text-decoration-color: var(--ink-4); }
.dev-zone .status { color: var(--dv-ink-2); }

/* Geste d'une offre : « Retenir » et l'étape suivante du bon de commande */
.dev-act { display: flex; flex-direction: column; gap: 6px; }
.dev-act .field__error, .dev-act .t-xs { overflow-wrap: anywhere; }
.dev-zone--plain .dev-retain .btn--secondary { box-shadow: 0 0 0 1px var(--line-strong); }
.cg .dev-zone .dev-retain .btn--secondary { background: var(--dv-card-2); color: var(--dv-ink); box-shadow: inset 0 0 0 1px var(--dv-line); }
.cg .dev-zone .dev-retain .btn--secondary:hover { background: color-mix(in srgb, var(--dv-card-2) 82%, var(--dv-ink)); }
.cg .dev-zone--plain .dev-retain .btn--secondary { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.cg .dev-zone--plain .dev-retain .btn--secondary:hover { background: var(--surface-2); }

/* Replis : listes de lignes et formulaires */
.dev-lines { display: flex; flex-direction: column; }
.dev-sub { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-3); font-weight: 450; }
.dev-pre { white-space: pre-line; overflow-wrap: anywhere; }
.dev-sec { display: flex; flex-direction: column; gap: 8px; }
.dev-sec + .dev-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.dev-sec > h3 { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.dev-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; align-items: center; }
.dev-rfqstate { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 10px; }
.dev-rfqstate__msg { grid-column: 1 / -1; }
.dev-svc { display: flex; flex-direction: column; gap: 20px; }
.dev-form { display: flex; flex-direction: column; gap: 14px; }
.dev-form > h2 { font-size: 17px; line-height: 24px; font-weight: 620; letter-spacing: -.012em; }
.dev-tenders { display: flex; flex-direction: column; }

/* La comparaison garde une largeur lisible par offre : quand la colonne de travail est trop étroite, elle défile dans sa carte, jamais la page. */
@media (min-width: 768px) {
  .dev-cmp { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--dv-ink-3) transparent; }
  .dev-tbl { min-width: calc(168px + var(--dv-n) * 150px); }
}


/* Écran large (primitive .cg-cols) : dans la colonne de travail, les chiffres du récapitulatif s'ajustent à la largeur (quatre chiffres : deux par ligne
   tant que la colonne est étroite, jamais trois puis un) ; dans celle des repères, le formulaire d'état d'une demande s'empile. */
.cg-cols__main .stp-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 768px) and (max-width: 1099px), (min-width: 1320px) and (max-width: 1599px) {
  .cg-cols__main .stp-facts:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dev-tabs { overflow-y: hidden; }
@media (min-width: 1320px) {
  .cg-cols__side .dev-rfqstate { grid-template-columns: minmax(0, 1fr); }
  .cg-cols__side .dev-rfqstate .btn { justify-self: start; }
}

@media (max-width: 767px) {
  .dev-zone--plain { padding: 16px; }
  .dev-h { font-size: 20px; line-height: 26px; }
  .dev-cmp { overflow-x: auto; }
  .dev-tbl { min-width: calc(120px + var(--dv-n) * 188px); }
  .dev-tbl .dev-col1 { width: 120px; }
  .dev-tbl th, .dev-tbl td { padding: 12px; }
  .dev-tbl th:first-child, .dev-tbl td:first-child { padding-left: 12px; position: sticky; left: 0; z-index: 2; background: var(--dv-card); }
  .dev-zone--plain .dev-tbl th:first-child, .dev-zone--plain .dev-tbl td:first-child { padding-left: 0; }
  .dev-tbl tbody tr:hover td, .dev-tbl tbody tr:hover th { background: inherit; }
  .dev-tbl tbody th { background: var(--dv-card); }
  .dev-tbl td:last-child { padding-right: 12px; }
  /* Sources : la fenêtre se pose en bas de l'écran, hors du défilement horizontal de la comparaison. */
  .dev-tbl .src[open] > .src__pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 88px; width: auto; z-index: 60; }
  /* Cibles de 44 px sur mobile */
  .dev-act .btn, .dev-retain .btn, .dev-rfqstate .btn, .dev-btn, .dev-cta, .dev-links .linkbtn, .dev-tabs a { min-height: 44px; }
  .dev-tabs a { height: 44px; }
  .dev-rfqstate { grid-template-columns: minmax(0, 1fr); }
  .dev-rfqstate .btn { justify-self: start; }
}