/*
 * Composants des maquettes TRAME (26 septembre 2026, maquettes/assets/base.css et trame.css), repris sans leur portée
 * `#ln26` et avec leurs valeurs « trame » : panneaux, repères, étiquettes, rangées à icône, replis, lignes chiffrées,
 * cycles, documents, onglets du compte, bande « continuer », passage à Linuen. Chargé après 2-workspace.css.
 */

.ln-icon { display: inline-block; flex: none; vertical-align: -0.15em; }
.button .ln-icon { width: 16px; height: 16px; }

.ln-kicker { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; color: var(--ln-accent); }
.ln-kicker .ln-icon { width: 14px; height: 14px; }
.ln-panel p.ln-kicker, .ln-continue p.ln-kicker, .ln-handoff p.ln-kicker, .focus-panel p.ln-kicker { color: var(--ln-accent); font-size: 11px; line-height: 1.6; margin: 0; }
.ln-sub { font-size: var(--ln-text-sm); color: var(--ln-muted); }

.ln-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border-radius: 2px; background: var(--ln-sky); color: var(--ln-accent); font-size: 11px; font-weight: 500; line-height: 1.5; }
.ln-tag .ln-icon { width: 12px; height: 12px; }
.ln-tag--warn { background: var(--ln-warn-bg); color: var(--ln-warn); }
.ln-tag--good { background: var(--ln-good-bg); color: var(--ln-good); }
.ln-tag--danger { background: var(--ln-danger-bg); color: var(--ln-danger); }
.ln-tag--neutral { background: var(--ln-soft); color: var(--ln-muted); }

.ln-plain { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; border: 0; background: transparent; color: var(--ln-accent); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ln-plain:hover { color: var(--ln-accent-strong); text-decoration: underline; }
.ln-plain--muted { color: var(--ln-muted); }

.ln-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.ln-panel .ln-actions { margin-top: 16px; }

.ln-panel { background: var(--ln-page); border: 1px solid var(--ln-line); border-radius: var(--ln-radius); padding: 27px; min-width: 0; }
.ln-panel > :last-child { margin-bottom: 0; }
.ln-panel h2 { font-size: 23px; line-height: 1.3; letter-spacing: -0.4px; font-weight: 500; margin: 12px 0; overflow-wrap: anywhere; }
.ln-panel h3 { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.ln-panel p { font-size: var(--ln-text-sm); line-height: 1.7; color: var(--ln-muted); margin: 0 0 var(--sp-2); }
.ln-panel > .ln-tag + h2 { margin-top: 14px; }

/* `minmax(0, …)` et `min-width: 0` (27 septembre 2026) : une colonne `fr` s'élargit sinon jusqu'au contenu le plus large
   — un schéma de 1 900 px poussait la colonne voisine et sortait de l'écran. Une grille ne s'élargit jamais sur son
   contenu : le contenu large défile dans son propre cadre. */
.ln-subgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 23px; align-items: start; }
.ln-two-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; margin-top: 17px; }
.ln-subgrid > *, .ln-two-options > *, .tr-status-grid > * { min-width: 0; }

.ln-feature-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid var(--ln-line); }
.ln-feature-row:first-of-type { margin-top: 17px; }
.ln-feature-row > .ln-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--ln-accent); }
.ln-feature-row > div { min-width: 0; flex: 1; }
.ln-feature-row strong { display: block; font-size: 15px; font-weight: 500; color: var(--ln-ink); overflow-wrap: anywhere; }
.ln-feature-row strong a { color: inherit; text-decoration: none; }
.ln-feature-row strong a:hover { color: var(--ln-accent); text-decoration: underline; }
.ln-feature-row p { font-size: 13px; margin: 2px 0 0; }
.ln-feature-row__side { flex: none; margin-left: auto; }

.ln-detail { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--ln-line); color: var(--ln-muted); font-size: 13px; }
.ln-detail > summary { cursor: pointer; color: var(--ln-accent); font-weight: 600; }
.ln-detail > summary::marker { color: var(--ln-accent); }
.ln-detail[open] > summary { margin-bottom: 11px; }

.ln-question { border-top: 1px solid var(--ln-line); padding-top: 13px; margin-top: 14px; }
.ln-question strong, .ln-question label { display: block; font-size: 14px; font-weight: 500; color: var(--ln-ink); margin-bottom: 4px; }
.ln-source { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ln-line); font-size: 12px; color: var(--ln-muted); }

.ln-warning { margin-top: 17px; padding: 16px; border: 1px solid var(--ln-warn-line); border-radius: 2px; background: var(--ln-warn-bg); color: var(--ln-warn); font-size: 13px; line-height: 1.7; }
.ln-warning p { color: inherit; margin: 0; }
.tr-danger { padding: 18px; border: 1px solid var(--ln-danger-line); border-radius: var(--ln-radius); background: var(--ln-danger-bg); color: var(--ln-danger); font-size: 13px; }
.tr-danger p { color: inherit; margin: 4px 0 0; }
.tr-success { padding: 18px; border: 1px solid var(--ln-good-line); border-radius: var(--ln-radius); background: var(--ln-good-bg); color: var(--ln-good); font-size: 13px; }

.ln-budget-value { margin: 17px 0 2px; font-size: 40px; line-height: 1.15; letter-spacing: -1px; font-weight: 500; color: var(--ln-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ln-budget-value--pending { color: var(--ln-warn); }
.ln-budget-rows { margin: 18px 0 0; }
.ln-budget-row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ln-line); color: var(--ln-muted); font-size: var(--ln-text-sm); }
.ln-budget-row dt, .ln-budget-row dd { margin: 0; }
.ln-budget-row strong, .ln-budget-row dd { color: var(--ln-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.ln-cycle { list-style: none; margin: 20px 0 0; padding: 0; }
.ln-cycle > li { position: relative; display: flex; gap: 14px; margin: 0 0 18px; }
.ln-cycle > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 29px; bottom: -15px; width: 1px; background: var(--ln-line); }
.ln-cycle__mark { flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ln-sky); color: var(--ln-accent); font-size: 11px; }
.ln-cycle__mark--done { background: var(--ln-good-bg); color: var(--ln-good); }
.ln-cycle__mark--failed { background: var(--ln-danger-bg); color: var(--ln-danger); }
.ln-cycle strong { display: block; font-size: 15px; font-weight: 500; color: var(--ln-ink); }
.ln-cycle p { font-size: 13px; margin: 2px 0 0; }
.ln-cycle small { font-size: 12px; color: var(--ln-muted); }

.ln-document-row { display: flex; align-items: center; gap: 13px; padding: 21px 0; border-top: 1px solid var(--ln-line); }
.ln-document-row:first-of-type { margin-top: 17px; }
.ln-document-row > .ln-icon { width: 23px; height: 23px; color: var(--ln-accent); }
.ln-document-row > div { flex: 1; min-width: 0; }
.ln-document-row strong { display: block; font-size: 15px; font-weight: 500; color: var(--ln-ink); }
.ln-document-row p { margin: 2px 0 0; }
.ln-document-row__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.ln-account-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 17px; padding: 0; list-style: none; }
.ln-account-tabs li { margin: 0; }
.ln-account-tabs a { display: inline-block; padding: 10px 16px; border: 1px solid var(--ln-line); border-radius: var(--ln-radius); background: var(--ln-page); color: var(--ln-muted); font-size: 13px; text-decoration: none; }
.ln-account-tabs a:hover { color: var(--ln-ink); border-color: var(--ln-line-strong); }
.ln-account-tabs a[aria-current="page"] { background: var(--ln-sky); color: var(--ln-accent); border-color: var(--ln-accent); }

.ln-continue { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 30px; padding: 25px; border: 1px solid var(--ln-line); border-top: 2px solid var(--ln-navy-active); border-radius: var(--ln-radius); background: var(--ln-page); }
.ln-continue__icon { flex: none; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: var(--ln-radius); background: var(--ln-sky); color: var(--ln-accent); }
.ln-continue__icon .ln-icon { width: 20px; height: 20px; }
.ln-continue__content { flex: 1; min-width: 0; }
.ln-continue h2, .ln-continue h3 { font-size: 21px; font-weight: 500; margin: 0 0 4px; }
.ln-continue p { font-size: 13px; color: var(--ln-muted); margin: 0; max-width: 650px; }
.ln-continue .ln-actions { flex: none; }

.ln-handoff { padding: 37px; border: 1px solid var(--ln-line); border-radius: var(--ln-radius); background: var(--ln-sky); }
.ln-handoff h2 { font-size: 39px; line-height: 1.15; letter-spacing: -1.3px; font-weight: 500; margin: 12px 0; }
.ln-handoff > p { font-size: var(--ln-text-base); color: var(--ln-muted); max-width: 700px; line-height: 1.75; }
.ln-handoff .ln-actions { margin-top: 19px; }
.ln-session-note { margin-top: 16px; padding: 12px; border: 1px solid var(--ln-line); border-radius: var(--ln-radius); background: var(--ln-page); color: var(--ln-muted); font-size: 13px; }

.ln-work-legend { margin-top: 16px; font-size: 12px; color: var(--ln-muted); }
.tr-quote-total { display: flex; align-items: baseline; gap: 10px; margin: 22px 0; }
.tr-quote-total strong { color: var(--ln-ink); font-size: 44px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.tr-quote-total span { color: var(--ln-muted); }
.tr-help { font-size: 13px; color: var(--ln-muted); margin: 10px 0; }
.tr-status-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }

@media (max-width: 800px) {
  .ln-subgrid, .ln-two-options, .tr-status-grid { grid-template-columns: 1fr; }
  .ln-continue { flex-wrap: wrap; }
  .ln-continue__icon { display: none; }
  .ln-document-row { flex-wrap: wrap; }
  .ln-document-row__side { margin-left: 36px; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .ln-panel { padding: 22px; }
  .ln-panel h2 { font-size: 22px; }
  .ln-continue { padding: 23px; }
  .ln-continue h2, .ln-continue h3 { font-size: 22px; }
  .ln-budget-value { font-size: 32px; }
  .ln-budget-row { font-size: 13px; }
  .ln-budget-row strong, .ln-budget-row dd { max-width: 52%; }
  .ln-handoff { padding: 25px; }
  .ln-handoff h2 { font-size: 32px; }
  .ln-account-tabs a { font-size: 12px; padding: 8px 12px; }
  .tr-quote-total strong { font-size: 36px; }
}
.list-plain { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.list-plain li { margin: 0 0 4px; }

/* Solution (maquette 06) */
.architecture-head { padding: 27px 27px 8px; }
.architecture-head h2 { font-size: 23px; font-weight: 500; letter-spacing: -0.4px; margin: 14px 0 8px; }
.architecture-head p { font-size: var(--ln-text-sm); color: var(--ln-muted); line-height: 1.7; }
.architecture-responsibilities { margin: 0 27px; padding: 12px 0 16px; }
.architecture-responsibilities .table-wrap { margin-top: 11px; }
.architecture-side .review-column { padding: 16px 0 0; margin-top: 20px; border-top: 1px solid var(--ln-line); }
.architecture-detail > * + * { margin-top: 22px; }
.architecture-grid > .panel { min-width: 0; }
.architecture-diagrams { margin-top: 23px; min-width: 0; }

/* Budget (maquette 07) : le résumé du calcul lu comme la maquette — le chiffre en grand, puis des lignes à filet. */
.budget-panel .summary { border: 0; padding: 0; margin: 0; }
.budget-panel .summary__headline { display: block; margin: 6px 0 0; }
.budget-panel .summary__label { display: block; font-size: 13px; color: var(--ln-muted); }
.budget-panel .summary__value { display: block; margin-top: 6px; font-size: 40px; line-height: 1.15; letter-spacing: -1px; font-weight: 500; font-variant-numeric: tabular-nums; }
.budget-panel .summary__value--pending { font-size: 32px; color: var(--ln-warn); }
.budget-panel .summary__aside { font-size: 13px; color: var(--ln-muted); }
.budget-panel .summary__lines { margin-top: 18px; gap: 0; }
.budget-panel .summary__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ln-line); }
.budget-panel .summary__lines dt { font-size: var(--ln-text-sm); color: var(--ln-muted); }
.budget-panel .summary__lines dd { font-size: var(--ln-text-sm); font-weight: 600; color: var(--ln-ink); text-align: right; }
.budget-panel .summary__lines dd .fine, .budget-panel .summary__lines dd a { display: block; font-weight: 400; }
@media (max-width: 620px) { .budget-panel .summary__value { font-size: 32px; } .budget-panel .summary__lines dd { max-width: 55%; } }
#budget-summary + .block-title-row + .panel.estimate { margin-top: 0; }

/* Étapes d'une analyse lues comme le cycle des maquettes : pastille ronde, filet vertical, état écrit à côté. */
.review-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; font-size: var(--ln-text-sm); }
.review-step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 29px; bottom: 3px; width: 1px; background: var(--ln-line); }
.review-step__mark { flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ln-sky); color: var(--ln-accent); font-size: 12px; line-height: 1; }
.review-step--done .review-step__mark { background: var(--ln-good-bg); color: var(--ln-good); }
.review-step--failed .review-step__mark { background: var(--ln-danger-bg); color: var(--ln-danger); }
.review-step--warn .review-step__mark { background: var(--ln-warn-bg); color: var(--ln-warn); }
.review-step--pending .review-step__mark, .review-step--none .review-step__mark { background: var(--ln-soft); color: var(--ln-muted); }
.review-step > div { padding-top: 3px; color: var(--ln-ink); }
.review-steps { margin-top: 20px; }
.deliverables-options { margin-top: 26px; }
.credits-detail { margin-top: 22px; }
.credits-detail > h2 { font-size: 19px; }
.suite-form { margin-top: 22px; }
.suite-form > h2 { font-size: 28px; letter-spacing: -0.8px; }
.quote-layout { margin-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ln-document-row .list-plain { font-size: 13px; color: var(--ln-muted); margin: 4px 0 0; }
.ln-document-row strong a { color: var(--ln-ink); text-decoration: none; }
.ln-document-row strong a:hover { color: var(--ln-accent); text-decoration: underline; }
.ln-document-row .notice-inline { margin: 10px 0 0; }

/* Nouveau dossier en étapes (maquette 03) */
.form--steps .form-step > .ln-tag + h2 { font-size: 23px; font-weight: 500; letter-spacing: -0.4px; margin: 14px 0 8px; }
.form--steps .form-step > p { font-size: var(--ln-text-sm); color: var(--ln-muted); margin: 0 0 25px; }
.form--steps .form-step + .form-step { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--ln-line); }
.form--steps .form-step[hidden] + .form-step, .form--steps .form-step + .form-step:not([hidden]):first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form--steps h2:focus { outline: none; }
.upload-drop { border: 1px dashed #8a9eb8; background: var(--ln-soft); padding: 23px; border-radius: var(--ln-radius); }
.upload-drop input[type="file"] { max-width: 100%; font-size: 13px; background: var(--ln-page); }
.upload-drop .hint { margin-top: 10px; }
.field-error { color: var(--ln-danger); font-size: var(--ln-text-sm); margin: 6px 0 0; }
.form-step__actions { margin-top: 8px; }