/* =====================================================================
   VINTAGE BIKE SHOP — « Atelier Chic » — pages boutique & cohérence globale
   Pas de maquette dédiée pour ces pages : on applique le design system
   (tokens, fontes, boutons, formulaires, panneaux papier) de façon cohérente.
   Couvre : layout PrestaShop, notifications, formulaires, panier, tunnel,
   compte, contact, CMS, recherche, 404.
   ===================================================================== */

/* Icônes œil (afficher/masquer mot de passe) — dessinées en mask-image (recolorables). */
:root{
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* ===== Neutralise les restes Bootstrap/Classic (theme.css est exclu) ===== */
#wrapper, #content-wrapper, #main, .container, .row { max-width: none; }
#structure.d-flex { display: block; }
#menu_hamburger { display: none; }

/* ===== Helpers de visibilité responsive (ex-theme.css) — réimplémentés au minimum.
   Le markup PrestaShop s'en sert pour n'afficher QU'UNE version par taille d'écran :
   bouton desktop vs mobile (« mot de passe oublié », etc.), tableau commandes desktop
   vs vue mobile, titres de filtres en mobile… Sans eux, les DEUX versions sortaient en
   double (boutons collés, doubles tableaux). Ce ne sont que ces quelques classes — pas
   le framework Bootstrap. ===== */
@media (max-width: 575.98px){ .hidden-xs-down{ display:none!important } }
@media (min-width: 576px)   { .hidden-sm-up{ display:none!important } }
@media (max-width: 767.98px){ .hidden-sm-down{ display:none!important } }
@media (min-width: 768px)   { .hidden-md-up{ display:none!important } }
@media (max-width: 991.98px){ .hidden-md-down{ display:none!important } }
@media (min-width: 992px)   { .hidden-lg-up{ display:none!important } }
@media (max-width: 1199.98px){ .hidden-lg-down{ display:none!important } }
@media (min-width: 1200px)  { .hidden-xl-up{ display:none!important } }

/* ===== Conteneur de page générique (pages hors home/cat/produit) =====
   home/categorie/produit gèrent leur propre pleine largeur (.wrap interne),
   on ne contraint donc PAS leur .container, sinon les bandes pleine largeur
   (héros vert, réassurance, marques, newsletter) seraient cassées. */
body:not(#index):not(#category):not(#product) #wrapper { padding-bottom: clamp(40px, 6vw, 80px); }
body:not(#index):not(#category):not(#product) #wrapper > .container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
#content-wrapper { width: 100%; }

/* Fiche produit : pleine largeur en desktop (gérée par les .wrap internes), mais sur
   mobile on rétablit une gouttière latérale sur le conteneur — sinon le fil d'Ariane
   (hors .wrap) colle au bord. On annule la gouttière des .wrap internes pour ne pas
   doubler : tout s'aligne alors sur une seule gouttière. */
@media (max-width: 767.98px) {
  body#product #wrapper > .container { padding-left: var(--gut); padding-right: var(--gut); }
  body#product #wrapper > .container .wrap { padding-left: 0; padding-right: 0; }
}

#main .page-header h1,
.page-heading,
#content h1.h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.01em; margin: 6px 0 22px; }

/* ===== Panneau « papier » réutilisable ===== */
.chic-panel,
#main .page-content,
.block-categories,
#left-column .block,
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; }

/* ===== Liens de contenu ===== */
#content-wrapper a:not(.btn):not(.prod):not(.icon-btn):not(.search-link):not(.u-card) { color: var(--rust); }
#content-wrapper a:not(.btn):not(.prod):not(.icon-btn):not(.search-link):not(.u-card):hover { color: var(--rust-dark); }
/* options de facette = texte sombre comme la maquette (.fopt), pas rouille */
.filters .facet-label .search-link { color: var(--ink-70); }
.filters .facet-label:hover .search-link { color: var(--ink); }

/* ===== Formulaires (compte, contact, tunnel) ===== */
.form-control,
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], textarea, select {
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 15px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus,
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(181,87,44,.12); }
label, .form-control-label { font-size: 13px; font-weight: 600; color: var(--ink-70); }

/* boutons PrestaShop ramenés au style maison */
.btn-primary, .btn-secondary,
button[type=submit].btn, .button {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans);
  font-weight: 600; font-size: 14px; padding: 13px 24px; border-radius: 999px;
  border: 1px solid transparent; background: var(--rust); color: #fff; transition: background .2s, transform .15s;
}
.btn-primary:hover, button[type=submit].btn:hover { background: var(--rust-dark); color: #fff; }
.btn-secondary { background: var(--ink); color: var(--paper); }
.btn-secondary:hover { background: #000; color: var(--paper); }

/* ===== Notifications ===== */
.notifications-container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.alert { border-radius: 12px; border: 1px solid var(--line); padding: 14px 18px; font-size: 14px; }
.alert-success { background: #e9f0ea; border-color: #b9d3c0; color: var(--green-dark); }
.alert-danger, .alert-warning { background: #fbeee7; border-color: #e6c3ad; color: var(--rust-dark); }

/* ===== Tables (commandes, panier récap) ===== */
.table, table.cart_summary { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; text-align: left; }
.table th { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); }

/* ===== Page d'erreur 404 ===== */
#products .page-not-found, #content .page-not-found,
.page-not-found { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(34px,6vw,64px); text-align: center; max-width: 640px; margin: 40px auto; }

/* breadcrumb (présent globalement via header) : déjà stylé par chic-category/product.
   Fallback léger pour les pages qui n'incluent pas ces feuilles propres. */
.breadcrumb[data-content] { padding: 18px 0 0; }

/* ============================================================
   PAGE CONTACT (.atelier-contact — markup conservé, restylé Atelier Chic)
   ============================================================ */
.atelier-contact .contact-hero{background:var(--green);color:var(--paper);padding:clamp(44px,7vw,86px) 0}
.atelier-contact .contact-hero .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.atelier-contact .contact-hero .eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#bcae98;margin-bottom:14px}
.atelier-contact .contact-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.2vw,58px);color:#fff;line-height:1.04;margin:0}
.atelier-contact .contact-hero .lead{color:#d9d0c0;font-size:16px;max-width:60ch;margin-top:16px}
.atelier-contact .contact-grid{display:grid;grid-template-columns:340px 1fr;gap:40px;max-width:var(--wrap);margin:0 auto;padding:clamp(38px,6vw,70px) var(--gut)}
.atelier-contact .contact-aside{display:flex;flex-direction:column;gap:16px}
.atelier-contact .info-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:22px}
.atelier-contact .info-card.is-rachat{background:var(--paper-3)}
.atelier-contact .ic-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.atelier-contact .ic-ico{width:42px;height:42px;border-radius:9px;background:var(--paper-3);display:grid;place-items:center;color:var(--rust);flex-shrink:0}
.atelier-contact .info-card.is-rachat .ic-ico{background:var(--paper-2)}
.atelier-contact .ic-ico svg{width:21px;height:21px;fill:currentColor}
.atelier-contact .ic-head h3{font-family:var(--serif);font-weight:500;font-size:18px;margin:0}
.atelier-contact .info-card p{font-size:14px;color:var(--ink-70);line-height:1.65;margin:0}
.atelier-contact .info-card a{color:var(--rust);font-weight:600}
.atelier-contact .contact-main{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,36px)}
.atelier-contact .contact-main h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:16px}
/* formulaire contact (module contactform) */
.contact-form h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 6px}
.contact-form .form-intro{font-size:13px;color:var(--ink-50);margin:0 0 20px}
.contact-form .ff-row{margin-bottom:16px}
.contact-form .ff-row label{display:block;margin-bottom:7px}
/* honeypot anti-spam : champ piège qui DOIT rester invisible (Bootstrap exclu) */
.contact-form .form-footer input[name=url]{display:none}
/* bouton Envoyer détaché des champs et centré dans la carte */
.contact-form .form-footer{margin-top:26px;text-align:center}
.contact-form .form-footer .btn{min-width:200px;justify-content:center}
@media(max-width:820px){.atelier-contact .contact-grid{grid-template-columns:1fr}}

/* ============================================================
   FORMULAIRES & BLOCS PS génériques (compte, tunnel, contact form)
   ============================================================ */
.form-group{margin-bottom:16px}
.form-control-comment{font-size:12px;color:var(--ink-50)}
.custom-checkbox, .custom-radio{position:relative}
.page-customer-account #content, .page-authentication #content,
.page-addresses .address, .checkout-step, #order-confirmation .card,
.cart-grid-body .card, .cart-grid-right .card, .block-contact, #authentication .login-form{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,30px);margin-bottom:20px;
}
.page-footer .account-link, .links a{color:var(--rust)}
/* boutons « continuer / commander » du tunnel */
.checkout .btn, #js-checkout-summary .btn, .cart-detailed-actions .btn{border-radius:999px}

/* ============================================================
   PAGE CONNEXION (#authentication / .page-authentication)
   Markup PrestaShop stock conservé ; recentré en carte « atelier »
   (le panneau pleine largeur sonnait vide). CSS only, upgrade-safe.
   ============================================================ */
.page-authentication .page-header{text-align:center;margin-bottom:24px}
.page-authentication .page-header h1,
.page-authentication h1.h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,38px);letter-spacing:-.01em;margin:0}
.page-authentication .login-form,
.page-authentication hr,
.page-authentication .no-account{max-width:460px;margin-left:auto;margin-right:auto}
.page-authentication .login-form{margin-top:0;margin-bottom:0;padding:clamp(26px,4vw,36px)}
.page-authentication #login-form .forgot-password{margin-top:-2px}
.page-authentication #login-form .forgot-password a{font-size:13px}
/* champ mot de passe + bouton « Afficher » alignés sur une ligne (connexion, tunnel,
   inscription… partout où PrestaShop ajoute le toggle) */
.input-group:has([data-action=show-password]){display:flex;gap:8px;align-items:stretch}
.input-group:has([data-action=show-password]) .form-control{flex:1}
/* le bouton est emballé dans <span class="input-group-btn"> : display:contents fait du
   bouton un enfant flex direct → il s'étire à la hauteur du champ (align-items:stretch)
   et l'œil se centre H+V (le bouton est lui-même inline-flex center/center) */
.input-group:has([data-action=show-password]) .input-group-btn{display:contents}
/* bouton œil : le theme.js de base bascule le type ET réécrit le texte « Afficher/Masquer »
   du bouton — on masque ce texte (font-size:0) et on dessine l'icône en ::before (mask SVG,
   donc survit au .text() de theme.js). :has() bascule œil → œil barré quand le mot de passe
   est révélé (input passé en type=text). */
[data-action=show-password]{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  flex:0 0 48px;width:48px;padding:0;font-size:0;color:var(--ink-50);
  background:var(--paper-3);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:color .2s,border-color .2s;
}
[data-action=show-password]::before{
  content:"";width:21px;height:21px;background-color:currentColor;
  -webkit-mask:var(--eye) center/contain no-repeat;mask:var(--eye) center/contain no-repeat;
}
.input-group:has(.js-visible-password[type=text]) [data-action=show-password]::before{
  -webkit-mask-image:var(--eye-off);mask-image:var(--eye-off);
}
[data-action=show-password]:hover{color:var(--ink);border-color:var(--ink-50)}
/* bouton Connexion pleine largeur de la carte */
.page-authentication .form-footer{margin-top:22px;text-align:center}
.page-authentication .form-footer .btn{width:100%;justify-content:center}
/* filet + « Pas de compte ? » centrés sous la carte */
.page-authentication hr{border:0;border-top:1px solid var(--line);margin-top:26px;margin-bottom:18px}
.page-authentication .no-account{text-align:center}
.page-authentication .no-account a{font-weight:600}

/* ===== PAGE MOT DE PASSE OUBLIÉ (.page-password) — carte centrée comme la connexion ===== */
.page-password .page-header{text-align:center;margin-bottom:24px}
.page-password .page-header h1,
.page-password h1.h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,38px);letter-spacing:-.01em;margin:0}
.page-password .forgotten-password{max-width:460px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:clamp(26px,4vw,36px)}
.page-password .forgotten-password .container{padding:0}
.page-password .forgotten-password .send-renew-password-link{font-size:14px;color:var(--ink-70);line-height:1.6;margin:0 0 20px}
.page-password .forgotten-password .email{margin-bottom:18px}
.page-password .forgotten-password .btn{width:100%;justify-content:center}
.page-password .account-link{display:block;text-align:center;margin-top:18px;font-weight:600}

/* lisibilité contenu CMS / pages texte */
#content .page-content .rte-content, .cms-content, #content .page-content > p, #content .page-content > h2{max-width:80ch}
.cms-content{font-size:15px;color:var(--ink-70);line-height:1.7}

/* ============================================================
   TUNNEL / PANIER / COMPTE — règles FONCTIONNELLES + cosmétiques
   Reprises de l'ex-atelier-customer.css (qui remplaçait theme.css/Bootstrap),
   recolorées sur les tokens Atelier Chic. NE PAS SUPPRIMER les toggles :
   ils pilotent l'affichage des étapes du tunnel et des onglets invité/connexion.
   ============================================================ */
body#checkout #structure{display:block}

/* --- Tunnel : footer compact. On retire la grande bande newsletter (hors-sujet en
   pleine commande, c'est elle qui rend le footer énorme) et on réduit l'air sous le
   contenu. Le footer marketing complet reste sur les autres pages. --- */
body#checkout .news{display:none}
body#checkout #wrapper{padding-bottom:clamp(20px,3vw,36px)!important}

/* --- TOGGLE des étapes du tunnel : seule l'étape courante affiche son .content --- */
body#checkout .checkout-step .content{display:none;padding:0 26px 26px}
body#checkout .checkout-step.-current .content{display:block}
body#checkout .checkout-step.-current.-reachable.-complete .content{display:block}
body#checkout .checkout-step.-reachable.-complete .content{display:none}
body#checkout .checkout-step .done,body#checkout .checkout-step .step-edit{display:none}
body#checkout .checkout-step.-complete > :is(h1,h2) .done{display:inline-flex}
body#checkout .checkout-step.-reachable.-complete > :is(h1,h2) .step-edit{display:inline-flex}

/* --- TOGGLE des onglets invité / connexion (Bootstrap .tab-pane) --- */
body#checkout .tab-content > .tab-pane,body#authentication .tab-content > .tab-pane{display:none}
body#checkout .tab-content > .tab-pane.active,body#authentication .tab-content > .tab-pane.active{display:block}

/* --- Cartes panier / tunnel / confirmation --- */
body#cart .card,body#checkout #js-checkout-summary.card,body#checkout .checkout-step,
body#order-confirmation .card,body#order-confirmation #registration-form.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;box-shadow:none;margin-bottom:22px;overflow:visible;
}
body#cart .card .card-block,body#checkout #js-checkout-summary .card-block{padding:24px 26px}

/* --- En-têtes d'étape (numéro, états) --- */
body#checkout .checkout-step > :is(h1,h2){display:flex;align-items:center;gap:12px;margin:0;padding:20px 26px;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--green);cursor:pointer;line-height:1.2}
body#checkout .checkout-step .step-number{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--paper-3);border:2px solid var(--line);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--green)}
body#checkout .checkout-step.-current .step-number{background:var(--rust);border-color:var(--rust);color:#fff}
body#checkout .checkout-step.-complete > :is(h1,h2) .done{align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--rust);color:#fff}
body#checkout .checkout-step.-unreachable > :is(h1,h2){opacity:.45;cursor:not-allowed}
body#checkout .checkout-step .step-edit{margin-left:auto;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;color:var(--rust-dark)}

/* --- Onglets « Commander en tant qu'invité / Connexion » : segmented control bien visible --- */
body#checkout .nav-inline{display:inline-flex;align-items:stretch;gap:6px;list-style:none;padding:5px;margin:0 0 24px;background:var(--paper-3);border:1px solid var(--line);border-radius:999px}
body#checkout .nav-inline .nav-separator{display:none}
body#checkout .nav-inline .nav-item{display:flex;margin:0}
body#checkout .nav-inline .nav-link{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;border:0;border-radius:999px;font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:600;color:var(--ink-70)!important;background:transparent;cursor:pointer;transition:background .2s,color .2s}
body#checkout .nav-inline .nav-link:hover{color:var(--ink)!important}
body#checkout .nav-inline .nav-link.active{background:var(--rust);color:#fff!important}
.page-customer-account .nav-tabs{background:transparent}
@media(max-width:560px){
  body#checkout .nav-inline{display:flex;width:100%}
  body#checkout .nav-inline .nav-item{flex:1}
  body#checkout .nav-inline .nav-link{width:100%;padding:10px 12px;font-size:13px;text-align:center}
}

/* --- Récap tunnel (#js-checkout-summary) : lignes en flex --- */
body#checkout #js-checkout-summary .cart-summary-line,
body#checkout #js-checkout-summary .cart-summary-subtotals,
body#checkout #js-checkout-summary .cart-summary-totals{display:block;width:auto;float:none;padding:0}
body#checkout #js-checkout-summary .cart-summary-subtotals-container > p,
body#checkout #js-checkout-summary .cart-summary-subtotals-container .cart-summary-line > p,
body#checkout #js-checkout-summary .cart-summary-totals .cart-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:6px 0}
body#checkout #js-checkout-summary .cart-summary-totals .cart-total{margin-top:6px;padding:14px 0 2px;border-top:2px solid var(--green)}
/* --- Mini-liste produits du récap tunnel (markup Bootstrap .media, mort) --- */
body#checkout .cart-summary-products .media,
body#checkout #cart-summary-product-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-soft);list-style:none}
body#checkout .cart-summary-products .media-left{flex:0 0 auto}
body#checkout .cart-summary-products .media-object{width:54px;height:54px;object-fit:contain;border-radius:8px;background:var(--paper-3);mix-blend-mode:multiply}
body#checkout .cart-summary-products .media-body{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}
body#checkout .cart-summary-products .media-body br{display:none}
body#checkout .cart-summary-products .product-name{flex:1 1 100%;font-family:var(--serif);font-size:14.5px;color:var(--ink);line-height:1.3}
body#checkout .cart-summary-products .product-quantity{font-size:12.5px;color:var(--ink-50)}
body#checkout .cart-summary-products .product-price{margin-left:auto;font-weight:600;font-size:14px;color:var(--ink)}
body#checkout .cart-summary-products #cart-summary-product-list{display:block!important}
body#checkout .cart-summary-products ul{margin:0;padding:0}
/* beaucoup d'articles → la liste défile en interne (le récap sticky reste compact,
   les totaux + code promo restent toujours visibles) */
body#checkout .cart-summary-products #cart-summary-product-list{max-height:300px;overflow-y:auto;overscroll-behavior:contain}
body#checkout .cart-summary-products #cart-summary-product-list::-webkit-scrollbar{width:6px}
body#checkout .cart-summary-products #cart-summary-product-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
/* --- Code promo tunnel : champ + bouton alignés ; alerte d'erreur vide masquée
   (le markup PS la laisse dans le DOM → gros cadre vide sans Bootstrap). Le JS PS
   la réaffiche en cas d'erreur via .show() (style inline qui prime). --- */
/* code promo (panier ET tunnel) : on empile champ pleine largeur + bouton */
.cart-voucher .promo-code form{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cart-voucher .promo-input{flex:1 1 100%;min-width:0}
.cart-voucher .promo-code .btn{width:100%;justify-content:center;background:transparent;border:1.5px solid var(--rust);color:var(--rust)}
.cart-voucher .promo-code .btn:hover{background:var(--rust);color:#fff}
/* mini-liste produits du récap : vignette plus petite + nom resserré (colonne étroite) */
body#checkout .cart-summary-products .media-object{width:48px;height:48px}
body#checkout .cart-summary-products .product-name{font-size:13.5px;line-height:1.3}
/* alerte d'erreur code promo : masquée par défaut, réaffichée par le JS PS via
   .show() (display:block inline). Sans marge elle se colle au bouton « Ajouter »
   → on l'espace. La marge ne se voit pas tant qu'elle est en display:none. */
.cart-voucher .js-error{display:none;margin-top:12px;margin-bottom:4px}
body#checkout .cart-summary-subtotals-container{padding-top:0}

/* --- Formulaire infos perso / inscription (#customer-form) : 2 colonnes en desktop
   (Prénom | Nom côte à côte), empilé en mobile. Tout le reste reste pleine largeur
   (le bloc « créez votre compte » est injecté par un hook → on le laisse full). --- */
@media (min-width:768px){
  #customer-form > section{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}
  #customer-form > section > *{grid-column:1 / -1}
  #customer-form > section > .form-group:has(input[name="firstname"]){grid-column:1 / 2}
  #customer-form > section > .form-group:has(input[name="lastname"]){grid-column:2 / 3}
}
.cart-voucher #promo-code.collapse{display:block}
body#checkout .cart-voucher .cancel-promo,body#cart .cart-voucher .cancel-promo{display:none!important}
body#cart .cart-detailed-actions .btn-primary{display:block;width:100%;text-align:center;padding:13px}

/* ===== PAGE PANIER — grille 2 colonnes (la grille Bootstrap .col-lg-8/.col-lg-4 est
   morte sans theme.css → on la refait en flex : articles à gauche, récap à droite).
   En flex, si le récap est retiré (panier vide, cf. {if $cart.products} dans cart.tpl),
   la colonne articles reprend toute la largeur automatiquement. ===== */
body#cart .cart-grid,body#checkout .cart-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
body#cart .cart-grid-body,body#checkout .cart-grid-body{flex:1 1 420px;min-width:0}
body#cart .cart-grid-right,body#checkout .cart-grid-right{flex:0 0 340px}
/* sticky sur la COLONNE (.cart-grid-right), pas sur .cart-summary : le récap est seul
   enfant de la colonne, donc même hauteur qu'elle → aucun espace de déplacement. C'est
   .cart-grid (haute à cause de la liste produits à gauche) qui sert de cadre au sticky. */
body#cart .cart-grid-right{position:sticky;top:90px}
body#cart .cart-container .card-block{padding:clamp(20px,3vw,30px) clamp(20px,3vw,30px) 0}
body#cart .continue-shopping,body#cart a.label{display:inline-block;margin:16px 2px;color:var(--rust);font-weight:600}
@media(max-width:900px){body#cart .cart-grid-right,body#checkout .cart-grid-right{flex-basis:100%;position:static}}
/* tunnel : sur la page commande les 2 colonnes sont enfants directs de #content-wrapper
   (pas de .cart-grid) → on le passe en flex pour récap à DROITE + sticky (le client
   garde son panier sous les yeux pendant toutes les étapes). */
body#checkout #content-wrapper{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
body#checkout .cart-grid-right{position:sticky;top:90px}
@media(max-width:900px){body#checkout .cart-grid-right{position:static}}

/* ===== PANIER VIDE — état vide centré, généreux & soigné =====================
   Icône en médaillon + titre serif + message + CTA. Le CTA est un vrai .btn .btn-rust
   (et NON un a.label) : .btn est exclu de la règle de lien rouille générique
   (#content-wrapper a:not(.btn)… cf. l.64) qui sinon repeignait le texte en rouille
   sur fond rouille → bouton illisible.
   ⚠️ TOUTES ces règles sont préfixées par .cart-overview : PrestaShop pose AUSSI la classe
   `cart-empty` sur le <body> quand le panier est vide (<body class="… cart-empty">). Un
   `.cart-empty{padding;display:flex}` nu retombait donc sur le <body> → padding ~52px en
   haut + ~32px en bas + body en flex sur toute la page. On vise uniquement le <div
   class="cart-empty"> intérieur (enfant de .cart-overview). ===================== */
.cart-overview .cart-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:clamp(28px,5vw,52px) 16px clamp(22px,3vw,32px)}
.cart-overview .cart-empty-ico{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--paper-3);color:var(--rust)}
.cart-overview .cart-empty-ico svg{width:40px;height:40px}
.cart-overview .cart-empty-title{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,28px);color:var(--ink);margin:8px 0 0;line-height:1.1}
.cart-overview .cart-empty .no-items{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-50);margin:0;max-width:380px}
.cart-overview .cart-empty .cart-empty-cta{margin-top:8px}
/* recentrage du bloc quand le panier est vide (la grille n'a que la colonne articles) */
body#cart:has(.cart-empty) .cart-grid{justify-content:center}
body#cart:has(.cart-empty) .cart-grid-body{flex:0 1 620px;max-width:620px;text-align:center}
body#cart .cart-container:has(.cart-empty) .separator{display:none}
body#cart .cart-container:has(.cart-empty) .card-block{padding-bottom:0}
body#cart .cart-container:has(.cart-empty) h1{text-align:center}

/* suggestions sous le panier vide : titre + grille produits vedettes recadrée &
   centrée (la grille vient du hook displayContentWrapperBottom, hors .sec .wrap). */
body#cart .cart-suggest-head{margin:clamp(40px,6vw,68px) auto clamp(22px,3vw,30px);text-align:center}
body#cart .cart-suggest-head .kicker{display:block;color:var(--rust);margin-bottom:12px}
body#cart .cart-suggest-head h2{font-size:clamp(26px,3.6vw,38px)}
body#cart .cart-suggest-head h2 em{font-style:italic;color:var(--rust)}
body#cart:has(.cart-empty) .selection-grid{max-width:var(--wrap);margin:0 auto clamp(44px,6vw,72px);padding:0 var(--gut)}

/* ===== PAGE PANIER — ligne produit ============================================
   La grille .product-line-grid (col-md-3/4/5 + .row imbriqués) est morte sans
   theme.css → on la refait en flex : vignette | nom+prix | [stepper] [total] [×].
   Le stepper touchspin a ses +/− en material-icons (masquées globalement) → on
   les recrée en ::before, et la corbeille « delete » aussi. ============================ */
body#cart .cart-items{list-style:none;margin:0;padding:0}
body#cart .cart-item + .cart-item{border-top:1px solid var(--line-soft)}
body#cart .product-line-grid{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:20px 0}

/* vignette produit (tuile crème, image fondue comme ailleurs) */
body#cart .product-line-grid-left{flex:0 0 auto;width:auto;padding:0}
body#cart .product-image{display:grid;place-items:center;width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--paper-3)}
body#cart .product-image img{max-width:86%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}

/* corps : nom (serif) + prix unitaire */
body#cart .product-line-grid-body{flex:1 1 200px;min-width:0;padding:0}
body#cart .product-line-grid-body br{display:none}
body#cart .product-line-grid-body .product-line-info .label{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink);line-height:1.3}
body#cart .product-line-grid-body .product-price{font-size:14px;color:var(--ink-50);margin-top:6px}
body#cart .product-line-grid-body .product-price .price{font-weight:600;color:var(--ink-70)}

/* actions : on aplatit les .row/.col imbriqués (Bootstrap mort) en une rangée flex */
body#cart .product-line-grid-right{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:22px;padding:0}
body#cart .product-line-grid-right > .row,
body#cart .product-line-grid-right .col-md-10,
body#cart .product-line-grid-right .col-md-10 > .row{display:contents}
body#cart .product-line-grid-right .col-xs-4.hidden-md-up{display:none}
body#cart .product-line-grid-right [class*="col-"]{padding:0;width:auto;max-width:none;flex:0 0 auto}
body#cart .product-line-grid-right .price .product-price{font-family:var(--serif);font-size:19px;color:var(--ink);white-space:nowrap}

/* stepper quantité [−][n][+] (touchspin vertical aplati en flex horizontal) */
body#cart .qty .bootstrap-touchspin{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);overflow:hidden}
body#cart .qty .input-group-btn-vertical{display:contents}
body#cart .qty .bootstrap-touchspin-prefix,
body#cart .qty .bootstrap-touchspin-postfix{display:none}
body#cart .qty .js-cart-line-product-quantity,
body#cart .qty input[name="product-quantity-spin"]{order:2;width:46px;text-align:center;border:0;background:transparent;padding:9px 0;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);-moz-appearance:textfield}
body#cart .qty input[name="product-quantity-spin"]::-webkit-outer-spin-button,
body#cart .qty input[name="product-quantity-spin"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body#cart .qty .btn-touchspin{width:38px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:18px;line-height:1;font-family:var(--sans)}
body#cart .qty .btn-touchspin:hover{background:var(--paper-3);color:var(--rust-dark)}
body#cart .qty .bootstrap-touchspin-down{order:1}
body#cart .qty .bootstrap-touchspin-up{order:3}
body#cart .qty .bootstrap-touchspin-down::before{content:"\2212"}
body#cart .qty .bootstrap-touchspin-up::before{content:"+"}
/* repli si touchspin non initialisé : input simple compact */
body#cart .qty input[name="product-quantity-spin"]:only-child{width:64px;border:1px solid var(--line);border-radius:10px;padding:9px 0}

/* corbeille (remplace l'icône material-icons « delete » masquée globalement) */
body#cart .cart-line-product-actions{display:flex;align-items:center}
body#cart .remove-from-cart{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink-50);text-decoration:none}
body#cart .remove-from-cart:hover{background:#fbeee7;color:var(--rust-dark)}
body#cart .remove-from-cart::before{content:"\00D7";font-size:22px;line-height:1}

@media(max-width:560px){
  body#cart .product-line-grid-right{width:100%;flex-basis:100%;margin-left:0;justify-content:space-between;gap:14px}
}

/* ===== PAGE PANIER — récap (colonne droite) : du texte brut → vrai récapitulatif ===== */
body#cart .cart-summary{padding:clamp(22px,3vw,28px)}
body#cart .cart-summary .card-block{padding:0}
body#cart .cart-summary::before{content:"Récapitulatif";display:block;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);margin-bottom:16px}
/* mentions transport (retrait / livraison / franco) */
.mention_transport{list-style:none;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px}
.mention_transport li{font-size:13px;color:var(--ink-50);line-height:1.5}
.mention_transport li.gratuit{color:var(--green-dark);font-weight:600}
/* nombre d'articles + réduction */
body#cart .cart-summary-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
body#cart .nb_article{font-size:14px;color:var(--ink-70);margin:0}
body#cart .reduction{font-size:14px;color:var(--green-dark);font-weight:600;margin:6px 0 0}
/* total */
body#cart .cart-summary-totals{margin-top:14px;padding-top:14px;border-top:2px solid var(--green)}
body#cart .cart-summary-totals .cart-summary-line{margin-bottom:6px}
body#cart .cart-total .label{font-family:var(--serif);font-size:18px;color:var(--ink)}
body#cart .cart-total .value{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink)}
/* bouton Commander (déjà rouille pleine largeur) : juste l'espace au-dessus */
body#cart .cart-detailed-actions{padding:0;margin-top:18px}

/* fil d'Ariane panier : un peu d'air au-dessus + sous, comme les autres pages */
body#cart .breadcrumb{padding-top:clamp(22px,3.5vw,34px);margin-bottom:16px}