/* Offres et devis, politique tarifaire, Centre de pilotage.
   Mêmes variables que le reste de Paolia (paolia.css, charte.css) : clair et sombre suivent automatiquement. Sans dégradé, sans animation décorative. */

/* ---------- Bandeau de chiffres ---------- */
.od-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin: 0 0 1rem }
.od-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; text-align: left; font: inherit; color: inherit; cursor: default }
button.od-kpi { cursor: pointer }
button.od-kpi:hover { border-color: var(--accent) }
.od-kpi .l { font-size: .74rem; color: var(--slate); font-weight: 650 }
.od-kpi .v { font-size: 1.35rem; font-weight: 700; color: var(--titre); margin-top: .1rem }
.od-kpi .s { font-size: .74rem; color: var(--slate) }

/* ---------- Filtres et tableaux ---------- */
.od-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .8rem; align-items: end }
.od-filtres .recherche { grid-column: span 2 }
@media (max-width: 640px) { .od-filtres .recherche { grid-column: 1 / -1 } }
.od-filtres label { font-size: .74rem; font-weight: 650; color: var(--slate); display: grid; gap: .2rem }
.od-filtres input, .od-filtres select { width: 100% }
.od-resume { font-size: .8rem; color: var(--slate); margin: .2rem 0 .6rem }
th[data-tri] { cursor: pointer; user-select: none }
.od-num { font-variant-numeric: tabular-nums; white-space: nowrap }
.od-badges { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center }
.od-ligne-actions { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap }
.od-retard { color: var(--red); font-weight: 700 }

/* ---------- Parcours de création ---------- */
.od-etapes { display: flex; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; flex-wrap: wrap }
.od-etapes li { flex: 1 1 150px }
.od-etapes button { width: 100%; display: flex; align-items: center; gap: .55rem; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-weight: 650; font-size: .84rem; color: var(--slate); cursor: pointer; min-height: 40px }
.od-etapes button[aria-current="step"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.od-etapes button:disabled { opacity: .55; cursor: not-allowed }
.od-etapes .n { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .76rem; flex: none }
.od-etapes .ok .n { background: var(--green-soft); color: var(--green); border-color: var(--green) }
.od-pied { display: flex; gap: .5rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line) }
.od-pied .droite { display: flex; gap: .5rem; flex-wrap: wrap }
.od-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem }
.od-type { text-align: left; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; font: inherit; color: inherit; cursor: pointer }
.od-type b { display: block; color: var(--titre) }
.od-type span { font-size: .78rem; color: var(--slate) }
.od-type[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.od-type:disabled { cursor: default; opacity: .7 }
.od-resultats { display: grid; gap: .35rem; margin-top: .5rem }
.od-resultat { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; font: inherit; color: inherit; cursor: pointer; min-height: 44px }
.od-resultat:hover, .od-resultat[aria-pressed="true"] { border-color: var(--accent) }
.od-resultat b { color: var(--titre) }
.od-fiche { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1rem }
.od-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem }
.od-champs label { font-size: .78rem; font-weight: 650; color: var(--slate); display: grid; gap: .2rem }
.od-champs label.large { grid-column: 1 / -1 }
.od-champs input, .od-champs select, .od-champs textarea { width: 100%; font-weight: 400; color: var(--ink) }
.od-champs .aide { font-weight: 400; font-size: .72rem; color: var(--slate) }

/* ---------- Lignes du document ---------- */
.od-catalogue { display: grid; gap: .3rem; max-height: 290px; overflow: auto; margin-top: .5rem }
.od-produit { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: .4rem .65rem }
.od-produit .t { font-size: .74rem; color: var(--slate) }
.od-lignes { width: 100%; border-collapse: collapse; font-size: .86rem }
.od-lignes th { font-size: .72rem; color: var(--slate); text-align: left; padding: .3rem .35rem; border-bottom: 1px solid var(--line) }
.od-lignes td { padding: .3rem .35rem; border-bottom: 1px solid var(--line-2); vertical-align: top }
.od-lignes input, .po-table input { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit }
.od-lignes input { width: 100%; min-width: 0; padding: .3rem .4rem; min-height: 34px }
.od-lignes input:focus, .po-table input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0 }
.od-lignes input[readonly] { background: var(--panel-2); color: var(--slate) }
.od-lignes .q, .od-lignes .p, .od-lignes .r, .od-lignes .t { width: 5.6rem }
.od-lignes .m { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650 }
.od-lignes .ref { font-size: .72rem; color: var(--slate) }
.od-lignes tr.hors td:first-child { box-shadow: inset 3px 0 0 var(--red) }
.od-lignes tr.ecart td { border-bottom: 1px solid var(--line); padding: 0 .35rem .45rem; color: var(--red); font-size: .78rem }
.od-lignes tr.ecart[hidden] { display: none }
@media (max-width: 760px) {
  .od-lignes thead { display: none }
  .od-lignes tr.l { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line-2) }
  .od-lignes tr.l td { border: 0; padding: 0 }
  .od-lignes tr.l td:first-child { grid-column: 1 / -1 }
  .od-lignes .q, .od-lignes .p, .od-lignes .r, .od-lignes .t { width: 100% }
  .od-lignes td[data-l]::before { content: attr(data-l); display: block; font-size: .68rem; color: var(--slate) }
}
.od-totaux { margin-left: auto; width: min(320px, 100%); display: grid; gap: .25rem; font-variant-numeric: tabular-nums }
.od-totaux div { display: flex; justify-content: space-between }
.od-totaux .ttc { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--line); padding-top: .3rem }

/* ---------- Contrôle tarifaire ---------- */
.od-controle { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); padding: .7rem .9rem; background: var(--panel) }
.od-controle.ok { border-left-color: var(--green) }
.od-controle.hors { border-left-color: var(--red) }
.od-controle.attente { border-left-color: var(--amber) }
.od-controle h3 { margin: 0 0 .25rem; font-size: .95rem }
.od-controle ul { margin: .3rem 0 0 1.1rem; padding: 0; font-size: .84rem }

/* ---------- Document (aperçu et fiche) ---------- */
.od-feuille { background: #fff; color: #272727; border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.6rem; max-width: 820px; box-shadow: var(--shadow); font-size: .86rem }
.od-feuille h4 { margin: 0 0 .2rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #55514A }
.od-feuille .tete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 3px solid var(--accent); padding-bottom: .7rem; margin-bottom: .9rem }
.od-feuille .tete img { height: 38px; width: auto; margin-right: .6rem; vertical-align: middle }
.od-feuille .titre { font-size: 1.15rem; font-weight: 700; color: #30496F }
.od-feuille .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .9rem }
@media (max-width: 640px) { .od-feuille .parties { grid-template-columns: 1fr } }
.od-feuille table { width: 100%; border-collapse: collapse; margin: .5rem 0 }
.od-feuille th { background: var(--accent); color: var(--on-accent); font-size: .72rem; text-align: left; padding: .35rem .45rem }
.od-feuille td { padding: .35rem .45rem; border-bottom: 1px solid #F2E1C8 }
.od-feuille .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.od-feuille .visuels { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin-top: .5rem }
.od-feuille .visuels figure { margin: 0; text-align: center; font-size: .72rem; color: #55514A }
.od-feuille .visuels img { max-width: 100%; max-height: 110px; object-fit: contain }
.od-feuille .mentions { font-size: .72rem; color: #55514A; margin-top: .8rem }
.od-mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start }
@media (max-width: 1100px) { .od-mise-en-page { grid-template-columns: 1fr } }
.od-lateral { display: grid; gap: .8rem }
.od-lateral h3 { font-size: .92rem; margin: 0 0 .4rem }

/* ---------- Historique ---------- */
.od-frise { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem }
.od-frise li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .5rem; font-size: .82rem }
.od-frise .pt { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .68rem }
.od-frise .qui { color: var(--slate); font-size: .72rem }
.od-vignettes { display: flex; gap: .5rem; flex-wrap: wrap }
.od-vignette { position: relative; width: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem; text-align: center; font-size: .68rem; overflow: hidden }
.od-vignette img { width: 100%; height: 64px; object-fit: contain; display: block }
.od-vignette .retirer { position: absolute; top: 2px; right: 2px; min-height: 0; padding: 0 .35rem; font-size: .9rem; line-height: 1.3 }
.od-banniere { border: 1px solid var(--line); border-left: 4px solid var(--amber); background: var(--amber-soft); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .86rem }
.od-banniere.rouge { border-left-color: var(--red); background: var(--red-soft) }
.od-banniere.vert { border-left-color: var(--green); background: var(--green-soft) }
.od-aide-connecter { border: 1px dashed var(--line); border-radius: 10px; padding: .6rem .8rem; font-size: .82rem; background: var(--panel-2) }

/* ---------- Centre de pilotage ---------- */
.ce-mise-en-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start }
@media (max-width: 900px) { .ce-mise-en-page { grid-template-columns: 1fr } }
.ce-jeux { display: grid; gap: .3rem; position: sticky; top: 4.2rem }
@media (max-width: 900px) { .ce-jeux { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: .3rem } }
.ce-jeu { display: flex; align-items: center; gap: .55rem; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: .5rem .7rem; font: inherit; font-weight: 650; color: var(--slate); cursor: pointer; text-align: left; min-height: 44px }
.ce-jeu svg { width: 18px; height: 18px; flex: none }
.ce-jeu:hover { background: var(--accent-soft) }
.ce-jeu[aria-current="true"] { background: var(--accent); color: var(--on-accent) }
.ce-jeu .tiny { margin-left: auto; opacity: .85 }
.ce-barre { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin-bottom: .7rem }
.ce-barre .grow { flex: 1 1 240px }
.ce-barre label { font-size: .74rem; font-weight: 650; color: var(--slate); display: grid; gap: .2rem }
.ce-export { display: inline-flex; gap: .3rem; align-items: center }
.ce-etat { font-size: .82rem; color: var(--slate); margin: .1rem 0 .5rem }
.ce-nonconnecte { border: 1px dashed var(--line); border-radius: var(--r); padding: 1rem 1.2rem; background: var(--panel-2) }

/* ---------- Politique tarifaire ---------- */
.po-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem }
.po-regles label { font-size: .78rem; font-weight: 650; color: var(--slate); display: grid; gap: .2rem }
.po-table input { width: 6.2rem; padding: .25rem .4rem; min-height: 32px }
.po-table td, .po-table th { white-space: nowrap }
.po-table td:nth-child(2) { white-space: normal; min-width: 180px }
.po-ligne-ok { background: var(--green-soft) }

/* Mouvement réduit : aucun retour animé */
@media (prefers-reduced-motion: reduce) { .od-etapes button, .od-type, .od-resultat { transition: none } }
@media print { .od-feuille { box-shadow: none; border: 0 } }