/* ═══════════════════════════════════════════════════════════
   KLAMPAC — Espace client (après connexion) — version sobre
   Nécessite : theme/klampac-theme.css et devis/devis.css. Classes .kle-
   ═══════════════════════════════════════════════════════════ */
.kle { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--kl-ink, #111A33); max-width: 1120px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 48px) 96px; box-sizing: border-box }
.kle[hidden], .kle.hidden { display: none !important; }
.kle *, .kle *::before, .kle *::after { box-sizing: border-box }
.kle button { font: inherit }
.kle button:not(.kld-btn) { color: inherit }
.kle .kle-link, .kle button.kle-link { color: var(--kl-blue, #1E2F65) }

/* En-tête du compte */
.kle-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.kle-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1 }
.kle-head p { margin: 8px 0 0; font-size: 15px; color: var(--kl-muted, #677087) }
.kle-logout { background: none; border: 0; padding: 0; font-size: 14px; color: var(--kl-muted, #677087); text-decoration: underline; text-underline-offset: 4px; cursor: pointer }
.kle-logout:hover { color: var(--kl-ink, #111A33) }

/* Onglets */
.kle-tabs { display: flex; gap: 32px; margin-top: 32px; border-bottom: 1px solid var(--kl-line, #E3E6EE); overflow-x: auto; scrollbar-width: none }
.kle-tabs::-webkit-scrollbar { display: none }
.kle-tabs button { position: relative; flex: 0 0 auto; padding: 0 0 14px; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--kl-muted, #677087); cursor: pointer; white-space: nowrap }
.kle-tabs button:hover { color: var(--kl-ink, #111A33) }
.kle-tabs button.is-active { color: var(--kl-ink, #111A33) }
.kle-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kl-blue, #1E2F65) }
.kle-panel { padding-top: 32px }
.kle-panel[hidden] { display: none !important }

.kle-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap }
.kle-bar p { margin: 0; font-size: 14px; color: var(--kl-muted, #677087) }
.kle-link { font-size: 14px; font-weight: 600; color: var(--kl-blue, #1E2F65); text-decoration: none }
.kle-link:hover { text-decoration: underline; text-underline-offset: 4px }

/* Tableau des demandes */
.kle-table { width: 100%; border-top: 1px solid var(--kl-line, #E3E6EE) }
.kle-th, .kle-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 24px; gap: 16px; align-items: center }
.kle-th { padding: 12px 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kl-muted, #677087); border-bottom: 1px solid var(--kl-line, #E3E6EE) }
.kle-item-wrap { border-bottom: 1px solid var(--kl-line, #E3E6EE) }
.kle-row { width: 100%; padding: 18px 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 15px }
.kle-row:hover .kle-ref { text-decoration: underline; text-underline-offset: 4px }
.kle-ref { font-weight: 600 }
.kle-muted { color: var(--kl-muted, #677087) }
.kle-state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px }
.kle-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9AA3B5 }
.kle-state[data-s="etude"]::before { background: #D99A2B }
.kle-state[data-s="devis"]::before { background: var(--kl-blue, #1E2F65) }
.kle-state[data-s="valide"]::before { background: #2E8B57 }
.kle-chev { width: 18px; height: 18px; fill: none; stroke: var(--kl-muted, #677087); stroke-width: 1.8; transition: transform .25s }
.kle-item-wrap.is-open .kle-chev { transform: rotate(180deg) }

/* Détail */
.kle-detail { display: none; padding: 4px 0 28px }
.kle-item-wrap.is-open .kle-detail { display: block }
.kle-track { display: flex; gap: 4px; margin: 0 0 24px; font-size: 13px; color: var(--kl-muted, #677087) }
.kle-track span { flex: 1; padding-top: 10px; border-top: 2px solid var(--kl-line, #E3E6EE) }
.kle-track span.done { border-color: var(--kl-blue, #1E2F65); color: var(--kl-ink, #111A33) }

.kle-lines { display: grid; gap: 16px }
.kle-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center }
.kle-line .kle-img { width: 72px; height: 86px; background: #F5F5F5 }
.kle-line .kle-img img { width: 100%; height: 100%; object-fit: contain; display: block }
.kle-line b { display: block; font-size: 15px; font-weight: 500 }
.kle-line small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--kl-muted, #677087) }
.kle-line .q { font-size: 15px; white-space: nowrap }
.kle-actions { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--kl-line, #E3E6EE) }
.kle-actions a, .kle-actions button { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--kl-blue, #1E2F65); text-decoration: none; cursor: pointer }
.kle-actions a:hover, .kle-actions button:hover { text-decoration: underline; text-underline-offset: 4px }

/* Aucune demande */
.kle-empty { padding: 56px 0; border-top: 1px solid var(--kl-line, #E3E6EE) }
.kle-empty h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500 }
.kle-empty p { margin: 0 0 22px; max-width: 46ch; color: var(--kl-muted, #677087); line-height: 1.6 }
.kle-empty .kld-btn { display: inline-flex; width: auto; max-width: max-content; border-radius: 4px; padding: 0 32px }

/* Profil */
.kle-profile { max-width: 640px; display: grid; gap: 14px }
.kle-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.kle-section { margin: 18px 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kl-muted, #677087) }
.kle-profile .kld-fld input, .kle-profile .kld-fld select { border-radius: 4px; background: #fff }
.kle-save { display: flex; align-items: center; gap: 16px; margin-top: 8px }
.kle-save .kld-btn { width: auto; border-radius: 4px; padding: 0 32px; white-space: nowrap }
.kle-saved { font-size: 14px; color: #2E8B57 }
.kle-pass { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--kl-line, #E3E6EE); border-bottom: 1px solid var(--kl-line, #E3E6EE); margin-top: 28px; max-width: 640px; flex-wrap: wrap }
.kle-pass b { display: block; font-weight: 500 } .kle-pass small { color: var(--kl-muted, #677087) }

/* Mobile */
@media (max-width: 760px) {
  .kle-th { display: none }
  .kle-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref chev" "date chev" "state chev"; row-gap: 4px; padding: 16px 0 }
  .kle-row > :nth-child(1) { grid-area: ref }
  .kle-row > :nth-child(2) { grid-area: date; font-size: 14px }
  .kle-row > :nth-child(3) { display: none }
  .kle-row > :nth-child(4) { grid-area: state; margin-top: 4px }
  .kle-row > :nth-child(5) { grid-area: chev }
  .kle-track { flex-wrap: wrap; row-gap: 10px } .kle-track span { flex: 1 1 45% }
  .kle-line { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px } .kle-line .kle-img { width: 60px; height: 72px }
  .kle-row2.kle-stack { grid-template-columns: 1fr }
  .kle-save .kld-btn { width: 100% }
  .kle-empty .kld-btn { width: 100%; max-width: none }
}

/* ─── Recherche, sélection, suppression ─── */
.kle-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.kle-search { position: relative; flex: 1 1 280px; max-width: 420px }
.kle-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--kl-muted, #677087); stroke-width: 1.8; pointer-events: none }
.kle-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--kl-line, #E3E6EE); border-radius: 4px; background: #fff; font: inherit; font-size: 15px; color: inherit; outline: none; -webkit-appearance: none; appearance: none }
.kle-search input:focus { border-color: var(--kl-blue, #1E2F65) }
.kle-tools .kle-spacer { flex: 1 }
.kle-tbtn { height: 44px; padding: 0 16px; border: 1px solid var(--kl-line, #E3E6EE) !important; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap }
.kle-tbtn:hover { border-color: #C9CFDC !important }
.kle-tbtn.is-on { border-color: var(--kl-blue, #1E2F65) !important; color: var(--kl-blue, #1E2F65) !important }

.kle-check { display: none !important; width: 18px; height: 18px; margin: 0; accent-color: var(--kl-blue, #1E2F65); cursor: pointer }
.kle.is-select .kle-check { display: block !important }
.kle.is-select .kle-th, .kle.is-select .kle-rowline { grid-template-columns: 28px 1.3fr 1fr 1fr 1.2fr 24px }
.kle-rowline { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 24px; gap: 16px; align-items: center; padding: 18px 0; font-size: 15px }
.kle-rowline > .kle-check:not(:checked) + .kle-ref {}
.kle-th > .kle-check { display: none !important }
.kle.is-select .kle-th > .kle-check { display: block !important; visibility: hidden }
.kle-th { grid-template-columns: 1.3fr 1fr 1fr 1.2fr 24px }
.kle-row-click:hover .kle-ref { text-decoration: underline; text-underline-offset: 4px }
.kle-rowline .kle-row { display: contents }
.kle-rowline > .kle-check { align-self: center }

.kle-selbar { position: sticky; bottom: 0; z-index: 5; display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; background: #fff; border-top: 1px solid var(--kl-line, #E3E6EE); font-size: 14px }
.kle.is-select .kle-selbar { display: flex }
.kle-selbar label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer }
.kle-selbar input { width: 18px; height: 18px; margin: 0; accent-color: var(--kl-blue, #1E2F65) }
.kle-del { height: 42px; padding: 0 18px; border: 1px solid #C8352D !important; border-radius: 4px; background: #fff; color: #C8352D !important; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap }
.kle-del:hover:not(:disabled) { background: #C8352D; color: #fff !important }
.kle-del:disabled { opacity: .4; cursor: default }
.kle-actions .kle-danger { color: #C8352D !important; margin-left: auto }
.kle-noresult { padding: 40px 0; color: var(--kl-muted, #677087); border-top: 1px solid var(--kl-line, #E3E6EE) }

/* Fenêtre de confirmation */
.kle-modal, .kle-toast { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif }
.kle-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(17, 26, 51, .45) }
.kle-modal[hidden] { display: none }
.kle-modal-box { width: 100%; max-width: 420px; background: #fff; border-radius: 6px; padding: 26px; box-shadow: 0 30px 60px -20px rgba(17,26,51,.4) }
.kle-modal-box h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600 }
.kle-modal-box p { margin: 0 0 22px; color: var(--kl-muted, #677087); line-height: 1.55; font-size: 14.5px }
.kle-modal-actions { display: flex; justify-content: flex-end; gap: 10px }
.kle-modal-actions button { height: 42px; padding: 0 18px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer }
.kle-cancel { border: 1px solid var(--kl-line, #E3E6EE) !important; background: #fff }
.kle-confirm { border: 0 !important; background: #C8352D; color: #fff !important }

/* Message en bas « Demande supprimée · Annuler » */
.kle-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1001; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 6px; background: var(--kl-ink, #111A33); color: #fff; font-size: 14px; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s, visibility 0s .35s; max-width: calc(100% - 32px); opacity: 0; visibility: hidden }
.kle-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s }
.kle-toast > span { white-space: nowrap }
.kle-toast button { background: none; border: 0; color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 }

@media (max-width: 760px) {
  .kle-tools { flex-wrap: nowrap; gap: 8px }
  .kle-search { max-width: none; flex: 1 1 auto; min-width: 0 }
  .kle-search input { font-size: 16px }
  .kle-tools .kle-spacer { display: none }
  .kle-rowline, .kle.is-select .kle-rowline { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chk ref chev" "chk date chev" "chk state chev"; row-gap: 4px; padding: 16px 0; column-gap: 14px }
  .kle-rowline > .kle-check { grid-area: chk; align-self: start; margin-top: 3px }
  .kle-rowline > :nth-child(2) { grid-area: ref } .kle-rowline > :nth-child(3) { grid-area: date; font-size: 14px }
  .kle-rowline > :nth-child(4) { display: none } .kle-rowline > :nth-child(5) { grid-area: state; margin-top: 4px } .kle-rowline > :nth-child(6) { grid-area: chev }
  .kle-actions .kle-danger { margin-left: 0 }
}