/*
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:auto 1fr auto;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, puis elle
   redevient une barre horizontale au-delà du point de rupture. */
.ma-nav{
  position:fixed;inset:calc(var(--topbar-h) + var(--header-h)) 0 auto 0;
  background:#fff;border-bottom:1px solid var(--line);
  flex-direction:column;align-items:flex-start;gap:0;
  padding:8px var(--gut) 20px;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  max-height:calc(100svh - var(--topbar-h) - var(--header-h));overflow-y:auto;
  z-index:59;
}
.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;
    flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px);
    padding:0;transform:none;opacity:1;pointer-events:auto;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 */
.woocommerce-breadcrumb{font-size:10px;line-height:1.4;margin-bottom:6px}
.woocommerce-breadcrumb a,.woocommerce-breadcrumb>*{min-height:36px}

/* 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;
}