/* ============================================================
   MÉRIDIAN — Panier & tunnel de commande
   Style uniquement ; comportements gérés par le cœur PrestaShop.
   ============================================================ */

#main { padding-block: clamp(28px, 5vw, 56px); }
.card-title h1, #main > .h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); font-weight: 500; margin-bottom: 28px; }

/* ---- Grille panier ---- */
.cart-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cart-grid-body, .cart-grid-right { width: auto; max-width: none; flex: none; min-width: 0; }
.card, .cart-container, .cart-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.cart-summary { position: sticky; top: 96px; padding: 24px; }

/* lignes produit */
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.cart-item:last-child { border-bottom: 0; }
.cart-items { padding: 4px 22px; }
.product-line-grid-left img { width: 96px; height: 120px; object-fit: cover; border-radius: 2px; }
.product-line-info .label, .product-line-info a { font-size: 15px; font-weight: 500; }
.product-price, .cart-summary .value { font-weight: 600; }

/* totaux */
.cart-summary-line { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); }
.cart-summary-line.cart-total { font-size: 18px; font-weight: 600; border-bottom: 0; }
.cart-detailed-totals, .cart-summary-totals { margin-top: 8px; }

/* free shipping progress */
.free-shipping, .cart-free-shipping { background: color-mix(in oklch, var(--accent) 10%, var(--bg)); border-radius: 3px; padding: 12px 16px; font-size: 13.5px; }

/* boutons */
.btn-primary, .checkout a.btn, .cart-detailed-actions .btn {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px;
  padding: 15px 28px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all .4s var(--ease);
}
.btn-primary:hover, .checkout a.btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-secondary, .continue, .btn-tertiary { color: var(--ink); }
.label.continue-shop, .continue-shop { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 13px; }

/* (styles d'étapes consolidés plus bas dans la section "Tunnel v2 timeline") */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
#checkout-process { min-width: 0; }
.order-confirmation-table, .order-items { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 20px; }

/* champs formulaires */
.form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; background: var(--bg); width: 100%;
}
.form-control:focus { border-color: var(--ink); outline: none; }
.form-group label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; display: block; }

/* options de paiement */
.payment-options .payment-option { border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin-bottom: 10px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .cart-grid, .checkout-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; order: -1; }
}

/* ============================================================
   MÉRIDIAN — Tunnel de commande (fidèle maquette)
   ============================================================ */
/* logo centré en tête de tunnel (PrestaShop garde le header complet ; on aère) */
.cart-grid-body { width: auto; }
.cart-grid-right-checkout { width: auto; }
@media (min-width: 992px) {
  .cart-grid-right-checkout { position: sticky; top: 96px; }
}

/* (étapes : voir la section "Tunnel v2 timeline" plus bas) */

/* méthodes de livraison / paiement en cartes radio */
.delivery-options, .payment-options { display: flex; flex-direction: column; gap: 12px; }
.delivery-option, .payment-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: all .2s; margin: 0; }
.delivery-option:hover, .payment-option:hover { border-color: var(--ink-soft); }
.delivery-option label, .payment-option label { margin: 0; cursor: pointer; flex: 1; display: flex; align-items: center; gap: 12px; }
.delivery-option .carrier-name, .payment-option-title { font-weight: 600; font-size: 14.5px; }
.delivery-option .carrier-delay, .delivery-option .carrier-price { color: var(--ink-soft); font-size: 13px; }
.delivery-option input[type=radio], .payment-options input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; }

/* boutons étape */
.checkout-step .continue, .checkout-step [type=submit], .checkout-step .btn-primary {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; padding: 15px 28px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px;
}
.checkout-step .continue:hover, .checkout-step .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* résumé commande */
#js-checkout-summary.cart-summary { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
#js-checkout-summary .h4, #js-checkout-summary .card-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-bottom: 14px; }
.cart-summary-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.cart-summary-line .label { color: var(--ink-soft); }
.cart-summary-line.cart-total { font-size: 16px; font-weight: 600; border-bottom: 0; padding-top: 14px; }
.cart-summary-products .media-list .media { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cart-summary-products img { width: 56px; height: 70px; object-fit: cover; border-radius: 2px; }

/* confirmation de commande */
#content-hook_order_confirmation, .order-confirmation { max-width: 760px; margin-inline: auto; }
.order-confirmation .card, #content-hook_order_confirmation .card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
#order-confirmation .h1, .page-order-confirmation h1 { font-family: var(--font-display); font-weight: 500; }

/* ============================================================
   MÉRIDIAN — Tunnel v2 : timeline verticale (fidèle maquette)
   Mappe .checkout-step de PrestaShop sur le design .cot
   ============================================================ */
/* layout : étapes (gauche) + résumé (droite), centré */
#checkout #content > .row { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); max-width: 1100px; margin-inline: auto; align-items: start; }
#checkout .cart-grid-body, #checkout .cart-grid-right-checkout { width: auto !important; max-width: none !important; flex: none !important; }

/* --- timeline des étapes (override des cartes précédentes) --- */
#checkout-process .checkout-step,
.checkout-process .checkout-step,
.checkout-step {
  position: relative; background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 0 30px 58px !important; overflow: visible;
}
.checkout-step::before { content: ""; position: absolute; left: 18px; top: 44px; bottom: -2px; width: 1px; background: var(--line); }
.checkout-step:last-of-type::before { display: none; }
.checkout-step.-complete::before { background: var(--accent); }

.checkout-step .step-title {
  display: flex; align-items: center; gap: 14px; position: relative; margin: 0; padding: 0; min-height: 38px;
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; color: var(--ink); cursor: default;
}
.checkout-step:not(.-current):not(.-complete) .step-title { color: var(--ink-faint); }
.checkout-step.-current .step-title, .checkout-step.-complete .step-title { cursor: pointer; }

/* pastille = step-number / done, posée sur le rail */
.checkout-step .step-number,
.checkout-step .step-title .done {
  position: absolute; left: -58px; top: -1px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; margin: 0;
}
.checkout-step .step-number { border: 1px solid var(--line); background: var(--bg); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.checkout-step.-current .step-number { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink) 9%, transparent); }
.checkout-step .step-title .done { display: none; background: var(--accent); fill: var(--accent-ink); padding: 9px; }
.checkout-step.-complete .step-title .done { display: grid; }
.checkout-step.-complete .step-number { display: none; }

.checkout-step .step-edit { margin-left: auto; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none; font-weight: 500; }
.checkout-step .step-edit .edit { width: 15px; height: 15px; fill: currentColor; }

.checkout-step .content { padding: 20px 0 0 !important; }
.checkout-step:not(.-current) .content { display: none; }

/* mobile : le rail vertical + l'indentation de 58px gaspillent la largeur et le
   numéro rend mal. On passe le numéro en badge inline dans le titre (titre = [n°]
   [libellé]), on retire l'indentation et le rail → contenu pleine largeur.
   Le n° (et le ✓) sont dans un <span> wrapper ; .step-number étant display:grid
   (bloc) il tombait sous le libellé → on aligne le wrapper en inline-flex et on
   passe la pastille en inline-grid (sans révéler le ✓ des étapes non complétées). */
@media (max-width: 575px) {
  .checkout-step { padding: 0 0 26px !important; }
  .checkout-step::before { display: none; }
  .checkout-step .step-title { font-size: 18px; gap: 12px; min-height: 0; }
  /* Étape COURANTE : le n° est dans un <span> wrapper SANS classe (avec le ✓ + le
     libellé) → on l'aligne en flex. Étapes INACTIVES : pas de wrapper, .step-number
     est directement dans .step-title — surtout NE PAS le cibler ici (sinon il devient
     un flex left-aligné et le chiffre sort du cercle). D'où le :not(.step-number). */
  .checkout-step .step-title > span:not(.step-number):not(.step-edit) { display: inline-flex; align-items: center; gap: 12px; }
  .checkout-step .step-number,
  .checkout-step.-complete .step-title .done { position: static; left: auto; top: auto; width: 30px; height: 30px; flex-shrink: 0; }
  .checkout-step .step-number { display: inline-grid; font-size: 13px; }
  .checkout-step.-complete .step-title .done { display: inline-grid; padding: 7px; }
}

/* tabs "invité / connexion" (personal information) */
.checkout-step .nav-tabs, .checkout-step .nav { border: 0; gap: 0; display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 3px; }
.checkout-step .nav-tabs .nav-link, .checkout-step .nav-item a { border: 0; border-radius: 2px; padding: 9px 18px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin: 0; }
.checkout-step .nav-tabs .nav-link.active, .checkout-step .nav-item a.active { background: var(--ink); color: var(--bg); }

/* --- livraison / paiement : radio-cards --- */
.delivery-options-list .delivery-option, .delivery-option, #payment-options .payment-option, .payment-options .payment-option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 3px; margin: 0 0 12px; transition: all .2s; cursor: pointer;
}
.delivery-option:hover, .payment-option:hover { border-color: var(--ink-soft); }
.delivery-option label, .payment-option label { margin: 0; display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; }
.delivery-option .carrier-name { font-weight: 600; font-size: 14.5px; }
.delivery-option .carrier-delay, .carrier-extra-content { color: var(--ink-soft); font-size: 13px; }
.delivery-option .carrier-price { font-weight: 600; margin-left: auto; }
.custom-radio { width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; transition: border-color .15s var(--ease); }
.custom-radio input { opacity: 0; position: absolute; margin: 0; cursor: pointer; }
/* pastille interne : visible uniquement quand le radio est coché */
.custom-radio > span { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .15s var(--ease); }
.custom-radio input:checked + span { background: var(--ink); }
.custom-radio:has(input:checked) { border-color: var(--ink); }

/* carte d'option (livraison / paiement) mise en évidence quand sélectionnée */
.delivery-option:has(input:checked), .payment-option:has(input:checked) { border-color: var(--ink); background: var(--bg-2); }

/* --- sélecteur d'adresses (tunnel de vente) --- */
.address-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.js-address-item.address-item { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.js-address-item.address-item:hover { border-color: var(--ink-soft); }
.js-address-item.address-item.selected { border-color: var(--ink); background: var(--bg-2); }
.address-item header { margin: 0; }
.address-item .radio-block { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; cursor: pointer; margin: 0; }
.address-item .radio-block .custom-radio { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.address-item .address-alias { grid-column: 2; grid-row: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; margin: 0; }
.address-item .address { grid-column: 2; grid-row: 2; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.address-item hr { border: 0; border-top: 1px solid var(--line-soft); margin: 14px 0 12px; }
.address-item .address-footer { display: flex; gap: 18px; margin-top: auto; }
.address-item .address-footer a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.address-item .address-footer a:hover { color: var(--ink); }
.address-item .address-footer svg { width: 16px; height: 16px; fill: currentColor; }

/* lien « ajouter une adresse » */
.add-address { margin-bottom: 5px; }
.add-address a { display: inline-flex; align-items: center; gap: 10px; }
.add-address svg { width: 18px; height: 18px; fill: currentColor; }

/* --- résumé commande --- */
#checkout #js-checkout-summary, .cart-grid-right-checkout .cart-summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 24px; position: sticky; top: 96px; }
#checkout .cart-summary .h4, #checkout .cart-summary .card-title, #checkout-summary .h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }

/* --- réassurance concierge (sous le résumé) --- */
.cart-grid-right-checkout .block-reassurance, .cart-grid-right-checkout .trust-grid { display: flex !important; flex-direction: column; gap: 13px; margin-top: 22px; border: 0; padding: 0 6px; }
.cart-grid-right-checkout .trust-item { padding: 0 !important; flex-direction: row !important; align-items: center; text-align: left !important; gap: 11px; }
.cart-grid-right-checkout .trust-ico { width: 30px; height: 30px; border: 0; background: none; }
.cart-grid-right-checkout .trust-ico img { width: 18px; height: 18px; }
.cart-grid-right-checkout .trust-item .title { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.cart-grid-right-checkout .trust-item .sub { display: none; }

@media (max-width: 991px) {
  #checkout #content > .row { grid-template-columns: 1fr; }
  #checkout .cart-grid-right-checkout { order: -1; }
}

/* ============================================================
   MÉRIDIAN — Tunnel v2b : formulaires (étape Informations)
   ============================================================ */
/* onglets "Commander en invité | Se connecter" → pill MÉRIDIAN */
.checkout-step .nav-inline { list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px; margin: 0 0 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; }
.checkout-step .nav-inline .nav-item { list-style: none; }
.checkout-step .nav-inline .nav-link { display: inline-block; padding: 9px 18px; border: 0; border-radius: 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.checkout-step .nav-inline .nav-link.active { background: var(--ink); color: var(--bg); }
.checkout-step .nav-inline .nav-separator { display: none; }

/* champs : label (eyebrow) au-dessus, input pleine largeur — neutralise le .row Bootstrap */
.checkout-step .form-group, .checkout-step .form-group.row { display: block; margin: 0 0 16px; margin-inline: 0; }
.checkout-step .form-group [class*="col-"] { width: 100%; max-width: none; flex: none; padding: 0; }
.checkout-step .form-control-label { display: block; text-align: left; padding: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.checkout-step .form-control-label.required::after { content: " *"; color: var(--sale); }
.checkout-step .form-control, .checkout-step select, .checkout-step textarea { width: 100%; }

/* champ avec icône (ex. œil mot de passe) : input + svg en ligne */
.checkout-step .input-group, .checkout-step .js-child-focus, .checkout-step .input-group-prepend ~ .form-control { display: flex; align-items: center; }
.checkout-step .input-group { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.checkout-step .input-group .form-control { border: 0; }
.checkout-step .input-group .input-group-btn, .checkout-step .input-group-append, .checkout-step .show-password { display: inline-flex; align-items: center; padding: 0 12px; color: var(--ink-soft); cursor: pointer; }
.checkout-step .input-group svg, .checkout-step .show-password svg { width: 18px; height: 18px; }

/* lignes de cases à cocher (gdpr, newsletter, optin…) : checkbox + svg + label en ligne */
.checkout-step .form-group.newsletter label,
.checkout-step .form-group.optin label,
.checkout-step .form-group.psgdpr label,
.checkout-step .form-group.customer_privacy label,
.checkout-step .form-group.psgdpr .label,
.checkout-step .custom-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.checkout-step .custom-checkbox { display: inline-flex; position: relative; }
/* Motif A (case + <span> boîte) : gift / recyclable / CGV — input ENFANT DIRECT.
   input natif masqué (opacity:0) et calé PAR-DESSUS la case stylée : sans
   position:relative sur .custom-checkbox l'input s'échappait, si bien qu'un
   clic sur la case ne cochait rien (seul le label fonctionnait). */
.checkout-step .custom-checkbox > input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
/* CGV : .custom-checkbox sans case stylée → on garde la case native visible. */
.checkout-step #conditions-to-approve input{position:unset; opacity:1;}
.checkout-step #conditions-to-approve li{display:flex;align-items:center;gap:10px; padding:10px 0}
.checkout-step .custom-checkbox > span { position: relative; flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 2px; display: inline-grid; place-items: center; transition: all .2s; }
.checkout-step .custom-checkbox > input:checked + span { background: var(--ink); border-color: var(--ink); }
.checkout-step .custom-checkbox > span svg, .checkout-step .custom-checkbox > span i { width: 12px; height: 12px; color: var(--bg); fill: var(--bg); opacity: 0; }
.checkout-step .custom-checkbox > input:checked + span svg, .checkout-step .custom-checkbox > input:checked + span i { opacity: 1; }

/* Motif B (label enveloppant, form-fields.tpl : consentements psgdpr/newsletter) :
   pas de <span> boîte → on stylise l'input lui-même en case, coche svg superposée. */
.checkout-step .custom-checkbox label { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; }
.checkout-step .custom-checkbox label input[type="checkbox"] { position: static; opacity: 1; z-index: auto; appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--line); border-radius: 2px; background: transparent; cursor: pointer; transition: all .2s; }
.checkout-step .custom-checkbox label input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.checkout-step .custom-checkbox label .checkbox-checked { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; opacity: 0; pointer-events: none; }
.checkout-step .custom-checkbox label input[type="checkbox"]:checked + .checkbox-checked { opacity: 1; }
.checkout-step .custom-checkbox label .checkbox-checked path { fill: var(--bg); }
.checkout-step .custom-checkbox .checkbox-txt { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* gender (Mr/Mrs) en ligne */
.checkout-step .form-group.id_gender .js-input-column { display: flex; gap: 10px; flex-wrap: wrap; }
.checkout-step .radio-inline { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 16px; border: 1px solid var(--line); border-radius: 2px; font-size: 13px; cursor: pointer; }

/* mot de passe + date de naissance : masqués sauf si "créer un compte" coché */
.js-customer-form .form-group.password,
.js-customer-form .form-group.birthday,
.js-customer-form .field-password-policy { display: none; }
.js-customer-form.show-account .form-group.password,
.js-customer-form.show-account .form-group.birthday,
.js-customer-form.show-account .field-password-policy { display: block; }
.js-customer-form .form-informations { display: none; }

/* toggle "créer un compte" */
.mrd-create-acct { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.mrd-create-acct input { position: absolute; opacity: 0; }
.mrd-create-acct .box { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 2px; display: grid; place-items: center; }
.mrd-create-acct input:checked + .box { background: var(--ink); border-color: var(--ink); }
.mrd-create-acct input:checked + .box::after { content: ""; width: 9px; height: 9px; background: var(--bg); clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 84% 0, 39% 71%); }

/* ============================================================
   MÉRIDIAN — Tunnel v2c : espacements + résumé + cases à cocher
   ============================================================ */
/* espace haut/bas (éloigne du header et de la réassurance) */
#checkout #content { padding-block: clamp(34px, 5vw, 64px); }
#checkout #wrapper { padding-block: 0; }

/* résumé : détails produits TOUJOURS visibles (comme la maquette) */
#checkout #cart-summary-product-list,
#checkout .cart-summary-products .collapse { display: block !important; height: auto !important; }
#checkout .js-show-details,
#checkout a[data-target="#cart-summary-product-list"] { display: none !important; }
#checkout .cart-summary-products .media-list, #checkout #cart-summary-product-list .media-list { display: block; }

/* "offres des partenaires" (optin) : à désactiver via le BO (Clients → offres partenaires). */

/* ============================================================
   MÉRIDIAN — Résumé commande : lignes produit (fidèle maquette)
   ============================================================ */
#checkout .cart-summary-products { padding-top: 4px; }
#checkout .cart-summary-products .media-list { display: block; margin: 0; padding: 0; list-style: none; }
#checkout .cart-summary-products .media { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line-soft); }
#checkout .cart-summary-products .media:last-child { border-bottom: 0; }
#checkout .cart-summary-products .media-left { flex-shrink: 0; padding: 0; }
#checkout .cart-summary-products .media-left img,
#checkout .cart-summary-products .media-object { width: 58px; height: 74px; object-fit: cover; border-radius: 2px; display: block; }
#checkout .cart-summary-products .media-body { flex: 1; min-width: 0; }
#checkout .cart-summary-products .product-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; padding-right: 56px; position: relative; }
#checkout .cart-summary-products .product-price { float: right; margin-top: -20px; font-size: 14px; font-weight: 600; color: var(--ink); }
#checkout .cart-summary-products .product-line-info { clear: both; display: flex;align-items:center; gap: 5px; margin-top: 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
#checkout .cart-summary-products .product-line-info .label { color: var(--ink-faint); }
#checkout .cart-summary-products .product-line-info .value { color: var(--ink-soft); }
#checkout .cart-summary-products .media-qty { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
#checkout .cart-summary-products .media-qty .product-quantity { display: inline-flex; align-items: center; gap: 4px; }

/* quantité dans le résumé : affichage statique (x N) */
#checkout .media-qty { flex-shrink: 0; align-self: center; }
#checkout .media-qty .product-quantity { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ============================================================
   MÉRIDIAN — Page panier /panier (cart.tpl) — fidèle maquette
   ============================================================ */
body#cart #content-wrapper, body#cart #main { padding-block: clamp(20px, 4vw, 40px); }
body#cart .cart-grid { gap: clamp(28px, 4vw, 56px); }

/* conteneur des lignes */
.cart-container, .cart-overview.card, body#cart .card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.cart-items { padding: 4px 24px !important; margin: 0; list-style: none; }
.cart-item { padding: 22px 0 !important; margin: 0; border-bottom: 1px solid var(--line-soft); }
.cart-item:last-child { border-bottom: 0; }

/* ligne produit : image | corps | actions */
.product-line-grid { display: flex; gap: 18px; align-items: flex-start; margin: 0; justify-content:space-around;width:100%}
.product-line-grid-left { flex: 0 0 92px; max-width: 92px; padding: 0; }
.product-line-grid-left img { width: 92px; height: 118px; object-fit: cover; border-radius: 2px; }
.product-line-grid-body { flex: 1; min-width: 0; padding: 0; max-width: none; }
.product-line-grid-body a.label.title, .product-line-grid-body .label.title, .product-line-grid-body .product-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; text-transform: none; letter-spacing: 0; }
.product-line-grid-body .product-line-info { margin-top: 4px; }
/* uniquement la taille/attributs en eyebrow (pas le nom) */
.product-line-grid-body .product-line-info.taille { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.product-line-grid-body .product-line-info.taille .label, .product-line-grid-body .product-line-info.taille .value { font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.product-line-grid-body .product-price { font-size: 15px !important; font-weight: 600; color: var(--ink); margin-top: 10px; }
.product-line-grid-body .current-price, .product-line-grid-body .regular-price { font-size: 13px; }
.product-line-grid-body .regular-price { color: var(--ink-faint); text-decoration: line-through; margin-right: 8px; }

/* colonne actions : quantité + supprimer + total */
.product-line-grid-right .cart-line-product-actions, .product-line-grid-right .price { font-size: 15px; font-weight: 600; }
.product-line-grid-right .remove-from-cart { color: var(--ink-faint); display: inline-flex; align-items: center; }
.product-line-grid-right .remove-from-cart:hover { color: var(--sale); }
.product-line-grid-right .remove-from-cart svg { width: 18px; height: 18px; fill: currentColor; }

/* stepper quantité (touchspin) sur la page panier */
.product-line-grid .qty { padding: 0; }
.product-line-grid .input-group, .product-line-grid .bootstrap-touchspin { display: inline-flex !important; width: auto !important; align-items: stretch; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--bg); }
.product-line-grid .input-group-btn, .product-line-grid .input-group-prepend, .product-line-grid .input-group-append { display: flex; }
.product-line-grid .bootstrap-touchspin-up, .product-line-grid .bootstrap-touchspin-down, .product-line-grid .btn-touchspin, .product-line-grid .input-group-btn > button { width: 30px; min-width: 30px; height: 34px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; }
.product-line-grid .bootstrap-touchspin-up:hover, .product-line-grid .bootstrap-touchspin-down:hover, .product-line-grid .btn-touchspin:hover { background: var(--bg-2); color: var(--ink); }
.product-line-grid .js-cart-line-product-quantity, .product-line-grid .qty input[type="text"], .product-line-grid .qty input[type="number"] { width: 40px !important; height: 34px; text-align: center; border: 0; border-inline: 1px solid var(--line); background: none; font-size: 13px; font-weight: 600; padding: 0; box-shadow: none; -moz-appearance: textfield; }
.product-line-grid .qty input::-webkit-outer-spin-button, .product-line-grid .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* zone actions sous les lignes + résumé */
.cart-detailed-actions .btn, body#cart .checkout a.btn { width: 100%; }
body#cart .cart-summary { position: sticky; top: 96px; padding: 24px; }
.continue-shop, .label.continue-shop { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 13px; color: var(--ink-soft); }

/* responsive : ligne panier compacte sur UNE seule ligne */
@media (max-width: 575px) {
  /* image + infos (nom/taille/prix unitaire) + sélecteur quantité + suppression
     alignés sur une seule ligne. Le prix cumulé (total de ligne) est masqué — le
     prix unitaire reste dans le corps et le total figure dans le récapitulatif.
     La grille Bootstrap imbriquée est aplatie via display:contents. */
  .product-line-grid { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; }
  .product-line-grid-left { flex: 0 0 64px; max-width: 64px; }
  .product-line-grid-left img { width: 64px; height: 82px; }
  .product-line-grid-body { flex: 1 1 auto; min-width: 0; }
  .product-line-grid-body .label.title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-line-grid-right { flex: 0 0 auto; min-width: 118px; }
  .product-line-grid-right > .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
  .product-line-grid-right .col-md-10,
  .product-line-grid-right .col-md-10 > .row { display: contents; }
  .product-line-grid-right [class*="col-"] { width: auto; max-width: none; padding: 0; }
  .product-line-grid-right .hidden-md-up { display: none; }
  .product-line-grid-right .price { display: none; }   /* masque le prix cumulé (total de ligne) */
  .product-line-grid-right .qty { flex: 0 0 auto; }
  .product-line-grid-right .delete-card { flex: 0 0 auto; }
}

/* ---- Fix touchspin : glyphes − / + (les Material Icons ont été retirées du thème) ---- */
.product-line-grid .input-group-btn-vertical, #checkout .media-qty .input-group-btn-vertical { display: flex; flex-direction: column; }
.product-line-grid .bootstrap-touchspin .material-icons,
.product-line-grid .bootstrap-touchspin-up i, .product-line-grid .bootstrap-touchspin-down i,
#checkout .media-qty .material-icons { display: none !important; }
.product-line-grid .bootstrap-touchspin-up, #checkout .media-qty .bootstrap-touchspin-up { position: relative; }
.product-line-grid .bootstrap-touchspin-up::after, #checkout .media-qty .bootstrap-touchspin-up::after { content: "+"; font-size: 14px; font-weight: 600; line-height: 1; }
.product-line-grid .bootstrap-touchspin-down::after, #checkout .media-qty .bootstrap-touchspin-down::after { content: "−"; font-size: 16px; font-weight: 600; line-height: 1; }
/* en layout vertical, on réduit la hauteur des deux mini-boutons */
.product-line-grid .input-group-btn-vertical .bootstrap-touchspin-up,
.product-line-grid .input-group-btn-vertical .bootstrap-touchspin-down { height: 17px; min-height: 17px; }

/* ===== Codes promo / bons de réduction (récapitulatif panier) ===== */
.cart-voucher { margin-top: 10px; }
.cart-voucher .card-block { padding: 0; }

/* bon(s) déjà appliqué(s) */
.cart-voucher .promo-name { margin: 0; list-style: none; }
.cart-voucher .promo-name li { align-items: center; }
.cart-voucher .promo-name .label { font-weight: 600; color: var(--ink); }
.cart-voucher .promo-name .float-xs-right { float: none; display: inline-flex; align-items: center; gap: 10px; }
.cart-voucher .promo-name .float-xs-right > span { font-weight: 600; color: var(--sale); }
.cart-voucher .promo-name [data-link-action="remove-voucher"] { display: inline-flex; line-height: 0; }
.cart-voucher .promo-name [data-link-action="remove-voucher"] svg { width: 18px; height: 18px; fill: var(--ink-faint); transition: fill .18s var(--ease); }
.cart-voucher .promo-name [data-link-action="remove-voucher"]:hover svg { fill: var(--sale); }

/* déclencheur « Vous avez un code promo ? » */
.promo-code-button { margin: 14px 0 0; }
.promo-code-button .collapse-button { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease); }
.promo-code-button .collapse-button:hover { color: var(--sale); border-color: var(--sale); }

/* formulaire d'ajout d'un code (révélé par .in ou par :target — sans JS) */
#promo-code:target { display: block; }
#promo-code .promo-code { margin-top: 12px; }
.promo-code form[data-link-action="add-voucher"] { display: flex; gap: 8px; align-items: stretch; }
.promo-code .promo-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 14px; color: var(--ink); }
.promo-code .promo-input:focus { outline: none; border-color: var(--ink); }
.promo-code form[data-link-action="add-voucher"] .btn { flex: 0 0 auto; width: auto; height: 44px; padding: 0 22px; }

/* offres exclusives mises en avant */
.promo-highlighted { margin: 20px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.promo-discounts { margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.promo-discounts li { display: block; padding: 11px 13px; border: 1px dashed color-mix(in oklch, var(--sale) 45%, var(--line)); border-radius: var(--radius); background: color-mix(in oklch, var(--sale) 6%, var(--surface)); }
.promo-discounts .label { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.promo-discounts .code { font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--sale); background: color-mix(in oklch, var(--sale) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--sale) 35%, var(--line)); border-radius: 3px; padding: 3px 9px; }

/* ---------- Confirmation : emballage cadeau + message ----------
   La carte réutilise les styles .ocf-* (theme.css) ; on ajoute seulement
   le bloc message, cité en police display. Ici (checkout.css, lien direct)
   pour être live sans régénérer le bundle CCC. */
.ocf-gift-msg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ocf-gift-msg .eyebrow { display: block; margin-bottom: 8px; }
.ocf-gift-msg p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--ink); }