/* =========================================================
   Espace Particulier – Inner pages (Projets, Notifications)
   Loaded after dashboard-client.css (layout, sidebar, panels)
   File: /particulier2/css/pages-client.css
   ========================================================= */

/* ---------- Page heading ---------- */
.kp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.kp-page-head .kp-welcome {
    margin: 0;
}

.kp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    margin-left: 0.5rem;
    border-radius: 100px;
    background: var(--kp-primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    vertical-align: middle;
}

.kp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -1rem 0 1.5rem;
    font-size: 0.85rem;
    color: var(--kp-muted);
}

.kp-breadcrumb a {
    color: var(--kp-muted);
}

.kp-breadcrumb strong {
    color: var(--kp-text);
    font-weight: 500;
}

.kp-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ---------- Buttons ---------- */
.kp-btn,
.kp-btn-ghost,
.kp-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.kp-btn {
    border: 2px solid var(--kp-primary);
    background: var(--kp-primary);
    color: #ffffff;
}

.kp-btn:hover {
    background: var(--kp-primary-dark);
    border-color: var(--kp-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

.kp-btn-ghost {
    border: 2px solid var(--kp-primary);
    background: transparent;
    color: var(--kp-primary-dark);
}

.kp-btn-ghost:hover {
    background: var(--kp-primary);
    color: #ffffff;
    text-decoration: none;
}

.kp-btn-light {
    border: 1px solid var(--kp-border);
    background: #f2f6ef;
    color: var(--kp-text);
}

.kp-btn-light:hover {
    background: #e9edf0;
    color: var(--kp-text);
    text-decoration: none;
}

.kp-btn svg,
.kp-btn-ghost svg,
.kp-btn-light svg,
.kp-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--kp-border);
    background: #ffffff;
    color: var(--kp-primary-dark);
    transition: background 0.2s, color 0.2s;
}

.kp-icon-btn:hover {
    background: var(--kp-primary);
    border-color: var(--kp-primary-dark);
    color: #ffffff;
}

/* ---------- Status badges ---------- */
.kp-status {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.kp-badge {
    display: inline-block;
    width: fit-content;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.kp-badge.yellow { background: #fbeee7; color: #b85a2e; }
.kp-badge.green  { background: #e3f4ed; color: #23805e; }
.kp-badge.orange { background: #fff3dc; color: #a86a00; }
.kp-badge.blue   { background: #e5ecf8; color: #2c4f92; }
.kp-badge.red    { background: #fbe7e4; color: #b42d17; }
.kp-badge.black  { background: #e6e9ec; color: #2c3a44; }

.progBar {
    height: 3px;
    border-radius: 500px;
    background: #e9edf0;
}

.step0   { width: 0; }
.step15  { width: 15%; }
.step20  { width: 20%; }
.step30  { width: 30%; }
.step45  { width: 45%; }
.step60  { width: 60%; }
.step75  { width: 75%; }
.step100 { width: 100%; }

.progBar.yellow { background: #d6774b; }
.progBar.green  { background: var(--kp-green); }
.progBar.black  { background: #4c4c4c; }
.progBar.red    { background: #cb4d4d; }
.progBar.orange { background: var(--kp-orange); }
.progBar.blue   { background: var(--kp-blue); }

/* ---------- Filters (Projets) ---------- */
.kp-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.kp-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.kp-field label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kp-muted);
}

.kp-field input,
.kp-field select {
    width: 100%;
    height: 46px;
    padding: 0 0.9rem;
    border: 1px solid #d3dbe1;
    border-radius: 6px;
    background: #ffffff;
    color: var(--kp-text);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kp-field input:focus,
.kp-field select:focus {
    outline: none;
    border-color: var(--kp-primary-dark);
    box-shadow: 0 0 0 3px rgba(79, 138, 54, 0.15);
}

.kp-filters .kp-btn {
    height: 46px;
    padding: 0 1.75rem;
}

/* ---------- Table (Projets desktop) ---------- */
.kp-table-wrap {
    overflow-x: auto;
}

.kp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.kp-table th {
    padding: 0.9rem 1rem;
    background: #f2f6ef;
    border-bottom: 2px solid var(--kp-border);
    color: var(--kp-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.kp-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--kp-border);
    vertical-align: middle;
}

.kp-table tbody tr {
    transition: background 0.15s;
}

.kp-table tbody tr:hover {
    background: #f5f9f2;
}

.kp-table td a {
    color: var(--kp-text);
    text-decoration: none;
}

.kp-table td a:hover {
    color: var(--kp-primary-dark);
}

.kp-table td.kp-id a {
    font-weight: 700;
    color: var(--kp-primary-dark);
}

.kp-table td.kp-nowrap {
    white-space: nowrap;
}

/* Message indicators */
.newNot {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.newNot img {
    width: 15px;
}

.newNot p,
.newNot .notNum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--kp-red);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ---------- Project cards (Projets mobile) ---------- */
.kp-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kp-proj-card {
    position: relative;
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    background: #ffffff;
    color: var(--kp-text);
    text-decoration: none;
}

.kp-proj-card:hover {
    color: var(--kp-text);
    border-color: var(--kp-primary-dark);
    text-decoration: none;
}

.kp-proj-card h5 {
    margin: 0 0 0.5rem;
    padding-right: 3rem;
    font-size: 1rem;
    font-weight: 700;
}

.kp-proj-card p {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    color: var(--kp-muted);
}

.kp-proj-card p b {
    color: var(--kp-text);
}

.kp-proj-card .kp-status {
    margin: 0.5rem 0;
}

.kp-proj-msg {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ---------- Empty state ---------- */
.kp-empty {
    padding: 2.5rem 1.5rem;
    border: 1px dashed #c3ccd3;
    border-radius: var(--kp-radius);
    background: #f2f6ef;
    color: var(--kp-muted);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/* =========================================================
   Notifications page (notifications.php)
   Item styles shared with the bell dropdown (header-client.css)
   ========================================================= */
.kp-noti-panel-page {
    max-width: 900px;
}

.kp-tabs-head {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.kp-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 4px;
    border-radius: 100px;
    background: var(--kp-bg);
}

.kp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--kp-muted);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.kp-tab span {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 100px;
    background: #ffffff;
    color: var(--kp-muted);
    font-size: 0.75rem;
    line-height: 20px;
    text-align: center;
}

.kp-tab.is-active {
    background: #ffffff;
    color: var(--kp-primary-dark);
    box-shadow: 0 1px 4px rgba(31, 56, 22, 0.1);
}

.kp-tab.is-active span {
    background: var(--kp-primary);
    color: #ffffff;
}

.kp-noti-day {
    margin: 1rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--kp-muted);
}

.kp-noti-day:first-child {
    margin-top: 0;
}

.kp-noti-page .kp-noti-list {
    padding: 0;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    overflow: hidden;
}

.kp-noti-page .kp-noti-list li + li {
    border-top: 1px solid var(--kp-border);
}

.kp-noti-page .kp-noti-item {
    border-radius: 0;
    padding: 0.85rem 1rem;
}

.kp-noti-page .kp-noti-item.is-unread {
    background: #f7fbf4;
}

.kp-noti-page .kp-noti-item.is-unread:hover {
    background: var(--kp-primary-soft);
}

.kp-noti-page .kp-noti-item.is-unread .kp-noti-top b::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--kp-primary);
    vertical-align: middle;
}

.kp-noti-hour {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--kp-muted);
    font-variant-numeric: tabular-nums;
}

.kp-noti-more {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--kp-muted);
    text-align: center;
}


/* =========================================================
   Espace Particulier additions
   ========================================================= */
.kp-btn svg,
.kp-btn-ghost svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kp-btn,
.kp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.kp-mt-1 {
    margin-top: 1rem;
}

.kp-filter-reset {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
}

.kp-filter-reset a {
    color: var(--kp-primary-dark);
    font-weight: 600;
}

.kp-cards li {
    position: relative;
}

/* Message counter pill (table + cards + dashboard) */
.kp-msg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 28px;
    padding: 0 0.6rem;
    border-radius: 100px;
    background: var(--kp-primary-soft);
    color: var(--kp-primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.kp-msg-pill svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.kp-msg-pill.has-unread {
    background: var(--kp-red);
    color: #ffffff;
}

/* Table on desktop, cards on mobile (replaces user-agent sniffing) */
.kp-only-mobile { display: none !important; }

@media (max-width: 798.98px) {
    .kp-only-mobile { display: flex !important; }
    .kp-only-desktop { display: none !important; }
}

@media (max-width: 991.98px) {
    .kp-filters {
        grid-template-columns: 1fr 1fr;
    }

    .kp-filters .kp-field:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .kp-filters {
        grid-template-columns: 1fr;
    }

    .kp-filters .kp-btn,
    .kp-page-head .kp-btn {
        width: 100%;
    }
}

/* Counter next to the page title stays white (the title span rule would colour it) */
.kp-welcome .kp-count {
    color: #ffffff;
}

.kp-field input,
.kp-field select {
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================================
   Forms (Mon compte, Parrainage)
   ========================================================= */
.kp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
}

.kp-col-2 {
    grid-column: 1 / -1;
}

.kp-field label small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.kp-field input[readonly] {
    background: #f5f8f3;
    color: var(--kp-text);
    cursor: default;
}

.kp-field input[readonly]:focus {
    border-color: #d3dbe1;
    box-shadow: none;
}

form.is-editing .kp-field input:not([readonly]) {
    background: #ffffff;
    border-color: #b9cfae;
}

.kp-static {
    display: flex;
    align-items: center;
    height: 46px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kp-form-note {
    margin: 0 0 1.1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--kp-primary-soft);
    color: var(--kp-text);
    font-size: 0.9rem;
}

.kp-form-hint {
    margin: 1rem 0 0;
    color: var(--kp-muted);
    font-size: 0.82rem;
}

.kp-form-actions {
    display: flex;
    justify-content: flex-end;
}

.kp-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.kp-field-error {
    margin: 0;
    color: var(--kp-red);
    font-size: 0.82rem;
    font-weight: 500;
}

.kp-link-small {
    align-self: flex-start;
    color: var(--kp-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Edit switch */
.kp-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.kp-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kp-switch-track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 100px;
    background: #c5cec0;
    transition: background 0.2s;
}

.kp-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.kp-switch input:checked + .kp-switch-track {
    background: var(--kp-primary);
}

.kp-switch input:checked + .kp-switch-track::after {
    transform: translateX(20px);
}

.kp-switch input:focus-visible + .kp-switch-track {
    outline: 3px solid rgba(79, 138, 54, 0.35);
    outline-offset: 2px;
}

.kp-switch-text {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--kp-muted);
}

.kp-switch input:checked ~ .kp-switch-text {
    color: var(--kp-primary-dark);
}

/* Collapsible panel (password) */
.kp-collapse > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kp-text);
    cursor: pointer;
    list-style: none;
}

.kp-collapse > summary::-webkit-details-marker {
    display: none;
}

.kp-collapse > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.kp-collapse[open] > summary::after {
    transform: rotate(-135deg);
}

.kp-collapse > summary svg {
    width: 22px;
    height: 22px;
    stroke: var(--kp-primary-dark);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.kp-collapse[open] > summary {
    border-bottom: 1px solid var(--kp-border);
}

/* Password input */
.kp-pass {
    position: relative;
}

.kp-pass input {
    padding-right: 3rem;
}

.kp-pass-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kp-muted);
    transform: translateY(-50%);
}

.kp-pass-eye:hover,
.kp-pass-eye.is-on {
    color: var(--kp-primary-dark);
    background: var(--kp-primary-soft);
}

.kp-pass-eye svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.kp-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.kp-rules li {
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    background: #eef1ec;
    color: var(--kp-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.kp-rules li.satisfied {
    background: var(--kp-primary);
    color: #ffffff;
}

.kp-rules li.satisfied::before {
    content: "✓ ";
}

/* Chips */
.kp-id-chip,
.kp-step-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    background: var(--kp-card);
    color: var(--kp-muted);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--kp-shadow);
}

.kp-step-chip {
    background: var(--kp-primary-soft);
    color: var(--kp-primary-dark);
    box-shadow: none;
}

/* Profiles / referrals list */
.kp-profiles {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.kp-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    color: var(--kp-text);
    text-decoration: none;
}

a.kp-profile:hover {
    border-color: var(--kp-primary);
    background: var(--kp-primary-soft);
    color: var(--kp-text);
    text-decoration: none;
}

.kp-profile .kp-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
}

.kp-profile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kp-profile-body small {
    color: var(--kp-muted);
}

.kp-profile-edit svg {
    width: 20px;
    height: 20px;
    stroke: var(--kp-primary-dark);
    fill: none;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.kp-dashed-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1.5px dashed #a9c49b;
    border-radius: var(--kp-radius);
    color: var(--kp-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.kp-dashed-add:hover {
    background: var(--kp-primary-soft);
    color: var(--kp-primary-dark);
    text-decoration: none;
}

.kp-dashed-add svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Promo card (referral) */
.kp-promo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--kp-radius);
    background: var(--kp-primary);
    color: #ffffff;
    text-decoration: none;
}

.kp-promo:hover {
    background: var(--kp-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

.kp-promo b {
    display: block;
    font-size: 1.05rem;
}

.kp-promo small {
    opacity: 0.9;
}

.kp-promo-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--kp-primary-dark);
}

.kp-promo-ico svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

/* Alerts */
.kp-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--kp-radius);
    background: var(--kp-primary-soft);
    color: var(--kp-text);
    font-size: 0.92rem;
}

form .kp-alert {
    margin: 1rem 0 0;
}

.kp-alert[hidden] {
    display: none;
}

.kp-alert svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.kp-alert strong {
    display: block;
}

.kp-alert.is-warn  { background: #fdf3e2; color: #7a4a00; }
.kp-alert.is-error { background: #fdecea; color: #a12a14; }
.kp-alert.is-ok    { background: var(--kp-primary-soft); color: var(--kp-primary-dark); font-weight: 600; }

/* =========================================================
   Mes devis
   ========================================================= */
.kp-quotes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-quotes li[hidden] {
    display: none;
}

.kp-quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    background: #ffffff;
}

.kp-quote.is-todo {
    border-color: #ecc98a;
    background: #fffaf1;
}

.kp-quote-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--kp-primary-soft);
    color: var(--kp-primary-dark);
}

.kp-quote.is-todo .kp-quote-ico {
    background: #fdf1e4;
    color: #b4651c;
}

.kp-quote-ico svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.kp-quote-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kp-quote-pro {
    margin: 0.15rem 0 0;
    font-weight: 500;
}

.kp-quote-meta {
    margin: 0.1rem 0 0;
    color: var(--kp-muted);
    font-size: 0.85rem;
}

.kp-quote-amount {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.kp-quote-actions {
    display: flex;
    gap: 0.5rem;
}

.kp-quote-actions .kp-btn,
.kp-quote-actions .kp-btn-ghost {
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    white-space: nowrap;
}

/* =========================================================
   Parrainage
   ========================================================= */
.kp-par-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.75rem 2rem;
    border-radius: 14px;
    background: var(--kp-primary);
    color: #ffffff;
}

.kp-par-hero h3 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.kp-par-hero p {
    margin: 0;
    opacity: 0.94;
    line-height: 1.55;
}

.kp-par-steps {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-par-steps li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 500;
}

.kp-par-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--kp-primary-dark);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 991.98px) {
    .kp-par-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .kp-quote {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .kp-quote-actions {
        grid-column: 1 / -1;
    }

    .kp-quote-actions a {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    .kp-form-grid {
        grid-template-columns: 1fr;
    }

    .kp-form-actions .kp-btn {
        width: 100%;
    }

    .kp-par-hero {
        padding: 1.4rem 1.25rem;
    }

    .kp-quote {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .kp-quote-amount {
        grid-column: 2;
    }

    .kp-collapse > summary {
        padding: 1rem 1.25rem;
    }
}

.kp-empty {
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.6;
}

/* ---------- Projects list: hide filters on mobile when < 10 projects ---------- */
@media (max-width: 798.98px) {
    .kp-filters-panel.kp-hide-mobile { display: none !important; }
}