/* Habillage AA des pages WooCommerce (panier, commande, compte).
   ─────────────────────────────────────────────────────────────────────────
   Ces pages ne peuvent PAS être des templates autonomes comme /pneus : Woo a
   besoin de wp_head/wp_footer pour ses scripts (fragments, mise à jour du
   panier, tunnel de commande). Les court-circuiter casserait le paiement.
   On garde donc le rendu WordPress complet et on remplace la couche visuelle :
   l'en-tête Woodmart est neutralisé au profit de l'en-tête AA (injecté par
   aa-header.js), et la mise en forme suit la charte crème/bordeaux. */

:root{--cream:#FDFAF5;--paper:#FFFFFF;--dark:#0E1014;--red:#8B1F1F;--red-bright:#EB5C54;
  --ink:#171717;--ink-soft:#5b5e63;--line:#ece6dc;--radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);--green:#1a7f4b}

/* En-tête et pied Woodmart retirés du flux : l'en-tête AA prend le relais,
   et le pied AA est réinjecté ci-dessous par le mu-plugin.
   `> .wd-social-icons` : Woodmart pose son bloc social flottant en enfant direct
   du body — doublon exact de la barre sociale de l'en-tête AA (.aah-social). */
body.aa-woo header.whb-header,
body.aa-woo .whb-header,
body.aa-woo footer.wd-footer,
body.aa-woo .wd-prefooter,
body.aa-woo .scrollToTop,
body.aa-woo > .wd-social-icons{display:none!important}

/* Woodmart déclare `:is(.btn,.button,button,…){display:inline-flex}` dans
   base.min.css, chargée APRÈS aa-header.css et de même spécificité que
   `.aah-burger{display:none}` : à égalité, l'ordre de source tranche et le
   burger mobile de l'en-tête AA se rallume en desktop. Il n'apparaît pas sur
   /pneus, template autonome qui ne charge pas Woodmart. On rétablit ici le
   comportement voulu : burger réservé au mobile. */
body.aa-woo .aah-burger{display:none!important}
@media(max-width:1119px){body.aa-woo .aah-burger{display:block!important}}

body.aa-woo{background:var(--cream)!important;color:var(--ink)!important;
  font-family:'Manrope',system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
body.aa-woo h1,body.aa-woo h2,body.aa-woo h3{
  font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.02em;line-height:1.08}

body.aa-woo .wd-page-content,
body.aa-woo .site-content{background:transparent!important}
body.aa-woo #main-content{max-width:1320px;margin:0 auto;padding:36px 24px 72px}

/* ── Bandeau de titre ─────────────────────────────────────────────────── */
.aa-woo-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.aa-woo-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(100% 120% at 85% -10%,rgba(235,92,84,.22),transparent 55%)}
.aa-woo-hero .in{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:40px 24px 44px}
.aa-woo-hero .crumb{font-size:13px;color:#aeb3bc;margin-bottom:8px}
.aa-woo-hero .crumb a:hover{color:#fff}
.aa-woo-hero .crumb .sep{margin:0 8px;opacity:.5}
.aa-woo-hero h1{font-size:clamp(28px,4vw,44px);font-weight:700;color:#fff}

/* ── Tableau du panier ────────────────────────────────────────────────── */
body.aa-woo .woocommerce table.shop_table,
body.aa-woo .woocommerce-cart-form table{
  background:var(--paper);border:1px solid var(--line)!important;border-radius:var(--radius);
  border-collapse:separate!important;border-spacing:0;overflow:hidden;width:100%}
body.aa-woo .woocommerce table thead th{
  background:#faf7f2;font:800 10.5px/1 'Manrope',sans-serif!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)!important;
  padding:16px 14px!important;border:0!important;text-align:left}
body.aa-woo .woocommerce table tbody td{
  padding:18px 14px!important;border:0!important;border-top:1px solid var(--line)!important;
  vertical-align:middle;font-size:14.5px}
/* Woodmart laisse les visuels produit occuper toute la colonne : sur une
   fiche véhicule à 600 px, la ligne devient illisible. */
body.aa-woo .woocommerce table td img{
  width:92px!important;height:92px!important;object-fit:contain;border-radius:14px;
  background:#faf7f2;padding:6px}
body.aa-woo td.product-name a{font:700 15.5px/1.35 'Space Grotesk',sans-serif;color:var(--ink)}
body.aa-woo td.product-name a:hover{color:var(--red)}
body.aa-woo td.product-price,body.aa-woo td.product-subtotal{
  font:700 15px/1 'Space Grotesk',sans-serif;color:var(--ink);white-space:nowrap}
body.aa-woo td.product-remove a{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#f4efe6;color:var(--ink-soft)!important;font-size:15px;
  text-decoration:none;transition:.2s var(--ease)}
body.aa-woo td.product-remove a:hover{background:var(--red);color:#fff!important}

body.aa-woo .quantity input.qty{
  width:64px;border:1px solid var(--line)!important;border-radius:100px!important;
  padding:9px 8px!important;text-align:center;font:700 14px/1 'Manrope',sans-serif;background:#fff}
body.aa-woo .quantity input[type="button"]{
  border:1px solid var(--line);background:#fff;border-radius:50%;width:30px;height:30px;
  cursor:pointer;font-weight:700;color:var(--ink-soft)}
body.aa-woo .quantity label{display:none}

/* ── Boutons ──────────────────────────────────────────────────────────── */
body.aa-woo .button,
body.aa-woo button.button,
body.aa-woo input.button,
body.aa-woo a.button,
body.aa-woo .checkout-button,
body.aa-woo .wc-block-components-button{
  background:var(--red)!important;color:#fff!important;border:0!important;
  border-radius:100px!important;padding:13px 24px!important;
  font:700 14.5px/1 'Manrope',sans-serif!important;letter-spacing:0!important;
  text-transform:none!important;cursor:pointer;transition:.25s var(--ease)!important}
body.aa-woo .button:hover,body.aa-woo button.button:hover,
body.aa-woo a.button:hover,body.aa-woo .checkout-button:hover{
  background:#7a1a1a!important;transform:translateY(-2px)}
body.aa-woo .button:disabled,body.aa-woo button.button:disabled{opacity:.5!important;transform:none!important}
/* Actions secondaires (mettre à jour, code promo) : en retrait, pour que le
   bouton de commande reste le seul point d'appel visuel. */
body.aa-woo button[name="update_cart"],
body.aa-woo button[name="apply_coupon"]{
  background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
body.aa-woo button[name="update_cart"]:hover,
body.aa-woo button[name="apply_coupon"]:hover{background:#faf7f2!important;transform:none}

body.aa-woo input[type="text"],body.aa-woo input[type="email"],body.aa-woo input[type="tel"],
body.aa-woo input[type="password"],body.aa-woo textarea,body.aa-woo select,
body.aa-woo .input-text{
  border:1px solid var(--line)!important;border-radius:12px!important;
  padding:12px 14px!important;font:500 14.5px/1.2 'Manrope',sans-serif!important;
  background:#fff!important;color:var(--ink)!important}
body.aa-woo input:focus-visible,body.aa-woo select:focus-visible,body.aa-woo textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:1px}

/* ── Totaux / encarts ─────────────────────────────────────────────────── */
body.aa-woo .cart_totals,
body.aa-woo .cross-sells,
body.aa-woo #order_review,
body.aa-woo .woocommerce-checkout-review-order{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
body.aa-woo .cart_totals h2,body.aa-woo #order_review_heading{font-size:20px;margin-bottom:14px}
/* Woodmart enveloppe les totaux dans .cart-totals-inner, qui porte SA PROPRE
   carte (bordure 3px + padding 25px + radius). Superposée à la carte AA
   .cart_totals, elle donnait une carte-dans-carte au liseré décalé. On efface
   le chrome Woodmart : la carte, c'est .cart_totals et elle seule. */
body.aa-woo .cart_totals .cart-totals-inner{
  border:0!important;padding:0!important;border-radius:0!important;background:none!important}
/* La table des totaux vit DÉJÀ dans la carte : pas de seconde bordure encadrante
   (la règle générique table.shop_table lui en remettait une), juste des filets
   horizontaux entre les lignes. Et on aligne th/td (Woodmart laissait le th à
   padding:0 pendant que le td était à 18px → label et montant décalés).
   Même correction pour le récap du checkout (#order_review), carte-dans-carte
   identique. */
body.aa-woo .cart_totals table.shop_table,
body.aa-woo .cart_totals table,
body.aa-woo #order_review table.woocommerce-checkout-review-order-table{
  border:0!important;border-radius:0!important;background:none!important;margin:0 0 18px;overflow:visible!important}
body.aa-woo .cart_totals table.shop_table th,
body.aa-woo .cart_totals table.shop_table td,
body.aa-woo table.woocommerce-checkout-review-order-table th,
body.aa-woo table.woocommerce-checkout-review-order-table td{
  padding:16px 0!important;border:0!important;border-top:1px solid var(--line)!important;
  background:none!important;vertical-align:middle}
body.aa-woo .cart_totals table.shop_table tr:first-child th,
body.aa-woo .cart_totals table.shop_table tr:first-child td,
body.aa-woo table.woocommerce-checkout-review-order-table thead th{border-top:0!important}
/* Pas de filet au-dessus des sections titrées (Expédition, Montage) : leur
   intitulé se suffit, la ligne alourdit. Sélecteur assez spécifique pour battre
   la règle générique th/td border-top ci-dessus. */
body.aa-woo .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
body.aa-woo .cart_totals table.shop_table tr.woocommerce-shipping-totals td,
body.aa-woo .cart_totals table.shop_table tr.aa-mounting-row td,
body.aa-woo table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
body.aa-woo table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td,
body.aa-woo table.woocommerce-checkout-review-order-table tr.aa-mounting-row td{border-top:0!important}
body.aa-woo .cart_totals .order-total .amount{
  font:700 24px/1 'Space Grotesk',sans-serif;color:var(--ink)}
/* Le montant de TVA « (dont X € TVA) » héritait du gros 24px du total : on le
   ramène à une mention discrète. */
body.aa-woo .order-total small.includes_tax,
body.aa-woo .order-total small.includes_tax .amount{
  font:500 12.5px/1.3 'Manrope',sans-serif!important;color:var(--ink-soft)!important}
body.aa-woo .coupon{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Woodmart enveloppe le tableau (panier/checkout) dans .wd-table-wrapper, qui
   porte fond blanc + ombre + rayon + 25px de padding. Superposé à nos cartes
   (#order_review, .cart_totals), ça dessine un rectangle imbriqué ET comprime
   le texte — sur mobile le nom du pneu tombait à ~80px de large. On l'aplatit :
   la carte, c'est le conteneur parent, pas ce wrapper. */
body.aa-woo .wd-table-wrapper{
  padding:0!important;margin:0!important;background:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important}

/* Notices : plus de liseré latéral (side-stripe) — bordure pleine + fond teinté
   par statut, ce qui reste lisible et retire le tell « accent border-left ». */
body.aa-woo .woocommerce-message,
body.aa-woo .woocommerce-info,
body.aa-woo .woocommerce-error{
  border:1px solid var(--line)!important;background:#faf7f2!important;border-radius:14px!important;
  padding:14px 18px!important;font-size:14.5px;color:var(--ink)!important;list-style:none}
body.aa-woo .woocommerce-message{border-color:#bfe3cd!important;background:#f2faf5!important;color:#155e38!important}
body.aa-woo .woocommerce-error{border-color:#f0cfcf!important;background:#fbf3f3!important}
body.aa-woo .woocommerce-info{border-color:#f3d6d3!important;background:#fdf5f4!important}

/* ── Finition boutique : étapes, ligne produit, réassurance, CTA ────────── */

/* Indicateur d'étapes Woodmart, repensé en fil discret et centré : il informe
   sans concurrencer le hero. Numérotation par compteur CSS. */
body.aa-woo .wd-checkout-steps{
  display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;
  list-style:none;margin:0 auto;padding:22px 24px;max-width:760px;counter-reset:step}
body.aa-woo .wd-checkout-steps li{display:flex;align-items:center;counter-increment:step;
  font:600 13px/1 'Manrope',sans-serif;color:var(--ink-soft);white-space:nowrap}
body.aa-woo .wd-checkout-steps li::before{
  content:counter(step);display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;margin-right:9px;flex:0 0 auto;
  background:#eee7db;color:var(--ink-soft);font-weight:700;font-size:12px}
body.aa-woo .wd-checkout-steps li:not(:last-child)::after{
  content:'';width:34px;height:1.5px;background:var(--line);margin:0 16px;border-radius:2px}
body.aa-woo .wd-checkout-steps li.step-active{color:var(--ink)}
body.aa-woo .wd-checkout-steps li.step-active::before{background:var(--red);color:#fff}
body.aa-woo .wd-checkout-steps li a{color:inherit;text-decoration:none}
body.aa-woo .wd-checkout-steps li a:hover{color:var(--red)}

/* Ligne produit : nom en display, sous-titre discret, sous-total en bordeaux. */
body.aa-woo td.product-name{font:700 15.5px/1.35 'Space Grotesk',sans-serif;color:var(--ink)}
body.aa-woo .aa-tire-sub{
  display:block;margin-top:7px;font:500 12.5px/1.4 'Manrope',sans-serif;color:var(--ink-soft)}
body.aa-woo .aa-tire-sub i{color:var(--green);font-size:14px;vertical-align:-2px;margin-right:3px}
body.aa-woo .aa-tire-sub .dot{margin:0 7px;opacity:.5}
body.aa-woo td.product-subtotal{color:var(--red)!important;font-weight:700}
@media(max-width:600px){body.aa-woo .aa-tire-sub .dot{display:none}
  body.aa-woo .aa-tire-sub{margin-top:5px}}

/* Bandeau de réassurance (3 colonnes) sous le panier / avant le paiement. */
body.aa-woo .aa-woo-reassure{
  list-style:none;margin:22px 0 0;padding:20px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
body.aa-woo .aa-woo-reassure li{display:flex;gap:12px;align-items:flex-start}
body.aa-woo .aa-woo-reassure i{
  font-size:22px;color:var(--red);flex:0 0 auto;margin-top:1px}
body.aa-woo .aa-woo-reassure strong{
  display:block;font:700 13.5px/1.3 'Space Grotesk',sans-serif;color:var(--ink);margin-bottom:3px}
body.aa-woo .aa-woo-reassure span{font:500 12.5px/1.45 'Manrope',sans-serif;color:var(--ink-soft)}
@media(max-width:820px){body.aa-woo .aa-woo-reassure{grid-template-columns:1fr;gap:14px;padding:18px}}

/* Le tunnel place la réassurance dans la colonne étroite du récap : on l'aère. */
body.aa-woo .woocommerce-checkout .aa-woo-reassure{
  grid-template-columns:1fr;gap:13px;margin:0 0 20px;padding:16px 18px;background:#faf7f2}
body.aa-woo .woocommerce-checkout .aa-woo-reassure i{font-size:19px}

/* Options de montage (récap de commande, si retrait atelier choisi). */
body.aa-woo .aa-mounting-row td{padding:4px 0 2px!important;border-top:0!important}
body.aa-woo .aa-mounting{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px}
body.aa-woo .aa-mounting-h{
  font:700 12.5px/1.2 'Space Grotesk',sans-serif;color:var(--ink);margin:2px 0 4px}
body.aa-woo .aa-m-opt{
  display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
body.aa-woo .aa-m-opt:hover{border-color:#d9cdbb}
body.aa-woo .aa-m-opt input{accent-color:var(--red);margin:0;flex:0 0 auto}
body.aa-woo .aa-m-opt:has(input:checked){border-color:var(--red);background:#fbf3f3}
body.aa-woo .aa-m-opt .t{
  flex:1;font:600 13px/1.3 'Manrope',sans-serif;color:var(--ink)}
body.aa-woo .aa-m-opt .p{font:700 13px/1 'Space Grotesk',sans-serif;color:var(--red);white-space:nowrap}
body.aa-woo .aa-m-opt .p-free{color:var(--ink-soft);font-weight:600}

/* Mention de confiance sous le CTA. */
body.aa-woo .aa-secure-note{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;
  font:600 12.5px/1.3 'Manrope',sans-serif;color:var(--ink-soft);text-align:center}
body.aa-woo .aa-secure-note i{color:var(--green);font-size:15px}
body.aa-woo .wc-proceed-to-checkout .checkout-button{display:block;width:100%;text-align:center}

/* ── Pied AA (réinjecté par le mu-plugin) ─────────────────────────────── */
.aa-woo-footer{background:var(--dark);color:#9aa0a9;padding:56px 0 28px;margin-top:48px}
.aa-woo-footer .in{max-width:1320px;margin:0 auto;padding:0 24px}
.aa-woo-footer .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.aa-woo-footer h4{color:#fff;font-size:14px;margin-bottom:14px;font-family:'Space Grotesk',sans-serif}
.aa-woo-footer a{display:block;font-size:14px;padding:4px 0;color:#9aa0a9;text-decoration:none;transition:.2s}
.aa-woo-footer a:hover{color:#fff}
.aa-woo-footer .flogo{width:150px;margin-bottom:14px}
.aa-woo-footer .fbottom{border-top:1px solid #23262d;margin-top:36px;padding-top:20px;
  display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px}

@media(max-width:860px){
  .aa-woo-footer .fgrid{grid-template-columns:1fr 1fr}
  body.aa-woo .woocommerce table td img{width:64px!important;height:64px!important}
  body.aa-woo #main-content{padding:24px 16px 56px}
}
/* Stepper en mobile : les libellés longs ne tiennent pas côte à côte. On garde
   les pastilles numérotées en ligne et on n'affiche que le libellé de l'étape
   courante (le hero rappelle déjà où l'on est). */
@media(max-width:600px){
  body.aa-woo .wd-checkout-steps{padding:16px 16px 4px;gap:0}
  body.aa-woo .wd-checkout-steps li{font-size:13px}
  body.aa-woo .wd-checkout-steps li:not(.step-active) > *{display:none}
  body.aa-woo .wd-checkout-steps li:not(.step-active)::before{margin-right:0}
  body.aa-woo .wd-checkout-steps li:not(:last-child)::after{width:18px;margin:0 10px}
  /* Options de montage : sur colonne étroite, le prix passe sous le libellé
     (sinon « / pneu » se fait rogner). */
  body.aa-woo .aa-m-opt{flex-wrap:wrap;padding:10px 12px}
  body.aa-woo .aa-m-opt .t{flex:1 1 100%}
  body.aa-woo .aa-m-opt .p{margin-left:28px}
  /* Récap de commande : on rend sa largeur au texte (cellule produit collée aux
     bords de la carte, vignette plus compacte) — le nom du pneu ne casse plus
     en 5 lignes. Sélecteurs assez spécifiques pour battre les règles génériques
     .woocommerce table tbody td / td img. */
  body.aa-woo .woocommerce table td.wd-checkout-prod{padding:16px 2px!important;gap:10px}
  body.aa-woo .woocommerce table td.wd-checkout-prod img{width:52px!important;height:52px!important}
}