/**
 * Process d'achat en 5 étapes (checkout wizard).
 * Conforme au design Locamed (navy #1a2b4a, orange #e67e22).
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --ck-navy: #1a2b4a;
    --ck-navy-light: #243656;
    --ck-orange: #e67e22;
    --ck-orange-hover: #cf6d17;
    --ck-orange-light: #fff7ed;
    --ck-primary: #1a7f37;
    --ck-primary-light: #dafbe1;
    --ck-bg: #ffffff;
    --ck-border: #e5e7eb;
    --ck-text: #1f2328;
    --ck-text-muted: #656d76;
    --ck-error: #cf222e;
    --ck-radius: 12px;
    --ck-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ck-shadow: 0 4px 16px rgba(26, 43, 74, 0.06);
}

.ck-wrapper *,
.ck-wrapper *::before,
.ck-wrapper *::after {
    box-sizing: border-box;
}

.ck-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    color: var(--ck-text);
}

/* ==========================================================================
   Stepper
   ========================================================================== */

.ck-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 0;
    padding: 0 4px;
    padding-top: 10px;
}

.ck-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
}

/* Ligne de liaison entre les étapes */
.ck-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--ck-border);
}

.ck-step.active:not(:last-child)::after {
    background: var(--ck-orange);
}

.ck-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--ck-border);
    color: var(--ck-text-muted);
    z-index: 1;
    position: relative;
    transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-step.active .ck-step-num {
    background: var(--ck-navy);
    color: #fff;
}

.ck-step-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ck-text-muted);
}

.ck-step.active .ck-step-label {
    color: var(--ck-navy);
    font-weight: 600;
}

/* Étape déjà remplie : cliquable pour y revenir directement. */
.ck-step-clickable {
    cursor: pointer;
}

.ck-step-clickable .ck-step-num {
    background: var(--ck-primary-light);
    color: var(--ck-primary);
}

.ck-step-clickable:hover .ck-step-num {
    background: var(--ck-primary);
    color: #fff;
}

.ck-step-clickable:hover .ck-step-label {
    color: var(--ck-navy);
}

/* ==========================================================================
   Layout 2 colonnes
   ========================================================================== */

.ck-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
    padding-top: 10px;
}

.ck-main {
    min-width: 0;
    /* Le thème applique `padding-top: calc(var(--headerHeight))` à tout
       élément <main> (page.css) — annulé ici et reporté sur .ck-topbar. */
    padding-top: 0;
}

.ck-side {
    position: sticky;
    top: 20px;
}

/* ==========================================================================
   Panneau d'étape
   ========================================================================== */

.ck-panel {
    display: none;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 24px;
    box-shadow: var(--ck-shadow);
}

.ck-panel.active {
    display: block;
}

.ck-panel-head {
    margin-bottom: 20px;
}

.ck-panel-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 6px;
}

.ck-panel-sub {
    font-size: 14px;
    color: var(--ck-text-muted);
    margin: 0;
}

/* ==========================================================================
   Étape 1 : Panier
   ========================================================================== */

.ck-cart-list {
    display: flex;
    flex-direction: column;
}

.ck-cart-header {
    display: grid;
    grid-template-columns: 1fr 130px 110px 30px;
    gap: 16px;
    align-items: center;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--ck-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--ck-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ck-cart-header span:nth-child(2),
.ck-cart-header span:nth-child(3) {
    text-align: center;
}

.ck-item {
    display: grid;
    grid-template-columns: 72px 1fr 130px 110px 30px;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--ck-border);
}

.ck-item:last-child {
    border-bottom: none;
}

.ck-item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--ck-primary-light);
}

.ck-item-info {
    min-width: 0;
}

.ck-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-navy);
    line-height: 1.35;
    margin-bottom: 2px;
}

.ck-item-sku {
    font-size: 12px;
    color: var(--ck-text-muted);
    margin-top: 2px;
}

.ck-item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ck-price-current {
    font-weight: 700;
    color: var(--ck-navy);
}

.ck-price-old {
    font-size: 12px;
    font-weight: 400;
    color: var(--ck-text-muted);
    text-decoration: line-through;
}

.ck-item-qty {
    display: flex;
    justify-content: center;
}

.ck-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ck-qty-minus,
.ck-qty-plus {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--ck-text);
    line-height: 1;
}

.ck-qty-minus:hover,
.ck-qty-plus:hover {
    background: var(--ck-orange-light);
    color: var(--ck-orange);
}

.ck-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--ck-text);
    -moz-appearance: textfield;
}

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

.ck-item-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--ck-navy);
    text-align: center;
}

.ck-item-remove {
    border: none;
    background: none;
    color: var(--ck-error);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    transition: opacity var(--ck-transition);
}

.ck-item-remove:hover {
    opacity: 0.7;
}

/* État vide */
.ck-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--ck-text-muted);
}

.ck-empty p {
    margin: 0 0 16px;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.ck-btn {
    display: inline-block;
    padding: 13px 20px;
    border: none;
    border-radius: var(--ck-radius);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-btn-orange {
    background: var(--ck-orange);
    color: #fff;
}

.ck-btn-orange:hover {
    background: var(--ck-orange-hover);
    color: #fff;
}

.ck-btn-orange:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Récapitulatif (colonne latérale)
   ========================================================================== */

.ck-card {
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 20px;
    box-shadow: var(--ck-shadow);
}

.ck-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 16px;
}

.ck-summary-rows {
    border-bottom: 1px solid var(--ck-border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.ck-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: var(--ck-text-muted);
    padding: 6px 0;
}

.ck-summary-row > span:first-child {
    flex-shrink: 0;
    padding-top: 1px;
}

.ck-summary-value {
    color: var(--ck-text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    text-align: right;
}

.ck-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--ck-navy);
    margin-bottom: 18px;
}

.ck-summary-total-value {
    font-size: 22px;
    color: var(--ck-orange);
}

.ck-continue {
    width: 100%;
}

.ck-summary-help {
    text-align: center;
    font-size: 13px;
    color: var(--ck-text-muted);
    margin: 14px 0 0;
}

.ck-summary-help a {
    color: var(--ck-orange);
    font-weight: 600;
    text-decoration: none;
}

.ck-move-all-devis {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding-top: 14px;
    border: none;
    border-top: 1px solid var(--ck-border);
    background: transparent;
    color: var(--ck-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
    transition: color var(--ck-transition);
}

.ck-move-all-devis:hover {
    color: var(--ck-orange);
}

.ck-move-all-devis:disabled {
    cursor: default;
    opacity: 0.6;
    text-decoration: none;
}

.ck-summary-note {
    font-size: 13px;
    color: var(--ck-text-muted);
    background: var(--ck-orange-light);
    border: 1px solid var(--ck-orange);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    line-height: 1.45;
}

/* Message de succès AJAX */
.ck-success {
    background: var(--ck-primary-light);
    color: var(--ck-primary);
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 12px;
}

/* ==========================================================================
   Blocs annexes (étape 1) : livraison gratuite, mode livraison, code promo
   ========================================================================== */

.ck-block {
    margin-top: 20px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 16px 18px;
    background: #fafbfc;
}

.ck-block-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 12px;
}

.ck-block-note {
    font-size: 13px;
    color: var(--ck-text-muted);
    margin: 0;
}

/* --- Livraison gratuite (progression) --- */

.ck-block-freeship {
    background: var(--ck-primary-light);
    border-color: var(--ck-primary);
}

/* Placé en haut du récapitulatif (colonne latérale, étape 1) : pas de
   marge avant (déjà dans le padding de la carte), marge après pour
   séparer du titre "Récapitulatif de la commande". */
.ck-summary .ck-block-freeship {
    margin-top: 0;
    margin-bottom: 16px;
}

.ck-freeship-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ck-freeship-icon {
    font-size: 24px;
    line-height: 1;
}

.ck-freeship-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-primary);
    margin: 0 0 2px;
}

.ck-freeship-title strong {
    font-weight: 800;
}

.ck-freeship-sub {
    font-size: 12px;
    color: var(--ck-primary);
    opacity: 0.85;
    margin: 0;
}

.ck-progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(26, 127, 55, 0.18);
    overflow: hidden;
}

.ck-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ck-primary), #2ea84f);
    transition: width 0.4s ease;
}

/* --- Mode de livraison --- */

.ck-shipping-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-shipping-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--ck-transition), background var(--ck-transition);
}

.ck-shipping-option:hover {
    border-color: var(--ck-orange);
}

.ck-shipping-option.selected {
    border-color: var(--ck-orange);
    background: var(--ck-orange-light);
}

.ck-shipping-radio {
    accent-color: var(--ck-orange);
}

.ck-shipping-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ck-text);
    margin-left: 6px;
}

.ck-shipping-cost {
    font-size: 14px;
    font-weight: 700;
    color: var(--ck-navy);
}

/* --- Code promo --- */

.ck-coupon-applied {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ck-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ck-orange-light);
    color: var(--ck-orange-hover);
    border: 1px solid var(--ck-orange);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.ck-coupon-remove {
    border: none;
    background: none;
    color: var(--ck-orange-hover);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ck-coupon-form {
    display: flex;
    gap: 8px;
}

.ck-coupon-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ck-text);
    background: #fff;
}

.ck-coupon-input:focus {
    outline: none;
    border-color: var(--ck-orange);
    box-shadow: 0 0 0 3px var(--ck-orange-light);
}

/* ==========================================================================
   Bloc "Vous pourriez aussi aimer" (upsell)
   ========================================================================== */

.ck-upsell-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-upsell-track {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ck-upsell-track::-webkit-scrollbar {
    display: none;
}

.ck-upsell-nav {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ck-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ck-navy);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-upsell-nav:hover {
    background: var(--ck-navy);
    color: #fff;
}

.ck-upsell-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    background: #fff;
}

.ck-upsell-img-link {
    display: block;
    width: 100%;
}

.ck-upsell-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--ck-primary-light);
}

.ck-upsell-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ck-navy);
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ck-upsell-name:hover {
    color: var(--ck-orange);
}

.ck-upsell-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--ck-primary);
    margin-bottom: 4px;
}

.ck-upsell-add,
.ck-upsell-view {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}

/* Lien « Voir le produit » (remplace le bouton « Ajouter ») */
.ck-upsell-view {
    display: block;
    box-sizing: border-box;
    margin-top: auto;
}

@media (max-width: 640px) {
    .ck-upsell-item {
        width: 130px;
    }
}

/* ==========================================================================
   Boutons outline
   ========================================================================== */

.ck-btn-outline {
    background: transparent;
    color: var(--ck-navy);
    border: 1px solid var(--ck-border);
}

.ck-btn-outline:hover {
    background: var(--ck-orange-light);
    color: var(--ck-orange-hover);
    border-color: var(--ck-orange);
}

/* ==========================================================================
   Étape 2 : Coordonnées (formulaire)
   ========================================================================== */

.ck-form {
    max-width: 480px;
}

.ck-field {
    margin-bottom: 16px;
}

.ck-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-navy);
    margin-bottom: 6px;
}

.ck-required {
    color: var(--ck-error);
}

/* Case CGV sur une seule ligne, sans retour à la ligne (demande explicite :
   "J'accepte les conditions générales de vente *" reste groupé). */
.ck-cgv-text {
    white-space: nowrap;
}

.ck-optional {
    color: var(--ck-text-muted);
    font-weight: 400;
}

.ck-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    font-size: 15px;
    color: var(--ck-text);
    background: #fff;
    transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-input:focus {
    outline: none;
    border-color: var(--ck-orange);
    box-shadow: 0 0 0 3px var(--ck-orange-light);
}

.ck-phone-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ck-phone-input:focus-within {
    border-color: var(--ck-orange);
    box-shadow: 0 0 0 3px var(--ck-orange-light);
}

.ck-phone-prefix {
    padding: 12px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-text-muted);
    background: #f6f8fa;
    border-right: 1px solid var(--ck-border);
    white-space: nowrap;
}

.ck-input-phone {
    border: none;
    box-shadow: none !important;
    border-radius: 0;
}

.ck-field-help {
    display: block;
    font-size: 12px;
    color: var(--ck-text-muted);
    margin-top: 5px;
}

.ck-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--ck-text);
    margin: 4px 0 20px;
    cursor: pointer;
}

.ck-checkbox input {
    accent-color: var(--ck-orange);
    margin-top: 2px;
}

.ck-form-error {
    background: #ffebe9;
    color: var(--ck-error);
    border: 1px solid #ffb3ad;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

.ck-form-error ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.ck-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ==========================================================================
   Récapitulatif : sous-ligne livraison
   ========================================================================== */

.ck-summary-sub {
    display: block;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: var(--ck-navy);
    margin-top: 2px;
}

.ck-summary-discount {
    color: var(--ck-primary);
}

.ck-summary-discount .ck-summary-value {
    color: var(--ck-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
    .ck-layout {
        grid-template-columns: 1fr;
    }

    .ck-side {
        position: static;
    }
}

@media (max-width: 560px) {
    .ck-cart-header {
        display: none;
    }

    .ck-item {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "img info remove"
            "img qty total";
        gap: 8px 12px;
        align-items: center;
    }

    .ck-item-img {
        grid-area: img;
        width: 56px;
        height: 56px;
    }

    .ck-item-info {
        grid-area: info;
    }

    .ck-item-remove {
        grid-area: remove;
    }

    .ck-item-qty {
        grid-area: qty;
        justify-content: flex-start;
    }

    .ck-item-total {
        grid-area: total;
        text-align: right;
    }

    .ck-step-label {
        font-size: 10px;
    }
}

/* ==========================================================================
   Barre supérieure (retour panier / logo / paiement sécurisé)
   ========================================================================== */

.ck-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ck-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-navy);
    text-decoration: none;
}

.ck-back-link:hover {
    color: var(--ck-orange);
}

.ck-back-arrow {
    font-size: 18px;
    line-height: 1;
}

.ck-logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

.ck-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--ck-navy);
}

.ck-secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ck-primary);
    background: var(--ck-primary-light);
    border: 1px solid var(--ck-primary);
    border-radius: 20px;
    padding: 6px 14px;
}

.ck-secure-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ck-primary);
    flex: 0 0 auto;
}

/* ==========================================================================
   Étape 2 : grille des cartes de choix (invité / connexion / inscription)
   ========================================================================== */

.ck-choice-back {
    margin-bottom: 16px;
}

.ck-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Une carte sélectionnée (invité / connexion / inscription) : les 2 autres
   sont masquées, celle sélectionnée s'étale sur une colonne unique. */
.ck-choice-grid.ck-narrowed {
    grid-template-columns: 1fr;
    max-width: 460px;
}

.ck-choice {
    display: flex;
    flex-direction: column;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 20px;
    box-shadow: var(--ck-shadow);
}

.ck-choice-guest {
    border-color: var(--ck-primary);
    background: #f6fcf7;
}

.ck-choice-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 10px;
}

.ck-choice-guest .ck-choice-title {
    color: var(--ck-primary);
}

.ck-choice-desc {
    font-size: 14px;
    color: var(--ck-text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
    flex: 1;
}

.ck-guest-btn {
    margin-top: auto;
}

/* --- Bénéfices "Créer un compte" --- */

.ck-benefits {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
}

.ck-benefits li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--ck-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.ck-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ck-primary-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.ck-register-toggle {
    margin-top: auto;
    width: 100%;
}

/* --- Formulaire d'inscription (déployé sur clic) --- */

.ck-form-register {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--ck-border);
}

/* --- Champs "Professionnel" (spécialité + carte pro), invité & inscription --- */

.ck-pro-fields {
    margin-top: 4px;
    padding-top: 14px;
    margin-bottom: 4px;
    border-top: 1px dashed var(--ck-border);
}

select.ck-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 38px;
    cursor: pointer;
}

.ck-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px;
    border: 1.5px dashed var(--ck-border);
    border-radius: 10px;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color var(--ck-transition), background var(--ck-transition);
}

.ck-dropzone:hover {
    border-color: var(--ck-orange);
    background: var(--ck-orange-light);
}

.ck-dropzone-icon {
    color: var(--ck-text-muted);
    line-height: 1;
}

.ck-dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-navy);
}

.ck-dropzone.has-file {
    border-style: solid;
    border-color: var(--ck-primary);
    background: #f6fcf7;
}

.ck-dropzone.has-file .ck-dropzone-icon,
.ck-dropzone.has-file .ck-dropzone-title {
    color: var(--ck-primary);
}

/* --- Formulaire invité (déployé sur clic "Commander en invité") --- */

.ck-guest-form {
    margin-top: 6px;
}

.ck-guest-form .ck-choice-title {
    margin-bottom: 16px;
}

/* --- Toggle Particulier / Professionnel --- */

.ck-segment {
    display: flex;
    gap: 6px;
    background: #f6f8fa;
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}

.ck-segment-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-text-muted);
    cursor: pointer;
    transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-segment-btn.active {
    background: var(--ck-navy);
    color: #fff;
}

/* --- Sous-étape 2c : Déjà connecté --- */

.ck-connected {
    text-align: center;
    background: var(--ck-primary-light);
    border: 1px solid var(--ck-primary);
    border-radius: var(--ck-radius);
    padding: 32px 24px;
    max-width: 480px;
    margin: 0 auto;
}

.ck-connected-icon {
    font-size: 40px;
    margin-bottom: 12px;
    line-height: 1;
}

.ck-connected-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ck-primary);
    margin: 0 0 8px;
}

.ck-connected-desc {
    font-size: 14px;
    color: var(--ck-text);
    margin: 0 0 20px;
}

.ck-connected .ck-continue {
    width: auto;
    min-width: 240px;
}

/* ==========================================================================
   Boutons vert / navy
   ========================================================================== */

.ck-btn-green {
    background: var(--ck-primary);
    color: #fff;
}

.ck-btn-green:hover {
    background: #156a2f;
    color: #fff;
}

.ck-btn-navy {
    background: var(--ck-navy);
    color: #fff;
    width: 100%;
}

.ck-btn-navy:hover {
    background: var(--ck-navy-light);
    color: #fff;
}

/* ==========================================================================
   Champ mot de passe avec œil
   ========================================================================== */

.ck-pass {
    position: relative;
}

.ck-pass .ck-input {
    padding-right: 46px;
}

.ck-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--ck-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color var(--ck-transition);
}

.ck-eye:hover {
    color: var(--ck-orange);
}

.ck-pass.is-visible .ck-eye {
    color: var(--ck-orange);
}

/* --- Lien "Mot de passe oublié ?" --- */

.ck-lostpass {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
}

.ck-lostpass a {
    color: var(--ck-orange);
    font-weight: 600;
    text-decoration: none;
}

.ck-lostpass a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Étape 3 : Livraison — Mode de livraison (cartes)
   ========================================================================== */

.ck-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.ck-delivery-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--ck-bg);
    border: 2px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 28px 20px;
    box-shadow: var(--ck-shadow);
    transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-delivery-card:hover {
    border-color: var(--ck-orange);
    box-shadow: 0 6px 24px rgba(230, 126, 34, 0.12);
}

.ck-delivery-card-icon {
    font-size: 40px;
    margin-bottom: 12px;
    line-height: 1;
}

.ck-delivery-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 8px;
}

.ck-delivery-card-desc {
    font-size: 14px;
    color: var(--ck-text-muted);
    line-height: 1.45;
    margin: 0 0 16px;
    flex: 1;
}

.ck-delivery-card-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--ck-navy);
    margin-bottom: 18px;
}

.ck-delivery-free {
    color: var(--ck-primary);
}

/* --- Lien retour (changer de mode) --- */

.ck-delivery-mode-back {
    margin-bottom: 16px;
}

.ck-link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-navy);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--ck-transition);
}

.ck-link-back:hover {
    color: var(--ck-orange);
}

.ck-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 16px;
}

.ck-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-navy);
    margin: 20px 0 12px;
}

/* --- Ligne de champs (2 colonnes) --- */

.ck-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* --- Textarea --- */

.ck-textarea {
    resize: vertical;
    min-height: 80px;
}

/* ==========================================================================
   Étape 3 : Retrait en magasin — villes / magasins
   ========================================================================== */

.ck-store-search {
    margin-bottom: 14px;
}

.ck-city-items,
.ck-store-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-store-list-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ck-store-list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ck-store-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--ck-border-light, #f0f2f5);
    border-radius: 999px;
    flex: 0 0 auto;
}

.ck-view-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ck-text-muted);
    cursor: pointer;
    transition: background var(--ck-transition), color var(--ck-transition);
    white-space: nowrap;
}

.ck-view-btn.active {
    background: #fff;
    color: var(--ck-navy);
    box-shadow: 0 1px 3px rgba(26, 43, 74, 0.12);
}

.ck-store-map {
    height: 420px;
    border-radius: var(--ck-radius);
    overflow: hidden;
    border: 1px solid var(--ck-border);
}

.ck-store-items[hidden],
.ck-store-map[hidden] {
    display: none !important;
}

/* Pastille de statut affichée en permanence à côté de chaque marqueur (mode
   carte) — couleur seule, sans texte, pour ne pas masquer les magasins
   proches. L'icône de carte standard (pin Leaflet) reste inchangée. */
.leaflet-tooltip.ck-map-tag {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
}

.leaflet-tooltip.ck-map-tag::before {
    display: none !important;
}

.leaflet-tooltip.ck-map-tag .ck-avail-dot {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.ck-map-popup {
    min-width: 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-map-popup .ck-store-info {
    margin-bottom: 0;
}

.ck-map-popup .ck-prod-avail-wrapper {
    max-height: 180px;
    overflow-y: auto;
}

.ck-map-popup .ck-select-store,
.ck-map-popup-unavailable {
    margin-top: 4px;
}

.ck-map-popup-unavailable {
    display: inline-block;
    color: var(--ck-error);
    font-size: 12px;
    font-weight: 600;
}

.ck-store-phone {
    font-size: 13px;
    color: var(--ck-text-muted);
    margin: 0;
}

@media (max-width: 560px) {
    .ck-store-map {
        height: 320px;
    }
}

.ck-city-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    text-align: left;
    transition: border-color var(--ck-transition), background var(--ck-transition);
}

.ck-city-item:hover {
    border-color: var(--ck-orange);
    background: var(--ck-orange-light);
}

.ck-city-name {
    font-weight: 600;
    color: var(--ck-navy);
}

.ck-city-count {
    font-size: 13px;
    color: var(--ck-text-muted);
    font-weight: 500;
}

/* --- Carte magasin --- */

.ck-store-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    background: #fff;
    box-shadow: var(--ck-shadow);
}

.ck-store-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0 0 4px;
}

.ck-store-address {
    font-size: 13px;
    color: var(--ck-text-muted);
    margin: 0;
}

/* --- Disponibilité magasin --- */

.ck-store-availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
}

.ck-avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ck-avail-green,
.ck-stock-available {
    color: var(--ck-primary);
}

.ck-avail-green .ck-avail-dot,
.ck-stock-available .ck-avail-dot {
    background: var(--ck-primary);
}

.ck-avail-yellow,
.ck-stock-transfer {
    color: #b45309;
}

.ck-avail-yellow .ck-avail-dot,
.ck-stock-transfer .ck-avail-dot {
    background: #f59e0b;
}

.ck-avail-red,
.ck-stock-unavailable {
    color: var(--ck-error);
}

.ck-avail-red .ck-avail-dot,
.ck-stock-unavailable .ck-avail-dot {
    background: var(--ck-error);
}

.ck-store-card .ck-select-store {
    align-self: flex-start;
}

.ck-store-toggle-detail {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ck-navy);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--ck-transition);
}

.ck-store-toggle-detail:hover {
    color: var(--ck-orange);
}

/* --- Confirmation magasin --- */

.ck-store-confirm-header {
    margin-bottom: 4px;
}

.ck-store-confirm-address {
    font-size: 14px;
    color: var(--ck-text-muted);
    margin: -8px 0 12px;
}

/* --- Bannière prête sous 2h --- */

.ck-store-ready-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ck-primary-light);
    border: 1px solid var(--ck-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ck-primary);
    margin: 16px 0;
}

.ck-ready-icon {
    font-size: 18px;
}

/* --- Disponibilité par produit --- */

.ck-prod-avail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-prod-avail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    background: #fafbfc;
}

.ck-prod-avail-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.ck-prod-avail-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ck-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-prod-avail-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 auto;
}

/* ==========================================================================
   Étape 4 : Paiement
   ========================================================================== */

/* --- Blocs de vérification de la commande --- */

.ck-verify-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.ck-verify-block {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    overflow: hidden;
}

.ck-verify-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f6f8fa;
    border-bottom: 1px solid var(--ck-border);
}

.ck-verify-block-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ck-navy);
    margin: 0;
}

.ck-verify-edit {
    border: none;
    background: none;
    color: var(--ck-orange);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color var(--ck-transition);
}

.ck-verify-edit:hover {
    color: var(--ck-orange-hover);
    text-decoration: underline;
}

.ck-verify-block-content {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--ck-text);
}

.ck-verify-block-content p {
    margin: 0 0 4px;
}

.ck-verify-block-content p:last-child {
    margin-bottom: 0;
}

.ck-verify-empty {
    color: var(--ck-text-muted);
    font-style: italic;
}

/* --- Produits de vérification --- */

.ck-verify-prods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-verify-prod {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ck-verify-prod-img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.ck-verify-prod-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ck-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-verify-prod-qty {
    font-size: 13px;
    color: var(--ck-text-muted);
    font-weight: 600;
}

.ck-verify-prod-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--ck-navy);
    min-width: 80px;
    text-align: right;
}

/* --- Méthodes de paiement --- */

.ck-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.ck-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--ck-transition), background var(--ck-transition);
}

.ck-payment-method:hover {
    border-color: var(--ck-orange);
}

.ck-payment-method:has(.ck-payment-radio:checked) {
    border-color: var(--ck-primary);
    background: var(--ck-primary-light);
}

.ck-payment-radio {
    accent-color: var(--ck-primary);
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ck-payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ck-payment-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-navy);
}

.ck-payment-desc {
    font-size: 13px;
    color: var(--ck-text-muted);
}

.ck-payment-icon {
    flex: 0 1 auto;
    max-width: 120px;
    overflow: hidden;
}

.ck-payment-icon img {
    max-height: 34px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* --- CGV --- */

.ck-cgv-checkbox {
    margin: 4px 0 20px;
}

.ck-cgv-checkbox a {
    color: var(--ck-orange);
    font-weight: 600;
    text-decoration: none;
}

.ck-cgv-checkbox a:hover {
    text-decoration: underline;
}

.ck-payment-error {
    margin-top: 4px;
}

.ck-payment-body .ck-confirm-order {
    width: 100%;
    font-size: 16px;
    padding: 16px 20px;
}

/* Séparateur avant le récap de commande, qui suit désormais le bouton payer. */
.ck-payment-body .ck-confirm-order + .ck-section-title {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ck-border);
}

/* ==========================================================================
   Responsive cartes de choix
   ========================================================================== */

@media (max-width: 860px) {
    .ck-choice-grid {
        grid-template-columns: 1fr;
    }

    .ck-topbar {
        justify-content: center;
    }

    .ck-back-link {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .ck-topbar {
        gap: 10px;
    }

    .ck-delivery-grid {
        grid-template-columns: 1fr;
    }

    .ck-field-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   État de chargement (étape 3 : changement de ville / magasin / mode)
   ========================================================================== */

.ck-loading {
    position: relative;
    min-height: 120px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.ck-loading::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border: 3px solid var(--ck-border);
    border-top-color: var(--ck-orange);
    border-radius: 50%;
    animation: ck-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Popup de démo : détail du calcul (arbre de décision livraison domicile)
   ========================================================================== */

.ck-debug-trigger {
    margin-top: 16px;
    text-align: center;
}

.ck-debug-btn {
    background: none;
    border: 1px dashed var(--ck-border);
    color: var(--ck-text-muted);
    border-radius: var(--ck-radius);
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ck-debug-btn:hover {
    border-color: var(--ck-orange);
    color: var(--ck-orange);
}

.ck-debug-modal[hidden] {
    display: none !important;
}

.ck-debug-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ck-debug-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 43, 74, 0.55);
}

.ck-debug-modal-content {
    position: relative;
    background: var(--ck-bg);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow);
    max-width: 560px;
    width: calc(100% - 40px);
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px;
}

.ck-debug-modal-content h3 {
    margin: 0 0 16px;
    color: var(--ck-navy);
    font-size: 17px;
}

.ck-debug-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ck-text-muted);
    cursor: pointer;
}

.ck-debug-modal-close:hover {
    color: var(--ck-error);
}

.ck-debug-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 13px;
}

.ck-debug-table th,
.ck-debug-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ck-border);
}

.ck-debug-table th {
    color: var(--ck-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.ck-debug-table.ck-debug-options thead th {
    color: var(--ck-navy);
    background: var(--ck-orange-light);
}

.ck-debug-branch {
    font-size: 13px;
    color: var(--ck-text);
    background: var(--ck-orange-light);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .ck-debug-modal-content {
        padding: 20px;
    }
}

/* ==========================================================================
   Aperçu du calcul livraison pendant la saisie de la ville
   ========================================================================== */

.ck-delivery-preview {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ck-navy);
    background: var(--ck-orange-light);
    border-radius: 6px;
    padding: 5px 9px;
    display: inline-block;
}

.ck-delivery-preview[hidden] {
    display: none !important;
}