/* ==========================================================================
   Lekruu — le panneau de paiement.

   Mobile d'abord : aucune media query en `max-width`, uniquement des paliers
   `min-width` qui ajoutent.

   AUCUNE COULEUR HEXADECIMALE ICI. Toute teinte passe par un jeton declare
   dans brand.css — c'est la regle du depot, et elle vaut aussi pour les
   couleurs d'operateurs, qui y sont declarees comme marques tierces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'enveloppe
   -------------------------------------------------------------------------- */

/* La racine du composant Livewire reste vide tant que le panneau est ferme, et
   ses deux enfants sont en `position: fixed` quand il s'ouvre : elle n'occupe
   aucune place dans le flux, sur toutes les pages ou le composant est pose. */
.lk-slideover {
    display: block;
}

.lk-slideover__scrim {
    position: fixed;
    inset: 0;
    /* Repli pour les navigateurs sans `inset`. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--slideover-scrim);
    z-index: calc(var(--slideover-z) - 1);
}

.lk-slideover__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Mobile : le panneau occupe TOUT l'ecran. Un panneau a 90 % laisse une
       bande morte qui capte les taps a cote du bouton. */
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text);
    z-index: var(--slideover-z);
    transform: translateX(100%);
    transition: transform .22s ease-out;
}

.lk-slideover--open .lk-slideover__panel {
    transform: translateX(0);
}

/* L'arriere-plan ne defile pas sous le panneau : le corps est fige a sa
   position, que le JavaScript restitue a la fermeture. */
body.lk-slideover-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   En-tete, corps, pied
   -------------------------------------------------------------------------- */

.lk-slideover__header {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top));
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

.lk-slideover__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.lk-slideover__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: var(--color-text);
}

.lk-slideover__subtitle,
.lk-slideover__step {
    font-size: .8125rem;
    line-height: 1.5;
    margin: .125rem 0 0;
    color: var(--color-text-muted);
}

.lk-slideover__step {
    margin: 0 0 1rem;
}

.lk-slideover__icon-btn {
    flex: 0 0 auto;
    /* 44 px : la barre tactile, sur tous les ecrans. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.lk-slideover__icon-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.lk-slideover__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
}

.lk-slideover__body--centered {
    text-align: center;
}

.lk-slideover__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 1rem;
    /* Le pied colle doit degager la barre de gestes iOS. */
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Contrôle segmenté — automatique / manuel
   -------------------------------------------------------------------------- */

.lk-pay__segmented {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    overflow: hidden;
    background: var(--color-surface-alt);
}

.lk-pay__segment {
    flex: 1 1 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
}

.lk-pay__segment--on {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.lk-pay__segment-mark {
    /* Reserve la place de la coche : la largeur du bouton ne bouge pas quand
       l'utilisateur change de canal. */
    display: inline-block;
    width: 1em;
    text-align: center;
}

.lk-pay__help {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: .625rem 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Les cartes de moyen de paiement
   -------------------------------------------------------------------------- */

.lk-pay__section-title {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 .5rem;
}

.lk-pay__methods {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

/* La carte entiere est la cible : un radio de 13 px ne se vise pas au
   comptoir, encore moins d'une main tenant un colis. */
.lk-pay__method {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 64px;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.lk-pay__method:hover {
    border-color: var(--brand-300);
}

.lk-pay__method--selected {
    border-color: var(--color-primary);
    background: var(--brand-50);
}

.lk-pay__method-mark {
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-primary);
}

.lk-pay__method-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    overflow: hidden;
    /* Pastille derriere le logo : la couleur d'operateur ne porte jamais de
       texte, aucune ne tiendrait 4.5:1. */
    background: var(--color-operator-bank);
}

.lk-pay__method-logo--mtn    { background: var(--color-operator-mtn); }
.lk-pay__method-logo--orange { background: var(--color-operator-orange); }
.lk-pay__method-logo--cash   { background: var(--color-operator-cash); }

.lk-pay__method-initial {
    font-weight: 700;
    font-size: 1.0625rem;
    /* Sur les pastilles claires comme sur MTN et Orange, l'encre neutre la
       plus sombre tient le contraste. */
    color: var(--neutral-900);
}

.lk-pay__method-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lk-pay__method-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-pay__method-name {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.4;
}

.lk-pay__method-desc {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Montants
   -------------------------------------------------------------------------- */

.lk-pay__totals {
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    padding: .75rem 1rem;
    background: var(--color-surface-alt);
}

.lk-pay__total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9375rem;
}

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

/* Le montant reellement preleve, quand l'operateur encaisse dans une autre
   devise. Il ne s'efface pas comme une note ordinaire : c'est ce que le payeur
   verra passer sur son releve, il doit le lire avant de cliquer. */
.lk-pay__total-note--settlement {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    color: var(--color-text);
    font-weight: 600;
}

/* Les montants et le compte a rebours ne doivent pas danser. */
.lk-pay__amount,
.lk-pay__countdown {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.lk-pay__amount {
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.lk-pay__grid {
    display: block;
}

.lk-pay__field {
    margin-bottom: 1rem;
}

.lk-pay__label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--color-text);
}

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

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

.lk-pay__input {
    display: block;
    width: 100%;
    /* 44 px de haut et 16 px de texte : sous 16 px, iOS zoome tout seul a la
       mise au point et casse la mise en page. */
    min-height: 44px;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: .5rem;
}

.lk-pay__input--error,
.lk-pay__phone--error,
.lk-pay__money--error,
.lk-pay__dropzone--error {
    border-color: var(--color-danger);
}

/* Champ telephone en deux parties : l'indicatif est pose, non saisi. */
.lk-pay__phone,
.lk-pay__money {
    display: flex;
    align-items: stretch;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--color-surface);
}

.lk-pay__phone-prefix,
.lk-pay__money-currency {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 .75rem;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.lk-pay__money-currency {
    border-left: 1px solid var(--color-border);
}

.lk-pay__phone-prefix {
    border-right: 1px solid var(--color-border);
}

.lk-pay__phone .lk-pay__input,
.lk-pay__money .lk-pay__input {
    border: 0;
    border-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.lk-pay__hint {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: .25rem 0 0;
}

.lk-pay__hint--centered {
    text-align: center;
}

/* L'erreur s'affiche SOUS le champ qu'elle concerne, jamais en tete de page. */
.lk-pay__error {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-danger);
    margin: .25rem 0 0;
}

/* Dépôt de la preuve : la zone entiere ouvre le selecteur. */
.lk-pay__dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface-alt);
    text-align: center;
}

.lk-pay__dropzone-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.lk-pay__dropzone-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.lk-pay__dropzone-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.lk-pay__file {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    font-size: .875rem;
}

.lk-pay__file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-pay__file-remove {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Encarts d'information
   -------------------------------------------------------------------------- */

.lk-pay__notice {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem;
    border-radius: .625rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Le pictogramme double la couleur : l'information ne se lit jamais a la
   seule teinte de la bordure. */
.lk-pay__notice-icon {
    flex: 0 0 auto;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.lk-pay__notice--info    { border-color: var(--color-info); }
.lk-pay__notice--warning { border-color: var(--color-warning); }
.lk-pay__notice--danger  { border-color: var(--color-danger); }

.lk-pay__notice--info .lk-pay__notice-icon    { color: var(--color-info); }
.lk-pay__notice--warning .lk-pay__notice-icon { color: var(--color-warning); }
.lk-pay__notice--danger .lk-pay__notice-icon  { color: var(--color-danger); }

.lk-pay__notice-title {
    font-weight: 600;
    margin: 0 0 .125rem;
}

.lk-pay__notice-text {
    margin: 0;
}

.lk-pay__secret {
    display: block;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

.lk-pay__empty {
    text-align: center;
    padding: 2rem 1rem;
}

.lk-pay__empty-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-info);
    margin-bottom: .75rem;
}

.lk-pay__empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.lk-pay__empty-body {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Attente
   -------------------------------------------------------------------------- */

.lk-pay__waiting-icon {
    width: 64px;
    height: 64px;
    margin: 1rem auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-50);
    font-size: 1.75rem;
    line-height: 1;
}

.lk-pay__pulse {
    animation: lk-pay-pulse 1.8s ease-in-out infinite;
}

@keyframes lk-pay-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--brand-100); }
    50%      { box-shadow: 0 0 0 12px transparent; }
}

.lk-pay__waiting-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.lk-pay__waiting-body {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.lk-pay__countdown-box {
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    padding: .875rem 1rem;
    background: var(--color-surface-alt);
    margin-bottom: 1rem;
}

.lk-pay__countdown-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}

.lk-pay__countdown {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin: .125rem 0 .5rem;
}

.lk-pay__countdown-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--neutral-200);
    overflow: hidden;
}

.lk-pay__countdown-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--color-primary);
    transition: width 1s linear;
}

.lk-pay__countdown-note {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: .5rem 0 0;
}

.lk-pay__details {
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.lk-pay__details-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.lk-pay__details-body {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: .25rem 0 .25rem;
}

/* --------------------------------------------------------------------------
   Issue
   -------------------------------------------------------------------------- */

.lk-pay__outcome-icon {
    width: 64px;
    height: 64px;
    margin: 1.5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-text-on-dark);
}

.lk-pay__outcome-icon--succeeded,
.lk-pay__outcome-icon--recorded { background: var(--color-success); }
.lk-pay__outcome-icon--failed,
.lk-pay__outcome-icon--cancelled { background: var(--color-danger); }
.lk-pay__outcome-icon--expired  { background: var(--color-warning); }

.lk-pay__outcome-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.lk-pay__outcome-message {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.lk-pay__reference {
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    padding: .75rem 1rem;
    background: var(--color-surface-alt);
}

.lk-pay__reference-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 .25rem;
}

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

.lk-pay__reference-code {
    font-variant-numeric: tabular-nums;
    /* Le point d'appui du service client : il doit se lire caractere par
       caractere, et se selectionner d'un geste. */
    word-break: break-all;
    user-select: all;
    color: var(--color-text);
}

.lk-pay__reference-code--big {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.lk-pay__btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    font-size: 1rem;
    border-radius: .625rem;
}

.lk-pay__btn-inline {
    min-height: 44px;
    margin-top: .5rem;
}

.lk-pay__spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lk-pay-spin .6s linear infinite;
}

@keyframes lk-pay-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Focus — obligatoire et visible, partout
   -------------------------------------------------------------------------- */

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

/* La carte prend l'anneau quand le focus tombe a l'interieur. */
.lk-pay__method:focus-within,
.lk-pay__dropzone:focus-within,
.lk-pay__phone:focus-within,
.lk-pay__money:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Le champ interne n'a pas besoin d'un second anneau. */
.lk-pay__phone .lk-pay__input:focus,
.lk-pay__money .lk-pay__input:focus,
.lk-pay__dropzone-input:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Paliers
   -------------------------------------------------------------------------- */

/* Tablette : le panneau se detache et prend une largeur reglable. */
@media (min-width: 576px) {
    .lk-slideover__panel {
        left: auto;
        width: var(--slideover-width-md);
        max-width: 100vw;
        box-shadow: var(--slideover-shadow);
    }

    .lk-slideover--sm .lk-slideover__panel { width: var(--slideover-width-sm); }
    .lk-slideover--xl .lk-slideover__panel { width: var(--slideover-width-xl); }

    .lk-slideover__footer--split,
    .lk-slideover__footer--stacked {
        flex-direction: row;
    }

    .lk-slideover__footer--split .lk-pay__btn,
    .lk-slideover__footer--stacked .lk-pay__btn {
        width: auto;
        flex: 1 1 0;
    }

    /* Une seule action principale par ecran : elle prend deux parts. */
    .lk-slideover__footer--split .lk-pay__btn--primary {
        flex: 2 1 0;
    }
}

/* Deux colonnes pour le formulaire manuel, seulement quand la place existe. */
@media (min-width: 768px) {
    .lk-pay__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .lk-pay__grid > .lk-pay__field--wide {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   Mouvement réduit — la pulsation et les transitions disparaissent
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .lk-slideover__panel { transition: none; }
    .lk-pay__pulse { animation: none; }
    .lk-pay__spinner { animation-duration: 1.5s; }
    .lk-pay__countdown-fill { transition: none; }
    .lk-pay__method { transition: none; }
}

/* ==========================================================================
   Back-office — les moyens de paiement d'un pays

   Meme regle qu'au-dessus : aucune couleur en dur, tout passe par un jeton de
   brand.css. Mobile d'abord, paliers en `min-width` uniquement.
   ========================================================================== */

.lk-pm {
    display: block;
}

/* Le compte rendu du dernier geste. La zone reste dans le DOM meme vide : un
   `aria-live` qui apparait apres coup n'annonce rien. */
.lk-pm__flash {
    min-height: 1.5rem;
    margin: 0 0 .75rem;
    color: var(--color-success);
    font-size: .9375rem;
}

.lk-pm__flash--empty {
    min-height: 0;
    margin-bottom: 0;
}

.lk-pm__intro {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: .9375rem;
    line-height: 1.5;
}

.lk-pm__intro-note {
    display: block;
    margin-top: .25rem;
}

.lk-pm__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   La liste des moyens
   -------------------------------------------------------------------------- */

.lk-pm__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lk-pm__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
}

/* Un moyen ferme s'efface sans disparaitre : il reste lisible, il ne se
   confond simplement plus avec les moyens ouverts. */
.lk-pm__row--off {
    background: var(--color-surface-alt);
}

.lk-pm__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    flex: 0 0 auto;
}

.lk-pm__rank-btn {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.lk-pm__rank-btn:hover {
    background: var(--brand-50);
}

.lk-pm__rank-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.lk-pm__rank-value {
    font-size: .75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.lk-pm__body {
    flex: 1 1 14rem;
    min-width: 0;
}

.lk-pm__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.lk-pm__name {
    font-weight: 600;
    color: var(--color-text);
}

.lk-pm__code {
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* Le marqueur porte toujours un texte : la couleur seule ne renseigne pas. */
.lk-pm__badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.lk-pm__badge--driver {
    border-color: var(--color-info);
    color: var(--color-info);
}

.lk-pm__badge--state {
    margin-left: .375rem;
}

/* Le bac a sable se reconnait a trois signes independants : son texte, son
   icone, et son contour en pointilles. Un ecran en niveaux de gris, un
   daltonien, une impression : le marqueur tient dans les trois cas. */
.lk-pm__badge--sandbox {
    border-style: dashed;
    border-width: 2px;
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 600;
}

.lk-pm__meta {
    margin: .25rem 0 .5rem;
    color: var(--color-text-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

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

/* --------------------------------------------------------------------------
   Les interrupteurs
   -------------------------------------------------------------------------- */

.lk-pm__switches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.lk-pm__switches--stacked {
    flex-direction: column;
    align-items: stretch;
}

.lk-pm__switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .25rem .625rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.lk-pm__switch--on {
    border-color: var(--color-success);
}

/* Ni bouton ni cible : la bascule n'a pas de sens ici, et le dire vaut mieux
   que de la griser. */
.lk-pm__switch--void {
    cursor: default;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.lk-pm__switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--neutral-300);
    transition: background .18s ease-out;
}

.lk-pm__switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-surface);
    transition: transform .18s ease-out;
}

.lk-pm__switch--on .lk-pm__switch-track {
    background: var(--color-success);
}

.lk-pm__switch--on .lk-pm__switch-knob {
    transform: translateX(1rem);
}

.lk-pm__switch-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lk-pm__switch-label {
    font-size: .8125rem;
    font-weight: 600;
}

.lk-pm__switch-state {
    font-size: .75rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Les actions
   -------------------------------------------------------------------------- */

.lk-pm__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.lk-pm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: .9375rem;
    cursor: pointer;
}

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

.lk-pm__btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.lk-pm__btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.lk-pm__btn--ghost {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

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

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

/* --------------------------------------------------------------------------
   Les formulaires du catalogue
   -------------------------------------------------------------------------- */

.lk-pm__form {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lk-pm__country-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
}

.lk-pm__checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
}

.lk-pm__checkbox input {
    width: 1.25rem;
    height: 1.25rem;
}

.lk-pm__checkbox label {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Le panneau de reglage d'un moyen
   -------------------------------------------------------------------------- */

.lk-pm__scrim {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--slideover-scrim);
    z-index: var(--slideover-z);
}

/* Mobile : le panneau occupe tout l'ecran. Un panneau de 90 % laisserait une
   bande morte qui capte les taps a cote du bouton. */
.lk-pm__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    z-index: var(--slideover-z);
}

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

.lk-pm__panel-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
}

.lk-pm__panel-subtitle {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.lk-pm__icon-btn {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.lk-pm__icon-btn:hover {
    background: var(--color-surface-alt);
}

.lk-pm__panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
}

/* Le pied colle doit degager la barre de gestes iOS. */
.lk-pm__panel-footer {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.lk-pm__panel-footer .lk-pm__btn {
    flex: 1 1 0;
}

.lk-pm__section-title {
    margin: 1.25rem 0 .5rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.lk-pm__section-title:first-child {
    margin-top: 0;
}

.lk-pm__credentials {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Les champs d'un fieldset d'identifiants respirent : chaque cle porte un
   libelle, parfois une aide, et parfois une erreur. */
.lk-pm__credentials .lk-pay__field + .lk-pay__field {
    margin-top: .75rem;
}

/* Le groupe d'identifiants qui ne sert pas dans l'environnement courant.
   Il reste lisible et modifiable — on prepare bien ses cles de production
   depuis le bac a sable — mais il s'efface visuellement, et son etiquette le
   dit en toutes lettres : l'attenuation seule ne renseignerait personne. */
.lk-pm__fieldset--dormant {
    border-style: dashed;
    background: transparent;
}

.lk-pm__badge--dormant {
    margin-left: .375rem;
    border-style: dashed;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   L'essai de connexion
   -------------------------------------------------------------------------- */

.lk-pm__test {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
}

/* Le verdict porte un pictogramme ET un texte : la teinte n'est qu'un rappel,
   jamais l'information elle-meme. */
.lk-pm__verdict {
    margin-top: .5rem;
    padding: .625rem .75rem;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: .5rem;
    background: var(--color-surface-alt);
}

.lk-pm__verdict-head {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.lk-pm__verdict-body {
    margin: .25rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
}

.lk-pm__verdict-list {
    margin: .25rem 0 0;
    padding-left: 1.25rem;
    font-size: .875rem;
    line-height: 1.6;
}

.lk-pm__verdict--ok {
    border-color: var(--color-success);
}

.lk-pm__verdict--ok .lk-pm__verdict-head {
    color: var(--color-success);
}

.lk-pm__verdict--warn {
    border-color: var(--color-warning);
}

.lk-pm__verdict--warn .lk-pm__verdict-head {
    color: var(--color-warning);
}

.lk-pm__verdict--bad {
    border-color: var(--color-danger);
}

.lk-pm__verdict--bad .lk-pm__verdict-head {
    color: var(--color-danger);
}

.lk-pm__verdict--muted .lk-pm__verdict-head {
    color: var(--color-text-muted);
}

.lk-pm__required {
    margin-left: .25rem;
    color: var(--color-danger);
    font-size: .75rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   L'environnement et la duplication
   -------------------------------------------------------------------------- */

/* L'interrupteur du bac a sable ne reprend pas le vert de `--on` : ici l'etat
   « allume » est l'etat PRUDENT, pas l'etat actif. Le pointille rappelle le
   badge de la liste. */
.lk-pm__switch--sandbox {
    border-style: dashed;
    border-color: var(--color-warning);
}

.lk-pm__switch--sandbox .lk-pm__switch-track {
    background: var(--color-warning);
}

.lk-pm__switch--sandbox .lk-pm__switch-knob {
    transform: translateX(1rem);
}

.lk-pm__switch--sandbox .lk-pm__switch-state {
    color: var(--color-warning);
}

.lk-pm__duplicate {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lk-pm__fieldset {
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface-alt);
}

.lk-pm__legend-label {
    width: auto;
    margin: 0 0 .5rem;
    padding: 0 .25rem;
    border: 0;
    color: var(--color-text);
    font-size: .9375rem;
    font-weight: 600;
}

/* Le geste irreversible s'annonce a sa place, dans le flux, et non dans une
   boite de dialogue du navigateur : le recapitulatif doit tenir sous les yeux
   pendant qu'on decide. */
.lk-pm__confirm {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid var(--color-danger);
    border-left-width: 4px;
    border-radius: .5rem;
    background: var(--color-surface-alt);
}

.lk-pm__confirm-title {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .5rem;
    color: var(--color-danger);
    font-size: 1rem;
    font-weight: 600;
}

.lk-pm__confirm-body {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    line-height: 1.6;
}

.lk-pm__confirm-list {
    margin: 0 0 .5rem;
    padding-left: 1.25rem;
    font-size: .9375rem;
    line-height: 1.6;
}

.lk-pm__confirm-note {
    color: var(--color-text-muted);
    font-size: .8125rem;
}

.lk-pm__confirm-warning {
    margin: 0 0 .75rem;
    color: var(--color-danger);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
}

.lk-pm__confirm-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 576px) {
    .lk-pm__confirm-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

.lk-pm__details {
    margin-top: .5rem;
}

.lk-pm__details-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--color-primary);
    cursor: pointer;
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Mise au point visible — jamais d'outline supprime sans remplacement
   -------------------------------------------------------------------------- */

.lk-pm__switch:focus,
.lk-pm__btn:focus,
.lk-pm__rank-btn:focus,
.lk-pm__icon-btn:focus,
.lk-pm__details-summary:focus,
.lk-pm__panel-title:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Paliers
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {
    .lk-pm__panel {
        left: auto;
        width: var(--slideover-width-md);
        max-width: 100vw;
        box-shadow: var(--slideover-shadow);
    }

    .lk-pm__country-form {
        flex-direction: row;
        align-items: flex-end;
    }

    .lk-pm__country-form .lk-pay__field {
        flex: 1 1 auto;
    }

    .lk-pm__panel-footer .lk-pm__btn--primary {
        flex: 2 1 0;
    }
}

@media (min-width: 768px) {
    .lk-pm__row {
        flex-wrap: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-pm__switch-track,
    .lk-pm__switch-knob {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Back-office : les acces par pays

   L'ecran d'activation d'un pays est le geste quotidien de l'exploitant. Il
   etait derriere une liste deroulante : on ne le trouvait pas. Un lien par
   pays, poses en grille, tous visibles sans defiler.
   -------------------------------------------------------------------------- */
.lk-pm__countries {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.lk-pm__country {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* La barre des 44 px vaut aussi au back-office. */
    min-height: 48px;
    padding: .625rem .875rem;
    border: 1px solid var(--color-border);
    border-radius: .625rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}

.lk-pm__country:hover,
.lk-pm__country:focus {
    border-color: var(--color-primary);
    background: var(--brand-50);
    color: var(--color-text);
    text-decoration: none;
}

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

.lk-pm__country-name { flex: 1 1 auto; font-weight: 600; }

.lk-pm__country-code {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .125rem .5rem;
    border-radius: 1rem;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* Des la tablette, les pays tiennent sur plusieurs colonnes. */
@media (min-width: 576px) {
    .lk-pm__countries { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .lk-pm__countries { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   L'attente pendant l'enregistrement d'une commande

   Le spinner vit dans le corps de la fenetre, pas dans sa zone de boutons :
   swal.showLoading() y loge le sien, mais `showConfirmButton: false` supprime
   cette zone - le loader n'avait alors aucun conteneur.
   -------------------------------------------------------------------------- */
.lk-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    color: var(--color-text-muted);
}

.lk-wait__spinner {
    font-size: 1.75rem;
    color: var(--color-primary);
}

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

/* --------------------------------------------------------------------------
   Choix du reglement au checkout : maintenant, ou a la livraison.
   Deux options pleine largeur, cible tactile de 48 px ; l'option retenue
   prend le liseré jaune d'action.
   -------------------------------------------------------------------------- */

.lk-pay-choice {
    margin: 0;
    padding: 0;
    border: 0;
}

.lk-pay-choice__legend {
    margin-bottom: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-pay-choice__option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 48px;
    margin-bottom: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lk-pay-choice__option input {
    margin-top: .2rem;
    accent-color: var(--brand-600);
}

.lk-pay-choice__option:hover {
    border-color: var(--brand-400);
}

.lk-pay-choice__option:focus-within {
    box-shadow: var(--focus-ring);
}

.lk-pay-choice__option:has(input:checked) {
    border-color: var(--color-accent-border);
    box-shadow: inset 4px 0 0 var(--color-accent);
}

.lk-pay-choice__text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    color: var(--color-text);
}

.lk-pay-choice__text small {
    color: var(--color-text-muted);
    font-size: .8125rem;
}