/* PSC Gestion — Demandes du site : demandes de devis du site vitrine, charte PSC
   (bandeau bleu #0009E4, lavandes, Exo 2 et Public Sans), couleurs du cadre pour le thème sombre. */
.app-site { --sd-blue: #0009E4; --sd-crit: #B3261E;
  --sd-new-bg: #DFDCFB; --sd-new-fg: #1F23A8; --sd-cours-bg: #E2ECFB; --sd-cours-fg: #1F4F8A; --sd-devis-bg: #FFF0D4; --sd-devis-fg: #8A5300;
  --sd-ok-bg: #DBF0E2; --sd-ok-fg: #1C6A3A; --sd-ko-bg: #E5E6F8; --sd-ko-fg: #4A4E7D;
  display: block; min-height: calc(100vh - 48px); background: var(--bg, #F2F3FC); color: var(--ink, #0C0E3D); font-family: 'Public Sans', system-ui, sans-serif; }
:root[data-theme="dark"] .app-site { --sd-new-bg: #22265C; --sd-new-fg: #C9CBFF; --sd-cours-bg: #1B2C4A; --sd-cours-fg: #A9C8F5; --sd-devis-bg: #3A2C10; --sd-devis-fg: #F1C67A;
  --sd-ok-bg: #12321F; --sd-ok-fg: #8FD6A8; --sd-ko-bg: #1C1F40; --sd-ko-fg: #A4A8D2; --sd-crit: #FF8A80; }
.sd-band { background: var(--sd-blue); color: #fff; }
.sd-band-in { max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.sd-band h1 { font-family: 'Exo 2', 'Public Sans', sans-serif; font-size: 22px; font-weight: 700; margin: 0; }
.sd-band p { margin: 2px 0 0; color: #D0D1FB; font-size: 13.5px; }
.sd-logo { background: #fff; border-radius: 8px; padding: 5px 9px; display: inline-flex; flex: none; }
.sd-logo img { height: 46px; width: auto; display: block; }
.sd-main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 56px; display: flex; flex-direction: column; gap: 16px; }

/* tuiles */
.sd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sd-kpi { background: var(--surface, #fff); border: 1px solid var(--line, #D3D5F0); border-left: 4px solid var(--sd-blue); border-radius: 12px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sd-kpi:hover { border-color: var(--accent, var(--sd-blue)); }
.sd-kpi b { display: block; font: 800 26px/1.1 'Exo 2', 'Public Sans', sans-serif; }
.sd-kpi span { color: var(--muted, #4A4E7D); font-size: 13px; }
.sd-kpi.zero b { color: var(--muted, #4A4E7D); }
.sd-kpi.k-new { border-left-color: #5459F2; } .sd-kpi.k-cours { border-left-color: #2a78d6; } .sd-kpi.k-ok { border-left-color: #1C6A3A; } .sd-kpi.k-mois { border-left-color: #A19AEE; }

/* filtres */
.sd-panel { background: var(--surface, #fff); border: 1px solid var(--line, #D3D5F0); border-radius: 12px; }
.sd-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line, #D3D5F0); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #D3D5F0); background: transparent; color: var(--muted, #4A4E7D); cursor: pointer; }
.sd-chip[aria-pressed="true"] { background: var(--accent, var(--sd-blue)); border-color: var(--accent, var(--sd-blue)); color: var(--on-accent, #fff); }
.sd-chip i { font-style: normal; opacity: .75; margin-left: 4px; }
.sd-search { margin-left: auto; flex: 0 1 260px; font: inherit; font-size: 14px; color: var(--ink, #0C0E3D); background: var(--surface, #fff); border: 1px solid var(--line, #D3D5F0); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.sd-maj { color: var(--muted, #4A4E7D); font-size: 12.5px; }

/* liste */
.sd-list { list-style: none; margin: 0; padding: 0; }
.sd-row { display: grid; grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line, #D3D5F0); cursor: pointer; }
.sd-row:last-child { border-bottom: 0; }
.sd-row:hover { background: var(--accent-soft, #DFDCFB); }
.sd-row:focus-visible { outline: 3px solid var(--accent, var(--sd-blue)); outline-offset: -3px; }
.sd-row.is-new .sd-nom::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--sd-blue)); margin-right: 7px; vertical-align: 1px; }
.sd-date { font-size: 13px; color: var(--muted, #4A4E7D); }
.sd-date b { display: block; color: var(--ink, #0C0E3D); font-weight: 600; }
.sd-nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-sub { display: block; font-weight: 400; font-size: 13px; color: var(--muted, #4A4E7D); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-cell { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.st-nouvelle { background: var(--sd-new-bg); color: var(--sd-new-fg); }
.st-en_cours { background: var(--sd-cours-bg); color: var(--sd-cours-fg); }
.st-devis { background: var(--sd-devis-bg); color: var(--sd-devis-fg); }
.st-gagnee { background: var(--sd-ok-bg); color: var(--sd-ok-fg); }
.st-perdue { background: var(--sd-ko-bg); color: var(--sd-ko-fg); }
.sd-vide { padding: 36px 16px; text-align: center; color: var(--muted, #4A4E7D); }
.sd-err { padding: 12px 14px; color: var(--sd-crit); font-weight: 600; }

/* boutons */
.sd-btn { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line, #D3D5F0); background: var(--surface, #fff); color: var(--ink, #0C0E3D); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sd-btn:hover { border-color: var(--accent, var(--sd-blue)); }
.sd-btn.accent { background: var(--sd-blue); border-color: var(--sd-blue); color: #fff; }
.sd-btn.danger { color: var(--sd-crit); }
.sd-btn:disabled { opacity: .55; cursor: default; }

/* fiche d'une demande */
.sd-dlg { width: min(640px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #0C0E3D); box-shadow: 0 18px 44px rgba(0,9,120,.25); }
.sd-dlg[open] { display: flex; flex-direction: column; }
.sd-dlg::backdrop { background: rgba(6,8,58,.55); }
.sd-dlg-h { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line, #D3D5F0); }
.sd-dlg-h h2 { font: 700 19px/1.25 'Exo 2', 'Public Sans', sans-serif; margin: 0; }
.sd-dlg-h p { margin: 3px 0 0; color: var(--muted, #4A4E7D); font-size: 13px; }
.sd-x { font: inherit; font-size: 22px; line-height: 1; border: 0; background: none; color: var(--muted, #4A4E7D); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sd-x:hover { background: var(--accent-soft, #DFDCFB); }
.sd-dlg-b { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.sd-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-msg { background: var(--sunken, #F7F7FE); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }
.sd-msg.vide { color: var(--muted, #4A4E7D); font-style: italic; }
.sd-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #4A4E7D); margin-bottom: 6px; }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted, #4A4E7D); }
.sd-f select, .sd-f input, .sd-f textarea { font: inherit; font-size: 14px; font-weight: 400; color: var(--ink, #0C0E3D); background: var(--surface, #fff); border: 1px solid var(--line, #D3D5F0); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.sd-f textarea { min-height: 90px; resize: vertical; }
.sd-suivi { display: flex; gap: 6px; }
.sd-suivi input { flex: 1; }
.sd-trace { font-size: 12.5px; color: var(--muted, #4A4E7D); }
.sd-dlg-f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line, #D3D5F0); }
.sd-dlg-f .sd-r { display: flex; gap: 8px; margin-left: auto; }
.sd-dlg-f .sd-ok { color: #1C6A3A; font-size: 13px; font-weight: 600; align-self: center; }

@media (max-width: 860px) {
  .sd-kpis { grid-template-columns: 1fr 1fr; }
  .sd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom pill" "date date"; gap: 4px 10px; }
  .sd-row .sd-nomc { grid-area: nom; } .sd-row .sd-pillc { grid-area: pill; } .sd-row .sd-date { grid-area: date; }
  .sd-row .sd-date b { display: inline; margin-right: 6px; }
  .sd-row .sd-cell { display: none; }
  .sd-search { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  .sd-main { padding: 14px 12px 40px; }
  .sd-band-in { padding: 14px 16px; }
  .sd-logo { display: none; }
  .sd-grid { grid-template-columns: 1fr; }
}