/* ============================================================
 * DÉLICES SUPRÊMES — 09. Page checkout (commande)
 * ============================================================
 * Stratégie : on garde le moteur Symfony de PrestaShop intact
 * (ne pas casser les étapes), on restyle agressivement le DOM
 * généré et on ajoute un wrapper éditorial autour.
 *
 * Layout cible (design source ECheckout) :
 *   ← Retour au panier
 *   Commande (italic 56px)
 *   ┌─[1]─[2]─[3]──────────────────────┐
 *   │ Étape 01 → 02 → 03                │
 *   ├──────────────────────┬────────────┤
 *   │ Formulaires step     │ Récap      │
 *   │ ID / Livraison / Pay │ articles   │
 *   │ [← Précédent] [Continuer →]       │
 *   └──────────────────────┴────────────┘
 * ========================================================= */

#checkout {
    background: var(--ds-cream-soft, #FBF7F3);
    padding: var(--ds-space-8) 0 var(--ds-space-24);
}

#checkout .container,
.page-checkout {
    max-width: 1280px;
    padding-left: var(--ds-space-12);
    padding-right: var(--ds-space-12);
}

/* ─── Header checkout (logo simplifié + retour) ─────────── */
#checkout #header,
body#checkout #header,
body#order-confirmation #header {
    background: #ffffff;
    border-bottom: 1px solid var(--ds-gray-200);
    padding: 0;
    box-shadow: none;
}

body#checkout .header-top,
body#order-confirmation .header-top {
    background: transparent;
    padding: 0;
}

body#checkout .logo,
body#order-confirmation .logo {
    max-height: 44px;
}

/* Header checkout 3 colonnes : retour | logo centré | trust */
.ds-checkout-header {
    background: #ffffff;
    border-bottom: 1px solid var(--ds-gray-200);
}

.ds-checkout-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px var(--ds-space-12);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.ds-checkout-header__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-gray-600);
    text-decoration: none;
    transition: color var(--ds-transition);
}

.ds-checkout-header__back:hover {
    color: var(--ds-coral);
}

.ds-checkout-header__logo {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ds-checkout-header__logo img.logo {
    max-height: 48px;
    width: auto;
    display: block;
}

.ds-checkout-header__trust {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-ink);
    font-weight: 500;
}

.ds-checkout-header__trust svg {
    color: var(--ds-coral);
}

@media (max-width: 767px) {
    .ds-checkout-header__inner {
        padding: 14px var(--ds-pad-x, 16px);
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }
    .ds-checkout-header__back-label {
        display: none;
    }
    .ds-checkout-header__logo img.logo {
        max-height: 36px;
    }
    .ds-checkout-header__trust span {
        display: none;
    }
}

/* Bouton retour panier (injecté par ds-theme.js) — masqué car le nouveau
   header.tpl checkout fournit déjà un lien "Retour au panier" en haut. */
.ds-checkout-back {
    display: none;
}

/* ─── Titre éditorial ───────────────────────────────────── */
#checkout h1,
.page-checkout h1,
#checkout .ds-checkout-title {
    font-family: var(--ds-font-display);
    font-size: clamp(40px, 6vw, 56px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    color: var(--ds-ink);
    margin: 0 0 var(--ds-space-10);
}

/* ─── Stepper visuel (étapes 01 / 02 / 03) ─────────────── */
.ds-checkout-stepper {
    display: flex;
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-12);
    padding-bottom: var(--ds-space-6);
    border-bottom: 1px solid var(--ds-gray-200);
}

.ds-checkout-stepper__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-checkout-stepper__num {
    width: 32px;
    height: 32px;
    background: var(--ds-gray-200);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    flex-shrink: 0;
}

.ds-checkout-stepper__item--current .ds-checkout-stepper__num {
    background: var(--ds-coral);
}

.ds-checkout-stepper__item--done .ds-checkout-stepper__num {
    background: var(--ds-ink);
}

.ds-checkout-stepper__item--done .ds-checkout-stepper__num::after {
    content: "✓";
}

.ds-checkout-stepper__item--done .ds-checkout-stepper__num-text {
    display: none;
}

.ds-checkout-stepper__label {
    flex: 1;
    min-width: 0;
}

.ds-checkout-stepper__eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ds-gray-600);
    line-height: 1;
    margin-bottom: 4px;
}

.ds-checkout-stepper__title {
    font-size: 14px;
    font-weight: 400;
    color: var(--ds-ink);
}

.ds-checkout-stepper__item--current .ds-checkout-stepper__title {
    font-family: var(--ds-font-display);
    font-style: italic;
    font-weight: 600;
}

.ds-checkout-stepper__connector {
    flex: 1;
    height: 1px;
    background: var(--ds-gray-200);
    margin: 0 8px;
    max-width: 80px;
}

/* ─── Layout 2 colonnes (form + récap) ──────────────────── */
#checkout-process,
#checkout-process-form,
.checkout-process,
.row .col-md-8.col-lg-9,
.row > .col-checkout-form {
    width: 100%;
}

.checkout-page-layout,
#checkout > .container > .row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--ds-space-12);
    align-items: flex-start;
    margin: 0;
}

#checkout .col-md-8,
#checkout #checkout-process {
    width: 100%;
    flex: none;
    max-width: none;
    padding: 0;
}

#checkout .col-md-4,
#checkout #cart-summary-product-list-container,
#checkout .checkout-summary {
    width: 100%;
    flex: none;
    max-width: none;
    padding: 0;
    position: sticky;
    top: 100px;
}

/* ─── Card étape (chaque step) ──────────────────────────── */
.checkout-step,
section.checkout-step,
.step,
#checkout-personal-information-step,
#checkout-addresses-step,
#checkout-delivery-step,
#checkout-payment-step {
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: var(--ds-space-4);
    padding: var(--ds-space-8);
    transition: opacity var(--ds-transition);
}

.checkout-step.-current,
.checkout-step.js-current-step {
    border: 1px solid var(--ds-ink);
}

.checkout-step.-unreachable,
.checkout-step.-clickable + .checkout-step.-unreachable {
    opacity: 0.5;
    pointer-events: none;
}

.checkout-step .step-title,
.checkout-step h1.step-title,
.checkout-step h2.step-title {
    font-family: var(--ds-font-display);
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    color: var(--ds-ink);
    margin: 0 0 var(--ds-space-6);
    padding: 0;
    border: none;
    cursor: default;
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    background: transparent;
}

.checkout-step .step-title .step-number,
.checkout-step .step-number {
    background: var(--ds-coral);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-family: var(--ds-font-body);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    flex-shrink: 0;
}

.checkout-step .step-edit,
.checkout-step .edit-button {
    margin-left: auto;
    color: var(--ds-coral);
    font-size: 12px;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

/* ─── Formulaires checkout ──────────────────────────────── */
.checkout-step .form-fields,
.checkout-step form,
.js-customer-form {
    margin: 0;
}

.checkout-step .form-group,
.checkout-step .form-control-label {
    margin-bottom: var(--ds-space-4);
}

.checkout-step .form-control-label,
.checkout-step label,
.ds-form-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ds-gray-600);
    margin-bottom: 6px;
    font-weight: 500;
    display: block;
}

.checkout-step input.form-control,
.checkout-step select.form-control,
.checkout-step textarea.form-control,
#checkout input[type="text"],
#checkout input[type="email"],
#checkout input[type="tel"],
#checkout input[type="password"],
#checkout select,
#checkout textarea {
    background: #ffffff;
    border: 1px solid var(--ds-gray-200);
    padding: 12px 14px;
    border-radius: 0;
    font-family: var(--ds-font-body);
    font-size: 14px;
    color: var(--ds-ink);
    width: 100%;
    box-shadow: none;
    transition: border-color var(--ds-transition);
}

.checkout-step input.form-control:focus,
#checkout input:focus,
#checkout select:focus,
#checkout textarea:focus {
    border-color: var(--ds-coral);
    outline: none;
    box-shadow: none;
}

.checkout-step input.form-control.is-invalid,
.checkout-step .has-danger input {
    border-color: var(--ds-coral);
}

.checkout-step .form-row,
.checkout-step .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-4);
    margin: 0;
}

.checkout-step .form-row > .col-md-6,
.checkout-step .form-row > .col {
    width: 100%;
    flex: none;
    max-width: none;
    padding: 0;
}

.checkout-step .form-row > .col-md-12,
.checkout-step .col-md-12 {
    grid-column: 1 / -1;
}

/* Help text & messages d'erreur */
.checkout-step .form-control-comment,
.checkout-step small.form-text {
    font-size: 12px;
    color: var(--ds-gray-600);
    margin-top: 4px;
}

.checkout-step .invalid-feedback,
.checkout-step .help-block-error li {
    color: var(--ds-coral);
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    list-style: none;
}

/* Checkbox newsletter */
.checkout-step .form-check,
.checkout-step .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--ds-space-3);
    font-size: 13px;
    color: var(--ds-ink);
}

.checkout-step .form-check input,
.checkout-step .custom-checkbox input,
.checkout-step input[type="checkbox"] {
    accent-color: var(--ds-coral);
    width: 16px;
    height: 16px;
    margin: 0;
}

/* ─── Options de livraison (radios cards) ──────────────── */
.delivery-options,
.delivery-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.delivery-option,
.delivery-options-list .delivery-option,
.delivery-option > label,
.delivery-options label {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: var(--ds-space-5);
    border: 1.5px solid var(--ds-gray-200);
    background: #ffffff;
    cursor: pointer;
    transition: all var(--ds-transition);
    margin: 0;
    border-radius: 0;
    width: 100%;
}

.delivery-option:hover {
    border-color: var(--ds-gray-400);
}

.delivery-option.is-active,
.delivery-option:has(input:checked),
.delivery-options input:checked + label,
.delivery-options input:checked ~ label {
    border-color: var(--ds-ink);
    background: var(--ds-cream);
}

.delivery-option input[type="radio"] {
    accent-color: var(--ds-coral);
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.delivery-option .carrier-name,
.delivery-option .h6,
.delivery-option strong {
    font-weight: 500;
    color: var(--ds-ink);
    font-size: 15px;
    font-family: var(--ds-font-body);
    font-style: normal;
}

.delivery-option .carrier-delay,
.delivery-option small {
    color: var(--ds-gray-600);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.delivery-option .carrier-price,
.delivery-option .price {
    margin-left: auto;
    font-weight: 600;
    color: var(--ds-ink);
    font-size: 15px;
    white-space: nowrap;
}

/* ─── Options de paiement (idem livraison) ─────────────── */
.payment-options,
.payment-options-list,
.js-payment-binary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.payment-option,
.payment-option > label,
.js-payment-option-form {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: var(--ds-space-5);
    border: 1.5px solid var(--ds-gray-200);
    background: #ffffff;
    cursor: pointer;
    transition: all var(--ds-transition);
    margin: 0 !important;
    border-radius: 0;
    width: 100%;
}

.payment-option:has(input:checked),
.payment-option.is-active,
.payment-options input:checked + label {
    border-color: var(--ds-ink);
    background: var(--ds-cream);
}

.payment-option input[type="radio"] {
    accent-color: var(--ds-coral);
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.payment-option-name {
    font-weight: 500;
    color: var(--ds-ink);
    font-size: 15px;
}

.payment-option-detail {
    font-size: 12px;
    color: var(--ds-gray-600);
    margin-top: 4px;
}

.payment-options img,
.payment-option img {
    max-height: 24px;
    margin-left: auto;
}

/* Détails additionnels du paiement (instructions Wave) */
.additional-information,
.payment-options .additional-information {
    background: var(--ds-cream);
    padding: var(--ds-space-6);
    margin-top: var(--ds-space-3);
    font-size: 13px;
    color: var(--ds-gray-800);
    border: none;
    line-height: 1.6;
}

/* ─── Conditions générales ──────────────────────────────── */
.condition-label,
#conditions-to-approve label {
    font-size: 13px;
    color: var(--ds-ink);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.condition-label a,
#conditions-to-approve a {
    color: var(--ds-coral);
    text-decoration: underline;
}

#conditions-to-approve {
    margin: var(--ds-space-6) 0;
}

/* ─── Boutons de navigation ─────────────────────────────── */
.checkout-step .continue,
.checkout-step button[type="submit"],
.checkout-step .btn-primary,
#checkout #payment-confirmation button {
    background: var(--ds-coral);
    color: #ffffff;
    border: none;
    padding: 16px var(--ds-space-6);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    transition: filter var(--ds-transition);
    flex: 1;
    box-shadow: none;
    text-shadow: none;
    width: 100%;
}

.checkout-step .continue:hover,
.checkout-step .btn-primary:hover {
    filter: brightness(0.92);
    color: #ffffff;
}

.checkout-step .continue::after,
.checkout-step button[type="submit"]:not([disabled])::after {
    content: " →";
}

.checkout-step .continue[disabled],
.checkout-step .btn-primary[disabled] {
    background: var(--ds-gray-400);
    cursor: not-allowed;
}

/* Bouton retour étape précédente */
.checkout-step .back-to-step,
.btn-back-step {
    background: transparent;
    color: var(--ds-ink);
    border: 1px solid var(--ds-ink);
    padding: 14px var(--ds-space-5);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: all var(--ds-transition);
}

.checkout-step .back-to-step:hover {
    background: var(--ds-ink);
    color: #ffffff;
}

.checkout-step .step-actions,
.checkout-step .btn-group,
.checkout-step .footer-bar {
    display: flex;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-6);
    padding: 0;
    background: transparent;
    border: none;
}

/* ─── Sidebar récapitulatif checkout ────────────────────── */
#checkout-summary,
.checkout-summary,
.cart-summary.checkout-summary,
#cart-summary-product-list-container,
.card.checkout-summary {
    background: var(--ds-cream);
    padding: var(--ds-space-7);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.checkout-summary h3,
.checkout-summary .h3,
.checkout-summary .card-title,
#cart-summary-product-list-container h3 {
    font-family: var(--ds-font-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    color: var(--ds-ink);
    margin: 0 0 var(--ds-space-5);
    padding: 0;
    border: none;
    background: transparent;
}

/* Liste articles dans le récap */
.checkout-summary .media,
.checkout-summary .product-line-grid,
#cart-summary-product-list .product-line-grid,
.cart-summary-products li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border: none;
    background: transparent;
    margin: 0;
}

.checkout-summary .media-left img,
.checkout-summary .product-image img,
#cart-summary-product-list img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0;
    background: var(--ds-coral-pale);
}

.checkout-summary .product-name {
    font-size: 13px;
    color: var(--ds-ink);
    font-weight: 500;
    line-height: 1.3;
    flex: 1;
}

.checkout-summary .product-quantity {
    font-size: 11px;
    color: var(--ds-gray-600);
    margin-top: 2px;
}

.checkout-summary .product-price,
.checkout-summary .price {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink);
    white-space: nowrap;
}

/* Lignes totaux */
.checkout-summary .cart-summary-line,
#cart-summary-product-list-container .cart-summary-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    border: none;
}

.checkout-summary .cart-summary-line.cart-total,
.checkout-summary .cart-total {
    margin-top: var(--ds-space-4);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-gray-200);
    align-items: baseline;
}

.checkout-summary .cart-total .label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}

.checkout-summary .cart-total .value {
    font-family: var(--ds-font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--ds-ink);
}

/* ─── Page de confirmation finale ──────────────────────── */
#order-confirmation,
#order-confirmation .container {
    max-width: 720px;
    text-align: center;
    padding: var(--ds-space-24) var(--ds-space-12);
}

#order-confirmation h1,
#order-confirmation .h1 {
    font-family: var(--ds-font-display);
    font-size: 64px;
    font-style: italic;
    font-weight: 400;
    color: var(--ds-ink);
    margin: var(--ds-space-8) 0 var(--ds-space-4);
}

#order-confirmation .icon-success,
.ds-confirmation-star {
    width: 96px;
    height: 96px;
    background: var(--ds-coral);
    margin: 0 auto var(--ds-space-8);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-family: var(--ds-font-display);
    font-style: italic;
    font-size: 48px;
    border-radius: 0;
}

.ds-confirmation-star::before {
    content: "★";
}

#order-confirmation p {
    font-size: 16px;
    color: var(--ds-gray-600);
    margin-top: var(--ds-space-4);
    line-height: 1.6;
}

#order-confirmation .btn-primary {
    background: var(--ds-ink);
    color: #ffffff;
    padding: 16px var(--ds-space-8);
    margin-top: var(--ds-space-10);
}

/* ─── Adresses (étape adresses) ─────────────────────────── */
#delivery-addresses,
#invoice-addresses,
.address-selector,
.address-item {
    background: #ffffff;
}

.address-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-4);
}

.address-item,
.address-selector .address {
    border: 1.5px solid var(--ds-gray-200);
    padding: var(--ds-space-5);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--ds-transition);
}

.address-item:hover,
.address-selector .address:hover {
    border-color: var(--ds-gray-400);
}

.address-item.selected,
.address-selector .address.selected,
.address-selector input:checked + label {
    border-color: var(--ds-ink);
    background: var(--ds-cream);
}

.address-alias {
    font-family: var(--ds-font-display);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    color: var(--ds-ink);
    margin: 0 0 8px;
}

.address-detail {
    font-size: 13px;
    color: var(--ds-gray-600);
    line-height: 1.5;
}