/* ============ CHECKOUT — RESPONSIVE SWEEP + A11Y POLISH ============
 * Lot 9 (2026-05-08) — feat/theme-v1
 * Tweaks transversaux : ajustements mobile cross-step, prefers-reduced-
 * motion, prefers-contrast, focus visible globaux supplémentaires,
 * landmarks ARIA, reset hooks modules custom dans le tunnel.
 * Loaded at priority 72 (after summary=71, before reassurance=75).
 */

/* ---------- Container responsive global ---------- */
@media (max-width: 991.98px) {
    body#checkout #content,
    body#checkout #content-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    body#checkout .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    body#checkout .cart-grid-body,
    body#checkout .cart-grid-right {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 575.98px) {
    body#checkout section.checkout-step .content {
        padding: 18px 18px;
    }

    body#checkout section.checkout-step .step-title {
        padding: 18px 18px !important;
        font-size: 18px !important;
    }
}

/* ---------- Step header alignement ---------- */
body#checkout section.checkout-step .step-title {
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: none;
    letter-spacing: 0;
}

body#checkout section.checkout-step .step-edit,
body#checkout section.checkout-step .step-title .step-edit {
    margin-left: auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--as-grey-700) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--as-amaranth) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
    cursor: pointer;
}

body#checkout section.checkout-step .step-edit:hover {
    text-decoration-thickness: 3px !important;
}

body#checkout section.checkout-step .step-edit .material-icons {
    font-size: 16px;
    margin-right: 4px;
}

/* ---------- Step .-unreachable visual treatment ---------- */
body#checkout section.checkout-step.-unreachable .step-title {
    color: var(--as-grey-300);
    cursor: not-allowed;
    pointer-events: none;
}

body#checkout section.checkout-step.-unreachable .step-number {
    background-color: var(--as-grey-100) !important;
    color: var(--as-grey-300) !important;
}

/* ---------- Modules custom hooks dans tunnel ---------- */
/* AlterStopSmoke goodies CTA dans cart-summary tunnel : alignement DS */
body#checkout .cart-summary [class*="goodies"] .btn,
body#checkout .cart-summary button[class*="choisir"] {
    background-color: var(--as-amaranth);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
}

/* AlterLoyalty / badge widgets injectés tunnel : marge pour ne pas coller */
body#checkout .info-order [class*="alterloyalty"],
body#checkout .info-order [class*="alterbadge"],
body#checkout section.checkout-step [class*="loyalty-widget"] {
    margin: 12px 0;
}

/* ---------- Prefers reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body#checkout *,
    body#checkout *::before,
    body#checkout *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Prefers contrast more (a11y bump) ---------- */
@media (prefers-contrast: more) {
    body#checkout .form-control,
    body#checkout input[type="text"],
    body#checkout input[type="email"],
    body#checkout input[type="password"],
    body#checkout select,
    body#checkout textarea {
        border-color: var(--as-grey-700) !important;
        border-width: 1.5px !important;
    }

    body#checkout .delivery-option,
    body#checkout .payment-option,
    body#checkout section.checkout-step .address-item {
        border-color: var(--as-grey-700);
    }

    body#checkout .delivery-option:has(input:checked),
    body#checkout .payment-option:has(input:checked),
    body#checkout section.checkout-step .address-item.selected {
        outline: 3px solid var(--as-amaranth);
        outline-offset: 1px;
    }

    body#checkout a:not(.btn) {
        text-decoration-thickness: 2px !important;
    }
}

/* ---------- Focus visible — extras pour landmarks ---------- */
body#checkout .checkout-stepper-item:focus-visible,
body#checkout .checkout-stepper-num:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: 3px;
    border-radius: 50%;
}

/* Skip link amélioration (si présent) */
body#checkout .skip-to-content,
body#checkout a[href="#main"]:focus,
body#checkout a[href="#content"]:focus {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 8px 16px;
    background-color: var(--as-grey-900);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 500;
}

/* ---------- Aria-invalid visual reinforcement ---------- */
body#checkout [aria-invalid="true"] + .invalid-feedback,
body#checkout [aria-invalid="true"] ~ .invalid-feedback,
body#checkout [aria-invalid="true"] + small.form-text {
    color: var(--as-amaranth);
    font-weight: 500;
}

body#checkout [aria-invalid="true"]::before {
    content: "";
}

/* ---------- Mobile : hauteur min CTA tactile (44px Apple HIG) ---------- */
@media (max-width: 991.98px) {
    body#checkout .btn-primary,
    body#checkout .btn-outline-primary,
    body#checkout .btn-secondary,
    body#checkout .nav-link,
    body#checkout .add-address a,
    body#checkout .add-address {
        min-height: 48px;
    }

    body#checkout .custom-checkbox > span:not(.condition-label),
    body#checkout .custom-radio > span {
        width: 24px;
        height: 24px;
    }

    body#checkout .custom-radio input[type="radio"],
    body#checkout .custom-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    body#checkout .custom-radio > span::after {
        width: 14px;
        height: 14px;
    }
}

/* ---------- Print ---------- */
@media print {
    body#checkout .cart-grid-right,
    body#checkout .checkout-stepper,
    body#checkout .keep-going-container,
    body#checkout #notifications,
    body#checkout .header-nav,
    body#checkout footer {
        display: none !important;
    }

    body#checkout {
        background-color: #ffffff !important;
    }

    body#checkout section.checkout-step {
        page-break-inside: avoid;
        border: 1px solid #999 !important;
    }
}

/* =====================================================================
   Session 7 — DEMO-7 micro polish 2026-05-21
   Quick wins CSS-only avant démo (zero markup, zero JS).
   ===================================================================== */

/* (a) Newsletter checkbox masquée — Loi Évin + directive 2014/40/UE
   interdit la promo marketing vape FR. Cf memory
   feedback_no_newsletter_vape_france. Le markup natif PS reste injecté
   par le hook customer-form, on le hide visuellement + on retire de la
   tabulation (a11y). */
body#checkout .custom-checkbox input[name="newsletter"],
body#checkout .custom-checkbox input[name="psgdpr"][data-purpose*="newsletter" i],
body#checkout .checkbox-field--newsletter,
body#checkout .form-group:has(input[name="newsletter"]) {
    display: none !important;
}

body#checkout .custom-checkbox input[name="newsletter"] + span,
body#checkout .custom-checkbox input[name="newsletter"] ~ label {
    display: none !important;
}

/* (b) Helper text inline (« Seules les lettres et le point (.)… »)
   discrétisé : police plus petite + couleur muted + max-width contenue
   pour ne pas casser la grille du form. Markup PS = span.form-control-comment
   direct dans .col-md-6.js-input-column (pas dans .form-group). */
body#checkout .form-control-comment,
body#checkout span.form-control-comment,
body#checkout small.form-text,
body#checkout .form-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--as-grey-700, #5F5C66) !important;
    margin-top: 4px;
    max-width: 320px;
    display: block;
}

/* Optional label (« Optionnel ») rendered next to fields — uppercase
   tracking-label en gris muted, harmonisé avec le DS. */
body#checkout .form-text-optional,
body#checkout span.optional-label,
body#checkout .js-input-column + .text-muted {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 600;
    color: var(--as-grey-500, #8E8B96);
}

/* (c) Stepper — fine ligne de progression entre les numéros (desktop).
   La barre vit dans `.checkout-step-nav` ou `.step-nav` selon le markup
   du theme. On utilise un pseudo-element ::before sur le container pour
   ne pas toucher au tpl. La couleur passe à amaranth pour les segments
   "déjà parcourus". */
body#checkout .checkout-process,
body#checkout .step-progress {
    position: relative;
}

@media (min-width: 768px) {
    body#checkout .checkout-process::before,
    body#checkout .step-progress::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 5%;
        right: 5%;
        height: 2px;
        background: var(--as-grey-200, #DDE1E3);
        z-index: 0;
        pointer-events: none;
    }
}

/* (d) Code promo placeholder — substitue le placeholder dashes
   "- - - - -" par un libellé clair. Le placeholder natif est défini
   côté input PS, on le remplace via attribute selector + ::placeholder
   color uniformisée. */
body#checkout input[name="discount_name"]::placeholder,
body#checkout .promo-code input::placeholder,
body#checkout .promo-input input::placeholder {
    color: var(--as-grey-500, #8E8B96);
    opacity: 1;
    font-style: normal;
    letter-spacing: 0;
}

/* (e) CTA "afficher les détails" du récap : un peu plus marqué visuel
   pour signaler son interactivité. */
body#checkout .cart-summary-products .js-show-details,
body#checkout .show-details,
body#checkout [aria-controls="cart-summary-product-list"] {
    color: var(--as-grey-900, #0F0F0F);
    text-decoration: underline;
    text-decoration-color: var(--as-amaranth);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    font-weight: 600;
    transition: color 180ms ease;
}

body#checkout .cart-summary-products .js-show-details:hover,
body#checkout .show-details:hover {
    color: var(--as-amaranth);
}

/* =====================================================================
   DEMO-7.5 — Sidebar récap V2-like + trust signals (2026-05-21)
   Port partiel du design "Checkout AlterSmoke V2.html" (abo-front/project/)
   namespace .ck → classes existantes PS, sans modifier le markup Smarty.
   Scope : récap sidebar visuel + trust signals + "OFFERTE" badge.
   ===================================================================== */

/* Container récap : card premium radius/shadow + spacing aéré.
   La règle théme classic-child a un border-radius léger, on bump pour
   matcher la card V2 (radius-md = 10px). */
body#checkout .cart-summary {
    border-radius: var(--as-radius-large, 10px) !important;
    box-shadow: var(--as-shadow-soft, 0 6px 18px rgba(15, 23, 42, 0.08));
    background: #FFFFFF;
}

/* Titre "RÉCAPITULATIF" — uppercase tracking-label DS, gris muted.
   Le markup PS rend souvent juste "Total" ou rien selon les modules,
   on injecte un label via pseudo-element si le container n'en a pas. */
body#checkout .cart-summary > h3,
body#checkout .cart-summary > .h3,
body#checkout .cart-summary .cart-summary-top h3 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: var(--as-grey-700, #5F5C66);
    margin-bottom: 12px;
}

/* "Livraison OFFERTE" — badge couleur succès au lieu du texte gris.
   PS rend la value="Offerte" / "offerte" dans .cart-summary-shipping .value
   (ou .cart-summary-line:has(.shipping) .value selon version). */
body#checkout .cart-summary-line.cart-summary-shipping .value,
body#checkout .cart-summary-shipping .value,
body#checkout .cart-summary-line .value[data-free="true"] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--as-success, #1FAB5C);
}

/* Cards produits compactes dans le détail récap (porté du V2 design).
   Le markup PS = `<li class="media">` avec .media-left (image) +
   .media-body (titre + qty + prix). On restyle en compact card avec
   séparation hairline + photo radius + brand/title hiérarchisés. */
body#checkout .cart-summary-products .media-list .media,
body#checkout .cart-summary-products .media {
    border-bottom: 1px solid var(--as-grey-200, #DDE1E3);
    padding: 12px 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

body#checkout .cart-summary-products .media-list .media:last-child,
body#checkout .cart-summary-products .media:last-child {
    border-bottom: 0;
}

body#checkout .cart-summary-products .media-left {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

body#checkout .cart-summary-products .media-left img,
body#checkout .cart-summary-products .media-left .media-object {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--as-radius-small, 6px);
    background: var(--as-grey-100, #EDEDF3);
}

body#checkout .cart-summary-products .media-body {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
}

body#checkout .cart-summary-products .media-body strong,
body#checkout .cart-summary-products .media-body .product-name,
body#checkout .cart-summary-products .media-body a {
    color: var(--as-grey-900, #0F0F0F);
    font-weight: 600;
    text-decoration: none;
    display: block;
}

body#checkout .cart-summary-products .media-body .product-price,
body#checkout .cart-summary-products .media-body .price {
    color: var(--as-amaranth);
    font-weight: 700;
}

/* Trust signal block — injecté via pseudo-element ::after sur le bouton
   submit "CONTINUER" du form. Pas de markup change. La règle se contente
   d'afficher une rangée trust juste sous le CTA. */
body#checkout #checkout-personal-information-step button[type="submit"],
body#checkout #checkout-guest-form button[type="submit"],
body#checkout #checkout-login-form button[type="submit"],
body#checkout .form-footer .btn-primary {
    position: relative;
}

body#checkout #checkout-personal-information-step .form-footer::after,
body#checkout #checkout-guest-form ~ .form-footer::after,
body#checkout #checkout-login-form ~ .form-footer::after {
    content: "🔒  CONNEXION CHIFFRÉE · 3-D SECURE";
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    padding: 6px 12px;
    background: rgba(31, 171, 92, 0.10);
    color: var(--as-success, #1FAB5C);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
}

/* CTA "Choisir mon goodies" en haut du récap : déjà amaranth, on harmonise
   le radius + shadow + uppercase tracking pour matcher la card hero V2. */
body#checkout .cart-summary .ag-banner-cta,
body#checkout .cart-summary [class*="goodies"] .btn,
body#checkout .cart-summary .cart-detailed-actions .btn-primary {
    border-radius: var(--as-radius-main, 8px);
    box-shadow: 0 4px 14px rgba(230, 34, 73, 0.20);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* Fidélité card black hero — si présent (alterloyalty rend un
   `.loyalty-summary-card` ou similaire). Style premium black + gold
   accent + "+X POINTS" badge. La règle est défensive (no-op si markup
   absent). */
body#checkout .cart-summary .loyalty-summary,
body#checkout .cart-summary [class*="alterloyalty-cart"],
body#checkout .cart-summary .loyalty-points-projection {
    background: var(--as-ink, #0F0F0F);
    color: #FFFFFF;
    border-radius: var(--as-radius-main, 8px);
    padding: 14px 16px;
    margin: 16px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body#checkout .cart-summary .loyalty-summary [class*="points"],
body#checkout .cart-summary [class*="alterloyalty-cart"] [class*="points"] {
    background: #E8C66B;
    color: var(--as-ink, #0F0F0F);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* =====================================================================
   Lot 1a — Primitives premium (re-skin tunnel V2) — 2026-06-25
   Élévation, interactions et lisibilité des composants du tunnel.
   Scope checkout-only (body#checkout). AUCUN token global modifié :
   le vert succès lisible et les ombres sont définis ici, en scope, pour
   ne pas impacter le reste du site (listing, megamenu, fiches…).
   Réf. maquette « Checkout AlterSmoke V2 » (abo-front/project/checkout).
   ===================================================================== */

/* Accents scopés au tunnel : le token global --as-success (#D0FFD9) est un
   fond pâle illisible en texte/pastille. On définit ici un vert vif local
   + deux ombres de "lift" réutilisées par les composants ci-dessous. */
body#checkout {
    --ck-success: #1FAB5C;
    --ck-success-bg: #E4F6EC;
    --ck-lift: 0 6px 18px rgba(15, 23, 42, 0.10);
    --ck-lift-amaranth: 0 6px 18px rgba(230, 34, 73, 0.16);
}

/* ---- Tuiles de sélection (adresse / livraison / paiement) ----
   Profondeur douce de base + lift au survol + ombre colorée à la sélection.
   Les bordures/couleurs de sélection (amaranth) restent gérées par les
   fichiers de composants ; on n'ajoute ici que profondeur + mouvement. */
body#checkout section.checkout-step .address-item,
body#checkout .delivery-option,
body#checkout .payment-option {
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.06));
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

body#checkout section.checkout-step .address-item:hover:not(.selected),
body#checkout .delivery-option:hover:not(:has(input:checked)),
body#checkout .payment-option:hover:not(:has(input:checked)) {
    transform: translateY(-1px);
    box-shadow: var(--ck-lift);
}

body#checkout section.checkout-step .address-item.selected,
body#checkout .delivery-option:has(input:checked),
body#checkout .payment-option:has(input:checked) {
    box-shadow: 0 0 0 1px var(--as-amaranth), var(--ck-lift-amaranth);
}

/* ---- Radios & checkboxes — plus grands et plus présents (desktop) ----
   Le mobile passait déjà à 24px (sweep responsive ci-dessus). On harmonise
   le desktop à 24px + halo amaranth quand coché pour renforcer la cible. */
body#checkout .custom-radio > span,
body#checkout .custom-checkbox > span:not(.condition-label) {
    width: 24px;
    height: 24px;
    border-width: 1.5px;
    transition: border-color .15s ease, background-color .15s ease,
                box-shadow .15s ease;
}

body#checkout .custom-radio > span::after {
    width: 13px;
    height: 13px;
}

body#checkout .custom-radio input[type="radio"]:checked ~ span,
body#checkout .custom-radio input[type="radio"]:checked + span,
body#checkout .custom-checkbox input[type="checkbox"]:checked ~ span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
    box-shadow: 0 0 0 3px var(--as-amaranth-soft, #FCE5EB);
}

/* ---- Boutons primaires — lift + ombre marque au survol ---- */
body#checkout .btn-primary {
    transition: background-color .15s ease, transform .12s ease,
                box-shadow .18s ease;
}

body#checkout .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--ck-lift-amaranth);
}

body#checkout .btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
}

/* ---- Stepper — pastille "complété" en ink (noir) ----
   Conforme maquette V2 (.ck-step__n.is-done = bg ink). Le vert vif scopé
   (--ck-success #1FAB5C) jurait avec la palette rouge/noir/gris : on passe
   les étapes validées au noir (check blanc conservé), idem le connecteur.
   NB : --ck-success reste utilisé ailleurs (badge « OFFERTE »), on n'y touche pas. */
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);
    border-color: var(--as-bg-primary);
}

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);
}

/* Pastille de l'étape courante — halo amaranth doux pour la "présence". */
body#checkout .checkout-stepper-item .checkout-stepper-num {
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease;
}

body#checkout:has(#checkout-personal-information-step.-current)
    .checkout-stepper-item[data-step="personal-information"] .checkout-stepper-num,
body#checkout:has(#checkout-addresses-step.-current)
    .checkout-stepper-item[data-step="addresses"] .checkout-stepper-num,
body#checkout:has(#checkout-delivery-step.-current)
    .checkout-stepper-item[data-step="delivery"] .checkout-stepper-num,
body#checkout:has(#checkout-payment-step.-current)
    .checkout-stepper-item[data-step="payment"] .checkout-stepper-num {
    box-shadow: 0 0 0 4px var(--as-amaranth-soft, #FCE5EB);
}

/* =====================================================================
   Lot 1b — Sidebar récapitulatif premium V2 (vrai markup) — 2026-06-25
   La sidebar réelle est #js-checkout-summary.card (PAS .cart-summary :
   les anciennes règles « DEMO-7.5 » ciblant .cart-summary tombaient à
   vide). On restyle le récap réel façon maquette « Checkout V2 ».
   Markup : #js-checkout-summary > .card-block > .cart-summary-products,
   lignes .cart-summary-line (.label/.value), #cart-subtotal-shipping
   (livraison), .cart-total (total), .block-promo > #promo-code.
   ===================================================================== */

/* Carte récap premium : radius + ombre douce (le .card de base est plat) */
body#checkout #js-checkout-summary.card,
body#checkout #js-checkout-summary {
    border: 1px solid var(--as-grey-200);
    border-radius: var(--as-radius-large, 10px);
    box-shadow: var(--as-shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.06));
    overflow: hidden;
}

/* Label « RÉCAPITULATIF » injecté en tête (le markup démarre sur
   « 3 articles » sans titre). */
body#checkout #js-checkout-summary .cart-summary-products::before {
    content: "Récapitulatif";
    display: block;
    margin: 0 0 12px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--as-grey-500);
}

body#checkout #js-checkout-summary .cart-summary-products > p:first-of-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--as-grey-900);
}

/* Badge « OFFERTE » — pill vert lisible. Markup : #cart-subtotal-shipping
   .value (= « offerte » quand le seuil est atteint). NB : pour un panier
   SOUS le seuil, .value porte un prix — le cas sera conditionné au Lot 1c
   (logique seuils) via le template. */
body#checkout #cart-subtotal-shipping .value {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ck-success-bg, #E4F6EC);
    color: var(--ck-success, #1FAB5C);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Total TTC plus marqué (façon V2) */
body#checkout #js-checkout-summary .cart-summary-totals .cart-total .value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--as-grey-900);
}

/* Finition B (2026-06-26) — Total TTC intégré au récap façon maquette
   « .ck-recap » : le bloc total, jusque-là détaché en bandeau grey
   (alter-checkout-summary.css peint .cart-summary-totals en --as-grey-100),
   rejoint la carte blanche du récap, séparé du sous-total par un simple filet.
   La valeur reste accentuée (20px, règle ci-dessus). */
body#checkout #js-checkout-summary .cart-summary-totals {
    background: transparent;
    border-top: 1px solid var(--as-grey-200);
    border-radius: 0;
    padding-top: 12px;
}

body#checkout #js-checkout-summary .cart-summary-totals .cart-total .label {
    font-size: 15px;
    font-weight: 600;
    color: var(--as-grey-900);
}

/* Code promo en encart soft façon V2 */
body#checkout #js-checkout-summary #promo-code {
    background: var(--as-grey-100);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 4px;
}

body#checkout #js-checkout-summary #promo-code h3 {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--as-grey-500);
    margin: 0 0 8px 0;
    padding: 0;
    border: none;
}

/* Finition C (2026-06-26) — input code promo façon maquette « .ck-recap__promo » :
   transparent, sans bordure, lettres espacées (effet pointillé du placeholder),
   intégré à l'encart soft. Le bouton « Ajouter » reste fonctionnel, à droite. */
body#checkout #js-checkout-summary #promo-code .promo-code form {
    display: flex;
    align-items: center;
    gap: 8px;
}

body#checkout #js-checkout-summary #promo-code .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    /* base.css force `border:1px solid !important` sur tous les inputs checkout :
       on doit donc !important pour rendre l'input borderless/transparent façon
       maquette (la spécificité 2-ids gagne entre !important). */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 4px 0;
    font-size: 13.5px;
    letter-spacing: 0.22em;
    color: var(--as-grey-900);
}

body#checkout #js-checkout-summary #promo-code .promo-input:focus {
    outline: none;
    box-shadow: none !important;
}

/* ---- Pills de réassurance sous le récap (markup ajouté dans
   cart-summary.tpl, bloc checkout_reassurance) ---- */
body#checkout .checkout-reassurance {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 22px 6px;
    border-top: 1px solid var(--as-grey-200);
}

body#checkout .checkout-reassurance .cr-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--as-grey-100);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--as-grey-700);
}

body#checkout .checkout-reassurance .cr-pill .material-icons {
    font-size: 22px;
    color: var(--as-grey-900);
    flex-shrink: 0;
}

body#checkout .checkout-reassurance .cr-pill b {
    color: var(--as-grey-900);
    font-weight: 700;
}

/* ---- Carte fidélité ink (bloc alterloyalty .al-cart-summary injecté dans
   le tunnel via hook displayShoppingCart) — façon ck-loyal de la maquette V2 :
   fond ink, solde en blanc, « +X pts » en chip doré. ---- */
body#checkout .al-cart-summary {
    background: var(--as-grey-900, #0F0F0F);
    color: #ffffff;
    border-radius: var(--as-radius-main, 8px);
    padding: 16px 18px;
    margin: 4px 22px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#checkout .al-cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

body#checkout .al-cart-summary__label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

body#checkout .al-cart-summary__value {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

body#checkout .al-cart-summary__value--muted em {
    font-style: normal;
    font-weight: 500;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

/* « +X pts » à gagner → chip doré */
body#checkout .al-cart-summary__value--earn {
    background: #E8C66B;
    color: var(--as-grey-900, #0F0F0F);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

body#checkout .al-cart-summary__bonus {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

body#checkout .al-cart-summary__bonus strong {
    color: #E8C66B;
}