/*
Theme Name: Maison Autry
Theme URI: https://maison-autry.com
Description: Thème enfant d'Astra — portage fidèle du design de référence.
Author: Maison Autry
Template: astra
Version: 1.0.0
*/

/* ═══════════════════════════════════════════════════════════════════
   POLICE — Jost, auto-hébergée
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Jost';src:url('fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ═══════════════════════════════════════════════════════════════════
   JETONS
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#000; --muted:#666; --line:#e6e6e6;
  --bg:#fff; --bg2:#f6f6f6;
  --maxw:1500px; --gut:clamp(15px,3vw,40px);
  --header-h:92px; --topbar-h:38px;
  --font:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
body,.ast-container,button,input,select,textarea{font-family:var(--font);color:var(--ink)}
body{background:var(--bg);line-height:1.55;font-weight:400;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.site-title,.woocommerce-loop-product__title,.product_title{
  font-family:var(--font);font-weight:500;line-height:1.15;letter-spacing:0;
  /* Un nom de modèle long ne doit jamais déborder de sa carte à 320 px. */
  overflow-wrap:break-word;hyphens:auto;
}
/* Plancher 16 px : sous ce seuil, iOS zoome à la mise au point d'un champ. */
input,select,textarea,button{font-size:max(16px,1rem)}

.ma-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* Astra impose ses propres largeurs : on les neutralise pour retrouver la
   pleine largeur de la référence. */
.ast-container,.site-content .ast-container{max-width:100%;padding-inline:0}
#primary,.site-main{margin:0;padding:0}
.entry-content>*{max-width:none}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════════ */
.ma-btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce .button.alt,
.wp-block-button__link,
.woocommerce div.product form.cart .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#000;color:#fff;
  font-family:var(--font);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  font-size:13px;line-height:1;
  padding:16px 40px;min-height:44px;
  border:1px solid #000;border-radius:0;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ma-btn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce .button.alt:hover,.wp-block-button__link:hover{background:#fff;color:#000}
.ma-btn--white{background:#fff;color:#000;border-color:#fff}
.ma-btn--white:hover{background:transparent;color:#fff;border-color:#fff}
.ma-btn--ghost{background:transparent;color:#000;border-color:#000}
.ma-btn--ghost:hover{background:#000;color:#fff}
.ma-btn--lg{padding:18px 52px;font-size:14px}

/* Un état désactivé se signale par le fond, jamais par l'opacité : celle-ci
   écrase le contraste et rend le libellé illisible. */
.woocommerce button.button:disabled,.woocommerce .button:disabled{
  background:var(--bg2);color:var(--muted);border-color:var(--line);opacity:1;cursor:not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   BANDEAU HAUT
   ═══════════════════════════════════════════════════════════════════ */
.ma-topbar{
  background:#000;color:#fff;text-align:center;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:center;
  padding-inline:12px;overflow:hidden;
}
.ma-topbar__msg{transition:opacity .28s ease;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE — menu à gauche, marque au centre, outils à droite
   ═══════════════════════════════════════════════════════════════════ */
.ma-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.ma-header__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  min-height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.ma-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.ma-nav a{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;min-height:44px;position:relative;
}
/* Soulignement animé plutôt qu'un simple changement de couleur : le repère
   reste lisible pour qui distingue mal les nuances. */
.ma-nav a::after{
  content:'';position:absolute;left:0;bottom:26px;height:1px;width:0;background:currentColor;
  transition:width .3s var(--ease);
}
.ma-nav a:hover::after,.ma-nav a[aria-current]::after{width:100%}

.ma-brand{
  justify-self:center;
  font-size:clamp(18px,2.2vw,26px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.ma-tools{justify-self:end;display:flex;align-items:center;gap:10px}
.ma-tools a,.ma-tools button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;position:relative;
}
.ma-tools svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.ma-cart__count{
  position:absolute;top:6px;right:2px;
  background:#000;color:#fff;font-size:10px;line-height:1;
  min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
}
.ma-burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}

/* Mobile d'abord : la navigation est un panneau escamotable.
   Trois défauts corrigés ici, tous mesurés :
   · il ne faisait que 128 px de large — la largeur de sa colonne de grille :
     `position:fixed` était capturé par un ancêtre créant un contexte de
     positionnement, donc `left:0;right:0` se rapportait à cette colonne ;
   · il s'ouvrait toujours à `y=130`, calculé depuis des hauteurs FIGÉES
     (`--header-h`), si bien qu'après défilement l'en-tête remontait à 0 et le
     panneau restait suspendu dans le vide ;
   · `--header-h` valait 92 px pour un en-tête mesuré à 93.
   La correction consiste à l'ancrer à l'EN-TÊTE lui-même (`position:absolute`
   dans `.ma-header`, `top:100%`) : il suit alors sa position réelle, quel que
   soit le défilement, et n'a plus besoin d'aucune hauteur codée en dur. */
.ma-header{position:sticky;top:0;z-index:60}
.ma-nav{
  position:absolute;top:100%;left:0;right:0;width:auto;
  background:#fff;border-bottom:1px solid var(--line);
  flex-direction:column;align-items:flex-start;gap:0;
  padding:4px var(--gut) 14px;
  transform:translateY(-10px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  max-height:calc(100svh - 100%);overflow-y:auto;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  z-index:59;
}
.ma-nav.is-open{visibility:visible}
.ma-nav.is-open{transform:none;opacity:1;pointer-events:auto}
.ma-nav a{width:100%;border-bottom:1px solid var(--line);min-height:52px;font-size:13px}
.ma-nav a::after{display:none}

@media (min-width:1024px){
  .ma-burger{display:none}
  .ma-nav{
    position:static;inset:auto;background:transparent;border:0;box-shadow:none;
    flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px);
    padding:0;transform:none;opacity:1;pointer-events:auto;visibility:visible;
    max-height:none;overflow:visible;width:auto;
  }
  .ma-nav a{width:auto;border-bottom:0;min-height:44px;font-size:12px}
  .ma-nav a::after{display:block}
}

/* ═══════════════════════════════════════════════════════════════════
   HERO ET BANNIÈRES
   ═══════════════════════════════════════════════════════════════════ */
.ma-hero,.ma-banner{
  position:relative;overflow:hidden;
  min-height:clamp(320px,40vw,576px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
}
.ma-hero img,.ma-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Voile sombre : sans lui, un texte blanc sur photo claire devient illisible
   dès que la photo change. */
.ma-hero::after,.ma-banner::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
.ma-hero__in,.ma-banner__in{position:relative;z-index:2;padding:clamp(24px,5vw,60px) var(--gut);max-width:900px}
.ma-hero__brand,.ma-banner__brand{
  font-size:clamp(30px,5vw,64px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;margin-bottom:14px;
}
.ma-hero__kicker{font-size:clamp(11px,1.1vw,13px);letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;opacity:.92}
.ma-hero__big{font-size:clamp(38px,7vw,86px);font-weight:700;line-height:.95;margin-bottom:10px}
.ma-hero__sub,.ma-banner__sub{font-size:clamp(13px,1.3vw,15px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.ma-banner__title{font-size:clamp(22px,3.2vw,40px);font-weight:500;line-height:1.1;text-transform:uppercase;margin-bottom:20px}

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS PRODUITS
   ═══════════════════════════════════════════════════════════════════ */
.ma-section{padding:clamp(38px,5vw,64px) 0}
.ma-section__title{
  text-align:center;
  font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:clamp(22px,3vw,38px);
}
.ma-section__cta{text-align:center;margin-top:clamp(24px,3vw,38px)}

/* ═══════════════════════════════════════════════════════════════════
   CARTES PRODUIT
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce ul.products{
  display:grid;
  /* minmax(0,1fr) et non 1fr : « 1fr » vaut minmax(auto,1fr), et une colonne
     refuse alors de passer sous la largeur de son plus long mot. */
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:clamp(14px,1.4vw,24px);
  margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;min-width:0;
  text-align:left;position:relative;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  background:var(--bg2);border-radius:0;
  aspect-ratio:1/1;object-fit:contain;width:100%;height:auto;margin:0;
  transition:transform .5s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .woocommerce ul.products li.product:hover img{transform:scale(1.04)}
}
@media (hover:none) and (pointer:coarse){
  .woocommerce ul.products li.product:active img{transform:scale(.99)}
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
  line-height:1.4;padding:14px 0 6px;color:var(--ink);
}
.woocommerce ul.products li.product .price{font-size:13px;font-weight:500;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   PRIX
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce .price ins{color:var(--ink);text-decoration:none;font-weight:500}
/* La couleur du trait est posée explicitement : héritée, elle reste trop
   claire et le prix barré devient invisible. */
.woocommerce .price del{
  color:var(--muted);opacity:1;font-weight:400;
  text-decoration-line:line-through;text-decoration-color:var(--muted);
  margin-inline-end:8px;font-size:.92em;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGE PROMOTION — en haut à gauche, comme la référence
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce span.onsale{
  position:absolute;top:12px;left:12px;right:auto;bottom:auto;
  background:#000;color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.06em;
  padding:5px 9px;border-radius:0;min-height:0;min-width:0;line-height:1.2;margin:0;z-index:2;
}

/* ═══════════════════════════════════════════════════════════════════
   FICHE PRODUIT
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce div.product{max-width:var(--maxw);margin-inline:auto;padding:clamp(20px,3vw,40px) var(--gut)}
.woocommerce div.product .product_title{font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.woocommerce div.product p.price{font-size:18px;font-weight:500;margin-bottom:20px}
.woocommerce div.product div.images img{background:var(--bg2);aspect-ratio:1/1;object-fit:contain}
.woocommerce div.product form.cart .variations{margin-bottom:14px}
.woocommerce div.product form.cart .variations label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.woocommerce div.product form.cart .variations select{
  min-height:48px;border:1px solid var(--line);border-radius:0;padding:10px 14px;background:#fff;width:100%;
}
.woocommerce div.product form.cart .single_add_to_cart_button{width:100%}
.single-product-category a,span.single-product-category a{
  display:inline-flex!important;align-items:center;min-height:44px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
a.reset_variations,.woocommerce div.product form.cart .reset_variations{
  display:inline-flex!important;align-items:center;min-height:44px;min-width:44px;font-size:12px;color:var(--muted);
}
.product_meta a,.posted_in a,.tagged_as a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.woocommerce-breadcrumb{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.woocommerce-breadcrumb a,.woocommerce-breadcrumb>*{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.woocommerce-product-gallery__trigger,.woocommerce-product-gallery button{min-width:44px;min-height:44px}
.zoomImg{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ═══════════════════════════════════════════════════════════════════ */
.ma-footer{background:#000;color:#fff;padding:clamp(50px,6vw,78px) 0 30px;margin-top:clamp(40px,5vw,70px)}
.ma-footer a{color:#fff}
.ma-footer__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* Mobile d'abord : une colonne, puis la grille de la référence. */
.ma-footer__top{display:grid;grid-template-columns:1fr;gap:30px;padding-bottom:46px;border-bottom:1px solid #242424}
@media (min-width:600px){.ma-footer__top{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.ma-footer__top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}}
.ma-footer__brand{font-size:26px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.ma-footer__blurb{color:#b3b3b3;font-size:13px;line-height:1.7;max-width:34ch;margin-bottom:20px}
.ma-footer h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:16px}
.ma-footer ul{list-style:none;margin:0;padding:0}
.ma-footer li{margin-bottom:2px}
.ma-footer li a{font-size:13px;color:#b3b3b3;display:inline-flex;align-items:center;min-height:44px;transition:color .25s var(--ease)}
.ma-footer li a:hover{color:#fff}
.ma-news{display:flex;gap:0;max-width:340px}
.ma-news input{flex:1;min-width:0;background:transparent;border:1px solid #333;border-right:0;color:#fff;padding:12px 14px;font-size:13px;min-height:46px}
.ma-news input::placeholder{color:#777}
.ma-news button{background:#fff;color:#000;border:1px solid #fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:12px 20px;min-height:46px;min-width:44px}
.ma-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px;font-size:12px;color:#888}
.ma-footer__legal{max-width:70ch;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════
   PAGES ÉDITORIALES
   ═══════════════════════════════════════════════════════════════════ */
/* Largeur de lecture réservée aux pages éditoriales : sur l'accueil, cette
   même règle écrasait le hero à 900 px et rendait le pleine largeur impossible. */
/* La condition porte sur le BODY : la classe `home` y est posée, alors que
   `.page` est sur l'<article>. `.page:not(.home)` restait donc toujours vrai
   et contraignait l'accueil à 900 px. */
body:not(.home) .entry-content{max-width:900px;margin-inline:auto;padding-inline:var(--gut)}
body:not(.home) .entry-header{max-width:900px;margin-inline:auto;padding:clamp(30px,4vw,50px) var(--gut) 0}
body.home .entry-content,
body.home .entry-content>*{max-width:none!important;padding-inline:0;margin-inline:0}
.page .entry-title{font-size:clamp(22px,2.6vw,32px);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.page .entry-content h2{margin-block:2rem .75rem;font-size:clamp(16px,1.6vw,19px);letter-spacing:.08em;text-transform:uppercase}
.page .entry-content ul{padding-inline-start:1.25rem}
.page .entry-content li{margin-block-end:.4rem}
.page .entry-content p{margin-block-end:1rem}

/* Un tableau de tailles déborde à 320 px : il défile dans sa propre boîte
   plutôt que d'emporter la page entière. */
.wp-block-table{overflow-x:auto}
.wp-block-table table{min-width:34rem;border-collapse:collapse}
.wp-block-table th,.wp-block-table td{border:1px solid var(--line);padding:.5rem .75rem;text-align:center;font-size:14px}
.wp-block-table th{background:var(--bg2);font-weight:500}

/* ═══════════════════════════════════════════════════════════════════
   RÉVÉLATION AU DÉFILEMENT
   ═══════════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════ */
:focus-visible{outline:2px solid #000;outline-offset:2px}
.ma-footer :focus-visible,.ma-hero :focus-visible,.ma-banner :focus-visible{outline-color:#fff}

/* Une animation ne s'impose jamais à qui l'a refusée au niveau du système. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   ÉLÉMENTS ASTRA REMPLACÉS
   ═══════════════════════════════════════════════════════════════════ */
.site-header,.ast-above-header,.ast-main-header-wrap,#masthead,
.site-footer,#colophon,.ast-header-break-point .main-header-bar{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   PLEINE LARGEUR
   Astra enferme le contenu dans un conteneur centré. Le hero et les
   bannières doivent border l'écran : on les sort de leur conteneur en
   les élargissant à la largeur du viewport et en compensant la marge.
   ═══════════════════════════════════════════════════════════════════ */
/* Pas de `width:100vw` ici : 100vw inclut la barre de défilement verticale
   et provoquait 70 px de débordement horizontal. Le conteneur étant désormais
   en pleine largeur sur l'accueil, une largeur de 100 % suffit. */
.ma-hero,.ma-banner{width:100%;max-width:100%;margin-inline:0}

/* Le voile doit être plus dense en haut, là où se trouve le texte : une
   valeur uniforme laisse le titre se noyer dès que la photo est claire. */
.ma-hero::after,.ma-banner::after{
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,.42) 100%);
}
/* Ombre portée sur le texte : ceinture et bretelles, la photo de campagne
   peut changer sans qu'on repasse derrière. */
.ma-hero__in,.ma-banner__in{text-shadow:0 1px 18px rgba(0,0,0,.45)}

/* ═══════════════════════════════════════════════════════════════════
   CARTES — le bouton d'action n'apparaît qu'au survol, comme la référence
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .add_to_cart_button{
  position:absolute;left:12px;right:12px;
  /* Positionné sur le bas de l'image, pas de la carte : sinon il recouvre
     le prix sur les cartes dont le titre tient sur deux lignes. */
  bottom:auto;top:calc(100% - 100% + 0px);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
  padding:12px 16px;font-size:12px;
}
.woocommerce ul.products li.product{position:relative}
.woocommerce ul.products li.product .ma-card-actions{position:relative}

/* Sur écran tactile il n'y a pas de survol : le bouton doit rester
   accessible, on le montre en permanence sous l'image. */
@media (hover:none) and (pointer:coarse){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .ast-on-card-button,
  .woocommerce ul.products li.product .add_to_cart_button{
    position:static;opacity:1;pointer-events:auto;
    display:inline-flex;width:100%;margin-top:8px;left:auto;right:auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTRASTE DU HERO ET DES BANNIÈRES
   Astra colore les titres directement sur `h1`/`h2`, avec une spécificité
   supérieure à la couleur posée sur le conteneur : le titre du hero
   ressortait en bleu-gris sur la photo au lieu du blanc. La couleur est
   donc déclarée sur les éléments eux-mêmes, pas seulement sur le parent.
   ═══════════════════════════════════════════════════════════════════ */
.ma-hero,.ma-hero *,
.ma-banner,.ma-banner *{color:#fff}
.ma-hero h1,.ma-hero h2,.ma-hero p,
.ma-banner h1,.ma-banner h2,.ma-banner p,
.ma-hero__brand,.ma-hero__kicker,.ma-hero__big,.ma-hero__sub,
.ma-banner__brand,.ma-banner__title,.ma-banner__sub{
  color:#fff!important;
}
/* Le bouton blanc garde son texte noir : la règle ci-dessus le rendrait
   blanc sur blanc, donc invisible. */
.ma-hero .ma-btn--white,.ma-banner .ma-btn--white{color:#000!important}
.ma-hero .ma-btn--white:hover,.ma-banner .ma-btn--white:hover{color:#fff!important}

/* Astra pose `margin-top:60px` via `.ast-plain-container.ast-no-sidebar #primary`.
   Ce sélecteur contient un IDENTIFIANT : aucune combinaison de classes ne peut
   le battre. On reprend donc les mêmes classes en y ajoutant `body.home`, ce
   qui suffit à passer devant — sans recourir à `!important`, qui rendrait la
   règle impossible à surcharger plus tard.
   La bande blanche qu'elle créait séparait l'en-tête du hero, lequel doit
   démarrer immédiatement sous la navigation. */
body.home.ast-plain-container.ast-no-sidebar #primary{margin-top:0}
body.home .site-main{padding-top:0}

/* Le lien de rayon de la fiche produit mesurait 43 px de large — un pixel
   sous le seuil, pour un mot court. On corrige par la largeur, pas par la
   taille du texte, qui doit rester discrète. */
.single-product-category a,span.single-product-category a{min-width:44px;padding-inline:4px}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE SUR PETIT ÉCRAN
   Mesuré : à 320 px de vue, l'en-tête occupait 422 px. La marque en
   capitales espacées avec `white-space:nowrap` impose une largeur
   incompressible, et la grille à trois colonnes ne peut plus la loger.
   ═══════════════════════════════════════════════════════════════════ */
.ma-header__in{min-width:0}
.ma-header__in>*{min-width:0}
.ma-brand{
  font-size:clamp(13px,3.6vw,26px);
  letter-spacing:.10em;
  white-space:normal;          /* le nom peut se replier plutôt que déborder */
  text-align:center;line-height:1.1;
}
@media (min-width:520px){
  .ma-brand{white-space:nowrap;letter-spacing:.16em}
}
/* On récupère la place en supprimant l'espacement entre outils, JAMAIS en
   rétrécissant les cibles : réduites à 40 px, elles repassaient sous le seuil
   tactile. La zone cliquable reste de 44 px, les icônes se touchent. */
.ma-tools{gap:0}
@media (min-width:520px){.ma-tools{gap:10px}}
.ma-tools a,.ma-tools button{min-width:44px;min-height:44px}
/* Sur les vues les plus étroites, le compte est déjà pris par le menu et le
   panier : on masque l'accès au compte, doublé dans le pied de page. */
@media (max-width:379px){.ma-tools a[aria-label="Mon compte"]{display:none}}

/* Les infobulles d'Astra sur les cartes débordent de leur boîte (100 px pour
   90 disponibles) et ne servent à rien ici : les actions de carte sont déjà
   masquées. */
.ast-card-action-tooltip{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIONS MOBILE — relevées à l'œil sur le rendu à 390 px
   ═══════════════════════════════════════════════════════════════════ */

/* 1. CENTRAGE DE LA MARQUE
   Mesuré : la grille valait `70px 126px 132px`. Entre deux colonnes de
   largeurs différentes, la colonne centrale n'est pas au centre de la page
   mais au centre de ce qui reste — le logo était décalé de 31 px.
   Des colonnes latérales ÉGALES sont la seule façon de centrer réellement. */
.ma-header__in{
  grid-template-columns:1fr auto 1fr;
  gap:8px;
}
.ma-nav{justify-self:start}
.ma-tools{justify-self:end}
@media (min-width:1024px){
  /* Sur grand écran le menu occupe la colonne de gauche : elle reste de même
     largeur que celle de droite, donc la marque demeure centrée. */
  .ma-header__in{grid-template-columns:1fr auto 1fr;gap:16px}
}

/* 2. LA MARQUE TIENT SUR UNE LIGNE
   Repliée sur deux lignes, elle déséquilibre toute la barre. */
.ma-brand{
  font-size:clamp(15px,4.4vw,26px);
  letter-spacing:.10em;
  white-space:nowrap;
  text-align:center;
}
@media (min-width:520px){.ma-brand{letter-spacing:.16em}}

/* 3. LE BOUTON DE MENU N'EST PAS UN BOUTON DE FORMULAIRE
   Sans cette remise à zéro, il hérite du fond bleu des boutons WordPress. */
.ma-burger,
.ma-burger:hover,
.ma-burger:focus,
button.ma-burger{
  background:transparent!important;
  border:0!important;
  color:var(--ink)!important;
  padding:0;
  box-shadow:none;
}

/* 4. AUCUN SOULIGNEMENT SUR LES BOUTONS
   Astra souligne les liens de contenu ; sur un bouton, le trait fait
   ressembler l'appel à l'action à un lien de texte mal stylé. */
.ma-btn,.ma-btn:hover,.ma-btn:focus,
.wp-block-button__link,
.woocommerce a.button,.woocommerce .button{
  text-decoration:none!important;
}

/* 5. RESPIRATION DU HERO SUR PETIT ÉCRAN
   Le texte touchait presque les bords. */
.ma-hero__in,.ma-banner__in{padding-inline:clamp(18px,6vw,60px)}
.ma-hero__sub,.ma-banner__sub{font-size:clamp(11px,3vw,15px);letter-spacing:.04em}
.ma-hero__kicker{font-size:clamp(10px,2.6vw,13px)}

/* 6. LE CONTENU DOIT TENIR DANS SA COLONNE
   Mesuré à 390 px : colonnes latérales de 94 px, mais trois icônes de 44 px
   en réclament 132. Elles débordaient sur le logo. Sur mobile, on ne garde
   que la recherche et le panier — le compte reste accessible depuis le pied
   de page, comme sur la référence. */
.ma-tools a[aria-label="Mon compte"]{display:none}
@media (min-width:600px){.ma-tools a[aria-label="Mon compte"]{display:inline-flex}}

/* La marque cède la place en premier si l'espace manque : mieux vaut un logo
   un peu plus petit qu'un chevauchement. */
.ma-brand{font-size:clamp(13px,3.8vw,26px);max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Le bandeau ne doit jamais paraître vide pendant le changement de message :
   une hauteur fixe et une transition courte suffisent. */
.ma-topbar__msg{transition:opacity .18s ease}

/* 7. VUES TRÈS ÉTROITES (320 px)
   Mesuré : 1 px de chevauchement entre la fin du logo et la première icône.
   On resserre l'interlettrage plutôt que de rapetisser encore la police,
   déjà à son plancher de lisibilité. */
@media (max-width:379px){
  .ma-brand{letter-spacing:.04em;font-size:13px}
  .ma-header__in{gap:4px;padding-inline:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES BOUTIQUE ET RAYONS
   La neutralisation des conteneurs d'Astra, faite pour obtenir un hero
   pleine largeur sur l'accueil, avait supprimé les gouttières de TOUTES
   les pages : les cartes touchaient le bord de l'écran. Le pleine largeur
   ne concerne que l'accueil.
   ═══════════════════════════════════════════════════════════════════ */
body:not(.home) .site-content>.ast-container,
body.woocommerce-shop .site-content>.ast-container,
body.tax-product_cat .site-content>.ast-container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb{max-width:var(--maxw);margin-inline:auto}

/* Titre de rayon : même traitement que les titres de section de l'accueil. */
.woocommerce-products-header__title,
.woocommerce-products-header h1,
.tax-product_cat .entry-title{
  font-size:clamp(20px,2.4vw,28px);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  text-align:center;margin-block:clamp(18px,3vw,32px) 6px;
}
.term-description{text-align:center;color:var(--muted);font-size:14px}

/* Compte de résultats et tri : discrets, sur une ligne, alignés. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-block:0 18px;
}
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--line);border-radius:0;padding:10px 12px;min-height:44px;background:#fff;
}

/* ═══════════════════════════════════════════════════════════════════
   CARTES — badge unique, sans pastille flottante
   Astra ajoute sa propre étiquette « Sale! » en anglais dans une pastille
   blanche arrondie, qui doublonne avec le badge de remise et sort du
   registre graphique. On ne garde que le nôtre, en français.
   ═══════════════════════════════════════════════════════════════════ */
.ast-shop-thumbnail-wrap .onsale,
.astra-shop-thumbnail-wrap .onsale,
li.product .ast-onsale-card,
li.product .ast-shop-product-out-of-stock{display:none!important}

.woocommerce ul.products li.product .onsale{
  display:inline-flex!important;
  position:absolute;top:10px;left:10px;right:auto;bottom:auto;
  background:#000;color:#fff;border-radius:0;box-shadow:none;
  font-size:11px;font-weight:500;letter-spacing:.06em;
  padding:5px 9px;margin:0;line-height:1.2;min-width:0;min-height:0;z-index:3;
}

/* Le bouton d'action encombre la grille sur mobile : la carte entière est
   déjà cliquable et mène à la fiche, où le choix de pointure a sa place. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .add_to_cart_button{display:none!important}

/* Grille : 2 colonnes sur mobile, jusqu'à 4 sur grand écran. */
.woocommerce ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,3vw,24px);
}
@media (min-width:700px){.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Le rayon affiché au-dessus du titre alourdit la carte sans rien apprendre
   dans une page de rayon. */
.woocommerce ul.products li.product .ast-woo-product-category{display:none}

/* Badge de remise — le nôtre, distinct de celui d'Astra qu'on masque. */
.woocommerce ul.products li.product .ma-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  display:inline-flex;align-items:center;
  background:#000;color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.06em;
  padding:5px 9px;line-height:1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   FICHE PRODUIT — corrections relevées à l'œil sur mobile
   ═══════════════════════════════════════════════════════════════════ */

/* 1. LE SKU NE S'ADRESSE PAS AU CLIENT
   Il affichait « UGS : sneakers-medalist-low-in-pelle-bianca-e-metallizzata-oro »,
   soit l'identifiant technique hérité de la source, en italien. Aucun acheteur
   n'en fait rien, et il trahit la provenance du catalogue. */
.woocommerce div.product .product_meta .sku_wrapper{display:none}

/* 2. LE BOUTON D'ACHAT EST NOIR
   Astra lui applique sa couleur d'accent avec une spécificité supérieure ;
   le bouton principal de la boutique ressortait en bleu clair. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:#000!important;color:#fff!important;border-color:#000!important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:#fff!important;color:#000!important;
}

/* 3. UN SEUL BADGE, EN FRANÇAIS */
.woocommerce div.product .onsale,
.woocommerce div.product span.onsale,
.single-product .ast-onsale-card{display:none!important}

/* 4. TITRES ET FILETS DANS LA PALETTE
   Astra colore le titre et les séparateurs en bleu. */
.woocommerce div.product .product_title,
.single-product .entry-title,
.woocommerce-tabs .panel h2,
.related.products h2{color:var(--ink)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;padding:0;margin-right:22px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--muted);padding:14px 0;display:inline-flex;align-items:center;min-height:44px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);box-shadow:inset 0 -2px 0 #000}

/* 5. FIL D'ARIANE PLUS COMPACT — il occupait deux lignes.
   La compacité se gagne sur la POLICE et l'interligne, jamais sur la zone
   cliquable : ramenés à 36 px, ses liens repassaient sous le seuil tactile. */
.woocommerce-breadcrumb{font-size:10px;line-height:1.3;margin-bottom:6px}
.woocommerce-breadcrumb a,.woocommerce-breadcrumb>*{min-height:44px;min-width:44px}

/* 6. QUANTITÉ ET SÉLECTEUR ALIGNÉS */
.woocommerce div.product form.cart div.quantity{margin-right:10px}
.woocommerce div.product form.cart .quantity input.qty{
  min-height:48px;border:1px solid var(--line);border-radius:0;text-align:center;width:70px;
}
.woocommerce div.product form.cart{display:block}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{display:block;width:100%;padding:0}
.woocommerce div.product form.cart .variations tr{display:block;margin-bottom:10px}

/* 7. GALERIE : la loupe d'agrandissement est discrète */
.woocommerce div.product .woocommerce-product-gallery__trigger{
  background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none;
  top:10px;right:10px;
}

/* 8. ÉTAT DÉSACTIVÉ DU BOUTON D'ACHAT
   Astra signale l'état par une OPACITÉ appliquée à la classe `.disabled`
   (et non à l'attribut) : le bouton noir virait au gris délavé, illisible.
   On rétablit l'opacité pleine et on exprime l'état par le fond et le texte. */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce .button.disabled,.woocommerce .button:disabled{
  opacity:1!important;
  background:var(--bg2)!important;
  color:var(--muted)!important;
  border-color:var(--line)!important;
  cursor:not-allowed;
}
/* Dès qu'une pointure est choisie, WooCommerce retire `.disabled` et le
   bouton reprend son noir plein. */
.woocommerce div.product form.cart button.single_add_to_cart_button:not(.disabled){
  opacity:1!important;background:#000!important;color:#fff!important;
}


/* ═══════════════════════════════════════════════════════════════════
   MENU — désormais enfant direct de l'en-tête
   Sur grand écran il reprend sa place à gauche de la barre, en se
   superposant à la colonne libérée par le bouton masqué.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .ma-nav{
    position:absolute;top:0;bottom:auto;left:0;right:auto;
    height:var(--header-h);
    max-width:var(--maxw);margin-inline:auto;
    padding-inline:var(--gut);
    display:flex;flex-direction:row;align-items:center;
    gap:clamp(14px,2vw,30px);
    background:transparent;border:0;box-shadow:none;
    transform:none;opacity:1;pointer-events:auto;visibility:visible;
    overflow:visible;max-height:none;width:auto;
  }
  /* La barre reste centrée sur les mêmes gouttières que le reste du site. */
  .ma-header{position:sticky;top:0}
  .ma-nav a{width:auto;border-bottom:0;min-height:44px;font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════
   LARGEUR DU PANNEAU DE MENU
   `left:0; right:0; width:auto` aurait dû l'étirer sur toute la largeur de
   l'en-tête. Mesuré : il conservait 127 px, la largeur de son contenu.
   On pose donc la largeur explicitement plutôt que de la laisser déduire.
   ═══════════════════════════════════════════════════════════════════ */
.ma-header{position:sticky;top:0;z-index:60;width:100%}
.ma-nav{width:100%;left:0;right:auto;box-sizing:border-box}
@media (min-width:1024px){
  /* Sur grand écran, le menu redevient une barre horizontale à gauche : il
     ne doit alors PAS occuper toute la largeur, sinon il recouvre le logo. */
  .ma-nav{width:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   ACCORDÉON PRODUIT
   Remplace les onglets, illisibles une fois empilés sur mobile.
   ═══════════════════════════════════════════════════════════════════ */
.ma-acc{border-top:1px solid var(--line);margin-top:26px}
.ma-acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:18px 0;min-height:56px;
  font-family:var(--font);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  text-align:left;cursor:pointer;
}
/* Le signe indique l'état : ouvert = moins, fermé = plus. Une flèche seule
   laisserait deviner le sens. */
.ma-acc__head i{position:relative;width:12px;height:12px;flex:0 0 12px}
.ma-acc__head i::before,
.ma-acc__head i::after{
  content:'';position:absolute;background:currentColor;transition:transform .25s var(--ease);
}
.ma-acc__head i::before{left:0;top:5px;width:12px;height:1px}
.ma-acc__head i::after{left:5px;top:0;width:1px;height:12px}
.ma-acc__head[aria-expanded="true"] i::after{transform:scaleY(0)}
.ma-acc__body{padding:6px 0 22px;border-bottom:1px solid var(--line)}
.ma-acc__body .panel{padding:0;margin:0;border:0}
.ma-acc__body h2{display:none}   /* le titre est déjà porté par l'en-tête */
.ma-acc__body ul{padding-inline-start:1.1rem;margin:0}
.ma-acc__body li{margin-bottom:.45rem;font-size:14px;line-height:1.6}
.ma-acc__body p{font-size:14px;line-height:1.7;margin-bottom:.8rem}

/* WooCommerce masque les panneaux inactifs par un style en ligne, conservé
   quand on les déplace dans l'accordéon : la section « Description »
   s'ouvrait sur du vide. C'est désormais l'accordéon qui gouverne la
   visibilité, via l'attribut `hidden` de son corps. */
.ma-acc__body .panel,
.ma-acc__body .woocommerce-Tabs-panel{display:block!important}

/* ═══════════════════════════════════════════════════════════════════
   ALIGNEMENT DES ZONES DE L'EN-TÊTE
   Les colonnes latérales valent `1fr` pour garder la marque centrée. Sans
   alignement explicite, chaque enfant est ÉTIRÉ sur toute sa colonne et son
   contenu se centre dedans : le bouton de menu paraissait flotter au milieu
   de la moitié gauche au lieu d'être calé au bord.
   ═══════════════════════════════════════════════════════════════════ */
.ma-header__in>.ma-burger{justify-self:start;margin-inline-start:0}
.ma-header__in>.ma-tools{justify-self:end}
.ma-header__in>.ma-brand{justify-self:center}

/* Colonnes assignées explicitement : masquer le bouton de menu sur grand
   écran libérait sa colonne, et la marque comme les outils remontaient d'un
   cran — la marque se retrouvait à gauche (mesuré : 386 px de décalage).
   Une position explicite rend la barre indépendante de ce qui est masqué. */
.ma-header__in>.ma-burger{grid-column:1;justify-self:start}
.ma-header__in>.ma-brand {grid-column:2;justify-self:center}
.ma-header__in>.ma-tools {grid-column:3;justify-self:end}

/* `justify-self:start` a retiré l'étirement du bouton, qui a repris sa
   largeur de contenu : 22 px, sous le seuil tactile de 44. La zone cliquable
   est donc imposée explicitement — l'alignement ne doit jamais la réduire. */
.ma-header__in>.ma-burger{min-width:44px;min-height:44px;width:44px}

/* ═══════════════════════════════════════════════════════════════════
   BLOCS WOOCOMMERCE (panier, commande)
   Ces pages utilisent le système `wc-block-*`, distinct de celui des pages
   produit : les règles précédentes ne les atteignaient pas, d'où des boutons
   bleus et un badge « Promo » rond au milieu d'une charte noir et blanc.
   ═══════════════════════════════════════════════════════════════════ */

/* Boutons */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  background:#000!important;color:#fff!important;
  border:1px solid #000!important;border-radius:0!important;
  font-family:var(--font)!important;font-weight:500!important;
  font-size:13px!important;letter-spacing:.05em!important;text-transform:uppercase!important;
  min-height:48px!important;padding:14px 32px!important;
  box-shadow:none!important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover{background:#fff!important;color:#000!important}

/* Le badge de promotion rond et bleu n'appartient pas à la charte : on le
   remet au format des cartes produit — rectangle noir en haut à gauche. */
.wc-block-grid__product-onsale,
.wc-block-components-product-sale-badge{
  background:#000!important;color:#fff!important;
  border:0!important;border-radius:0!important;
  font-family:var(--font)!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  min-width:0!important;min-height:0!important;width:auto!important;height:auto!important;
  padding:5px 9px!important;line-height:1.2!important;
  top:10px!important;left:10px!important;right:auto!important;
}

/* Titres de produit : pas de soulignement, et la casse du reste du site. */
.wc-block-grid__product-title,
.wc-block-components-product-name{
  color:var(--ink)!important;text-decoration:none!important;
  font-size:12px!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  font-weight:400!important;
}
.wc-block-grid__product-title:hover{text-decoration:none!important}

/* Prix : même traitement que sur les cartes produit. */
.wc-block-grid__product-price del,
.wc-block-components-product-price del{color:var(--muted)!important;opacity:1!important}
.wc-block-grid__product-price ins,
.wc-block-components-product-price ins{color:var(--ink)!important;text-decoration:none!important;font-weight:500!important}

/* Liens et champs du panier dans la palette du site. */
.wc-block-cart a,.wc-block-checkout a{color:var(--ink)}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-form input{border-radius:0!important;min-height:48px}
.wc-block-components-totals-item__value,
.wc-block-cart__totals-footer .wc-block-components-totals-item__value{color:var(--ink)}

/* Titres de section des blocs (« New in store », etc.) */
.wp-block-heading,.wc-block-grid__title{
  font-family:var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}

/* Le bouton « retour en haut » d'Astra est retiré : bleu vif hors charte, et
   il recouvrait le contenu au défilement. Désactivé dans les réglages, il est
   aussi masqué ici au cas où un réglage le réactiverait. */
#ast-scroll-top,.ast-scroll-top-icon,.ast-scroll-to-top-right,
a#ast-scroll-top{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   REBOND DE DÉFILEMENT
   Sur iOS, tirer au-delà de la fin de page révèle le fond de <html>, non
   celui du pied de page : une bande blanche apparaissait sous le noir.
   On peint donc la toile en noir. En haut, le rebond révèle alors la même
   couleur que le bandeau — la continuité est préservée aux deux extrémités.
   ═══════════════════════════════════════════════════════════════════ */
html{background:#000}
body{background:var(--bg)}

/* Les titres de colonne du pied de page héritaient d'un bleu sombre d'Astra,
   presque illisible sur fond noir. */
.ma-footer h3,.ma-footer__brand,.ma-footer__bottom span{color:#fff!important}
.ma-footer h3{color:#8a8a8a!important;font-weight:500}
.ma-footer__blurb,.ma-footer li a{color:#b3b3b3!important}
.ma-footer li a:hover{color:#fff!important}
.ma-footer__bottom{color:#8a8a8a!important}
.ma-footer__bottom span{color:#8a8a8a!important}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE — plus d'horizontalité sur mobile
   Une seule colonne, avec des liens de 44 px de haut, produisait une
   colonne interminable. Les trois listes passent sur deux colonnes dès
   le plus petit écran ; seul le bloc marque + inscription reste pleine
   largeur, car le champ e-mail a besoin de place pour rester utilisable.
   ═══════════════════════════════════════════════════════════════════ */
.ma-footer__top{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 18px;
}
/* Le bloc marque occupe toute la largeur, les listes se partagent le reste. */
.ma-footer__top>*:first-child{grid-column:1 / -1}

@media (min-width:600px){
  .ma-footer__top{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
  .ma-footer__top>*:first-child{grid-column:1 / -1}
}
@media (min-width:1024px){
  /* Au-delà, la disposition de la référence : marque large puis 3 colonnes. */
  .ma-footer__top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
  .ma-footer__top>*:first-child{grid-column:auto}
}

/* ⚠️ Le commentaire d'origine annonçait « zone tactile de 44 px » alors que la
   règle en posait 40 sur mobile — la place gagnée pour tenir deux colonnes
   avait été prise SUR LA CIBLE. C'est précisément l'inverse de ce qu'il faut
   faire : on la récupère sur l'interligne et les marges, jamais sur la surface
   que le doigt doit atteindre. 44 px partout, désormais. */
.ma-footer li{margin-bottom:0}
.ma-footer li a{min-height:44px;padding-block:0;line-height:1.3}
.ma-footer h3{margin-bottom:10px}
.ma-footer__blurb{margin-bottom:16px;max-width:52ch}
.ma-news{max-width:100%}
@media (min-width:600px){.ma-news{max-width:340px}}

/* Le bas du pied de page se répartit au lieu de s'empiler. */
.ma-footer__bottom{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:baseline;justify-content:space-between;
}
.ma-footer__legal{flex:1 1 260px;min-width:0}

/* ═══════════════════════════════════════════════════════════════════
   ACCORDÉON — corrections d'usage relevées au doigt
   · au toucher, l'en-tête virait au bleu : c'est le fond par défaut d'un
     <button> dans WordPress, qui ressort sur :active et :focus ;
   · le filet de séparation débordait de la boîte ;
   · le libellé touchait le bord de l'écran.
   ═══════════════════════════════════════════════════════════════════ */
.ma-acc{
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-inline:0;
}
.ma-acc__head,
.ma-acc__head:hover,
.ma-acc__head:focus,
.ma-acc__head:active,
.ma-acc__head:focus-visible,
button.ma-acc__head{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--ink)!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  border-radius:0!important;
  /* Le libellé ne colle plus au bord ; le filet court sur toute la largeur. */
  padding:18px 4px!important;
  text-transform:uppercase;
}
/* Le repère de mise au point reste visible au clavier, sans aplat de couleur. */
.ma-acc__head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Au toucher, un simple assombrissement du libellé suffit à donner le retour. */
.ma-acc__head:active span{opacity:.55}
.ma-acc__body{padding:6px 4px 22px;border-bottom:1px solid var(--line)}

/* Le contenu de la fiche a besoin d'air sur les côtés : sans cela, texte et
   filets touchent le bord de l'écran sur mobile. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .ma-acc{margin-inline:0}
@media (max-width:767px){
  .woocommerce div.product{padding-inline:var(--gut)}
}

/* ═══════════════════════════════════════════════════════════════════
   RECHERCHE
   La loupe menait à la boutique sans champ : l'icône promettait une
   recherche qui n'existait pas, alors que la recherche fonctionne.
   ═══════════════════════════════════════════════════════════════════ */
.ma-search{
  position:absolute;top:100%;left:0;width:100%;
  background:#fff;border-bottom:1px solid var(--line);
  padding:14px var(--gut);z-index:58;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.ma-search form{display:flex;gap:0;max-width:var(--maxw);margin-inline:auto}
.ma-search input[type=search]{
  flex:1;min-width:0;border:1px solid var(--line);border-right:0;border-radius:0;
  padding:12px 14px;min-height:48px;font-size:16px;
}
.ma-search button{
  background:#000;color:#fff;border:1px solid #000;border-radius:0;
  font-family:var(--font);font-size:12px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  padding:12px 20px;min-height:48px;min-width:44px;cursor:pointer;
}
.ma-search button:hover{background:#fff;color:#000}
.ma-search-toggle{
  background:transparent!important;border:0!important;color:var(--ink)!important;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE 404 ET FORMULAIRES DE RECHERCHE D'ASTRA
   Le champ de la page 404 n'était pas stylé : bouton de 16x22, hors charte.
   ═══════════════════════════════════════════════════════════════════ */
.error404 .site-main,.search-no-results .site-main{
  max-width:900px;margin-inline:auto;padding:clamp(40px,6vw,80px) var(--gut);text-align:center;
}
.error404 .page-title,.search-no-results .page-title{
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.search-form,.wp-block-search__inside-wrapper{
  display:flex;gap:0;max-width:420px;margin-inline:auto;margin-top:20px;
}
.search-form .search-field,
.search-form input[type=search],
.wp-block-search__input{
  flex:1;min-width:0;border:1px solid var(--line)!important;border-right:0!important;
  border-radius:0!important;padding:12px 14px!important;min-height:48px;font-size:16px;
}
.search-form .search-submit,
.search-form button[type=submit],
.wp-block-search__button{
  background:#000!important;color:#fff!important;border:1px solid #000!important;
  border-radius:0!important;font-family:var(--font)!important;
  font-size:12px!important;font-weight:500!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  padding:12px 20px!important;min-height:48px!important;min-width:44px!important;
}
.search-form .search-submit:hover{background:#fff!important;color:#000!important}
/* Astra masque parfois le libellé du bouton dans un span : la zone cliquable
   doit rester celle du bouton, pas celle du texte. */
.search-form .search-submit span,.search-form .search-submit svg{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════
   TUNNEL DE COMMANDE
   WooCommerce génère seul le balisage de cette page : c'est la seule que
   le thème n'avait jamais retouchée, d'où le bleu d'administration, le
   rouge pur et les gris bleutés qui y subsistaient.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mise en page ─────────────────────────────────────────────────── */
.woocommerce-checkout .entry-title{
  text-align:left;font-size:clamp(28px,4vw,40px);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:32px;
}
.woocommerce-checkout form.checkout{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:900px){
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}
  .woocommerce-checkout #customer_details{grid-column:1}
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:2}
}
/* `minmax(0,…)` et non `1fr` seul : sans plancher à zéro, une colonne refuse
   de passer sous la largeur de son plus long contenu et déborde. */
.woocommerce-checkout .col2-set,.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none;margin:0}
.woocommerce-checkout .col2-set .col-2{margin-top:40px}

/* ── Titres de section ────────────────────────────────────────────── */
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:14px;margin:0 0 24px;border-bottom:1px solid var(--ink);
}

/* ── Champs ───────────────────────────────────────────────────────── */
/* 48 px de haut : au-dessus du seuil tactile de 44 px, que les 40 px
   d'origine ne franchissaient pas. */
.woocommerce-checkout .form-row{padding:0;margin:0 0 20px}
.woocommerce-checkout .form-row label{
  display:block;margin-bottom:8px;font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single{
  width:100%;min-height:48px;padding:12px 16px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  font-family:var(--font);font-size:16px;
  transition:border-color .2s var(--ease);
}
.woocommerce-checkout .input-text:focus,.woocommerce-checkout select:focus{
  outline:none;border-color:var(--ink);
}
/* Le focus doit rester perceptible au clavier, pas seulement à la souris. */
.woocommerce-checkout .input-text:focus-visible,
.woocommerce-checkout select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.woocommerce-checkout textarea.input-text{min-height:110px;resize:vertical}
.woocommerce-checkout .select2-container--default .select2-selection--single{
  height:48px;display:flex;align-items:center;border:1px solid var(--line);border-radius:0;
}
.woocommerce-checkout .select2-container--default .select2-selection--single
  .select2-selection__rendered{line-height:1.4;padding-left:16px;color:var(--ink)}

/* Deux champs par ligne dès qu'il y a la place, sans jamais déborder. */
@media(min-width:600px){
  .woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{
    width:calc(50% - 10px);float:none;display:inline-block;vertical-align:top;
  }
  .woocommerce-checkout .form-row-first{margin-right:16px}
}

/* L'astérisque d'obligation était en rouge pur : hors charte sur un site
   strictement noir et blanc. Le repère reste, la couleur s'aligne. */
.woocommerce-checkout .required{color:var(--ink);text-decoration:none;border:0}
.woocommerce-checkout .optional{color:var(--muted);text-transform:none;letter-spacing:0}

/* ── Bandeaux d'information ───────────────────────────────────────── */
/* Filet bleu #046bd2 hérité de l'administration WordPress → encre du site. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error{
  background:var(--bg2);border-top:2px solid var(--ink);
  color:var(--ink);border-radius:0;padding:18px 22px;font-size:14px;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before{color:var(--ink)}
.woocommerce-checkout .woocommerce-info a{text-decoration:underline;text-underline-offset:3px}

/* ── Récapitulatif ────────────────────────────────────────────────── */
.woocommerce-checkout #order_review{
  background:var(--bg);border:1px solid var(--line);padding:clamp(20px,3vw,32px);
}
@media(min-width:900px){
  /* Le récapitulatif suit le défilement, mais reste borné : au-delà de la
     hauteur d'écran il défile en interne plutôt que de sortir du cadre. */
  .woocommerce-checkout #order_review{
    position:sticky;top:calc(var(--header-h) + 20px);
    max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;
  }
}
.woocommerce-checkout .shop_table{border:0;border-radius:0;width:100%}
.woocommerce-checkout .shop_table th,.woocommerce-checkout .shop_table td{
  border:0;border-bottom:1px solid var(--line);padding:14px 0;font-size:14px;
}
.woocommerce-checkout .shop_table thead th{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td{
  border-bottom:0;padding-top:18px;font-size:16px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.woocommerce-checkout .cart_item td{vertical-align:top}
.woocommerce-checkout .product-total,.woocommerce-checkout .shop_table td{text-align:right}
.woocommerce-checkout .shop_table td.product-name{text-align:left}

/* Miniature du produit : à ce stade le client valide son choix de mémoire,
   une vignette lève le doute mieux qu'une ligne de texte. */
.ma-recap-item{display:flex;gap:14px;align-items:flex-start}
.ma-recap-item img{width:64px;height:64px;object-fit:cover;flex:0 0 64px;background:var(--bg2)}
.ma-recap-item__txt{min-width:0}
.ma-recap-item__name{display:block;font-size:14px;font-weight:500;line-height:1.35}
.ma-recap-item__meta{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.woocommerce-checkout .cart_item .product-name .variation{margin:4px 0 0;font-size:12px;color:var(--muted)}
.woocommerce-checkout .cart_item .product-name .variation dt,
.woocommerce-checkout .cart_item .product-name .variation dd{display:inline;margin:0;font-weight:400}
.woocommerce-checkout .product-quantity{color:var(--muted);font-size:12px}

/* ── Paiement ─────────────────────────────────────────────────────── */
.woocommerce-checkout #payment{background:transparent;border-radius:0;margin-top:24px}
.woocommerce-checkout #payment .wc_payment_methods{padding:0;border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment li{list-style:none;margin:0 0 12px;padding:0}
.woocommerce-checkout #payment label{
  font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;cursor:pointer;
}
.woocommerce-checkout #payment .payment_box{
  background:var(--bg2);border-radius:0;font-size:13px;color:var(--muted);margin:8px 0 0;
}
.woocommerce-checkout #payment .payment_box::before{display:none}

/* Bouton de commande : il portait 13 px quand « Ajouter au panier » en
   porte 16 — le geste le plus décisif du site était le moins visible. */
.woocommerce-checkout #place_order{
  width:100%;font-size:16px;padding:20px 32px;min-height:56px;letter-spacing:.1em;
}
.woocommerce-checkout .place-order{padding:0;margin-top:24px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:20px}
.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:13px;color:var(--muted)}
.woocommerce-checkout .woocommerce-privacy-policy-text a{text-decoration:underline;text-underline-offset:3px}

/* Cases à cocher : accent noir plutôt que le bleu par défaut du navigateur. */
.woocommerce-checkout input[type=checkbox],.woocommerce-checkout input[type=radio]{
  accent-color:#000;width:18px;height:18px;margin-right:10px;vertical-align:middle;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox{
  display:flex;align-items:flex-start;gap:4px;font-size:13px;
  letter-spacing:0;text-transform:none;font-weight:400;cursor:pointer;
}

/* ── Réassurance ──────────────────────────────────────────────────── */
.ma-reassurance{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.ma-reassurance li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);list-style:none}
.ma-reassurance svg{flex:0 0 16px;width:16px;height:16px;stroke:var(--ink)}

/* ── Aucun moyen de paiement ──────────────────────────────────────── */
/* Tant qu'aucune passerelle n'est branchée, le bouton mène à une impasse :
   on le retire et on l'explique, plutôt que de laisser cliquer dans le vide.
   Ce bloc disparaît de lui-même dès qu'une passerelle est active. */
.ma-sans-paiement{background:var(--bg2);border-top:2px solid var(--ink);padding:18px 22px;font-size:14px}
.ma-sans-paiement strong{display:block;margin-bottom:6px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:12px}

/* ── Reprises de cascade ──────────────────────────────────────────── */
/* WooCommerce colore l'astérisque en rouge pur via `.woocommerce form
   .form-row .required` (0-3-1) : une règle plus courte ne peut pas gagner.
   On qualifie par le body pour passer devant sans recourir à !important. */
body.woocommerce-checkout form .form-row .required{color:var(--ink);text-decoration:none;border:0}
body.woocommerce-checkout form .form-row .optional{color:var(--muted)}

/* La couleur des titres était héritée d'Astra (gris bleuté) : régler la
   taille et la graisse ne recolore rien, il faut poser `color` soi-même. */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading{color:var(--ink)}

/* Bouton bleu de WooCommerce dans les bandeaux d'information. */
body.woocommerce-checkout .woocommerce-info a.button,
body.woocommerce-checkout .woocommerce-message a.button{
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0;
}
body.woocommerce-checkout .woocommerce-info a.button:hover,
body.woocommerce-checkout .woocommerce-message a.button:hover{background:var(--bg);color:var(--ink)}
/* Les libellés hors `.form-row` — « Expédier à une adresse différente ? »,
   le choix du mode de livraison — héritent eux aussi du gris d'Astra. */
body.woocommerce-checkout label,
body.woocommerce-checkout label span,
body.woocommerce-checkout #shipping_method label,
body.woocommerce-checkout #ship-to-different-address span{color:var(--ink)}

/* Astra impose width:55% / 40% + float sur les deux colonnes du tunnel.
   Sous une grille, ces pourcentages ne se calculent plus sur le formulaire
   mais sur la colonne elle-même : 55 % de 450 px = 247 px. Le rétrécissement
   se cumule et rend la page illisible. C'est la grille qui répartit ici. */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading{
  width:100%;max-width:none;float:none;margin-left:0;margin-right:0;
}

/* Le tunnel n'est pas une page éditoriale : la largeur de lecture de 900 px
   étrangle deux colonnes. On lui rend de l'air sans toucher aux autres pages. */
body.woocommerce-checkout .entry-content{max-width:1200px}

/* Astra injecte EN LIGNE dans le <head>, sous @media(min-width:922px) :
     .woocommerce-page.woocommerce-checkout form #customer_details.col2-set
     { width:55%; float:left; margin-right:4.34783% }
   Soit 1 ID + 3 classes + 1 élément. Aucune règle plus courte ne peut la
   battre : on reprend sa forme exacte en la qualifiant par `body`. */
@media(min-width:922px){
  body.woocommerce-page.woocommerce-checkout form #customer_details.col2-set,
  body.woocommerce.woocommerce-checkout form #customer_details.col2-set,
  body.woocommerce-page.woocommerce-checkout form #order_review,
  body.woocommerce.woocommerce-checkout form #order_review,
  body.woocommerce-page.woocommerce-checkout form #order_review_heading,
  body.woocommerce.woocommerce-checkout form #order_review_heading{
    width:100%;max-width:none;float:none;margin-right:0;margin-left:0;
  }
}

/* ── Placement des trois blocs du tunnel ──────────────────────────── */
/* Sans lignes explicites, le titre « Votre commande » occupe seul une ligne
   dont la hauteur est celle de la colonne de gauche : le récapitulatif se
   retrouve rejeté 700 px plus bas, détaché de son titre. */
@media(min-width:900px){
  body.woocommerce-checkout form.checkout{grid-template-rows:auto 1fr}
  body.woocommerce-checkout #customer_details{grid-column:1;grid-row:1/span 2}
  body.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;align-self:start}
  body.woocommerce-checkout #order_review{grid-column:2;grid-row:2;align-self:start}
}

/* WooCommerce signale un champ valide par un liseré vert : hors charte sur
   un site strictement noir et blanc. Le repère de saisie reste la bordure
   qui fonce à la mise au point. */
body.woocommerce-checkout .woocommerce-validated .input-text,
body.woocommerce-checkout .woocommerce-validated select,
body.woocommerce-checkout .form-row.woocommerce-validated input{
  border-color:var(--line);box-shadow:none;
}
body.woocommerce-checkout .woocommerce-invalid .input-text,
body.woocommerce-checkout .woocommerce-invalid select{border-color:var(--ink);box-shadow:none}

/* La police d'icônes de WooCommerce ne rend pas : ses pseudo-éléments
   affichent un carré vide dans les bandeaux. Mieux vaut aucune icône
   qu'un glyphe manquant posé devant le texte. */
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before{content:none}
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
body.woocommerce-checkout .woocommerce-message a.button{flex:0 0 auto}

/* Liseré vert #69bf29 posé sur un champ validé. Son origine reste
   introuvable par inspection du CSSOM (aucune règle ne matche l'input, et
   il n'y a pas de style en ligne) : elle est probablement injectée après
   coup. On tranche donc par une spécificité maximale, seul moyen vérifiable
   ici — le résultat est contrôlé par mesure après saisie réelle. */
body.woocommerce-checkout .woocommerce-billing-fields p.form-row.woocommerce-validated
  span.woocommerce-input-wrapper input.input-text,
body.woocommerce-checkout p.form-row.woocommerce-validated .input-text,
body.woocommerce-checkout p.form-row.woocommerce-validated select{
  border-color:var(--line)!important;box-shadow:none!important;
}
/* Un champ en erreur se signale par une bordure franche, jamais par du rouge. */
body.woocommerce-checkout p.form-row.woocommerce-invalid .input-text,
body.woocommerce-checkout p.form-row.woocommerce-invalid select{
  border-color:var(--ink)!important;border-width:2px;box-shadow:none!important;
}

/* Le titre et le récapitulatif occupent deux cellules de grille voisines :
   sans raccord, chacun porte son cadre et l'ensemble se lit comme deux
   blocs sans rapport. On les coud en un seul encadré. */
@media(min-width:900px){
  body.woocommerce-checkout #order_review_heading{
    border:1px solid var(--line);border-bottom:0;
    padding:clamp(20px,3vw,32px) clamp(20px,3vw,32px) 0;margin:0;
  }
  body.woocommerce-checkout #order_review{border-top:0;margin-top:0}
}

/* `space-between` ne vaut que pour le bandeau qui porte un bouton : sur celui
   du code promo, il écarte le lien de la phrase à laquelle il appartient. */
body.woocommerce-checkout .woocommerce-info{justify-content:flex-start;gap:6px}
body.woocommerce-checkout .woocommerce-message{justify-content:space-between;gap:20px}

/* La gouttière de la grille vaut pour les COLONNES comme pour les LIGNES :
   entre le titre (ligne 1) et le récapitulatif (ligne 2), elle ouvrait une
   bande blanche qui coupait net les bordures latérales de l'encadré.
   En une colonne (mobile) cette même gouttière reste nécessaire pour
   séparer le formulaire du récapitulatif. */
@media(min-width:900px){
  body.woocommerce-checkout form.checkout{row-gap:0;column-gap:clamp(32px,5vw,64px)}
}

/* ═══════════════════════════════════════════════════════════════════
   SÉLECTEUR DE POINTURE
   ═══════════════════════════════════════════════════════════════════ */
.ma-tailles{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.ma-taille{
  min-width:56px;min-height:48px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:0;
  font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
/* Le survol ne peut pas être le seul indice : au doigt, il n'existe pas. */
@media(hover:hover) and (pointer:fine){ .ma-taille:hover:not([disabled]){border-color:var(--ink)} }
.ma-taille:active:not([disabled]){transform:scale(.97)}
.ma-taille.is-actif{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ma-taille:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Indisponible : barré et atténué par le FOND, jamais par l'opacité —
   celle-ci écrase le contraste et rend le chiffre illisible. */
.ma-taille--indispo,.ma-taille[disabled]{
  background:var(--bg2);color:var(--muted);border-color:var(--line);
  cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--muted);
}

/* Le menu déroulant reste dans le DOM — WooCommerce en dépend pour le prix,
   le stock et l'ajout au panier — mais il est soustrait à la vue. */
.ma-select-source{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* La table de variations n'a plus rien à mettre en colonnes. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{display:block;width:100%;border:0;padding:0;margin:0}
.woocommerce div.product form.cart table.variations th.label label{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;display:block;
}
.woocommerce div.product form.cart .reset_variations{
  font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}

/* ═══════════════════════════════════════════════════════════════════
   RÉCAPITULATIF — encadré d'un seul tenant
   Remplace le placement en deux cellules de grille : le titre et le
   récapitulatif vivent désormais dans .ma-recap (voir functions.php).
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:900px){
  body.woocommerce-checkout form.checkout{grid-template-rows:auto}
  body.woocommerce-checkout #customer_details{grid-column:1;grid-row:auto}
  body.woocommerce-checkout .ma-recap{
    grid-column:2;grid-row:1;align-self:start;
    /* Le collant porte sur l'encadré ENTIER : sur le seul récapitulatif,
       il décrochait de son titre dès ~475 px de défilement. */
    position:sticky;top:calc(var(--header-h) + 20px);
    max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;
  }
  /* Le collant est passé au conteneur : le laisser ici le ferait glisser
     à l'intérieur de son propre encadré. */
  body.woocommerce-checkout #order_review{position:static;max-height:none;overflow-y:visible}
}

/* Astra dessine les deux demi-cadres via une feuille injectée en ligne, avec
   `form #order_review_heading:not(.elementor-… #order_review_heading)` : le
   `:not()` emprunte la spécificité de son argument, qui contient un ID, soit
   (2,1,1). Une règle plus courte ne peut pas passer devant — d'où un cadre
   resté à 2px #d1d5db (gris bleuté) au lieu du 1px de la charte, et un
   récapitulatif sans marge haute ni basse (`padding:0 2em`). */
body.woocommerce-checkout form #order_review_heading:not(.elementor-widget-woocommerce-checkout-page #order_review_heading){
  border-width:1px 1px 0;border-style:solid;border-color:var(--line);
  padding:clamp(20px,3vw,32px) clamp(20px,3vw,32px) 0;margin:0;
}
body.woocommerce-checkout form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review){
  border-width:0 1px 1px;border-style:solid;border-color:var(--line);
  padding:0 clamp(20px,3vw,32px) clamp(20px,3vw,32px);margin:0;
}
/* Le conteneur ne porte aucun cadre : ce sont ses deux enfants qui en
   dessinent chacun la moitié, et leur jonction est désormais sans écart. */
body.woocommerce-checkout .ma-recap{background:var(--bg)}
body.woocommerce-checkout .ma-recap>#order_review_heading{border-bottom:0}

/* ═══════════════════════════════════════════════════════════════════
   PANIER LATÉRAL
   ═══════════════════════════════════════════════════════════════════ */
.ma-cart-toggle{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:8px;min-width:44px;min-height:44px;
  color:var(--ink);cursor:pointer;
}
.ma-cart-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}
.ma-cart-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ma-drawer-voile{
  position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .28s var(--ease);
}
.ma-drawer-voile.is-ouvert{opacity:1}

.ma-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9999;
  width:min(420px,100vw);display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s var(--ease);
  /* Le panneau descend sous la barre d'adresse mobile : 100svh et non 100vh,
     sinon le pied du panneau passe sous elle et le bouton devient inatteignable. */
  height:100vh;height:100svh;
}
.ma-drawer.is-ouvert{transform:translateX(0)}
/* Le corps de la page ne doit pas défiler derrière le panneau ouvert. */
body.ma-drawer-actif{overflow:hidden}

.ma-drawer__tete{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(18px,4vw,26px);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.ma-drawer__titre{
  margin:0;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.ma-drawer__fermer{
  background:none;border:0;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
}
.ma-drawer__fermer:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ma-drawer__corps{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ma-drawer__liste{
  list-style:none;margin:0;padding:0 clamp(18px,4vw,26px);
  overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.ma-drawer__art{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.ma-drawer__vis{flex:0 0 84px}
.ma-drawer__vis img{width:84px;height:84px;object-fit:cover;background:var(--bg2);display:block}
.ma-drawer__inf{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.ma-drawer__nom{font-size:14px;font-weight:500;line-height:1.35}
.ma-drawer__var{font-size:12px;color:var(--muted)}
.ma-drawer__var p{margin:0}
.ma-drawer__ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.ma-drawer__prix{font-size:14px;font-weight:500;white-space:nowrap}

.ma-qte{display:inline-flex;align-items:center;border:1px solid var(--line)}
.ma-qte__btn{
  min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
}
.ma-qte__btn:disabled{color:var(--muted);cursor:wait}
.ma-qte__btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ma-qte__val{min-width:30px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}

/* « Retirer » est une action secondaire : lisible, jamais concurrente du
   bouton de commande. */
.ma-drawer__sup{
  align-self:flex-start;margin-top:6px;padding:4px 0;
  background:none;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--font);font-size:12px;text-decoration:underline;text-underline-offset:3px;
}
.ma-drawer__sup:hover{color:var(--ink)}
.ma-drawer__sup:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ma-drawer__pied{
  flex:0 0 auto;padding:20px clamp(18px,4vw,26px) calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg);
}
.ma-drawer__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.ma-drawer__note{margin:6px 0 16px;font-size:12px;color:var(--muted)}
.ma-drawer__cmd{width:100%;font-size:15px;padding:18px 24px;min-height:54px}
.ma-drawer__continuer{
  display:block;width:100%;margin-top:12px;padding:8px 0;
  background:none;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--font);font-size:13px;text-decoration:underline;text-underline-offset:3px;
}
.ma-drawer__continuer:hover{color:var(--ink)}
.ma-drawer__continuer:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ma-drawer__vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  flex:1 1 auto;padding:60px clamp(18px,4vw,26px);text-align:center;color:var(--muted);
}
.ma-drawer__vide p{margin:0;font-size:15px}

@media(prefers-reduced-motion:reduce){
  .ma-drawer,.ma-drawer-voile{transition:none}
}

/* Cibles tactiles du panneau. Mesuré à 390px : les commandes de quantité
   tombaient à 40px, « Retirer » à 20px et « Continuer » à 29px — sous le
   seuil de 44px. On corrige par la BOÎTE (padding, min-height), jamais en
   grossissant le texte, qui déséquilibrerait la hiérarchie du panneau. */
.ma-qte__btn{min-width:44px;min-height:44px}
.ma-qte__val{min-width:34px}
.ma-drawer__sup{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin-top:2px;
}
.ma-drawer__continuer{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:0;
}
/* Le nom du produit est un lien : sa zone cliquable doit tenir le seuil
   sans écarter les lignes du texte. */
.ma-drawer__nom a{display:inline-block;min-height:44px;line-height:1.35;padding:4px 0}
/* `min-height` ne protège pas d'un conteneur flex qui manque de place :
   flex-shrink vaut 1 par défaut et comprimait « Retirer » à 39px. */
.ma-drawer__sup{flex:0 0 auto}

/* ── Panneau simplifié ────────────────────────────────────────────── */
/* La croix remplace le mot « Retirer » : la cible ne dépend plus de la
   longueur d'un libellé, et la ligne se lit d'un coup d'œil. */
.ma-drawer__art{position:relative;align-items:flex-start}
.ma-drawer__sup{
  position:static;flex:0 0 auto;align-self:flex-start;margin:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;background:none;border:0;color:var(--muted);cursor:pointer;
}
.ma-drawer__sup:hover{color:var(--ink)}
.ma-drawer__sup:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ma-drawer__inf{padding-right:4px}
.ma-drawer__total{font-size:16px;margin-bottom:16px}

/* ── Logo ─────────────────────────────────────────────────────────── */
.ma-logo{display:block;height:auto;width:auto;color:inherit}
/* La hauteur pilote la taille : le rapport du tracé (519,5 × 148) fait le reste. */
.ma-logo--header{height:clamp(18px,2.2vw,26px);max-width:190px}
.ma-brand{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ma-logo--hero{height:clamp(38px,7vw,86px);max-width:min(78vw,560px);margin-inline:auto}
/* Le panier est passé de <a> à <button> : Astra lui applique alors son style
   de bouton (cadre, fond), ce qui le distingue à tort des deux autres icônes. */
.ma-tools .ma-cart-toggle,
.ma-tools .ma-cart-toggle:hover,
.ma-tools .ma-cart-toggle:focus{
  background:transparent;border:0;box-shadow:none;border-radius:0;padding:8px;
}

/* ── Tunnel : allègement mobile ───────────────────────────────────── */
/* La colonne .col-2 est VIDE (aucune adresse de livraison distincte) mais
   porte encore sa marge : trois espacements s'empilaient sur une seule
   couture — sa marge, celle de #customer_details et la gouttière de grille —
   soit 104 px de blanc avant le récapitulatif. En grille, la marge de
   l'élément S'AJOUTE au gap, elle ne s'y fond pas. */
body.woocommerce-checkout .col2-set .col-2:empty{display:none;margin:0}
body.woocommerce-checkout .col2-set .col-2{margin-top:0}
@media(max-width:899.98px){
  body.woocommerce-checkout #customer_details{margin-bottom:0}
  body.woocommerce-checkout form.checkout{row-gap:24px}
}

/* Bloc des moyens de paiement masqué seulement s'il est RÉELLEMENT vide.
   Une classe posée sur <body> ne conviendrait pas : #payment est re-rendu en
   AJAX à chaque mise à jour de la commande, alors que les classes du body
   sont figées au premier rendu — une passerelle apparaissant après saisie du
   pays resterait invisible, et la commande impossible. */
body.woocommerce-checkout #payment .wc_payment_methods:not(:has(.wc_payment_method)){display:none}
body.woocommerce-checkout #payment .woocommerce-notice--info:empty{display:none}

/* Pied de page réduit pendant le paiement. */
.ma-footer--checkout{background:var(--bg);border-top:1px solid var(--line);color:var(--muted)}
.ma-footer--checkout .ma-footer__in{padding:24px var(--gut);text-align:center}
.ma-footer--checkout nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:12px}
.ma-footer--checkout a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.ma-footer--checkout a:hover{color:var(--ink)}
.ma-footer--checkout p{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
/* Une seule option : « France ». Le menu reste dans le DOM — `display:none`
   n'empêche pas la soumission, contrairement à `disabled` — mais il ne coûte
   plus 88 px pour un choix qui n'en est pas un. La destination reste annoncée
   par le bandeau « Livraison gratuite en France ». */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field{display:none}

/* ── Boutons nus : reprendre TOUT le style hérité d'Astra ─────────── */
/* Astra style ses <button> avec un fond ET une couleur, y compris au survol
   et au focus (fond #045cb4, couleur #fff). Neutraliser le seul fond laisse
   l'icône passer en blanc sur blanc : elle disparaît sous le curseur, et
   seule la pastille du compteur — qui a son propre fond — reste visible. */
.ma-tools .ma-cart-toggle,
.ma-tools .ma-cart-toggle:hover,
.ma-tools .ma-cart-toggle:focus,
.ma-tools .ma-cart-toggle:active,
.ma-drawer .ma-drawer__fermer,
.ma-drawer .ma-drawer__fermer:hover,
.ma-drawer .ma-drawer__fermer:focus,
.ma-drawer .ma-drawer__fermer:active,
.ma-drawer .ma-drawer__sup,
.ma-drawer .ma-drawer__sup:hover,
.ma-drawer .ma-drawer__sup:focus,
.ma-drawer .ma-qte__btn,
.ma-drawer .ma-qte__btn:hover,
.ma-drawer .ma-qte__btn:focus{
  background:transparent;border-color:transparent;box-shadow:none;border-radius:0;
  color:var(--ink);
}
.ma-drawer .ma-qte__btn{border:0}
/* Le retour visuel passe par la couleur du tracé, jamais par un fond plein. */
.ma-tools .ma-cart-toggle:hover svg,
.ma-drawer .ma-drawer__fermer:hover svg{opacity:.62}
.ma-drawer .ma-drawer__sup{color:var(--muted)}
.ma-drawer .ma-drawer__sup:hover{color:var(--ink)}
/* Le contour de focus reste, lui : c'est le seul repère au clavier. */
.ma-tools .ma-cart-toggle:focus-visible,
.ma-drawer button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Le panneau reçoit le focus à l'ouverture pour que le clavier y entre : son
   propre contour n'apporterait rien, ceux de ses commandes suffisent. */
.ma-drawer:focus,.ma-drawer:focus-visible{outline:none}

/* ── Bloc de paiement (Stripe) ────────────────────────────────────── */
/* Les logos de cartes arrivent avec une largeur fixe et débordaient de
   12 px à 390 px, faisant défiler toute la page horizontalement. */
body.woocommerce-checkout #payment img,
body.woocommerce-checkout .wc_payment_method img,
body.woocommerce-checkout .payment_box img{
  max-width:100%;height:auto;display:inline-block;vertical-align:middle;
}
body.woocommerce-checkout #payment li img{max-height:26px;width:auto}
/* Le libellé du moyen de paiement et ses logos doivent pouvoir passer à la
   ligne plutôt que pousser la boîte. */
body.woocommerce-checkout #payment label{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;
}
body.woocommerce-checkout #payment .wc_payment_method{min-width:0}
/* Le champ carte de Stripe vit dans un cadre à lui : il doit tenir dans la
   colonne, pas l'élargir. */
body.woocommerce-checkout .payment_box iframe,
body.woocommerce-checkout #payment iframe{max-width:100%!important}

/* ── Icônes de cartes (paiement.php) ──────────────────────────────── */
.ma-cartes{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ma-cartes svg{width:38px;height:24px;flex:0 0 38px}

/* ── Checkout embedded : masquer la boîte vide avant activation ───── */
/* Le card-payment-section est display:none au premier rendu : la boîte
   grise du payment_box n'a rien à montrer et coûte de l'espace. */
body.woocommerce-checkout #payment div.payment_box.payment_method_stripe_embedded{
  background:transparent!important;padding:0!important;margin:0!important;border:0!important;min-height:0!important;
}

/* ── Passerelle unique : pas d'accordéon, pas de radio ────────────── */
body.woocommerce-checkout #payment .wc_payment_method input[type="radio"]{
  display:none;
}
body.woocommerce-checkout #payment .wc_payment_method .payment_box{
  display:block!important;
}
body.woocommerce-checkout #payment .wc_payment_method label{
  cursor:default;pointer-events:none;
}

/* ── Supprimer la flèche/chevron sur le label de paiement ─────────── */
body.woocommerce-checkout #payment .wc_payment_method label::before,
body.woocommerce-checkout #payment .wc_payment_method label::after,
body.woocommerce-checkout #payment .wc_payment_methods li::before,
body.woocommerce-checkout #payment .wc_payment_methods li::after{
  display:none!important;content:none!important;
}

/* ── Supprimer le triangle CSS de la payment_box (WooCommerce core) ── */
.woocommerce-checkout #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before{
  display:none!important;content:none!important;border:none!important;
}

/* ═══════════════════════════════════════════════════════════════════
   SUIVI DE COMMANDE
   Le style des champs du tunnel est scopé sur .woocommerce-checkout :
   cette page n'en hérite rien, tout est à poser ici.
   La portée est une classe posée sur <body> par le thème (ma-suivi), et
   non l'ID de la page : un ID changerait au moindre recréation de page.
   ═══════════════════════════════════════════════════════════════════ */
.ma-suivi-intro{
  font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:var(--muted);
  max-width:62ch;margin:0 0 32px;
}
.ma-suivi .track_order{
  max-width:640px;margin:0 0 56px;padding:32px;
  background:var(--bg2);border:1px solid var(--line);
}
@media(max-width:600px){.ma-suivi .track_order{padding:22px 18px}}

/* Le formulaire natif utilise des floats : on repasse en grille pour que
   les deux champs tiennent côte à côte sans .clear ni débordement. */
.ma-suivi .track_order .form-row{margin:0 0 20px;float:none;width:auto;padding:0}
@media(min-width:620px){
  .ma-suivi .track_order{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
  .ma-suivi .track_order .form-row-first{grid-column:1}
  .ma-suivi .track_order .form-row-last{grid-column:2}
  .ma-suivi .track_order .form-row:not(.form-row-first):not(.form-row-last){grid-column:1 / -1}
  .ma-suivi .track_order .clear{display:none}
}
.ma-suivi .track_order label{
  display:block;margin:0 0 8px;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.ma-suivi .track_order .input-text{
  width:100%;min-height:48px;padding:12px 16px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  font-family:var(--font);font-size:16px;   /* 16px : en dessous, iOS zoome */
  transition:border-color .2s var(--ease);
}
.ma-suivi .track_order .input-text:focus{outline:none;border-color:var(--ink)}
.ma-suivi .track_order .input-text:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ma-suivi .track_order .input-text::placeholder{color:var(--muted);opacity:1}
.ma-suivi .track_order button.button{width:100%;margin-top:4px}
@media(min-width:620px){.ma-suivi .track_order button.button{width:auto}}

/* ── Résultat : WooCommerce rend un <p class="order-info"> puis un tableau ── */
.ma-suivi .order-info{
  font-size:clamp(16px,1.9vw,19px);font-weight:400;line-height:1.6;
  margin:0 0 32px;padding:22px 24px;color:var(--ink);
  background:var(--bg2);border-left:3px solid var(--ink);
}
.ma-suivi .order-info mark{
  background:var(--ink);color:var(--bg);
  padding:2px 9px;font-size:13px;font-weight:500;letter-spacing:.06em;
}
.ma-suivi .order-info mark.order-status{text-transform:uppercase}
.ma-suivi .woocommerce-order-details__title,
.ma-suivi .woocommerce-column__title{
  font-size:clamp(16px,1.8vw,19px);font-weight:500;letter-spacing:.02em;margin:0 0 16px;
}
.ma-suivi table.shop_table{
  width:100%;border-collapse:collapse;border:1px solid var(--line);margin:0 0 36px;
}
.ma-suivi table.shop_table th,
.ma-suivi table.shop_table td{
  padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;
}
.ma-suivi table.shop_table th{
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.ma-suivi table.shop_table tfoot th{text-transform:none;font-size:13px;color:var(--ink)}
/* Un tableau ne doit jamais faire partir la page de travers sur un téléphone. */
.ma-suivi .woocommerce-order-details,
.ma-suivi .woocommerce-customer-details{overflow-x:auto}
.ma-suivi .woocommerce-customer-details address{
  font-style:normal;line-height:1.7;border:1px solid var(--line);padding:18px 20px;
}
.ma-suivi .woocommerce-error,.ma-suivi .woocommerce-info{
  border-left:3px solid var(--ink);background:var(--bg2);
  padding:18px 22px;margin:0 0 28px;list-style:none;font-size:15px;line-height:1.6;
}
.ma-suivi .woocommerce-error a,.ma-suivi .woocommerce-info a{
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
}

/* ── Bloc de suivi de colis (page de suivi, compte client) ── */
.ma-colis{
  margin:0 0 32px;padding:24px 26px;
  background:var(--bg2);border-left:3px solid var(--ink);
}
.ma-colis__titre{
  margin:0 0 14px;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.ma-colis__ligne{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  margin:0 0 8px;font-size:15px;
}
.ma-colis__ligne span{
  flex:0 0 150px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ma-colis__ligne strong{font-weight:500;word-break:break-all}
.ma-colis__action{margin:18px 0 0}

/* ── Fil de progression du colis ── */
.ma-etapes{
  list-style:none;margin:22px 0 0;padding:0;
  border-top:1px solid var(--line);padding-top:20px;
}
.ma-etapes__item{
  position:relative;padding:0 0 18px 26px;margin:0;
  font-size:14px;line-height:1.5;color:var(--muted);
}
.ma-etapes__item:last-child{padding-bottom:0}
/* Le trait qui relie les jalons : il s'arrête au dernier. */
.ma-etapes__item::after{
  content:"";position:absolute;left:5px;top:14px;bottom:-4px;width:1px;background:var(--line);
}
.ma-etapes__item:last-child::after{display:none}
.ma-etapes__item::before{
  content:"";position:absolute;left:0;top:5px;
  width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);box-sizing:border-box;
}
/* Une étape franchie est pleine ; une étape à venir reste creuse. La forme
   dit l'état autant que la couleur, pour qui distingue mal les nuances. */
.ma-etapes__item.est-faite{color:var(--ink)}
.ma-etapes__item.est-faite::before{background:var(--ink);border-color:var(--ink)}
.ma-etapes__item.est-faite::after{background:var(--ink)}
.ma-etapes__item.est-estimee::before{
  background:var(--bg);border:1px dashed var(--muted);
}
.ma-etapes__titre{display:block;font-weight:500}
.ma-etapes__date{
  display:block;margin-top:2px;
  font-size:12px;letter-spacing:.02em;color:var(--muted);
}
.ma-etapes__item.est-estimee .ma-etapes__date{color:var(--ink);font-weight:500}
.ma-etapes__note{
  margin:16px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted);
}

/* ── Sélecteur de langue ── */
.ma-langues{
  display:inline-flex;align-items:center;gap:2px;
  margin-right:4px;
}
.ma-langues__on,.ma-langues__lien{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:0 6px;
  font-size:12px;font-weight:500;letter-spacing:.06em;
  text-decoration:none;border-radius:0;
}
.ma-langues__on{color:var(--ink);border-bottom:1px solid var(--ink)}
.ma-langues__lien{color:var(--muted);border-bottom:1px solid transparent}
.ma-langues__lien:hover,.ma-langues__lien:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
.ma-langues__lien:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:600px){
  .ma-langues{margin-right:0}
  .ma-langues__on,.ma-langues__lien{min-width:30px;padding:0 4px;font-size:11.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   PANIER LATÉRAL — OPTIMISATION CONVERSION (2026-08-22)
   Constat : 58 % des paniers passaient au tunnel, le panneau n'affichait
   ni la remise, ni la livraison offerte, ni aucune réassurance, et le
   sélecteur de quantité pesait plus lourd que le prix.
   ═══════════════════════════════════════════════════════════════════ */
/* Ligne article : la quantité s'efface, le prix prend le dessus. */
.ma-drawer .ma-qte{border-color:var(--line)}
.ma-drawer .ma-qte__btn{min-width:36px;min-height:38px;font-size:14px;color:var(--muted)}
.ma-drawer .ma-qte__btn:hover{color:var(--ink)}
.ma-drawer .ma-qte__val{min-width:26px;font-size:13px}
.ma-drawer__prix{font-size:15px;font-weight:600;display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ma-drawer__avant{font-size:12px;font-weight:400;color:var(--muted);text-decoration:line-through}
.ma-drawer__avant .amount,.ma-drawer__avant .woocommerce-Price-amount{font-weight:400}

/* Pied : remise + livraison, total, bouton avec le montant, garanties. */
.ma-drawer__pied{padding-top:16px}
.ma-drawer__lignes{margin:0 0 10px;padding:0}
.ma-drawer__lignes>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);padding:3px 0}
.ma-drawer__lignes dt,.ma-drawer__lignes dd{margin:0}
.ma-drawer__lignes dd{font-weight:500;color:var(--ink)}
.ma-drawer__eco dd{color:#0a7a3b}
.ma-drawer .ma-drawer__total{margin-bottom:12px;padding-top:10px;border-top:1px solid var(--line);font-size:16px}
.ma-drawer__cmd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px;min-height:56px;font-size:14px;letter-spacing:.08em}
.ma-drawer__cmd-prix{font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ma-drawer__garanties{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.ma-drawer__garanties li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);line-height:1.3}
.ma-drawer__garanties svg{flex:0 0 15px;width:15px;height:15px;color:var(--ink)}
/* Petits écrans en hauteur : le pied ne doit pas manger la liste. */
@media(max-height:700px){
  .ma-drawer__garanties{grid-template-columns:1fr 1fr;gap:5px 10px}
  .ma-drawer__garanties li:first-child{grid-column:1/-1}
}
/* Mesuré : une règle générique posait `padding:12px 24px` sur les boutons
   du compteur, qui s'étalait sur 141 px. Sans ce padding il tient en 98 px. */
.ma-drawer .ma-qte__btn{padding:0}
.ma-drawer__prix{flex-direction:column;align-items:flex-end;gap:0;line-height:1.25}

/* ═══════════════════════════════════════════════════════════════════
   FICHE PRODUIT — CONVERSION (2026-08-22)
   ═══════════════════════════════════════════════════════════════════ */
/* 1. Galerie mobile : les vignettes occupaient deux lignes de grille (≈ 330 px
   de haut) et repoussaient le prix sous la ligne de flottaison. Une seule
   ligne qui défile au doigt. */
@media(max-width:899px){
  .woocommerce div.product div.images .flex-control-thumbs{
    display:flex;flex-wrap:nowrap;gap:8px;margin:10px 0 0;padding:0 0 4px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
  }
  .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{display:none}
  .woocommerce div.product div.images .flex-control-thumbs li{
    flex:0 0 64px;width:64px;margin:0;float:none;scroll-snap-align:start;
  }
  .woocommerce div.product div.images .flex-control-thumbs li img{width:64px;height:64px;object-fit:cover}
}

/* 2. Quantité et catégories : sur des sneakers, 99 % des paniers font une
   paire ; le champ reste dans le formulaire (valeur 1), seulement soustrait
   à la vue. « Catégories : Femme, Homme » sous le bouton n'aide personne. */
.woocommerce div.product form.cart div.quantity{display:none}
.woocommerce div.product .product_meta{display:none}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:block}

/* 3. Remise et économie sous le prix. */
.woocommerce div.product p.price{margin-bottom:8px}
.ma-economie{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;color:var(--muted)}
.ma-economie__badge{
  display:inline-flex;align-items:center;background:#000;color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.06em;padding:5px 8px;line-height:1.2;
}
.ma-economie__txt .amount{color:var(--ink);font-weight:500}

/* 4. « Taille » à gauche, « Guide des tailles » à droite, même ligne. */
.woocommerce div.product form.cart table.variations th.label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;
}
.woocommerce div.product form.cart table.variations th.label label{margin-bottom:0}
.ma-guide-tailles{
  display:inline-flex;align-items:center;min-height:32px;
  font-size:12px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.ma-guide-tailles:hover{color:var(--ink)}
/* Avant déplacement par le script, le lien vit au-dessus des boutons. */
td.value>.ma-guide-tailles{margin-bottom:6px}
/* Signal quand la barre collante ramène au sélecteur sans pointure choisie. */
@keyframes ma-tailles-signal{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}30%{box-shadow:0 0 0 4px rgba(0,0,0,.12)}}
.ma-tailles--signal{animation:ma-tailles-signal .9s var(--ease) 1}

/* 5. Réassurance sous le bouton d'achat. */
.ma-reassurance--fiche{margin-top:18px;padding-top:16px;gap:9px}
.ma-reassurance--fiche li{font-size:12.5px}

/* 6. Barre d'achat collante — écrans < 900 px seulement ; au-delà, le
   bloc d'achat reste visible à côté de la galerie. */
.ma-collant{display:none}
@media(max-width:899px){
  .ma-collant{
    position:fixed;left:0;right:0;bottom:var(--ma-cnb-h,0px);z-index:9990;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.06);
    transform:translateY(0);transition:transform .25s var(--ease),bottom .2s var(--ease);
  }
  .ma-collant[hidden]{display:flex;transform:translateY(110%);pointer-events:none}
  body.ma-drawer-actif .ma-collant{transform:translateY(110%);pointer-events:none}
  .ma-collant__prix{display:flex;flex-direction:column;line-height:1.2;font-size:16px;font-weight:600;white-space:nowrap}
  .ma-collant__prix del{font-size:12px;font-weight:400;color:var(--muted);text-decoration:line-through}
  .ma-collant__prix ins{text-decoration:none}
  .ma-collant__prix .screen-reader-text{display:none}
  .ma-collant__btn{flex:1 1 auto;min-height:50px;padding:0 18px;font-size:13px;white-space:nowrap}
  @media(prefers-reduced-motion:reduce){.ma-collant{transition:none}}
}
/* Mesuré : Astra pose le conteneur du bouton en flex, la liste se casait à
   droite du bouton et débordait (434 px sur 390). Elle prend toute la ligne. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{flex-wrap:wrap}
.woocommerce div.product form.cart .ma-reassurance--fiche{flex:0 0 100%;width:100%;min-width:0}
/* Mesuré : la liste héritait d'un retrait gauche de 48 px (ul par défaut)
   et sortait encore de 18 px. Retrait et puces à zéro. */
.woocommerce div.product form.cart .ma-reassurance--fiche{margin:18px 0 0;padding-left:0;list-style:none}
.woocommerce div.product form.cart .ma-reassurance--fiche li{margin:0;padding:0}
/* « Effacer » réservait 44 px de blanc (visibility:hidden) entre les tailles
   et le bouton ; recliquer la pointure active la désélectionne déjà. */
.woocommerce div.product form.cart .reset_variations,.woocommerce div.product form.cart a.reset_variations{display:none!important}
/* Sans script, la ligne de remise reste lisible en bas du résumé. */
.summary>.ma-economie:last-child{margin-top:14px}
/* WooCommerce ré-affiche la quantité par jQuery .show() (style en ligne) dès
   qu'une pointure est choisie : seul !important tient face à un style en ligne. */
.woocommerce div.product form.cart div.quantity{display:none!important}

/* ── Fiche produit : fil d'Ariane propre (2026-08-22) ───────────────────
   Une seule ligne, sans retour, et sans la ligne « Femme, Homme » d'Astra
   qui doublonnait le fil d'Ariane juste au-dessus du titre. */
.single-product .woocommerce-breadcrumb{
  display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:11px;letter-spacing:.08em;margin-bottom:14px;
}
.single-product .woocommerce-breadcrumb a,.single-product .woocommerce-breadcrumb>*{min-height:36px;min-width:0}
.single-product .woocommerce-breadcrumb a{color:var(--muted)}
.single-product .woocommerce-breadcrumb a:hover{color:var(--ink)}
.single-product span.single-product-category,.single-product .single-product-category{display:none!important}

/* ── Garanties en vignettes (2026-08-22) ──────────────────────────────
   La liste verticale sous le bouton faisait « mentions légales ». Trois
   cases côte à côte, pictogramme au-dessus, lisibles d'un coup d'œil. */
.ma-garanties{
  list-style:none!important;margin:16px 0 0!important;padding:0!important;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  flex:0 0 100%;width:100%;min-width:0;
}
.ma-garanties li{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  margin:0;padding:12px 6px 10px;text-align:center;background:var(--bg2);min-width:0;
}
.ma-garanties svg{width:20px;height:20px;color:var(--ink);margin-bottom:2px;flex:0 0 20px;stroke:var(--ink)}
.ma-garanties strong{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);line-height:1.2}
.ma-garanties span{font-size:10.5px;color:var(--muted);line-height:1.2}
.ma-garanties--fiche{margin-top:18px!important}
.ma-garanties--drawer{margin-top:12px!important;gap:5px}
.ma-garanties--drawer li{padding:10px 4px 8px}
.ma-garanties--drawer strong{font-size:11px}
.ma-garanties--drawer span{font-size:10px}
@media(max-height:700px){.ma-garanties--drawer span{display:none}}
/* Les anciennes règles de la liste verticale ne doivent plus s'appliquer. */
.ma-drawer__garanties,.ma-reassurance--fiche{display:none}
/* « Paiement sécurisé » passait sur deux lignes à 390 px : même corps que le
   drawer, sans espacement de lettres, moins de marge latérale. */
.ma-garanties--fiche li{padding:12px 4px 10px}
.ma-garanties--fiche strong{font-size:11px;letter-spacing:0}

/* ── Tunnel : vignettes de garanties + case CGV sur une ligne (2026-08-22) ── */
.ma-garanties--checkout{margin-top:18px!important}
.ma-reassurance{display:none}
/* L'astérisque obligatoire tombait seul à la ligne sous la case CGV. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{flex-wrap:nowrap;align-items:flex-start}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text{flex:0 1 auto;min-width:0}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required{flex:0 0 auto;margin-left:2px}
/* Mesuré : le libellé CGV reste en `flex-wrap:wrap` malgré la règle
   précédente (une règle plus forte l'emporte). Case / texte / astérisque
   s'empilaient sur trois lignes. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:10px!important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox{flex:0 0 auto!important;margin:2px 0 0!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text{flex:1 1 auto!important;min-width:0;display:inline!important;line-height:1.4}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required{flex:0 0 auto!important;display:inline!important;margin:0!important;text-decoration:none}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text{flex:0 1 auto!important}
/* Le texte occupe deux lignes, l'astérisque (élément séparé) reste collé au
   bord droit. On le dessine dans le fil du texte et on masque l'original. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required{display:none!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text::after{content:" *"}

/* ── Vignettes de garanties : alignement strict (2026-08-22) ──────────
   Constat : hauteurs inégales et titres tantôt sur une, tantôt deux lignes.
   Chaque case suit la même grille : picto / titre (zone fixe de 2 lignes,
   centré) / précision. Les trois cases ont exactement la même hauteur. */
.ma-garanties{align-items:stretch}
.ma-garanties li{
  display:grid!important;grid-template-rows:22px 2.5em auto;align-content:start;justify-items:center;
  gap:4px;padding:12px 4px 11px;height:100%;box-sizing:border-box;
}
.ma-garanties svg{margin:0;align-self:center}
.ma-garanties strong{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere;
}
.ma-garanties span{font-size:10.5px;line-height:1.2;text-align:center;white-space:nowrap}
.ma-garanties--drawer li{padding:10px 4px 9px}
@media(max-height:700px){.ma-garanties--drawer li{grid-template-rows:22px 2.5em}.ma-garanties--drawer span{display:none}}

/* ── Garanties : ligne fine, dans la charte (2026-08-22, v3) ───────────
   Les cases grises faisaient « widget ». Une seule ligne centrée, picto +
   libellé, séparés par un point médian, sans fond ni cadre. Passe à deux
   lignes d'elle-même quand la place manque. */
.ma-garanties,.ma-garanties--fiche,.ma-garanties--drawer,.ma-garanties--checkout{
  display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 0;margin:16px 0 0!important;padding:14px 0 0!important;border-top:1px solid var(--line);
  grid-template-columns:none;
}
.ma-garanties li{
  display:inline-flex!important;align-items:center;gap:6px;
  padding:0;margin:0;height:auto;background:none;grid-template-rows:none;
  font-size:11.5px;color:var(--muted);letter-spacing:.02em;white-space:nowrap;
}
.ma-garanties li+li::before{content:"·";margin:0 10px;color:var(--line);font-weight:600;color:#bbb}
.ma-garanties svg{width:15px;height:15px;margin:0;stroke:var(--ink);flex:0 0 15px}
.ma-garanties strong{display:inline;font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--ink);line-height:1}
.ma-garanties span{display:none}
.ma-garanties--drawer{margin-top:14px!important;padding-top:12px!important}
.ma-garanties--checkout{margin-top:18px!important}
@media(max-height:700px){.ma-garanties--drawer li{grid-template-rows:none}}
/* La première version posait `flex-direction:column` sur chaque élément :
   picto et libellé s'empilaient. En ligne, point final. */
.ma-garanties li{flex-direction:row!important;justify-content:center;align-items:center!important}
/* Largeur réduite (téléphone, et le panneau panier qui fait 420 px max) :
   trois colonnes égales, picto au-dessus du libellé, sans point ni cadre. */
@media(max-width:899px){
  .ma-garanties--fiche,.ma-garanties--checkout{flex-wrap:nowrap;gap:0;justify-content:space-between}
  .ma-garanties--fiche li,.ma-garanties--checkout li{flex:1 1 0;flex-direction:column!important;gap:7px;white-space:normal;text-align:center;padding:0 4px}
  .ma-garanties--fiche li+li::before,.ma-garanties--checkout li+li::before{display:none}
  .ma-garanties--fiche strong,.ma-garanties--checkout strong{font-size:11px;line-height:1.2}
  .ma-garanties--fiche svg,.ma-garanties--checkout svg{width:17px;height:17px;flex-basis:17px}
}
.ma-garanties--drawer{flex-wrap:nowrap;gap:0;justify-content:space-between}
.ma-garanties--drawer li{flex:1 1 0;flex-direction:column!important;gap:7px;white-space:normal;text-align:center;padding:0 4px}
.ma-garanties--drawer li+li::before{display:none}
.ma-garanties--drawer strong{font-size:11px;line-height:1.2}
.ma-garanties--drawer svg{width:17px;height:17px;flex-basis:17px}
.ma-garanties--drawer{align-items:flex-start}
@media(max-width:899px){.ma-garanties--fiche,.ma-garanties--checkout{align-items:flex-start}}
/* Le récapitulatif du tunnel est une colonne étroite même sur PC (≈ 360 px) :
   la ligne se repliait avec un point orphelin. Trois colonnes à toute largeur. */
.ma-garanties--checkout{flex-wrap:nowrap;gap:0;justify-content:space-between;align-items:flex-start}
.ma-garanties--checkout li{flex:1 1 0;flex-direction:column!important;gap:7px;white-space:normal;text-align:center;padding:0 4px}
.ma-garanties--checkout li+li::before{display:none}
.ma-garanties--checkout strong{font-size:11px;line-height:1.2}
.ma-garanties--checkout svg{width:17px;height:17px;flex-basis:17px}
/* L'astérisque passait à la ligne quand le texte remplissait pile la largeur :
   espace insécable, il reste collé au dernier mot. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text::after{content:"\00a0*"}

/* ── Survol des liens : la charte est noire, Astra impose un bleu ──
   Astra colore les liens au survol via une variable de son thème parent
   (rgb(4,92,180)). Aucune règle du thème enfant ne couvrait cet état :
   le menu, le fil d'Ariane et les liens de contenu viraient au bleu. */
.ma-nav a:hover,
.ma-nav a:focus-visible,
.ma-header a:hover,
.ma-header a:focus-visible,
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible,
.ma-footer a:hover,
.ma-footer a:focus-visible,
.entry-content a:hover,
.woocommerce-loop-product__title:hover,
li.product a:hover{
  color:var(--ink);
  text-decoration-color:var(--ink);
}


/* ═══════════════════════════════════════════════════════════════════
   RÉASSURANCE ET DISPONIBILITÉ SUR LA FICHE
   ═══════════════════════════════════════════════════════════════════ */
.ma-paiements-bloc{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
}
.ma-paiements-lib{
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.ma-paiements{display:flex;align-items:center;gap:6px}
.ma-paiements svg{display:block;flex:0 0 auto}

/* Disponibilité : on dit le vrai nombre de pointures restantes. La tension
   se signale par le mot, jamais par une couleur d'alerte criarde. */
.ma-dispo{
  margin:0 0 14px;font-size:13px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:7px;
}
.ma-dispo::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:currentColor}
.ma-dispo--ok{color:var(--muted)}
.ma-dispo--tension{color:var(--ink);font-weight:500}
.ma-dispo--rupture{color:var(--muted)}
.ma-dispo--rupture::before{background:transparent;border:1.5px solid currentColor}

/* Le prix est l'information la plus regardée d'une fiche : elle était à la
   taille d'une mention légale. */
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-size:clamp(20px,2.6vw,24px);line-height:1.25}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{font-size:.72em}
.woocommerce ul.products li.product .price{font-size:15px}
.woocommerce ul.products li.product .price del{font-size:.78em}

/* ⚠️ Réserver la hauteur de `.woocommerce-variation` (essai précédent) ENTRETIENT
   le décalage au lieu de l'absorber : WooCommerce le vide tant qu'aucune
   pointure n'est choisie, donc sa hauteur finale est zéro. Mesuré : il tenait
   58 px pendant 5,8 s puis s'effondrait. On le masque, comme le fait le
   template natif de WooCommerce ; son JS l'affiche à la sélection. */
.woocommerce div.product .woocommerce-variation:empty{display:none}
.woocommerce div.product .single_variation_wrap .woocommerce-variation{margin:0}

/* La barre d'achat est pilotée par un script du pied, derrière 12 scripts
   bloquants : 5,4 s pendant lesquelles le bouton d'achat est hors écran (941 px
   sur mobile) et rien ne le remplace. Le CSS la montre d'emblée sur mobile ;
   le JS reprend la main en posant `ma-collant--pilote`. */
@media (max-width:921px){
  .ma-collant[hidden]:not(.ma-collant--pilote){display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   GALERIE : SUPPRIMER LE PIC DE 6 040 PX
   Flexslider construit le carrousel ~1,6 s après l'affichage. Avant ça,
   les 6 images sont empilées dans le wrapper : 6 040 px mesurés, puis
   retour à 414 px — toute la fiche remonte de 5 600 px d'un coup.
   C'était 0,425 des 0,456 de décalage cumulé.

   Le wrapper est enfant direct de la galerie AVANT l'initialisation, et
   descend dans `.flex-viewport` APRÈS. Cibler les deux comme enfants
   directs couvre donc les deux états sans dépendre du moment exact.
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce div.product .woocommerce-product-gallery{overflow:hidden}
.woocommerce div.product .woocommerce-product-gallery > .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
  aspect-ratio:1/1;overflow:hidden;
}
/* La bande de vignettes est créée par flexslider elle aussi : on lui réserve
   sa place, et la réservation disparaît d'elle-même dès qu'elle existe. */
.woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs))::after{
  content:"";display:block;height:84px;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTRE PAR POINTURE (rayons)
   ═══════════════════════════════════════════════════════════════════ */
.ma-pointures{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  margin:0 0 26px;padding:14px 0;border-block:1px solid var(--line);
}
.ma-pointures__lib{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;
}
.ma-pointures__liste{
  display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;min-width:0;
}
/* Cible tactile : la boîte, jamais le corps de texte. Une pointure courte
   (« 36 ») rate le seuil de 44 px en largeur si on ne la force pas. */
.ma-pointure{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:44px;padding:0 10px;
  font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--ink);background:var(--bg2);border:1px solid transparent;
  text-decoration:none;transition:background .18s,border-color .18s;
}
.ma-pointure:hover,.ma-pointure:focus-visible{background:var(--bg3,#ececea);border-color:var(--line)}
.ma-pointure.is-active{background:var(--ink);color:var(--bg,#fff);border-color:var(--ink)}
.ma-pointures__raz{
  font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;
}
.ma-pointures__raz:hover{color:var(--ink)}
.ma-pointures__vide{margin:28px 0;font-size:15px;color:var(--muted)}
.ma-pointures__vide a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:600px){
  .ma-pointures{gap:8px}
  .ma-pointures__lib{flex:1 0 100%}
}

/* La barre de pointures est posée entre le fil d'Ariane et la grille, dans un
   conteneur flex d'Astra qui ne lui accordait que la largeur de son plus grand
   mot : mesurée à 46 px de large sur 1 066 px de haut à 320 px — les vingt
   pointures empilées en colonne. Il lui faut sa ligne entière. */
.ma-pointures{flex:1 0 100%;width:100%;box-sizing:border-box}
.ma-pointures__liste{flex:1 1 100%}

/* Pagination : les numéros mesuraient 40×40, sous le seuil tactile de 44 px.
   On corrige par la BOÎTE, jamais en grossissant le chiffre. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;box-sizing:border-box;
}

/* Texte de rayon, en fin de page : informatif, jamais dominant. */
.ma-rayon-texte{
  margin:48px 0 8px;padding-top:28px;border-top:1px solid var(--line);
  max-width:70ch;
}
.ma-rayon-texte__titre{
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 12px;color:var(--ink);
}
.ma-rayon-texte p{
  margin:0 0 12px;font-size:14px;line-height:1.72;color:var(--muted);
  text-wrap:pretty;
}
.ma-rayon-texte p:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════
   CIBLES TACTILES DE LA NAVIGATION
   Mesuré : « Femme » 40×40, « Enfant » 34×40 — sous le seuil de 44 px
   dans les deux dimensions. On corrige par la BOÎTE (padding et
   min-height), jamais en grossissant la police : le rythme typographique
   de l'en-tête ne doit pas bouger.
   ⚠️ La largeur se récupère sur l'ESPACEMENT du conteneur, pas sur la
   taille des cibles — sinon l'en-tête déborde à 320 px.
   ═══════════════════════════════════════════════════════════════════ */
.main-header-menu > li > a,
.ast-header-break-point .main-header-menu > li > a,
.main-navigation ul li a,
nav.site-navigation ul li a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  padding-inline:10px;box-sizing:border-box;
}
@media (max-width:400px){
  /* À 320 px la place se prend sur les écarts, pas sur les cibles. */
  .main-header-menu,
  .main-navigation ul{gap:0}
  .main-header-menu > li > a,
  .main-navigation ul li a{padding-inline:6px}
}

/* Le titre d'une carte produit mesurait 43 px : un pixel sous le seuil. */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;min-height:44px;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION PRINCIPALE — CIBLES TACTILES
   Mesuré : « Femme » 40×40, « Enfant » 34×40, sous le seuil de 44 px.
   On corrige par la BOÎTE (min-height + padding), jamais en grossissant
   la police — le rythme typographique de l'en-tête ne doit pas bouger.
   ⚠️ La largeur se prend sur les ESPACEMENTS du conteneur, jamais sur la
   taille des cibles : six liens à 44 px feraient déborder l'en-tête à
   320 px, et on aurait échangé un défaut contre un pire.
   ═══════════════════════════════════════════════════════════════════ */
.ma-header .ma-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding-inline:8px;box-sizing:border-box;
}
@media (max-width:420px){
  .ma-header .ma-nav{gap:0}
  .ma-header .ma-nav a{padding-inline:5px}
}

/* Les liens du pied portent les mêmes intitulés que la navigation : ils
   mesuraient eux aussi 40 px de haut. Même correction, par la boîte. */
.ma-footer a,
footer .ma-footer__liste a,
.site-footer nav a{
  display:inline-flex;align-items:center;
  min-height:44px;box-sizing:border-box;
}

/* Bandeau de consentement : « Accepter » mesurait 41 px. Un bouton que tout
   le monde doit toucher avant d'accéder au site est le dernier endroit où
   rogner sur la cible. */
.ma-cnb__bouton{min-height:44px;box-sizing:border-box}
/* Titre de carte produit : 43 px, un pixel sous le seuil. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 a{min-height:44px;display:flex;align-items:center}

/* Un mot court rate le seuil tactile par la LARGEUR même quand la hauteur est
   bonne : « CGV » mesurait 27 px de large, « Enfant » 34. On élargit la boîte,
   sans toucher au corps du texte. */
.ma-footer li a,
.ma-header .ma-nav a{min-width:44px;padding-inline:6px}
.ma-footer li a{justify-content:flex-start;margin-inline-start:-6px}

/* ═══════════════════════════════════════════════════════════════════
   FICHE JUMELLE — l'autre version du même modèle
   Posé après une vente perdue tracée dans les journaux : le client
   cherchait du 43, la fiche affichait 35-42, et la version homme du
   même modèle — avec le 43 en stock — n'était annoncée nulle part.
   ═══════════════════════════════════════════════════════════════════ */
.ma-jumelle{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 13px;
  background:var(--bg2);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);
  min-height:44px;box-sizing:border-box;
  transition:border-color .2s,background .2s;
}
.ma-jumelle:hover,.ma-jumelle:focus-visible{border-color:var(--ink);background:var(--bg,#fff)}
.ma-jumelle__tailles{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);flex:0 0 auto;
}
.ma-jumelle__texte{font-size:12.5px;color:var(--muted);line-height:1.35;flex:1 1 auto;min-width:0}
.ma-jumelle__fleche{flex:0 0 auto;color:var(--muted)}
.ma-jumelle:hover .ma-jumelle__fleche{color:var(--ink)}
@media (max-width:420px){
  .ma-jumelle{gap:6px 9px}
  .ma-jumelle__texte{flex:1 0 100%;order:3}
}