/* ===== documents-ecran.css ===== */
/* Modèles de documents, écrans d'édition (documents.css reste la feuille du PDF).
   Feuille de domaine du lot P2 (vague 1), créée et importée par assets/app.js au lot T0.
   Seul ce lot l'écrit ; app.css reste réservé aux jetons et composants (docs/DESIGN-SYSTEM.md §9.9). */

/* Éditeur (formulaire.html.twig) : le contenu en police mono du design system. */
.modele-editeur textarea.code { width: 100%; font-family: var(--police); font-size: var(--t-xs); line-height: 1.5; tab-size: 4; }
.erreurs-modele { margin: 0 0 var(--e-3); }

/* Catalogue des variables : à droite au bureau, au-dessus de l'éditeur sous 720 px (groupes repliés). */
.catalogue-variables details { margin: 0 0 var(--e-2); }
.catalogue-variables summary { cursor: pointer; font-weight: 600; }
.catalogue-variables table { width: 100%; font-size: var(--t-xs); border-collapse: collapse; table-layout: fixed; }
.catalogue-variables td { padding: var(--e-1); border-bottom: 1px solid var(--trait-2); vertical-align: top; overflow-wrap: anywhere; }
.catalogue-variables td:first-child { width: 45%; }
.catalogue-variables code { font-family: var(--police); overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .modele-edition .catalogue-variables { order: -1; }
    /* Variable sur sa ligne, description dessous : aucune colonne trop étroite. */
    .catalogue-variables table, .catalogue-variables tbody, .catalogue-variables tr, .catalogue-variables td { display: block; width: auto; }
    .catalogue-variables tr { padding: var(--e-1) 0; border-bottom: 1px solid var(--trait-2); }
    .catalogue-variables td { padding: 0; border-bottom: 0; }
    .catalogue-variables td:first-child { width: auto; }
}

/* Aperçu d'une version (version.html.twig) : le contenu du modèle revient à la ligne, la page ne
   défile jamais horizontalement ; un document plus large que l'écran défile dans son cadre. */
.modele-contenu {
    white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; overflow: auto;
    margin: var(--e-3) 0 0; padding: var(--e-3); font-size: var(--t-xs);
    background: var(--surface-2); border: 1px solid var(--trait-2); border-radius: var(--rayon-champ);
}
.apercu-document { max-width: 100%; overflow-x: auto; margin-bottom: var(--e-4); }
@media (max-width: 720px) {
    .apercu-document .document--apercu { padding: var(--e-4); }
}

/* Versions d'un type (type.html.twig) : actions alignées et espacées, sans points médians. */
.modeles__actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-2) var(--e-4); }
.modeles__actions .bouton { height: 32px; padding: 0 var(--e-3); }
/* Lot P1-6g : compte rendu de l'import d'une archive de modèles, lisible à 375 px. */
.compte-rendu-modeles { list-style: none; margin: var(--e-4) 0; padding: 0; gap: var(--e-3); }
.compte-rendu-modeles__ligne { padding: var(--e-3) 0; border-top: 1px solid var(--trait-2); overflow-wrap: anywhere; }
.compte-rendu-modeles__ligne p { margin: 0; }
.compte-rendu-modeles__ligne .aide { margin-top: 4px; }
@media (max-width: 720px) {
    .modeles__actions .bouton { height: 40px; }
}

/* ===== devis.css ===== */
/* Devis et barème (lot PD-2) : compléments propres à ces écrans (le reste vient d'app.css et composants.css).
   Les statuts de devis utilisent les badges génériques (templates/devis/_statut.html.twig). */

/* ---------- Fiche devis : en-tête et barre d'actions ---------- */
.devis-tete { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.devis-tete h1 { margin: 0; }
.devis-tete > .aide { margin: 0; }
.devis-meta { margin: 0; color: var(--encre-douce); font-size: var(--t-sm); }
.devis-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.devis-actions .bouton { white-space: nowrap; }

/* Menu « Plus » : statuts secondaires (abandonner, repasser en brouillon). */
.devis-menu { position: relative; }
.devis-menu summary { list-style: none; cursor: pointer; gap: 6px; }
.devis-menu summary::-webkit-details-marker { display: none; }
.devis-menu summary::after {
    content: ''; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--duree) var(--courbe);
}
.devis-menu[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.devis-menu__liste {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px;
    display: flex; flex-direction: column; padding: var(--e-1) 0;
    background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-menu);
}
.devis-menu__action {
    display: block; width: 100%; padding: var(--e-2) var(--e-4); border: 0; background: none;
    font: inherit; font-size: var(--t-sm); color: var(--encre); text-align: left; cursor: pointer;
    transition: background-color var(--duree-rapide) var(--courbe);
}
.devis-menu__action:hover, .devis-menu__action:focus-visible { background: var(--surface-4); }
.devis-menu__action--danger { color: var(--danger-texte); }

/* ---------- Totaux ---------- */
.devis-totaux { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.devis-totaux div { display: flex; flex-direction: column; }
.devis-totaux dt { font: 500 10.5px/1.6 var(--police); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.devis-totaux dd { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---------- Lignes par société ---------- */
.devis-prix { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-3); }
.devis-lignes input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--trait-champ); border-radius: var(--rayon-champ); font: inherit; color: var(--encre); background: var(--surface); }
.devis-lignes input[type="text"]:focus { border-color: var(--primaire); outline: none; box-shadow: var(--anneau); }
.devis-lignes__libelle { min-width: 12em; }
.devis-lignes input.montant { max-width: 9em; text-align: right; }
.devis-lignes td.montant, .devis-lignes th.montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.devis-lignes .theorique { color: var(--encre-douce); }
.devis-societe__profil { margin: 0 0 8px; color: var(--encre-douce); font-size: 13px; }
.devis-prix .actions-collantes { margin-top: 0; }

/* Sous 560 px, chaque ligne devient une carte : libellé en tête, puis type, barème et prix. */
@media (max-width: 560px) {
    .devis-lignes .tableau-conteneur { overflow: visible; }
    .devis-lignes table, .devis-lignes tbody, .devis-lignes tfoot { display: block; }
    .devis-lignes thead { display: none; }
    .devis-lignes tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e-3); align-items: center;
        padding: var(--e-3); border-bottom: 1px solid var(--trait-2);
    }
    .devis-lignes tbody td { display: contents; padding: 0; border: 0; }
    .devis-lignes tbody td.devis-lignes__libelle { display: block; grid-column: 1 / -1; min-width: 0; font-weight: 500; }
    .devis-lignes tbody td[data-libelle]::before { content: attr(data-libelle); color: var(--encre-douce); font-size: var(--t-xs); text-align: left; }
    .devis-lignes tbody td.montant { text-align: right; }
    .devis-lignes input.montant { max-width: 8em; justify-self: end; }
    .devis-lignes tbody td.devis-lignes__retirer { display: block; grid-column: 1 / -1; text-align: right; }
    .devis-lignes tfoot tr { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-3); background: var(--surface-2); border-top: 1px solid var(--trait); }
    .devis-lignes tfoot th, .devis-lignes tfoot td { padding: 0; border: 0; background: none; }
    .devis-lignes tbody tr:hover td { background: none; }
    .devis-lignes tfoot td:empty { display: none; }
}

/* ---------- Panneaux d'ajout repliables ---------- */
.devis-bas { margin-top: var(--e-3); }
.devis-ajout { padding: 0; }
.devis-ajout > summary {
    display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-carte);
    list-style: none; cursor: pointer; border-radius: var(--rayon-carte);
    transition: background-color var(--duree-rapide) var(--courbe);
}
.devis-ajout > summary::-webkit-details-marker { display: none; }
.devis-ajout > summary::before {
    content: '+'; display: grid; place-items: center; width: 20px; height: 20px; flex: none;
    border: 1px solid var(--trait); border-radius: var(--rayon-xs);
    font: 500 14px/1 var(--police); color: var(--encre);
}
.devis-ajout[open] > summary::before { content: '−'; }
.devis-ajout > summary:hover { background: var(--surface-2); }
.devis-ajout > summary h2 { margin: 0; font-size: var(--t-titre-carte); font-weight: 500; }
.devis-ajout > form { padding: 0 var(--e-carte) var(--e-carte); }
.cases-en-ligne { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; padding: 0; border: 0; }
.cases-en-ligne legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.cases-en-ligne label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }

/* ---------- Barème ---------- */
.bareme-tranches { width: 100%; }
.bareme-tranches th.montant, .bareme-tranches td.montant { text-align: right; }
.bareme-tranches input {
    width: 100%; max-width: 12em; height: 32px; box-sizing: border-box; padding: 0 8px; text-align: right;
    border: 1px solid var(--trait-champ); border-radius: var(--rayon-champ);
    font: inherit; font-variant-numeric: tabular-nums; color: var(--encre); background: var(--surface);
}
.bareme-tranches input:focus { border-color: var(--primaire); outline: none; box-shadow: var(--anneau); }
.bareme-tranches input[aria-invalid="true"] { border-color: var(--danger-texte); }
.bareme-tranches td:first-child { color: var(--encre-douce); font-variant-numeric: tabular-nums; width: 3em; }
.bareme-defaut { margin-top: var(--e-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.bareme-defaut h2 { margin: 0 0 4px; font-size: var(--t-titre-carte); }
.bareme-defaut p { margin: 0; }

/* ===== parcours.css ===== */
/* Parcours prospect après signature (lot P), refonte lot PD-3 (vague 1, option C).
   Page app_prospect_parcours : fil des étapes du suivi, messages repliés une fois envoyés,
   cartes repliables (l'étape en cours ouverte), menu de marquage des pièces. Jetons d'app.css seulement. */

/* Colonnes égales : les messages repliés laissent la place aux cartes de l'étape en cours. */
@media (min-width: 721px) {
    .parcours .mise-en-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Fil des étapes du suivi ---------- */
.parcours .suivi-parcours { margin-bottom: var(--e-4); }
.parcours .suivi-parcours > .aide { margin: var(--e-2) 0 0; }
.fil-etapes--suivi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-2);
    margin: 0; counter-reset: none;
}
.fil-etapes--suivi .etape {
    display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0;
    padding: 8px 10px; border: 1px solid var(--trait-2); border-radius: var(--rayon-champ);
    background: var(--surface); color: var(--encre-douce); line-height: 1.4;
}
.fil-etapes--suivi .etape__pastille {
    flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--trait); background: var(--surface); color: var(--encre-douce);
    font-size: 11px; font-weight: 600; line-height: 1;
}
.fil-etapes--suivi .etape__texte { min-width: 0; overflow-wrap: anywhere; }
.fil-etapes--suivi .etape__etat { display: block; margin-top: 2px; font-weight: 500; }
.fil-etapes--suivi .etape--fait { color: var(--encre); }
.fil-etapes--suivi .etape--fait .etape__pastille { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }
.fil-etapes--suivi .etape--fait .etape__etat { color: var(--succes-texte); }
.fil-etapes--suivi .etape--courant { border-color: var(--encre); color: var(--encre); font-weight: 500; }
.fil-etapes--suivi .etape--courant .etape__pastille { background: var(--encre); border-color: var(--encre); color: #fff; }

/* ---------- Cartes repliables (détails natifs, sans script) ---------- */
.carte-repliable { padding: 0; }
.carte-repliable > details > summary.carte-repliable__tete {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
    padding: var(--e-4) var(--e-carte); padding-right: 44px; position: relative;
    list-style: none; cursor: pointer; border-radius: var(--rayon-carte);
}
.carte-repliable > details > summary::-webkit-details-marker { display: none; }
.carte-repliable__tete h2 { margin: 0; font-size: var(--t-titre-carte); }
/* Chevron : tourne en 160 ms (C5), rien sous prefers-reduced-motion (règle globale). */
.carte-repliable__tete::after, .parcours .message-sortant > summary::after {
    content: ''; position: absolute; right: var(--e-carte); top: 50%; width: 7px; height: 7px; margin-top: -5px;
    border-right: 1.5px solid var(--encre-douce); border-bottom: 1.5px solid var(--encre-douce);
    transform: rotate(45deg); transition: transform var(--duree) var(--courbe);
}
.carte-repliable > details[open] > summary::after, .parcours .message-sortant[open] > summary::after { transform: rotate(-135deg); margin-top: -1px; }
.carte-repliable__tete:hover h2 { color: var(--encre); }
.carte-repliable__tete:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
.carte-repliable__corps { padding: 0 var(--e-carte) var(--e-carte); }
.carte-repliable__corps > :first-child { margin-top: 0; }
/* Colonne étroite : un long libellé de bouton revient à la ligne au lieu de déborder de la carte. */
.parcours .pile .actions .bouton { white-space: normal; text-align: left; height: auto; min-height: 32px; }
.parcours .actions > .en-ligne { margin-left: 0; }

/* ---------- Messages au client et au confrère ---------- */
/* Règles historiques conservées : `.message-sortant` sert aussi à `envoi/_en_attente.html.twig`. */
.message-sortant { border-top: 1px solid var(--trait); padding-top: 12px; margin-top: 12px; }
.message-sortant:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.message-sortant h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.parcours .message-sortant { border-top: 1px solid var(--trait-2); padding-top: var(--e-3); margin-top: var(--e-3); }
.parcours .message-sortant > summary {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
    padding-right: 28px; list-style: none; cursor: pointer;
}
.parcours .message-sortant > summary::-webkit-details-marker { display: none; }
.parcours .message-sortant > summary::after { right: 4px; }
.parcours .message-sortant > summary h3 { margin: 0; font: 600 var(--t-base)/1.4 var(--police); color: var(--encre); }
.parcours .message-sortant > summary:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; border-radius: var(--rayon-xs); }
.parcours .message-sortant[open] > summary { margin-bottom: var(--e-3); }
.parcours .message-sortant .fiche-transmission { margin-top: var(--e-3); min-height: 140px; }

/* ---------- Liens client (F2, F3) et réponses ---------- */
.parcours .lien-client__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--e-2); }
.parcours .lien-client__tete .en-ligne { margin-left: 0; }
.parcours .reponses-client {
    display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px var(--e-3);
    margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-3);
    border: 1px solid var(--trait-2); border-radius: var(--rayon-champ); background: var(--surface-2);
    font-size: var(--t-sm);
}
.parcours .reponses-client dt { color: var(--encre-douce); font-weight: 500; }
.parcours .reponses-client dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Pièces attendues : menu « Marquer » par ligne ---------- */
.parcours .liste-pieces > li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2px var(--e-2); }
.parcours .liste-pieces__texte { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.parcours .formulaire-compact .lien-bouton { text-align: left; }
.parcours .liste-pieces > li > .en-ligne { flex: none; margin-left: 0; }
.menu-ligne { position: relative; flex: none; }
.menu-ligne > summary { list-style: none; white-space: nowrap; }
.menu-ligne > summary::-webkit-details-marker { display: none; }
.menu-ligne > summary::after { content: ' ▾'; font-size: 10px; }
.menu-ligne__liste {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 180px;
    display: flex; flex-direction: column; gap: 2px; padding: 4px;
    background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-champ); box-shadow: var(--ombre-carte);
}
.menu-ligne__liste .en-ligne { display: flex; margin: 0; }
.menu-ligne__liste .lien-bouton { width: 100%; text-align: left; padding: 6px 8px; border-radius: var(--rayon-xs); }
.menu-ligne__liste .lien-bouton:hover, .menu-ligne__liste .lien-bouton:focus-visible { background: var(--surface-4); text-decoration: none; }

/* ---------- Élément de reprise : choix de la cible sur une ligne ---------- */
.parcours .cible-elements { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.parcours .cible-elements .champ { margin-bottom: 0; }

@media (max-width: 480px) {
    .parcours .reponses-client { grid-template-columns: minmax(0, 1fr); }
    .parcours .reponses-client dd { margin-bottom: 4px; }
    .fil-etapes--suivi { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Commercial avancé (lot P1-4) ===== */
/* Onglets du pilotage commercial : même barre d'une page à l'autre (modèle des vues des temps). */
nav.actions.vues-commercial { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 0 var(--e-3); }
nav.actions.vues-commercial > * { text-align: center; white-space: nowrap; }
.suivi-commercial__modifier { margin-top: var(--e-3); }
.suivi-commercial__modifier > form { margin-top: var(--e-2); }
.suivi-commercial__actions li { padding-bottom: var(--e-2); border-bottom: 1px solid var(--trait-2); }
.suivi-commercial__actions li:last-child { border-bottom: 0; }
.suivi-commercial__action--faite { color: var(--encre-douce); }
.suivi-devis__approbation { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-3); }
.suivi-devis__decision .actions { display: flex; gap: var(--e-2); }
.tableau-resultats .tableau__total th, .tableau-resultats .tableau__total td { font-weight: 600; border-top: 2px solid var(--trait); }
.tableau .ligne--attention th { color: var(--attention-texte); }
.segmentation-repartitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-3); }
@media (max-width: 720px) {
    nav.actions.vues-commercial { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
    nav.actions.vues-commercial > * { white-space: normal; }
}