/* ==========================================================================
   Location Madden — pages CATALOGUE (archive) & FICHE produit.
   Tout est scopé sous .madden-shop (lui-même dans .madden-home → hérite les
   tokens et la police de madden-home.css, chargé en amont sur les pages Woo).
   Aucune règle ne fuit vers l'accueil.
   ========================================================================== */

/* Full-bleed du chrome sur les pages Woo (l'accueil neutralise via body.home ;
   ici les pages ont body.woocommerce / archive / single-product). */
body.woocommerce .wp-site-blocks,
body.woocommerce-page .wp-site-blocks,
body.archive .wp-site-blocks,
body.single-product .wp-site-blocks { padding-left: 0 !important; padding-right: 0 !important; }
body.woocommerce, body.woocommerce-page { margin: 0; }

.madden-shop {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte, #12171B);
}

/* Conteneur centré, calqué sur .wrap de l'accueil */
.madden-shop .shop-hero,
.madden-shop .shop-body,
.madden-shop .shop-breadcrumb { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

/* ---- Bandeau titre catégorie / boutique ---- */
.madden-shop .shop-hero { padding-block: 48px 26px; border-bottom: 1px solid var(--bordure, #D7DEE4); }
/* Le bandeau est un wp:group « constrained » : Gutenberg bride CHAQUE ENFANT a
   contentSize (720px, theme.json) et le centre, alors que le bandeau lui-meme et
   la grille en dessous occupent 1200px. Sur PC le h1 se retrouvait donc dans une
   colonne de 720px centree a x=353, alignee ni sur la colonne categories (x=136)
   ni sur la grille produits (x=424) — un bloc de titre qui flotte — et
   « Manutention & demenagement » cassait en deux lignes avec un « & » orphelin
   alors qu'il tient largement sur une. Les enfants reprennent la largeur du
   bandeau ; .shop-desc rebride sa propre mesure juste en dessous (regle plus
   tardive, meme specificite). */
.madden-shop .shop-hero > * { max-width: none; margin-inline: 0; }
.madden-shop .shop-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--action, #1C9AD6); margin: 0 0 var(--gap-surtitre, 12px); }
.madden-shop .shop-title { font-size: clamp(2rem, 4vw, 3rem); line-height: var(--lh-display, 1.05); font-weight: 800; font-stretch: 88%; margin: 0; text-wrap: balance; }
.madden-shop .shop-desc { max-width: 64ch; margin: var(--gap-soustitre, 16px) 0 0; color: var(--texte-muted, #5C6873); font-size: 1.02rem; line-height: var(--lh-texte, 1.6); }

/* Le template legacy de Woo réémet titre + description dans son propre
   <header class="woocommerce-products-header"> : doublon exact du .shop-hero
   ci-dessus (deux <h1> par page). On garde celui du thème. */
.madden-shop .woocommerce-products-header { display: none; }

.madden-shop .shop-body { padding-block: 32px 72px; }

/* ---- Grille produits (loop WooCommerce) ---- */
.madden-shop ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
/* WooCommerce pose un clearfix (::before/::after, content:" ") sur ul.products.
   Dans un conteneur grid, ces pseudo-elements deviennent des ELEMENTS DE GRILLE :
   ils occupent une case vide au debut et une a la fin => toutes les cartes sont
   decalees d un cran. Il faut donc les neutraliser. */
.madden-shop ul.products::before,
.madden-shop ul.products::after { content: none !important; display: none !important; }
.madden-shop ul.products li.product {
  position: relative; background: #fff; border: 1px solid var(--bordure, #D7DEE4);
  border-radius: 14px; padding: 16px; margin: 0; width: auto;
  display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.madden-shop ul.products li.product::before,
.madden-shop ul.products li.product::after { content: none; }
.madden-shop ul.products li.product:hover { border-color: var(--action, #1C9AD6); box-shadow: 0 10px 30px -18px rgba(12,42,58,.45); transform: translateY(-2px); }
/* Le catalogue melange des photos carrees, portrait (0.42) et panoramiques (2.92).
   En "cover" sur un cadre 4/3, les portraits perdaient ~2/3 de leur hauteur et les
   panoramiques la moitie de leur largeur => cadrage different d une carte a l autre.
   Cadre carre + "contain" : l equipement entier est toujours visible et centre. */
.madden-shop ul.products li.product a img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; background: var(--surface, #F5F7F9); padding: 10px; margin: 0 0 12px; }
/* L'italique display (signature de la direction) est herite de theme.json par
   TOUS les titres, y compris ceux des vignettes. A 16.8px, sur des chaines
   techniques du type « Brouette motorisee 3/4 verge 2645 lbs Kubota KC120
   diesel », capitales + italique + 3 lignes = le mode d'echec de la direction
   « fonctionnel dense » (illisible par accumulation). On garde les capitales,
   on redresse : l'italique reste reserve a l'echelle display. */
.madden-shop ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; font-weight: 700; font-style: normal; letter-spacing: .01em; line-height: var(--lh-titre-sm, 1.3); text-wrap: balance; padding: 0; margin: 0 0 var(--gap-soustitre-sm, 12px); color: var(--texte, #12171B); }
.madden-shop ul.products li.product > a { text-decoration: none; color: inherit; }

/* Bouton "Voir l'équipement" (injecté via hook woocommerce_after_shop_loop_item) */
.madden-shop .madden-voir { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 9px 14px; border-radius: 9px; background: var(--action, #1C9AD6); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; align-self: flex-start; transition: background .18s; }
.madden-shop .madden-voir:hover { background: var(--action-hover, #127AAC); }

/* ==========================================================================
   NAVIGATION CATEGORIES
   --------------------------------------------------------------------------
   Remplace les deux rangees de puces horizontales (jusqu'au 2026-08-03).
   Le probleme etait une contrainte de largeur, pas un reglage : 8 univers
   faisaient 1844px de contenu pour 1152px visibles en 1440 et 358px en 390,
   soit 3 puis 6 univers hors d'atteinte, avec la scrollbar masquee. Une
   colonne resout ca sans compromis : le vertical est gratuit.
   Un seul DOM, deux comportements : colonne collante >= 1080px, tiroir en
   dessous. Le PHP rend le panneau ouvert et le JS replie — script mort =
   liste complete visible, jamais un cul-de-sac.
   ========================================================================== */
.madden-shop .madden-catnav-panneau { border: 1px solid var(--bordure, #D7DEE4); border-radius: 14px; background: #fff; padding: 12px 10px; }
.madden-shop .madden-catnav-titre { margin: 0 0 var(--gap-surtitre, 12px); padding: 0 10px; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--texte-muted, #5C6873); }
.madden-shop .catnav-list,
.madden-shop .catnav-sub { list-style: none; margin: 0; padding: 0; }
.madden-shop .catnav-list::before, .madden-shop .catnav-list::after,
.madden-shop .catnav-sub::before,  .madden-shop .catnav-sub::after { content: none !important; display: none !important; }

.madden-shop .catnav-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px; text-decoration: none;
  color: var(--texte, #12171B); font-size: .9rem; line-height: 1.3;
  transition: background .16s, color .16s;
}
.madden-shop a.catnav-link:hover { background: var(--surface, #F5F7F9); color: var(--action, #1C9AD6); }
.madden-shop .catnav-n { flex: none; color: var(--texte-muted, #5C6873); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.madden-shop .catnav-univers { font-weight: 700; }
.madden-shop .catnav-all { font-weight: 700; }
/* Separateur apres "Tout le catalogue" : il n'est pas au meme niveau que les
   univers, la hierarchie doit se voir sans avoir a lire. */
.madden-shop .catnav-list > li:first-child { border-bottom: 1px solid var(--bordure, #D7DEE4); padding-bottom: 6px; margin-bottom: 6px; }
/* Univers deplie mais dont on n'affiche pas la page exacte (on est sur une
   sous-categorie) : signale en bleu, sans le remplissage de la page courante. */
.madden-shop .catnav-item.is-open > .catnav-univers { color: var(--action, #1C9AD6); }
/* Page exactement affichee — un seul element porte cet etat sur la page. */
.madden-shop .catnav-link[aria-current="page"] { background: var(--texte, #12171B); color: #fff; }
.madden-shop .catnav-link[aria-current="page"] .catnav-n { color: rgba(255,255,255,.7); }
.madden-shop a.catnav-link[aria-current="page"]:hover { background: var(--texte, #12171B); color: #fff; }
/* Sous-categories : filet vertical + retrait, la relation parent/enfant est
   portee par la position, pas par une nuance de gris. */
.madden-shop .catnav-sub { margin: 2px 0 8px 20px; padding-left: 8px; border-left: 2px solid var(--bordure, #D7DEE4); }
.madden-shop .catnav-enfant { font-size: .855rem; padding: 6px 10px; color: var(--texte-muted, #5C6873); }
.madden-shop a.catnav-enfant:hover { color: var(--action, #1C9AD6); }
/* Valeur sans resultat dans le contexte courant : affichee (jamais masquee —
   un choix qui disparait est plus deroutant qu'un choix grise) mais inerte. */
.madden-shop .catnav-link.is-empty { opacity: .45; cursor: not-allowed; }

/* ---- >= 1080px : colonne de gauche collante ---- */
@media (min-width: 1080px) {
  .madden-shop:not(.is-single) .site-main { display: grid; grid-template-columns: 252px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  /* Tout le contenu Woo (fil d'Ariane, barre outil, grille, pagination) en
     colonne 2. Ne pas appliquer aux fiches produit: sans .madden-catnav,
     elles recevraient une colonne fantome. min-width:0 sinon la grille produits
     refuse de retrecir. */
  .madden-shop:not(.is-single) .site-main > * { grid-column: 2; min-width: 0; }
  /* `grid-row: 1 / -1` ne marche PAS ici : -1 se resout sur la grille
     EXPLICITE, or toutes ces lignes sont implicites. D'ou le span large. */
  .madden-shop:not(.is-single) .site-main > .madden-catnav { grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 18px; }
}

/* ---- < 1080px : tiroir replie ---- */
@media (max-width: 1079px) {
  .madden-shop .madden-catnav { margin: 0 0 16px; }
  .madden-shop .madden-catnav-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--bordure, #D7DEE4); border-radius: 11px;
    background: #fff; color: var(--texte, #12171B); font: inherit; font-size: .9rem; font-weight: 700;
    text-align: left; cursor: pointer;
  }
  .madden-shop .madden-catnav-toggle .catnav-toggle-actuel { font-weight: 600; color: var(--texte-muted, #5C6873); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .madden-shop .madden-catnav-toggle::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
  .madden-shop .madden-catnav-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .madden-shop .madden-catnav-panneau { margin-top: 8px; }
  .madden-shop .madden-catnav[data-replie="true"] .madden-catnav-panneau { display: none; }
  .madden-shop .madden-catnav-titre { display: none; }
}
/* Sans JS le bouton reste cache et la liste reste ouverte (cf. attribut hidden
   pose par le PHP). !important car la media query ci-dessus pose display:flex. */
.madden-shop .madden-catnav-toggle[hidden] { display: none !important; }

/* ---- Barre outil : compte de resultats + recherche + tri ---- */
.madden-shop .madden-filters { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--bordure, #D7DEE4); }
/* (suite de la barre outil plus bas) */
/* Le clearfix ::before/::after de WooCommerce (content:" ") vise ul.products et
   div.product ; .madden-filters n'est pas un conteneur Woo, mais on neutralise
   quand meme par prudence (piege deja rencontre 2x sur ce projet). */
.madden-shop .madden-filters::before,
.madden-shop .madden-filters::after { content: none !important; display: none !important; }

/* ---- Barre outil : compte de resultats + recherche + tri ----
   Une seule rangee de 40px de haut. Avant : trois controles de hauteurs
   differentes (33 / 36 / 39px), un select dimensionne par sa plus longue
   option (261px) et un bouton « Rechercher » de 108px — le tout debordait la
   colonne de 864px et repassait sur deux lignes, ce qui annulait le
   space-between. Ici les trois controles partagent la meme hauteur et la
   recherche forme un seul bloc champ+bouton. */
.madden-shop .madden-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.madden-shop .madden-count { margin: 0; color: var(--texte-muted, #5C6873); font-size: .88rem; white-space: nowrap; }
.madden-shop .madden-count strong { color: var(--texte, #12171B); font-weight: 700; }
.madden-shop .madden-toolbar-actions { display: flex; align-items: center; gap: 14px; position: relative; }

/* ---- Recherche contextuelle : en clair dans la barre, jamais repliee ---- */
.madden-shop .madden-search { display: flex; align-items: center; gap: 10px; margin: 0; }
.madden-shop .madden-search-field {
  display: flex; align-items: center; height: 40px; background: #fff;
  border: 1px solid var(--bordure, #D7DEE4); border-radius: 10px; overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.madden-shop .madden-search-field:focus-within { border-color: var(--action, #1C9AD6); box-shadow: 0 0 0 3px rgba(28, 154, 214, .18); }
.madden-shop .madden-search input[type="search"] {
  width: min(240px, 44vw); height: 38px; padding: 0 12px; min-width: 0;
  border: 0; background: transparent; color: var(--texte, #12171B);
  font-family: inherit; font-size: .9rem;
}
.madden-shop .madden-search input[type="search"]:focus { outline: none; }
/* Loupe : convention universelle (loi de Jakob), et le libelle texte de 108px
   qui doublait la touche Entree disparait au profit de la largeur du champ. */
.madden-shop .madden-search-go {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 40px; height: 38px; padding: 0;
  border: 0; border-left: 1px solid var(--bordure, #D7DEE4);
  background: var(--surface, #F5F7F9); color: var(--texte-muted, #5C6873);
  cursor: pointer; transition: background .16s, color .16s;
}
.madden-shop .madden-search-go:hover { background: var(--action, #1C9AD6); color: #fff; }
.madden-shop .madden-search-go:focus-visible { outline: 2px solid var(--action, #1C9AD6); outline-offset: -2px; }

/* ---- Tri : etiquette visible + select cale sur la meme hauteur ---- */
.madden-shop .madden-sort { display: flex; align-items: center; gap: 8px; }
.madden-shop .madden-sort > label { color: var(--texte-muted, #5C6873); font-size: .88rem; white-space: nowrap; }
.madden-shop .madden-sort .woocommerce-ordering { margin: 0; }
.madden-shop .madden-sort select {
  height: 40px; max-width: 200px; padding: 0 34px 0 12px;
  border: 1px solid var(--bordure, #D7DEE4); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6873' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none;
  color: var(--texte, #12171B); font-family: inherit; font-size: .9rem; cursor: pointer;
}
.madden-shop .madden-sort select:focus-visible { outline: 2px solid var(--action, #1C9AD6); outline-offset: 1px; }
/* Le champ rempli + ce lien tiennent lieu de recapitulatif du filtre actif :
   avec une seule facette, une rangee de puces actives repeterait la meme info. */
.madden-shop .madden-search-clear { font-size: .84rem; color: var(--action, #1C9AD6); text-decoration: underline; white-space: nowrap; }

/* ---- Resultat vide : nommer la cause, offrir une sortie ---- */
.madden-shop .madden-noresults { margin: 8px 0 24px; padding: 18px 20px; background: var(--surface, #F5F7F9); border-radius: 12px; }
.madden-shop .madden-noresults-lead { margin: 0 0 12px; font-weight: 700; }
.madden-shop .madden-noresults-actions { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.madden-shop .madden-noresults-actions a { color: var(--action, #1C9AD6); }
.madden-shop .madden-noresults-primary { font-weight: 700; }
.madden-shop .madden-noresults-quote { margin: 0; font-size: .9rem; color: var(--texte-muted, #5C6873); }

.madden-shop .madden-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* pagination */
.madden-shop .woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 28px 0 0; border: 0; }
.madden-shop .woocommerce-pagination li { margin: 0; border: 0; }
.madden-shop .woocommerce-pagination a, .madden-shop .woocommerce-pagination span { display: inline-flex; min-width: 40px; height: 40px; padding: 0 8px; align-items: center; justify-content: center; border: 1px solid var(--bordure, #D7DEE4); border-radius: 9px; text-decoration: none; color: var(--texte, #12171B); background: #fff; }
.madden-shop .woocommerce-pagination .current { background: var(--texte, #12171B); color: #fff; border-color: var(--texte, #12171B); }

/* ---- Fiche produit ---- */
.madden-shop.is-single .shop-breadcrumb { padding-block: 24px 0; color: var(--texte-muted, #5C6873); font-size: .9rem; }
.madden-shop.is-single .shop-breadcrumb a { color: var(--action, #1C9AD6); text-decoration: none; }
.madden-shop.is-single div.product { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 24px; }
/* Meme piege que sur ul.products : le clearfix de div.product cree une case
   fantome dans la grille de la fiche produit. */
.madden-shop.is-single div.product::before,
.madden-shop.is-single div.product::after { content: none !important; display: none !important; }
.madden-shop.is-single div.product .woocommerce-product-gallery { margin: 0; width: 100% !important; float: none; text-align: center; }
.madden-shop.is-single div.product .woocommerce-product-gallery img { width: auto !important; max-width: 100%; height: auto; display: inline-block; border-radius: 14px; border: 1px solid var(--bordure, #D7DEE4); background: var(--surface, #F5F7F9); }
.madden-shop.is-single div.product .summary { margin: 0; width: auto !important; float: none; }
.madden-shop.is-single .product_title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; font-stretch: 88%; line-height: var(--lh-display, 1.05); text-wrap: balance; margin: 0 0 var(--gap-soustitre, 16px); }
.madden-shop.is-single .woocommerce-product-details__short-description { color: var(--texte-muted, #5C6873); font-size: 1.05rem; line-height: var(--lh-texte, 1.6); }
.madden-shop.is-single .product_meta { margin-top: var(--s5, 24px); font-size: .88rem; color: var(--texte-muted, #5C6873); border-top: 1px solid var(--bordure, #D7DEE4); padding-top: 16px; }
.madden-shop.is-single .product_meta a { color: var(--action, #1C9AD6); text-decoration: none; }

/* Description longue remontee dans le resume (a la place de la short description) */
.madden-shop.is-single .madden-desc { margin: 0; color: var(--texte, #12171B); font-size: 1.02rem; line-height: var(--lh-texte, 1.6); }
.madden-shop.is-single .madden-desc p { margin: 0 0 .7em; }
.madden-shop.is-single .madden-desc p:empty { display: none; }
.madden-shop.is-single .madden-desc :last-child { margin-bottom: 0; }
.madden-shop.is-single .madden-desc a { color: var(--action, #1C9AD6); }

/* CTA "Réserver cet équipement" (injecté via hook woocommerce_single_product_summary) */
.madden-shop .madden-reserve { display: inline-flex; align-items: center; gap: 8px; margin: var(--s5, 24px) 0 0; padding: 15px 26px; border-radius: 11px; background: var(--action, #1C9AD6); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; box-shadow: 0 12px 30px -14px rgba(28,154,214,.7); transition: background .18s, transform .18s; }
.madden-shop .madden-reserve:hover { background: var(--action-hover, #127AAC); transform: translateY(-1px); }
.madden-shop .madden-reserve-note { display: block; margin-top: var(--gap-surtitre, 12px); color: var(--texte-muted, #5C6873); font-size: .86rem; }

/* onglets description */
.madden-shop .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--s6, 32px); }
.madden-shop .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0 0 var(--s5, 24px); border-bottom: 1px solid var(--bordure, #D7DEE4); }
.madden-shop .woocommerce-tabs ul.tabs::before { content: none; }
.madden-shop .woocommerce-tabs ul.tabs li { padding: 10px 2px; margin: 0; background: none; border: 0; border-radius: 0; }
.madden-shop .woocommerce-tabs ul.tabs li::before, .madden-shop .woocommerce-tabs ul.tabs li::after { content: none; }
.madden-shop .woocommerce-tabs ul.tabs a { text-decoration: none; font-weight: 700; color: var(--texte-muted, #5C6873); }
.madden-shop .woocommerce-tabs ul.tabs li.active a { color: var(--texte, #12171B); }
.madden-shop .woocommerce-Tabs-panel h2 { font-size: 1.3rem; font-weight: 800; line-height: var(--lh-titre, 1.16); margin: 0 0 var(--gap-soustitre, 16px); }

/* produits liés */
.madden-shop .related.products, .madden-shop .upsells.products { grid-column: 1 / -1; margin-top: var(--s8, 64px); }
.madden-shop .related.products > h2, .madden-shop .upsells.products > h2 { font-size: 1.4rem; font-weight: 800; line-height: var(--lh-titre, 1.16); margin: 0 0 var(--gap-titre-bloc, 48px); }

/* Responsive */
@media (max-width: 860px) {
  .madden-shop.is-single div.product { grid-template-columns: 1fr; gap: 24px; }
}
/* WooCommerce smallscreen (<=768px) impose float/clear/width sur les cartes.
   Notre layout est une grille CSS; on neutralise ces styles des que la sidebar
   n'est plus en colonne desktop, sinon les cartes restent demi-largeur dans leur
   cellule et les boutons debordent. */
@media (max-width: 1079px) {
  .woocommerce .madden-shop ul.products li.product,
  .woocommerce-page .madden-shop ul.products li.product,
  .madden-shop ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
  }
}

/* Barre outil en colonne : recherche + tri + compte ne tiennent pas cote a cote
   sous ~640px (mesure a 390 : le champ etait coupe et le select de tri sortait
   du cadre a droite). Chaque bloc prend la largeur, rien ne deborde. */
@media (max-width: 640px) {
  .madden-shop .madden-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .madden-shop .madden-toolbar-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .madden-shop .madden-search { flex-wrap: nowrap; }
  .madden-shop .madden-search-field { flex: 1 1 auto; min-width: 0; }
  .madden-shop .madden-search input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; }
  .madden-shop .madden-sort select { flex: 1 1 auto; max-width: none; width: 100%; }
  .madden-shop .madden-sort .woocommerce-ordering { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 560px) {
  .madden-shop .shop-hero, .madden-shop .shop-body, .madden-shop .shop-breadcrumb { padding-inline: 16px; }
  .madden-shop .shop-hero { padding-block: 32px 20px; }

  /* Mobile catalogue : WooCommerce smallscreen force les produits en float + width
     ~48%, ce qui casse notre grille (cartes de 75-83px et bouton qui deborde).
     On passe en liste compacte 1 colonne : image lisible, titre a droite, CTA tactile. */
  .madden-shop ul.products { grid-template-columns: 1fr; gap: 12px; }
  .woocommerce .madden-shop ul.products li.product,
  .woocommerce-page .madden-shop ul.products li.product,
  .madden-shop ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    min-width: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
  }
  .madden-shop ul.products li.product > a.woocommerce-LoopProduct-link { display: contents; }
  .madden-shop ul.products li.product a img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 92px !important;
    height: 92px !important;
    margin: 0;
    padding: 8px;
  }
  .madden-shop ul.products li.product .woocommerce-loop-product__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: .98rem;
    line-height: 1.12;
  }
  .madden-shop ul.products li.product .madden-voir {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    margin-top: 10px;
    max-width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    font-size: .88rem;
  }
}

@media (max-width: 374px) {
  .woocommerce .madden-shop ul.products li.product,
  .woocommerce-page .madden-shop ul.products li.product,
  .madden-shop ul.products li.product {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px;
  }
  .madden-shop ul.products li.product a img {
    width: 82px !important;
    height: 82px !important;
  }
  .madden-shop ul.products li.product .woocommerce-loop-product__title { font-size: .94rem; }
}