/* ==========================================================================
   Boutique Lekruu — tunnel d'achat : panier, finalisation, facture,
   mini-panier de l'en-tete et bandeau « articles dans le panier ».

   Chargee apres brand.css (shared.shop-css) sur toutes les pages de la
   boutique : chaque regle est donc rattachee a une racine propre au tunnel
   (.lk-cart, .lk-checkout, .lk-summary, .lk-invoice, .lk-minicart,
   .lk-cart-banner, .lk-progress) pour ne rien toucher ailleurs.

   Couleurs : jetons de brand.css uniquement. Fond blanc (ecrans denses), noir
   pour le texte et les surfaces, jaune pour l'action — toujours avec du noir
   dessus. Mobile d'abord : 375 → 768 → 1024 → 1440.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Briques communes
   -------------------------------------------------------------------------- */

/* Le theme grise tous les paragraphes (p { color: #888 }) et passe les titres
   en capitales : on rend la main aux classes du tunnel. :where() + :is(p…)
   donnent la specificite d'un simple selecteur de balise (posee apres le
   theme, elle l'emporte), toute classe ci-dessous l'emporte a son tour. */
:where(.lk-cart, .lk-cart-bar, .lk-checkout, .lk-invoice, .lk-invoice-page) :is(p, h1, h2, h3, li, dt, dd, label) {
    color: inherit;
    text-transform: none;
}

/* Chiffres tabulaires : les montants ne dansent pas quand ils changent. */
.lk-num {
    font-variant-numeric: tabular-nums;
}

.lk-cart .lk-btn,
.lk-cart-bar .lk-btn,
.lk-checkout .lk-btn,
.lk-invoice .lk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

.lk-cart .lk-btn--primary,
.lk-cart-bar .lk-btn--primary,
.lk-checkout .lk-btn--primary {
    border-color: var(--color-accent-border);
    background-color: var(--color-accent);
    color: var(--color-on-accent) !important;
}

.lk-cart .lk-btn--primary:hover,
.lk-cart-bar .lk-btn--primary:hover,
.lk-checkout .lk-btn--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-on-accent) !important;
}

.lk-cart .lk-btn--primary:active,
.lk-cart-bar .lk-btn--primary:active,
.lk-checkout .lk-btn--primary:active {
    background-color: var(--color-accent-active);
}

.lk-cart .lk-btn--secondary,
.lk-invoice .lk-btn--secondary {
    border-color: var(--color-primary);
    background-color: var(--color-surface);
    color: var(--color-text) !important;
}

.lk-cart .lk-btn--secondary:hover,
.lk-invoice .lk-btn--secondary:hover {
    background-color: var(--brand-50);
}

.lk-cart .lk-btn--block,
.lk-checkout .lk-btn--block {
    width: 100%;
}

.lk-cart .lk-btn:focus-visible,
.lk-cart-bar .lk-btn:focus-visible,
.lk-checkout .lk-btn:focus-visible,
.lk-invoice .lk-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lk-checkout .lk-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.lk-link-back {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 44px;
    color: var(--color-text) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lk-link-back:hover { color: var(--color-primary-hover) !important; }

/* --------------------------------------------------------------------------
   Progression du tunnel : Panier → Coordonnees et livraison → Paiement
   -------------------------------------------------------------------------- */

.lk-progress {
    max-width: 560px;
    margin: 0 auto 1.5rem;
}

.lk-progress__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-progress__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    text-align: center;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

/* Le trait qui mene a une etape : noir si on l'a atteinte. */
.lk-progress__item + .lk-progress__item::before {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(50% + 22px);
    left: calc(-50% + 22px);
    height: 2px;
    background-color: var(--color-border);
}

.lk-progress__item--done + .lk-progress__item::before,
.lk-progress__item--done::before {
    background-color: var(--color-primary);
}

.lk-progress__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--neutral-300);
    border-radius: 50%;
    background-color: var(--color-surface);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lk-progress__item--current .lk-progress__marker {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.lk-progress__item--done .lk-progress__marker {
    border-color: var(--color-accent-border);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.lk-progress__item--current .lk-progress__label {
    font-weight: 700;
    color: var(--color-text);
}

a.lk-progress__label {
    color: var(--color-text) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Panier
   -------------------------------------------------------------------------- */

.lk-cart,
.lk-checkout,
.lk-invoice-page {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 1.25rem 0 3rem;
}

/* La barre collante du bas occupe ~80px : le contenu ne passe pas dessous. */
.lk-cart {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

.lk-cart__inner,
.lk-checkout__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lk-cart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: 1rem;
}

.lk-cart__title,
.lk-checkout__title,
.lk-invoice-page__title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-text);
}

.lk-cart__head .lk-cart__title { margin: 0; }

.lk-cart__count {
    margin: 0;
    color: var(--color-text-muted);
}

.lk-cart__layout,
.lk-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.lk-cart-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

/* Ligne (mobile) : vignette | nom, variante, prix unitaire | supprimer
                    vignette | quantite | montant                       */
.lk-cart-line {
    display: grid;
    grid-template-columns: 72px auto minmax(0, 1fr) 44px;
    grid-template-areas:
        "thumb info info  remove"
        "thumb qty  total total";
    gap: .5rem .75rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: opacity .2s ease-out;
}

.lk-cart-line.is-busy { opacity: .6; }

.lk-cart-line__thumb {
    grid-area: thumb;
    align-self: start;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-surface-alt);
}

.lk-cart-line__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6%;
    object-fit: contain;
}

.lk-cart-line__info {
    grid-area: info;
    min-width: 0;
}

.lk-cart-line__name {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.lk-cart-line__name a {
    font: inherit;
    color: var(--color-text) !important;
    text-decoration: none;
}

.lk-cart-line__name a:hover { text-decoration: underline; }

.lk-cart-line__variant,
.lk-cart-line__unit {
    margin: .125rem 0 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.lk-cart-line__qty {
    grid-area: qty;
}

.lk-cart-line__total {
    grid-area: total;
    min-width: 0;
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    text-align: right;
}

.lk-cart-line__remove {
    grid-area: remove;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: .875rem;
    cursor: pointer;
}

.lk-cart-line__remove .fa { font-size: 1.125rem; }

.lk-cart-line__remove:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-danger);
}

.lk-cart-line__remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Sur mobile, l'icone suffit : le nom accessible vient d'aria-label. */
.lk-cart-line__remove-text { display: none; }

/* --- stepper de quantite : cibles de 44px --- */

.lk-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--neutral-400);
    border-radius: 999px;
    background-color: var(--color-surface);
}

.lk-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    touch-action: manipulation;
}

.lk-qty__btn:hover { background-color: var(--brand-50); }

.lk-qty__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Le theme retire toute bordure des input (!important) : sans objet ici. */
.lk-qty .lk-qty__input {
    width: 2.5rem;
    height: 44px;
    padding: 0;
    border: 0 !important;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}

.lk-qty .lk-qty__input::-webkit-outer-spin-button,
.lk-qty .lk-qty__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.lk-qty .lk-qty__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.lk-cart__form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

/* Avec JavaScript, chaque quantite part seule : le bouton devient inutile. */
.lk-cart__form.is-enhanced .lk-cart__update { display: none; }

.lk-cart__status {
    min-height: 1.5em;
    margin: .5rem 0 0;
    font-size: .875rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Recapitulatif (panier et finalisation)
   -------------------------------------------------------------------------- */

/* Encart creme : le recapitulatif se detache des lignes du panier. */
.lk-summary {
    padding: 1.25rem;
    border: 1px solid var(--accent-200);
    border-radius: 12px;
    background-color: var(--color-canvas);
    color: var(--color-text);
}

.lk-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.lk-summary__title {
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-text);
}

.lk-summary__head .lk-summary__title { margin: 0; }

.lk-summary__edit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lk-summary__rows {
    margin: 0;
}

.lk-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .375rem 0;
}

.lk-summary__row dt { font-weight: 400; }

.lk-summary__row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.lk-summary__row--muted,
.lk-summary__row--muted dd {
    color: var(--color-text-muted);
    font-weight: 400;
}

.lk-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: .75rem 0 1rem;
    padding-top: .75rem;
    border-top: 2px solid var(--color-primary);
    font-size: 1.125rem;
}

.lk-summary__total strong {
    font-size: 1.375rem;
    font-weight: 800;
}

.lk-summary__hint {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
}

/* Le bouton du recapitulatif du panier : remplace par la barre sur mobile. */
.lk-cart-summary .lk-cart-summary__cta,
.lk-cart-summary .lk-summary__hint { display: none; }

/* --- articles du recapitulatif de la finalisation --- */

.lk-summary__items {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.lk-summary__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.lk-summary__thumb {
    width: 48px;
    height: 48px;
    padding: 3px;
    border-radius: 8px;
    background-color: var(--color-surface-alt);
    object-fit: contain;
}

.lk-summary__item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.35;
}

.lk-summary__item-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lk-summary__item-variant,
.lk-summary__item-qty {
    color: var(--color-text-muted);
    font-size: .8125rem;
}

.lk-summary__item-amount {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- totaux injectes par cart.total() (.order-col, shared.cart-and-paiement-script) ---
       Le script pose des classes du theme (text-uppercase, fs-10, text-danger…) :
       on les neutralise ici, le montant final se lit par la taille. */

.lk-summary__loading {
    margin: .5rem 0;
    font-size: .875rem;
    color: var(--color-text-muted);
}

.lk-summary__totals .order-col {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .375rem 0;
}

/* Pas de clearfix du theme comme troisieme element flexible. */
.lk-summary__totals .order-col::before,
.lk-summary__totals .order-col::after { display: none; }

/* Une feuille du theme pose un padding sur ces div : l'id l'emporte. */
#div-totaux .lk-summary__totals .order-col > div {
    width: auto;
    margin: 0;
    padding: 0;
}

.lk-summary__totals .order-col .fs-10:empty { display: none !important; }

.lk-summary__totals .order-col > div:last-child {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lk-summary__totals .order-col strong {
    font-size: .9375rem;
    font-weight: 500;
    text-transform: none !important;
    color: var(--color-text) !important;
}

.lk-summary__totals .order-col .fs-10,
.lk-summary__totals .order-col .text-muted {
    display: block;
    margin-top: .125rem;
    font-size: .75rem !important;
    color: var(--color-text-muted) !important;
}

.lk-summary__totals .order-col br { display: none; }

.lk-summary__totals .order-col .text-success {
    color: var(--color-success) !important;
}

/* Net / reste a payer : le chiffre que l'on vient chercher. */
.lk-summary__totals .order-col strong.order-total {
    font-size: 1.25rem;
    font-weight: 800;
}

.lk-summary__totals .order-col:has(.order-total) {
    margin-top: .375rem;
    padding-top: .75rem;
    border-top: 2px solid var(--color-primary);
}

/* --------------------------------------------------------------------------
   Barre collante du panier (mobile)
   -------------------------------------------------------------------------- */

.lk-cart-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}

.lk-cart-bar__total {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--color-text-muted);
}

.lk-cart-bar__total strong {
    white-space: nowrap;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-text);
}

.lk-cart-bar .lk-btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: .75rem 1.5rem;
    white-space: nowrap;
}

/* Boutons flottants du gabarit (haut de page, WhatsApp) : remontes au-dessus
   des barres collantes du tunnel pour ne pas masquer le total ni l'action.
   La marge s'ajoute a leur position fixe (bottom) sans la redefinir. */
body:has(.lk-cart-bar) .btn-back-to-top,
body:has(.lk-cart-bar) #bouton-sticky-whatsapp,
body:has(.lk-cart-bar) .wa__btn_popup {
    margin-bottom: 5.5rem;
}

body:has(.lk-cart-banner) .btn-back-to-top,
body:has(.lk-cart-banner) #bouton-sticky-whatsapp,
body:has(.lk-cart-banner) .wa__btn_popup {
    margin-bottom: 8.5rem;
}

@media (min-width: 768px) {
    body:has(.lk-cart-banner) .btn-back-to-top,
    body:has(.lk-cart-banner) #bouton-sticky-whatsapp,
    body:has(.lk-cart-banner) .wa__btn_popup {
        margin-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    body:has(.lk-cart-bar) .btn-back-to-top,
    body:has(.lk-cart-bar) #bouton-sticky-whatsapp,
    body:has(.lk-cart-bar) .wa__btn_popup {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Finalisation
   -------------------------------------------------------------------------- */

.lk-checkout__main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.lk-checkout-step {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-surface);
}

.lk-checkout-step__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-checkout-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.lk-checkout-step__intro {
    margin: -.5rem 0 1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.lk-checkout-step__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* --- champs --- */

.lk-checkout .lk-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-checkout .lk-field.is-hidden { display: none; }

.lk-checkout .lk-field__label {
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.lk-checkout .lk-field__req {
    color: var(--color-danger);
}

.lk-checkout .lk-field__opt {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* 16px : en deca, iOS zoome a la mise au point. Le theme supprime les
   bordures des input en !important : on les rend, plus specifiques. */
.lk-checkout .lk-field__control {
    width: 100%;
    min-height: 48px;
    padding: .75rem .875rem;
    border: 1px solid var(--neutral-400) !important;
    border-radius: 8px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.4;
}

.lk-checkout .lk-field__control:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring);
}

.lk-checkout .lk-field__control[aria-invalid="true"] {
    border-color: var(--color-danger) !important;
}

.lk-checkout .lk-field__control:disabled {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.lk-checkout .lk-field__hint {
    margin: .375rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* L'erreur porte une icone : la couleur seule ne suffit pas. */
.lk-checkout .lk-field__error {
    display: flex;
    gap: .375rem;
    margin: .375rem 0 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-danger);
}

.lk-checkout .lk-field__error::before {
    content: "\f06a";   /* fa-exclamation-circle */
    font-family: FontAwesome;
    font-weight: 400;
}

.lk-checkout .lk-field__error[hidden] { display: none; }

/* --- listes avec recherche (select2 : ville, quartier) ---
       Le panneau s'ouvre dans .lk-field (dropdownParent) : tout reste sous
       .lk-checkout. main.css habille select2 pour l'ancien theme (13px, gris,
       surlignage noir) : on reprend l'apparence des autres champs. */

.lk-checkout .lk-field { position: relative; }

.lk-checkout .lk-field .select2-container { width: 100% !important; }

.lk-checkout .lk-field .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 48px;
    padding: 0 2.5rem 0 .875rem;
    border: 1px solid var(--neutral-400);
    border-radius: 8px;
    background-color: var(--color-surface);
    cursor: pointer;
}

.lk-checkout .lk-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
}

.lk-checkout .lk-field .select2-container .select2-selection__placeholder {
    color: var(--color-text-muted);
}

.lk-checkout .lk-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: .75rem;
    height: 100%;
    transform: none;
}

.lk-checkout .lk-field .select2-selection__arrow::after {
    width: 8px;
    height: 8px;
    margin: 0 0 4px;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
}

.lk-checkout .lk-field .select2-container--focus .select2-selection--single,
.lk-checkout .lk-field .select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.lk-checkout .lk-field__control[aria-invalid="true"] + .select2-container .select2-selection--single {
    border-color: var(--color-danger);
}

.lk-checkout .lk-field .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--neutral-400);
    border-radius: 8px;
    background-color: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.lk-checkout .lk-field .select2-search--dropdown {
    padding: .5rem;
}

/* 16px : en deca, iOS zoome sur le champ de recherche. */
.lk-checkout .lk-field .select2-search--dropdown .select2-search__field {
    min-height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--neutral-400) !important;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
}

.lk-checkout .lk-field .select2-search--dropdown .select2-search__field:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}

.lk-checkout .lk-field .select2-results__options {
    max-height: 16rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
}

.lk-checkout .lk-field .select2-container .select2-results__option {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .875rem;
    background-color: transparent;
    color: var(--color-text);
}

.lk-checkout .lk-field .select2-container .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-50);
    color: var(--color-primary);
    font-weight: 700;
}

.lk-checkout .lk-field .select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: var(--neutral-100);
    color: var(--color-primary);
}

.lk-checkout .lk-field .select2-results__message {
    color: var(--color-text-muted);
}

/* --- cases a cocher natives (plus d'iCheck) --- */

.lk-checkout .lk-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    margin: 0;
    font-size: .9375rem;
    color: var(--color-text);
    cursor: pointer;
}

.lk-checkout .lk-check__input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.lk-checkout .lk-check__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- identite du partenaire, en lecture seule --- */

.lk-readonly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem 1rem;
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-radius: 8px;
    background-color: var(--color-surface-alt);
}

.lk-readonly__row dt {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.lk-readonly__row dd {
    margin: .125rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --- reglement : les cartes de choix viennent de payment.css --- */

.lk-checkout-step .lk-pay-choice {
    margin: 0;
}

/* Masque tant que cart.total() n'a pas pose son libelle (display en ligne). */
.lk-checkout .lk-checkout__submit {
    display: none;
    margin-top: 1rem;
    min-height: 52px;
}

/* --------------------------------------------------------------------------
   Mini-panier de l'en-tete (panneau noir, cf. brand.css)
   brand.css force la couleur creme sur a, span, li du panneau en !important :
   les regles ci-dessous passent par .header-dropdown pour l'emporter.
   -------------------------------------------------------------------------- */

.lk-minicart__list {
    max-height: min(50vh, 320px);
    margin: 0 0 .5rem;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.lk-minicart__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 44px;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--brand-500);
}

.lk-minicart__thumb {
    width: 56px;
    height: 56px;
    padding: 4px;
    border-radius: 8px;
    background-color: var(--color-surface);
    object-fit: contain;
}

.lk-minicart__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.header-dropdown .lk-minicart__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.header-dropdown .lk-minicart__variant,
.header-dropdown .lk-minicart__meta {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--brand-200) !important;   /* 14.6:1 sur le noir */
}

.header-dropdown .lk-minicart__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-canvas);
    font-size: 1.125rem;
    cursor: pointer;
}

.header-dropdown .lk-minicart__remove:hover {
    background-color: var(--brand-500);
    color: var(--color-accent);
}

.header-dropdown .lk-minicart__remove:focus-visible,
.header-dropdown .lk-minicart__link:focus-visible,
.header-dropdown .lk-minicart__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.header-dropdown .lk-minicart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 .75rem;
    padding: .5rem 0;
    color: var(--color-canvas);
}

.header-dropdown .lk-minicart__total span {
    font-size: .9375rem;
}

/* Noir pur du panneau : le jaune y tient 9.19:1 (cf. brand.css). */
.header-dropdown .lk-minicart__total strong {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-accent) !important;
}

.lk-minicart__actions {
    display: flex;
    flex-direction: column-reverse;   /* « Passer la commande » au-dessus */
    gap: .5rem;
}

.header-dropdown .lk-minicart__link,
.header-dropdown .lk-minicart__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 44px;
    padding: .5rem .75rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.header-dropdown .lk-minicart__link {
    border: 1px solid var(--color-canvas);
}

.header-dropdown .lk-minicart__link:hover {
    border-color: var(--color-accent);
}

/* Jaune : toujours du noir dessus, survol compris (brand.css colore les
   liens survoles en jaune). */
.header-dropdown .lk-minicart__cta,
.header-dropdown .lk-minicart__cta:hover,
.header-dropdown .lk-minicart__cta:focus,
.header-dropdown .lk-minicart__cta .fa {
    border: 1px solid var(--color-accent-border);
    background-color: var(--color-accent);
    color: var(--color-on-accent) !important;
}

.header-dropdown .lk-minicart__cta .fa { border: 0; }

.header-dropdown .lk-minicart__cta:hover {
    background-color: var(--color-accent-hover);
}

.lk-minicart--empty {
    display: grid;
    gap: .75rem;
    text-align: center;
}

.header-dropdown .lk-minicart__empty {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-canvas);
}

.lk-minicart__empty .fa {
    display: block;
    margin-bottom: .375rem;
    font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Bandeau « articles dans le panier » (Livewire cart-actions-banner)
   -------------------------------------------------------------------------- */

.lk-cart-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    border-top: 3px solid var(--color-accent);
    background-color: var(--color-primary);
    color: var(--color-canvas);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
    animation: lk-cart-banner-in .25s ease-out;
}

@keyframes lk-cart-banner-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.lk-cart-banner__inner {
    position: relative;
    display: grid;
    gap: .75rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: .75rem 3.5rem calc(.75rem + env(safe-area-inset-bottom, 0px)) 1rem;
}

.lk-cart-banner__text {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-canvas);
}

.lk-cart-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.lk-cart-banner__link,
.lk-cart-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lk-cart-banner__link {
    border: 1px solid var(--color-canvas);
    color: var(--color-canvas) !important;
}

.lk-cart-banner__link:hover { border-color: var(--color-accent); }

.lk-cart-banner__cta,
.lk-cart-banner__cta:hover,
.lk-cart-banner__cta:focus {
    border: 1px solid var(--color-accent-border);
    background-color: var(--color-accent);
    color: var(--color-on-accent) !important;
}

.lk-cart-banner__cta:hover { background-color: var(--color-accent-hover); }

.lk-cart-banner__close {
    position: absolute;
    top: .25rem;
    right: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-canvas);
    font-size: 1.125rem;
    cursor: pointer;
}

.lk-cart-banner__close:hover { background-color: var(--brand-500); }

.lk-cart-banner a:focus-visible,
.lk-cart-banner__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Facture (proforma) — sobre, lisible a l'ecran comme sur papier
   -------------------------------------------------------------------------- */

.lk-invoice-page__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lk-invoice-page__reveal { margin-bottom: 1.25rem; }

.lk-invoice {
    color: var(--color-text);
}

.lk-invoice__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.lk-invoice__doc {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-surface);
    font-size: .9375rem;
    line-height: 1.5;
}

.lk-invoice__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--color-primary);
}

.lk-invoice__logo {
    width: auto;
    height: 64px;
    object-fit: contain;
}

.lk-invoice__ident p { margin: 0; }

.lk-invoice__kicker {
    font-family: var(--font-display);
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lk-invoice__code {
    margin: .125rem 0;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text);
}

.lk-invoice__date,
.lk-invoice__status {
    font-size: .875rem;
    color: var(--color-text-muted);
}

.lk-invoice__status { margin-top: .25rem !important; }

.lk-invoice__note {
    display: flex;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border-left: 4px solid var(--color-info);
    border-radius: 0 8px 8px 0;
    background-color: var(--color-canvas);
    font-weight: 600;
}

.lk-invoice__note .fa { margin-top: .2rem; color: var(--color-info); }

.lk-invoice__note--danger { border-left-color: var(--color-danger); }

.lk-invoice__note--danger .fa { color: var(--color-danger); }

.lk-invoice__parties {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 1.25rem 0;
}

.lk-invoice__party-title,
.lk-invoice__section-title {
    margin: 0 0 .5rem;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.lk-invoice__section-title { margin-top: 1.5rem; }

.lk-invoice__party-name {
    margin: 0 0 .375rem;
    font-size: 1rem;
    font-weight: 700;
}

.lk-invoice__dl { margin: 0; }

.lk-invoice__dl > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    padding: .125rem 0;
}

.lk-invoice__dl dt {
    flex: 0 0 9rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.lk-invoice__dl dd {
    flex: 1 1 8rem;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.lk-invoice__hint {
    margin: .375rem 0;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* Valeurs modifiables par le partenaire (bulle d'edition, orderDetails). */
.lk-invoice__editable {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lk-invoice__editable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Le tableau defile dans son cadre, jamais la page. */
.lk-invoice__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lk-invoice__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.lk-invoice__table thead th {
    padding: .5rem .375rem;
    border-bottom: 2px solid var(--color-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.lk-invoice__table tbody td {
    padding: .625rem .375rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.lk-invoice__table tfoot th,
.lk-invoice__table tfoot td {
    padding: .375rem .5rem;
    font-weight: 500;
}

.lk-invoice__table tfoot th { text-align: right; }

.lk-invoice__table .lk-invoice__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lk-invoice__table .lk-invoice__grand-total th,
.lk-invoice__table .lk-invoice__grand-total td {
    padding-top: .625rem;
    border-top: 2px solid var(--color-primary);
    font-size: 1.0625rem;
    font-weight: 800;
}

.lk-invoice__ref,
.lk-invoice__variant {
    display: block;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {
    .lk-invoice__ident { text-align: right; }
}

@media (min-width: 768px) {
    .lk-cart,
    .lk-checkout,
    .lk-invoice-page { padding-top: 1.75rem; }

    .lk-cart__inner,
    .lk-checkout__inner { padding: 0 1.5rem; }

    .lk-cart__title,
    .lk-checkout__title,
    .lk-invoice-page__title { font-size: 1.5rem; }

    /* Ligne : vignette | infos | quantite | montant | supprimer */
    .lk-cart-line {
        grid-template-columns: 96px minmax(0, 1fr) auto 8.5rem auto;
        grid-template-areas: "thumb info qty total remove";
        gap: 1rem;
    }

    .lk-cart-line__thumb {
        align-self: center;
        width: 96px;
        height: 96px;
    }

    .lk-cart-line__remove { align-self: center; }

    .lk-cart-line__total {
        font-size: 1rem;
        white-space: nowrap;
    }

    .lk-checkout-step { padding: 1.5rem; }

    .lk-checkout-step__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lk-checkout .lk-field--full { grid-column: 1 / -1; }

    .lk-invoice__doc { padding: 2rem; }

    .lk-invoice__parties { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

    .lk-cart-banner__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding-right: 4rem;
    }

    .lk-cart-banner__actions { display: flex; }
}

@media (min-width: 1024px) {
    .lk-cart { padding-bottom: 3rem; }

    .lk-cart__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; }
    .lk-checkout__layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; }

    /* Le recapitulatif suit le defilement sous l'en-tete collant. */
    .lk-cart-summary,
    .lk-checkout-summary {
        position: sticky;
        top: 7.5rem;
    }

    .lk-cart-summary .lk-cart-summary__cta { display: flex; }
    .lk-cart-summary .lk-summary__hint { display: block; }

    .lk-cart-bar { display: none; }

    .lk-cart-line__remove-text { display: inline; }
}

@media (min-width: 1440px) {
    .lk-cart__layout { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* --------------------------------------------------------------------------
   Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .lk-cart-banner { animation: none; }

    .lk-cart .lk-btn,
    .lk-cart-bar .lk-btn,
    .lk-checkout .lk-btn,
    .lk-cart-line {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Impression (Ctrl+P sur la facture, ou fenetre ouverte par imprimer())
   -------------------------------------------------------------------------- */

@media print {
    .lk-invoice__toolbar,
    .lk-invoice-page__reveal,
    .lk-cart-banner { display: none !important; }

    .lk-invoice-page { padding: 0; }

    .lk-invoice__doc {
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 11pt;
    }

    .lk-invoice__parties { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .lk-invoice__table-wrap { overflow: visible; }

    .lk-invoice__table tr { break-inside: avoid; }
}