/* ============ CHECKOUT — STEPPER + HEADER ============
 * Lot 3 (2026-05-08) — feat/theme-v1
 * Stepper visuel au-dessus du tunnel : détaillé desktop (numéros + labels
 * sur ligne horizontale), compact mobile (Étape N/total — Label courant).
 * État courant détecté via :has() ciblant la section.checkout-step.-current.
 * Loaded at priority 64 (after alter-checkout-base=62, before alter-cms=65).
 */

.checkout-stepper {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 20px 24px;
    background-color: var(--as-white, #ffffff);
    border: 1px solid var(--as-hairline);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    counter-reset: stepper;
}

.checkout-stepper-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    color: var(--as-grey-300);
    font-family: var(--as-font-family);
    font-size: 15px;
    font-weight: 500;
    transition: color .15s ease;
}

/* Connector entre les items */
.checkout-stepper-item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background-color: var(--as-hairline);
    margin-left: 8px;
    transition: background-color .15s ease;
}

.checkout-stepper-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--as-grey-100);
    color: var(--as-grey-300);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1.5px solid var(--as-hairline);
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease;
}

.checkout-stepper-label {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- États basés sur :has() — détection step courant ---------- */
/* Step 1 — Identité */
body#checkout:has(#checkout-personal-information-step.-current)
    .checkout-stepper-item[data-step="personal-information"],
body#checkout:has(#checkout-personal-information-step.-complete)
    .checkout-stepper-item[data-step="personal-information"] {
    color: var(--as-grey-900);
}

body#checkout:has(#checkout-personal-information-step.-current)
    .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-num {
    background-color: var(--as-amaranth);
    color: #ffffff;
    border-color: var(--as-amaranth);
}

/* Step 2 — Adresse */
body#checkout:has(#checkout-addresses-step.-current)
    .checkout-stepper-item[data-step="addresses"],
body#checkout:has(#checkout-addresses-step.-complete)
    .checkout-stepper-item[data-step="addresses"] {
    color: var(--as-grey-900);
}

body#checkout:has(#checkout-addresses-step.-current)
    .checkout-stepper-item[data-step="addresses"] .checkout-stepper-num {
    background-color: var(--as-amaranth);
    color: #ffffff;
    border-color: var(--as-amaranth);
}

/* Step 3 — Livraison */
body#checkout:has(#checkout-delivery-step.-current)
    .checkout-stepper-item[data-step="delivery"],
body#checkout:has(#checkout-delivery-step.-complete)
    .checkout-stepper-item[data-step="delivery"] {
    color: var(--as-grey-900);
}

body#checkout:has(#checkout-delivery-step.-current)
    .checkout-stepper-item[data-step="delivery"] .checkout-stepper-num {
    background-color: var(--as-amaranth);
    color: #ffffff;
    border-color: var(--as-amaranth);
}

/* Step 4 — Paiement */
body#checkout:has(#checkout-payment-step.-current)
    .checkout-stepper-item[data-step="payment"],
body#checkout:has(#checkout-payment-step.-complete)
    .checkout-stepper-item[data-step="payment"] {
    color: var(--as-grey-900);
}

body#checkout:has(#checkout-payment-step.-current)
    .checkout-stepper-item[data-step="payment"] .checkout-stepper-num {
    background-color: var(--as-amaranth);
    color: #ffffff;
    border-color: var(--as-amaranth);
}

/* Étapes complétées : rond + connector ink (noir) — conforme maquette V2
   (.ck-step__n.is-done = bg ink). Remplace l'ancien vert success vif (#1FAB5C)
   qui jurait avec la palette rouge/noir/gris. */
body#checkout:has(#checkout-personal-information-step.-complete)
    .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-num,
body#checkout:has(#checkout-addresses-step.-complete)
    .checkout-stepper-item[data-step="addresses"] .checkout-stepper-num,
body#checkout:has(#checkout-delivery-step.-complete)
    .checkout-stepper-item[data-step="delivery"] .checkout-stepper-num {
    background-color: var(--as-bg-primary);
    color: #ffffff;
    border-color: var(--as-bg-primary);
    /* Check icon via mask */
    font-size: 0;
}

body#checkout:has(#checkout-personal-information-step.-complete)
    .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-num::before,
body#checkout:has(#checkout-addresses-step.-complete)
    .checkout-stepper-item[data-step="addresses"] .checkout-stepper-num::before,
body#checkout:has(#checkout-delivery-step.-complete)
    .checkout-stepper-item[data-step="delivery"] .checkout-stepper-num::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.485 4.515a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L6.778 9.808l5.293-5.293a1 1 0 0 1 1.414 0z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.485 4.515a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L6.778 9.808l5.293-5.293a1 1 0 0 1 1.414 0z'/></svg>") no-repeat center / contain;
}

/* Connector ink des étapes complétées (conforme maquette V2, ex-vert success) */
body#checkout:has(#checkout-personal-information-step.-complete)
    .checkout-stepper-item[data-step="personal-information"]::after,
body#checkout:has(#checkout-addresses-step.-complete)
    .checkout-stepper-item[data-step="addresses"]::after,
body#checkout:has(#checkout-delivery-step.-complete)
    .checkout-stepper-item[data-step="delivery"]::after {
    background-color: var(--as-bg-primary);
}

/* ---------- Responsive : tablet (576-991px) — réduction labels ---------- */
@media (max-width: 991.98px) {
    .checkout-stepper {
        padding: 16px 18px;
    }

    .checkout-stepper-item {
        font-size: 14px;
    }

    .checkout-stepper-num {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

/* ---------- Mobile (≤ 575px) — compact "Étape N/4 — Label" ---------- */
@media (max-width: 575.98px) {
    .checkout-stepper {
        padding: 14px 16px;
        gap: 8px;
        align-items: center;
        position: relative;
    }

    /* En mobile, on n'affiche que l'étape courante avec son label */
    .checkout-stepper-item {
        display: none;
        flex: 0 0 auto;
        width: 100%;
    }

    body#checkout:has(#checkout-personal-information-step.-current)
        .checkout-stepper-item[data-step="personal-information"],
    body#checkout:has(#checkout-addresses-step.-current)
        .checkout-stepper-item[data-step="addresses"],
    body#checkout:has(#checkout-delivery-step.-current)
        .checkout-stepper-item[data-step="delivery"],
    body#checkout:has(#checkout-payment-step.-current)
        .checkout-stepper-item[data-step="payment"] {
        display: flex;
    }

    .checkout-stepper-item::after {
        display: none !important;
    }

    /* Indicateur "Étape N/4" au-dessus du label */
    .checkout-stepper-item .checkout-stepper-label::before {
        content: attr(data-step-counter);
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--as-grey-500);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-label::before {
        content: "Étape 1 / 4";
    }
    .checkout-stepper-item[data-step="addresses"] .checkout-stepper-label::before {
        content: "Étape 2 / 4";
    }
    .checkout-stepper-item[data-step="delivery"] .checkout-stepper-label::before {
        content: "Étape 3 / 4";
    }
    .checkout-stepper-item[data-step="payment"] .checkout-stepper-label::before {
        content: "Étape 4 / 4";
    }

    /* Cas virtual cart : pas de step livraison, paiement = 3/3 */
    body#checkout:has(#checkout-payment-step):not(:has(#checkout-delivery-step))
        .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-label::before {
        content: "Étape 1 / 3";
    }
    body#checkout:has(#checkout-payment-step):not(:has(#checkout-delivery-step))
        .checkout-stepper-item[data-step="addresses"] .checkout-stepper-label::before {
        content: "Étape 2 / 3";
    }
    body#checkout:has(#checkout-payment-step):not(:has(#checkout-delivery-step))
        .checkout-stepper-item[data-step="payment"] .checkout-stepper-label::before {
        content: "Étape 3 / 3";
    }

    .checkout-stepper-label {
        display: flex;
        flex-direction: column;
        font-size: 18px;
        font-weight: 600;
        color: var(--as-grey-900);
        line-height: 1.2;
    }

    .checkout-stepper-num {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

/* ---------- Header tunnel (Lot I P2-b) : barre conversion ----------
 * Retour panier · logo centré · réassurance. La nav catégorie (megamenu) et
 * le top mobile restent dans le DOM pour les bindings JS PS mais sont masqués
 * dans le tunnel (cf header.tpl, override DECISION_LOG D-008). */
body#checkout .header-nav > .container > .row,
body#checkout .header-top {
    display: none !important;
}

body#checkout .header-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body#checkout .checkout-header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 0;
}

body#checkout .checkout-header-bar .checkout-logo {
    flex: 0 0 auto;
    margin: 0 auto;
    line-height: 0;
}

body#checkout .checkout-header-bar .checkout-logo img {
    max-height: 30px;
    width: auto;
}

/* Lien retour panier — texte clair sur header sombre, soulignement amaranth.
 * !important requis : `body#checkout a:not(.btn):not(.address):not(...)`
 * d'alter-checkout-base.css a une spécificité (1,4,2) via ses :not() et force
 * grey-900 (invisible sur le header sombre). Cf pattern D-006 (cascade tenace). */
body#checkout .checkout-header-bar .checkout-back-to-cart,
body#checkout .checkout-header-bar a.checkout-back-to-cart {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--as-font-family);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

body#checkout .checkout-header-bar .checkout-back-to-cart:hover,
body#checkout .checkout-header-bar a.checkout-back-to-cart:hover {
    color: #ffffff !important;
    text-decoration-thickness: 3px;
}

body#checkout .checkout-header-bar .checkout-back-to-cart svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Réassurance header */
body#checkout .checkout-header-trust {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

body#checkout .checkout-header-trust .cht-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--as-font-family);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

body#checkout .checkout-header-trust .cht-item svg {
    width: 17px;
    height: 17px;
    color: var(--as-amaranth);
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    body#checkout .checkout-header-trust {
        display: none;
    }

    body#checkout .checkout-header-bar {
        min-height: 48px;
        gap: 10px;
    }

    body#checkout .checkout-back-to-cart span {
        font-size: 13px;
    }
}