.lx-filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* Base */
.lx-filter-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    border:2px solid transparent;
    border-radius:999px;
    padding:7px 12px;

    font-weight:700;
    font-size:13px;
    line-height:1;

    background:#fff;
    text-decoration:none;

    /* neutralise Bootstrap */
    box-shadow:none !important;
    outline:0;
    color:inherit;
}

/* Evite que Bootstrap remplace les couleurs au hover */
.lx-filter-btn:hover,
.lx-filter-btn:focus,
.lx-filter-btn:focus-visible{
    box-shadow:none !important;
    outline:0;
}

/* Couleurs par statut */
.lx-filter-btn--won{
    border-color: var(--lx-status-won);
    color: var(--lx-status-won);
}
.lx-filter-btn--inprogress{
    border-color: var(--lx-status-in-progress);
    color: var(--lx-status-in-progress);
}
.lx-filter-btn--lost{
    border-color: var(--lx-status-lost);
    color: var(--lx-status-lost);
}

/* Hover OFF => bordure reste + petit fond très léger */
.lx-filter-btn--won:hover{ background: color-mix(in srgb, var(--lx-status-won) 12%, #fff); }
.lx-filter-btn--inprogress:hover{ background: color-mix(in srgb, var(--lx-status-in-progress) 12%, #fff); }
.lx-filter-btn--lost:hover{ background: color-mix(in srgb, var(--lx-status-lost) 12%, #fff); }

/* ON */
.lx-filter-btn.is-on{
    color:#fff !important;
}
.lx-filter-btn--won.is-on{ background: var(--lx-status-won); }
.lx-filter-btn--inprogress.is-on{ background: var(--lx-status-in-progress); }
.lx-filter-btn--lost.is-on{ background: var(--lx-status-lost); }

/* Hover ON => garde la couleur + léger assombrissement */
.lx-filter-btn.is-on:hover{
    filter: brightness(.95);
}

/* focus visible => accessible + cohérent */
.lx-filter-btn:focus-visible{
    outline: 2px solid rgba(0,0,0,.25);
    outline-offset: 2px;
}

.lx-filter-btn i{ font-size:14px; line-height:1; }


/* ============================
   LIENS DE PAIEMENT
   ============================ */

.lx-payment-links-table{
    height:220px;
    overflow-y:auto;
    overflow-x:auto;
}

.lx-payment-links-table table{
    margin-bottom:0;
}

.lx-payment-links-table thead{
    position:sticky;
    top:0;
    z-index:2;
}

.lx-payment-links-table thead th{
    background:#fff;
}
/* Fiche et ajout prospect : composants Bootstrap + identité Logibox. */
.lx-lead-page {
    --lx-lead-client: #426b81;
    --lx-lead-gold: #edc447;
    --lx-lead-mint: #92c2bf;
    --lx-lead-teal: #518486;
    color: var(--lx-text-body);
    max-width: 1600px;
    margin: 0 auto;
}

.lx-lead-banner,
.lx-lead-contact-strip { max-width: 830px; }
.lx-lead-banner .lx-linkRow__dot { width: 72px; height: 72px; flex-basis: 72px; }
.lx-lead-banner .lx-linkRow__text {
    min-height: 54px;
    padding-right: 24px;
    white-space: normal;
    overflow: visible;
    gap: 16px;
}
.lx-lead-banner h1 { font-size: clamp(1.25rem, 2vw, 2rem); overflow-wrap: anywhere; }
.lx-lead-contact-strip { background: #edf0f2; border: 1px solid #b4c6d0; }
.lx-lead-contact-strip a { text-decoration: none; }
.lx-lead-contact-strip a:hover { text-decoration: underline; }

.lx-lead-tabs { border: 0; gap: 0; padding-left: 4px; }
.lx-lead-tabs .nav-link {
    border: 0;
    border-radius: 0;
    padding: 9px 34px;
    color: var(--lx-text-dark);
    background: #e9ecef;
    font-size: 1.1rem;
}
.lx-lead-tabs .nav-link.active { background: var(--lx-brand-primary); color: #fff; }
.lx-lead-tabs .lx-lead-tab--reservations:not(.active) { background: #f9df4b; }
.lx-lead-tabs .nav-link:disabled { color: #89939a; background: transparent; }
.lx-lead-frame { border: 2px solid var(--lx-brand-primary); background: var(--lx-white); }
.lx-lead-panel { border: 2px solid var(--lx-panel-color); min-width: 0; }
.lx-lead-panel--client { --lx-panel-color: var(--lx-lead-client); }
.lx-lead-panel--request { --lx-panel-color: var(--lx-lead-gold); }
.lx-lead-panel--need { --lx-panel-color: var(--lx-lead-mint); }
.lx-lead-panel--activity { --lx-panel-color: var(--lx-lead-teal); }
.lx-lead-panel__heading {
    background: var(--lx-panel-color);
    color: #fff;
    min-height: 34px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.lx-lead-panel__heading h2 { font-size: .85rem; font-weight: 600; }
.lx-lead-panel__heading .btn { font-size: .7rem; padding: 2px 9px; border-radius: 2px; white-space: nowrap; }
/* Garder la palette de la maquette avec un texte lisible sur les fonds clairs. */
.lx-lead-panel--request > .lx-lead-panel__heading,
.lx-lead-panel--need > .lx-lead-panel__heading { color: var(--lx-brand-secondary); }
.lx-lead-panel--request > .lx-lead-panel__heading .btn,
.lx-lead-panel--need > .lx-lead-panel__heading .btn { --bs-btn-color: var(--lx-brand-secondary); --bs-btn-border-color: currentColor; }
.lx-lead-facts { font-size: .78rem; display: grid; gap: 10px; }
.lx-lead-facts > div { display: grid; grid-template-columns: 43% minmax(0, 1fr); gap: 10px; align-items: baseline; }
.lx-lead-facts dt { text-align: right; font-weight: 400; }
.lx-lead-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lx-lead-notes { background: #edf0f2; border: 1px solid #b4c6d0; border-radius: 0; min-height: 76px; }
.lx-lead-page--create .form-select,
.lx-lead-page--create .form-control:not(textarea) { background-color: #e5e7e4; border-radius: 0; border-color: #d9ddd9; font-size: .78rem; }
.lx-lead-page--create .col-form-label { font-size: .78rem; }
.lx-lead-page--create textarea { min-height: 235px; }
.lx-lead-table { font-size: .7rem; --bs-table-color: var(--lx-text-body); }
.lx-lead-table thead { --bs-table-bg: #2d6d79; --bs-table-color: #fff; }
.lx-lead-table--quotes thead { --bs-table-bg: var(--lx-lead-gold); --bs-table-color: var(--lx-brand-secondary); }
.lx-lead-table th { font-size: .78rem; padding: 7px 8px; }
.lx-lead-table td { padding: 7px 5px; border-bottom-color: #f0f2f3; }
.lx-lead-history { min-height: 250px; border: 1px solid #2d6d79; }
.lx-lead-history table { min-width: 650px; }
.lx-lead-chip { font-size: .66rem; font-weight: 500; }
.lx-lead-chip--primary { background: var(--lx-brand-primary); }
.lx-lead-chip--blue { background: #397ca5; }
.lx-lead-chip--gold { background: var(--lx-lead-gold); color: var(--lx-brand-secondary); }
.lx-lead-chip--green { background: var(--lx-brand-accent); color: #243a00; }
.lx-lead-chip--red { background: #d83832; }
.lx-lead-avatar { display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid #b4c6d0; border-radius: 50%; font-size: .58rem; color: var(--lx-brand-primary); background: #edf0f2; }
.lx-lead-icon { --bs-btn-padding-x: 3px; --bs-btn-padding-y: 1px; --bs-btn-font-size: .7rem; --bs-btn-border-radius: 2px; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lx-brand-secondary); }
.lx-lead-icon--view { --bs-btn-bg: #285e63; }
.lx-lead-icon--send { --bs-btn-bg: #397ca5; }
.lx-lead-icon--delete { --bs-btn-bg: #c84242; }
@media (max-width: 767.98px) {
    .lx-lead-banner .lx-linkRow__text { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; padding-right: 16px; gap: 8px; }
    .lx-lead-tabs .nav-link { padding: 8px 12px; font-size: .9rem; }
    .lx-lead-contact-strip { justify-content: flex-start !important; }
}

/* Actions commerciales : styles limités à cet écran. */
.lx-actions-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.lx-actions-layout > * { min-width: 0; }
.lx-actions-page .lx-action-card { display: block; width: 100%; text-align: left; border: 2px solid transparent; border-left: 5px solid var(--lx-action-color); border-radius: 16px; background: color-mix(in srgb, var(--lx-action-color) 10%, white); padding: 12px; margin-bottom: 10px; color: var(--lx-text-dark); }
.lx-actions-page .lx-action-card[aria-pressed="true"] { border-color: var(--lx-action-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lx-action-color) 20%, transparent); }
.lx-actions-page .lx-action-card:focus-visible { outline: 3px solid var(--lx-brand-primary); outline-offset: 2px; }
.lx-actions-page .lx-action-card--call, .lx-actions-page .lx-action-card--followup { --lx-action-color: #007780; }
.lx-actions-page .lx-action-card--visit, .lx-actions-page .lx-action-card--reservation { --lx-action-color: #518486; }
.lx-actions-page .lx-action-card--sms, .lx-actions-page .lx-action-card--email { --lx-action-color: #bc6244; }
.lx-actions-page .lx-action-card.is-completed { --lx-action-color: #607060; }
.lx-actions-page .lx-action-description { overflow-wrap: anywhere; white-space: pre-wrap; }
.lx-actions-page .lx-lead-tabs .nav-link { padding: 9px 18px; }
@media (max-width: 991.98px) { .lx-actions-layout { grid-template-columns: minmax(0, 1fr); } }


/* Préserve les retours à la ligne des messages sans interpréter de HTML. */
.lx-communication-preview {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Habillage des seuls devis, partagé par la création et la consultation. */
.lx-quote-dialog { --bs-modal-width: 960px; }
.lx-quote-dialog:not(.lx-quote-dialog--wide) { margin-top: max(28px, 10vh); }
.modal-dialog:has([data-quote-editor]), .lx-quote-dialog--wide { width: calc(100% - 32px); max-width: none; margin: 16px auto; }
.lx-quote-modal { color: #37414b; }
.lx-quote-modal .modal-body { padding: 20px 24px 0; }
.lx-quote-validity { display: grid; grid-template-columns: 170px minmax(0, 360px); align-items: center; gap: 16px; margin: 0 0 20px; font-size: 16px; }
.lx-quote-validity > label { text-align: right; }
/* Les box se répartissent sur plusieurs lignes sans défilement horizontal. */
.lx-quote-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 8px; align-items: start; }
.lx-quote-box, .lx-quote-add { min-width: 0; width: 100%; }
.lx-quote-box-card { position: relative; border: 3px solid #233f58; min-height: 490px; display: flex; flex-direction: column; }
.lx-quote-box-fields { padding: 14px 14px 8px; }
.lx-quote-field { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.lx-quote-field > span { text-align: right; white-space: nowrap; }
.lx-quote-field sup, .lx-quote-validity sup { font-size: 10px; }
.lx-quote-field:last-of-type { margin-bottom: 10px; }
.lx-quote-options { margin: 0 0 8px; font-size: 14px; }
.lx-quote-options legend { float: none; width: 100%; text-align: center; font-size: inherit; font-weight: 700; line-height: 1.25; margin-bottom: 6px; }
.lx-quote-options label { line-height: 1.35; }
.lx-quote-options > div { display: flex; flex-direction: column; gap: 4px; padding: 0 18px; }
.lx-quote-options--features > div { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 18px; gap: 10px; }
.lx-quote-modal .form-check-input { width: 18px; height: 18px; border: 2px solid #46515a; border-radius: 3px; flex-shrink: 0; }
.lx-quote-modal .form-check-input:checked { background-color: #355a78; }
.lx-quote-modal .form-check-input:disabled { opacity: 1; }
.lx-quote-modal .form-check-input:disabled ~ * { opacity: 1; }
.lx-quote-prices { margin-top: auto; text-align: center; padding-bottom: 10px; font-size: 14px; }
.lx-quote-prices h4 { background: #233f58; color: #fff; font-size: 16px; font-weight: 700; padding: 8px; margin-bottom: 8px; }
.lx-quote-prices p { margin: 0 0 4px; }
.lx-quote-modal .btn { border: 0; border-radius: 0; font-weight: 700; color: #fff; }
.lx-quote-modal .lx-quote-add { background: #233f58; padding: 14px 10px; font-size: 16px; }
.lx-quote-modal .lx-quote-remove { position: absolute; top: 1px; right: 2px; padding: 0 3px; color: #a52c26; font-size: 14px; }
.lx-quote-modal .lx-quote-confirm { background: #a0bf3b; }
.lx-quote-modal .lx-quote-close { background: #d82520; }
.lx-quote-modal .lx-quote-cancel { background: #a2a3a1; }
.lx-quote-modal .btn:hover { filter: brightness(.92); }
.lx-quote-modal .lx-quote-remove:hover { color: #801e19; }
.lx-quote-note { margin: 8px 0 0; }
.lx-quote-modal--send .modal-body { padding: 24px 70px 20px; }
.lx-quote-recipient { display: flex; align-items: center; gap: 24px; }
.lx-quote-recipient > label { flex: 0 0 220px; text-align: right; font-size: 21px; margin-bottom: 0; }
.lx-quote-recipient .input-group { flex: 1; min-width: 0; }
.lx-quote-modal--send .input-group-text { border: 0; border-radius: 0; background: #f8f8f8; }
.lx-quote-modal--send .modal-footer { padding-bottom: 44px; }
@media (max-width: 991.98px) {
    .lx-quote-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .modal-dialog:has([data-quote-editor]), .lx-quote-dialog, .lx-quote-dialog--wide { width: calc(100% - 16px); max-width: calc(100% - 16px); margin: 8px auto; }
    .lx-quote-validity { grid-template-columns: 1fr; gap: 6px; font-size: 18px; }
    .lx-quote-validity > label { text-align: left; }
    .lx-quote-boxes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lx-quote-box-fields { padding-inline: 8px; }
    .lx-quote-field { grid-template-columns: 100px minmax(0, 1fr); gap: 6px; font-size: 14px; }
    .lx-quote-options { font-size: 14px; }
    .lx-quote-options > div { padding-inline: 4px; }
    .lx-quote-modal--send .modal-body { padding: 20px 16px; }
    .lx-quote-recipient { flex-direction: column; align-items: stretch; gap: 6px; }
    .lx-quote-recipient > label { flex-basis: auto; text-align: left; font-size: 18px; }
    .lx-quote-modal--send .modal-footer { flex-wrap: nowrap; padding-bottom: 24px; }
}

.lx-quote-modal .lx-quote-lock { color: #355a78; background: #f8f8f8; min-width: 40px; font-size: 18px; }
.lx-quote-modal .lx-quote-lock[aria-pressed="true"] { background: #e5edd1; }

/* Composition compacte des messages, selon les maquettes SMS et email. */
.modal-dialog:has([data-communication-compose]) { --bs-modal-width: 600px; max-width: min(600px, calc(100% - 24px)); margin: 32px auto; }
.modal:has([data-communication-compose]) .modal-content { border-width: 6px; border-radius: 20px; }
.modal .lx-message-compose .modal-header { min-height: 40px; padding: 5px 42px 9px; border-radius: 0 0 12px 12px; }
.modal .lx-message-compose .modal-title { font-size: 20px !important; }
.modal .lx-message-compose .btn-close { width: 20px; height: 20px; right: 14px; top: 7px; }
.modal .lx-message-compose .btn-close::before, .modal .lx-message-compose .btn-close::after { width: 14px; height: 3px; left: 3px; top: 8px; }
.modal .lx-message-compose .modal-body { padding: 14px 26px 20px 18px; }
.lx-message-row { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 8px; font-size: 13px; }
.lx-message-row > label { text-align: right; font-weight: 700; font-size: 12px; padding-top: 3px; }
.lx-message-row sup { font-size: 8px; }
.lx-message-control { grid-column: 2; }
.modal .lx-message-compose .form-control, .modal .lx-message-compose .form-select { font-size: 13px; min-height: 26px; padding-top: 2px; padding-bottom: 2px; border: 0; }
.lx-message-row > .form-select, .lx-message-schedule { width: 100%; max-width: 278px; }
.lx-message-text { position: relative; }
.modal .lx-message-compose textarea { background: #f4f2f2; line-height: 1.45; resize: vertical; min-height: 122px; }
.modal .lx-message-compose textarea[readonly] { background: #f4f2f2; padding-bottom: 24px; }
.lx-message-lock { position: absolute; bottom: 3px; right: 3px; padding: 0 4px; border: 0; color: #626766; font-size: 13px; }
.lx-message-link { background: #d1d2cd; color: #37414b; border: 0; border-radius: 0; font-size: 12px; font-weight: 700; padding: 6px 10px; }
.lx-message-variables { margin: 12px 0 0 68px; font-size: 12px; }
.lx-message-variables summary { font-weight: 700; cursor: pointer; }
.lx-message-variable { display: flex; align-items: center; background: #f4f2f2; padding-left: 5px; min-width: 0; }
.lx-message-variable label { font-size: 10px; white-space: nowrap; margin: 0; }
.modal .lx-message-variable .form-control { background: transparent; padding: 2px 4px; font-size: 10px; min-width: 0; min-height: 20px; }
.lx-message-variable .btn { padding: 0 3px; border: 0; border-radius: 0; font-size: 11px; color: #626766; }
.lx-message-quote { display: flex; gap: 8px; align-items: center; }
.lx-message-quote label { flex-shrink: 0; margin: 0; font-size: 11px; }
.lx-message-bubble { position: relative; margin: 22px 0 14px auto; width: 285px; max-width: 100%; padding: 20px 15px; border-radius: 24px 24px 0 24px; background: #5599ce; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.4; }
.lx-message-bubble::after { content: ''; position: absolute; right: 0; bottom: -16px; width: 50px; height: 17px; background: #5599ce; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.modal .lx-message-compose .modal-footer { padding: 14px 20px 20px; }
.modal .lx-message-compose .modal-footer .btn { min-width: 172px; padding: 6px 16px; font-size: 12px; }
.lx-message-compose[data-kind="email"] .modal-body { min-height: 385px; }
@media (max-width: 575.98px) {
    .modal-dialog:has([data-communication-compose]) { margin: 12px auto; }
    .modal .lx-message-compose .modal-body { padding: 14px; }
    .lx-message-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .lx-message-row > label { text-align: left; }
    .lx-message-control { grid-column: 1; }
    .lx-message-row > .form-select, .lx-message-schedule { max-width: none; }
    .lx-message-variables { margin-left: 0; }
}

/* Réservations : liste et cartes reprenant les couleurs des maquettes. */
.lx-reservations { border: 1px solid #f6d741; min-height: 380px; color: #29475c; }
.lx-reservation-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 26px; }
.lx-reservation-list-heading h2 { font-size: 14px; font-weight: 700; }
.lx-reservation-demo { display: inline-block; font-size: 10px; font-weight: 400; color: #66747b; margin-left: 8px; }
.lx-reservation-new { border: 0; border-radius: 2px; background: #edc344; color: #fff; font-size: 12px; font-weight: 700; padding: 10px 24px; }
.lx-reservation-list { display: grid; gap: 10px; }
.lx-reservation-list-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 2fr) auto; align-items: center; gap: 16px; background: #edc344; padding: 10px 28px; font-size: 14px; }
.lx-reservation-status { justify-self: start; padding: 8px 12px; min-width: 135px; border-radius: 2px; font-size: 10px; font-weight: 400; }
.lx-reservation-status--pending { background: #5599ce !important; color: #fff !important; }
.lx-reservation-status--validated, .lx-reservation-status--contract { background: #a0bf3b !important; color: #fff !important; }
.lx-reservation-status--cancelled { background: #c64727 !important; color: #fff !important; }
.lx-reservation-view { border: 0; border-radius: 2px; background: #a2a3a1; color: #fff; font-size: 11px; padding: 4px 14px; }
.lx-reservation-detail-heading { background: #edc344; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 24px; }
.lx-reservation-detail-heading > div { flex: 1; justify-content: space-between; }
.lx-reservation-detail-heading h2 { font-size: 15px; font-weight: 700; }
.lx-reservation-back { color: #fff; border: 0; padding: 0; font-size: 20px; }
.lx-reservation-detail-grid { display: grid; grid-template-columns: 1.1fr .95fr .4fr; grid-template-areas: "information access actions" "box insurance comment" "other insurance comment" "payment payment payment"; gap: 12px 20px; padding: 16px 22px; align-items: start; }
.lx-reservation-slot { min-width: 0; }
.lx-reservation-slot--information { grid-area: information; --lx-reservation-color: #edc344; }
.lx-reservation-slot--box { grid-area: box; --lx-reservation-color: #426b80; }
.lx-reservation-slot--other { grid-area: other; --lx-reservation-color: #7ac0d5; }
.lx-reservation-slot--access { grid-area: access; --lx-reservation-color: #233f58; }
.lx-reservation-slot--insurance { grid-area: insurance; --lx-reservation-color: #dea28d; }
.lx-reservation-slot--payment { grid-area: payment; --lx-reservation-color: #edc344; }
.lx-reservation-slot--comment { grid-area: comment; --lx-reservation-color: #e7e7e7; }
.lx-reservation-detail-actions { grid-area: actions; display: grid; gap: 6px; padding-top: 28px; }
.lx-reservation-detail-actions .btn { background: #568486; color: #fff; border: 0; border-radius: 2px; font-size: 10px; padding: 5px; }
.lx-reservations [data-reservation-card] { border: 2px solid var(--lx-reservation-color); border-radius: 0; }
.lx-reservations [data-reservation-card] .card-header { background: var(--lx-reservation-color); color: #fff; border: 0; border-radius: 0; padding: 4px 8px; min-height: 24px; }
.lx-reservations [data-reservation-card] h3 { font-size: 11px; font-weight: 700; }
.lx-reservations [data-reservation-card] .card-header .btn { padding: 1px 8px; font-size: 10px; border-radius: 2px; }
.lx-reservations [data-reservation-edit] { color: #fff; border-color: #fff; }
.lx-reservations [data-reservation-card] .card-body { padding: 8px; }
.lx-reservation-read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin: 0; }
.lx-reservation-read-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(65px, 1fr); gap: 6px; align-items: center; font-size: 10px; }
.lx-reservation-read-field dt { text-align: right; font-weight: 600; }
.lx-reservation-read-field dd { margin: 0; background: #efefef; padding: 3px 6px; min-height: 20px; }
.lx-reservation-slot--information .lx-reservation-read-grid, .lx-reservation-slot--access .lx-reservation-read-grid, .lx-reservation-slot--comment .lx-reservation-read-grid { grid-template-columns: minmax(0, 1fr); }
.lx-reservation-slot--payment .lx-reservation-read-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-reservation-slot--comment [data-reservation-card] { background: #efefef; }
.lx-reservation-slot--comment .card-header { color: #37414b !important; }
.lx-reservation-slot--comment .lx-reservation-read-field { grid-template-columns: 1fr; }
.lx-reservation-slot--comment dt { display: none; }
.lx-reservation-slot--comment dd { min-height: 120px; }

/* Champs partagés par la création et les formulaires indépendants des cartes. */
.lx-reservation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.lx-reservation-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; }
.lx-reservation-field .form-label { margin: 0 !important; font-size: 11px; text-align: right; font-weight: 600; }
.lx-reservation-field .form-control, .lx-reservation-field .form-select { min-width: 0; min-height: 23px; height: 23px; font-size: 11px; padding: 2px 6px; border: 0; border-radius: 0; background-color: #eee; }
.lx-reservation-field .form-select { padding-right: 22px; background-position: right 5px center; background-size: 11px; }
.lx-reservation-field textarea.form-control { height: auto; min-height: 90px; }
.lx-reservation-field[data-reservation-field$="_discount_until"], .lx-reservation-field[data-reservation-field="premium"], .lx-reservation-field[data-reservation-field="deposit"], .lx-reservation-field[data-reservation-field="insured_value"], .lx-reservation-field[data-reservation-field="insurance_choice"], .lx-reservation-field[data-reservation-field="insurance_base"], .lx-reservation-field[data-reservation-field="comment"] { grid-column: 1 / -1; }
.lx-reservation-slot--information .lx-reservation-fields, .lx-reservation-slot--access .lx-reservation-fields, .lx-reservation-slot--comment .lx-reservation-fields { grid-template-columns: 1fr; }
.lx-reservation-slot--payment .lx-reservation-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* La création conserve le cadre et le bandeau jaunes spécifiques aux réservations. */
.modal-dialog:has([data-reservation-modal]) { width: calc(100% - 32px); max-width: 1420px; margin: 16px auto; }
.modal:has([data-reservation-modal]) .modal-content { border: 6px solid #f8db43; border-radius: 22px; }
.modal .lx-reservation-create .modal-header { background: #f8db43; color: #29475c; min-height: 40px; padding: 4px 44px 10px; border-radius: 0 0 12px 12px; }
.modal .lx-reservation-create .modal-title { font-size: 20px !important; }
.modal .lx-reservation-create .btn-close { top: 6px; right: 12px; }
.modal .lx-reservation-create .modal-body { padding: 10px 22px 0; }
.lx-reservation-create .lx-reservation-demo { display: block; text-align: right; margin: 0 0 6px; }
.lx-reservation-create-information { margin-bottom: 8px; }
.lx-reservation-create-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: "box insurance" "other comment" "access comment" "payment payment"; gap: 8px 30px; }
.lx-reservation-create-section { min-width: 0; }
.lx-reservation-create-section--box { grid-area: box; }
.lx-reservation-create-section--insurance { grid-area: insurance; }
.lx-reservation-create-section--other { grid-area: other; background: #e7e7e7; padding: 8px; }
.lx-reservation-create-section--access { grid-area: access; background: #e7e7e7; padding: 8px; }
.lx-reservation-create-section--comment { grid-area: comment; background: #eee; padding: 8px; }
.lx-reservation-create-section--comment .lx-reservation-field { grid-template-columns: 1fr; }
.lx-reservation-create-section--comment .form-label { text-align: left; }
.lx-reservation-create-section--comment textarea { min-height: 110px; }
.lx-reservation-create-section--payment { grid-area: payment; padding: 8px; background: #f8db43; }
.lx-reservation-create-section--payment .lx-reservation-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal .lx-reservation-create .modal-footer { padding: 8px 16px 12px; }
.modal .lx-reservation-create .modal-footer .btn { padding: 5px 24px; min-width: 172px; font-size: 12px; }
@media (max-width: 1199.98px) {
    .lx-reservation-field { grid-template-columns: 96px minmax(0, 1fr); gap: 5px; }
}
@media (max-width: 767.98px) {
    .lx-reservation-list-heading { padding: 16px; flex-wrap: wrap; }
    .lx-reservation-list-row { grid-template-columns: 1fr auto; gap: 8px; padding: 12px; }
    .lx-reservation-list-row .lx-reservation-status { grid-row: 2; }
    .lx-reservation-list-row .lx-reservation-view { grid-column: 2; grid-row: 1 / 3; }
    .lx-reservation-detail-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "information" "box" "access" "insurance" "other" "comment" "payment" "actions"; }
    .lx-reservation-detail-heading { padding: 8px 12px; }
    .lx-reservation-detail-heading > div { align-items: start !important; }
    .lx-reservation-detail-heading h2 { font-size: 13px; }
    .lx-reservation-fields, .lx-reservation-read-grid, .lx-reservation-slot--payment .lx-reservation-fields, .lx-reservation-slot--payment .lx-reservation-read-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-reservation-create-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "box" "insurance" "other" "access" "comment" "payment"; gap: 10px; }
    .lx-reservation-create-section--payment .lx-reservation-fields { grid-template-columns: minmax(0, 1fr); }
    .modal-dialog:has([data-reservation-modal]) { width: calc(100% - 16px); margin: 8px auto; }
    .modal .lx-reservation-create .modal-body { padding: 10px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .lx-reservation-detail-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "information access" "box insurance" "other comment" "payment payment" "actions actions"; gap: 10px; padding: 12px; }
    .lx-reservation-detail-actions { display: flex; padding: 0; }
}