/* ==========================================================================
   L'Atelier Au carré — styles WooCommerce
   Dérivé de la charte graphique · à charger après theme.json
   Aucune valeur en dur : tout vient des presets de theme.json.
   ========================================================================== */

:root {
  --aac-noir: var(--wp--preset--color--noir, #161412);
  --aac-noyer: var(--wp--preset--color--noyer, #7C5638);
  --aac-chene: var(--wp--preset--color--chene, #B98A5E);
  --aac-sauge: var(--wp--preset--color--sauge, #5F6E58);
  --aac-ecru: var(--wp--preset--color--ecru, #F6F1E9);
  --aac-lin: var(--wp--preset--color--lin, #E8DCCB);
  --aac-blanc: var(--wp--preset--color--blanc, #FFFFFF);
  --aac-encre: var(--wp--preset--color--encre, #2E2A26);
  --aac-encre-douce: var(--wp--preset--color--encre-douce, #5D554C);
  --aac-trait: var(--wp--preset--color--trait, #E3D8C9);
  --aac-trait-fort: var(--wp--preset--color--trait-fort, #C9BDA9);
  --aac-alerte: var(--wp--preset--color--alerte, #A3462F);
  --aac-titre: var(--wp--preset--font-family--titre, Georgia, serif);
  --aac-texte: var(--wp--preset--font-family--texte, system-ui, sans-serif);
  --aac-radius: 2px;
}

/* --- Boutons ------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  font-family: var(--aac-texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--aac-ecru);
  background: var(--aac-noir);
  border: 1px solid var(--aac-noir);
  border-radius: var(--aac-radius);
  padding: 1rem 1.875rem;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  color: var(--aac-ecru);
  background: var(--aac-noyer);
  border-color: var(--aac-noyer);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: 2px solid var(--aac-chene);
  outline-offset: 3px;
}

/* Bouton secondaire : contour noir */
.woocommerce a.button.alt--outline,
.woocommerce .button.wc-backward {
  color: var(--aac-noir);
  background: transparent;
  border-color: var(--aac-noir);
}

.woocommerce a.button.alt--outline:hover,
.woocommerce .button.wc-backward:hover {
  color: var(--aac-ecru);
  background: var(--aac-noir);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
  color: #9A9186;
  background: var(--aac-lin);
  border-color: var(--aac-lin);
  cursor: not-allowed;
}

/* --- Champs de formulaire ---------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  font-family: var(--aac-texte);
  font-size: 1rem;
  color: var(--aac-encre);
  background: var(--aac-blanc);
  border: 1px solid var(--aac-trait-fort);
  border-radius: var(--aac-radius);
  padding: 0.8125rem 0.875rem;
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  border-color: var(--aac-noir);
  outline: 2px solid var(--aac-chene);
  outline-offset: 2px;
}

.woocommerce form .form-row label {
  font-size: 0.875rem;
  color: var(--aac-encre-douce);
  margin-bottom: 0.5rem;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--aac-alerte);
}

/* Sélecteur de quantité */
.woocommerce .quantity .qty {
  font-family: var(--aac-texte);
  font-size: 1rem;
  text-align: center;
  border: 1px solid var(--aac-trait-fort);
  border-radius: var(--aac-radius);
  padding: 0.8125rem 0.5rem;
  background: var(--aac-blanc);
}

/* --- Champ de gravure (produit personnalisable) ------------------------ */

.aac-gravure {
  border: 1px solid var(--aac-noir);
  border-radius: var(--aac-radius);
  padding: 1.5rem;
  margin: 1.75rem 0;
}

.aac-gravure__titre {
  font-family: var(--aac-titre);
  font-size: 1.4375rem;
  color: var(--aac-noyer);
  margin: 0 0 0.375rem;
}

.aac-gravure__aide {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--aac-encre-douce);
  margin: 0 0 1rem;
}

/* La saisie s'affiche dans la police de gravure : l'aperçu fait la promesse */
.aac-gravure input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--aac-titre);
  font-size: 1.625rem;
  color: var(--aac-encre);
  background: var(--aac-ecru);
  border: 1px solid var(--aac-trait-fort);
  border-radius: var(--aac-radius);
  padding: 0.875rem 1rem;
}

.aac-gravure__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--aac-encre-douce);
}

/* --- Grille boutique & carte produit ----------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--aac-lin);
  margin: 0;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--aac-titre);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--aac-noyer);
  padding: 0;
  margin: 0.875rem 0 0.25rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--aac-texte);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--aac-encre);
}

.woocommerce ul.products li.product .price del {
  color: var(--aac-encre-douce);
  font-weight: 400;
  margin-right: 0.5rem;
}

.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Badges — un seul aplat sauge par écran, texte toujours blanc dessus */
.woocommerce span.onsale,
.aac-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  min-height: 0;
  min-width: 0;
  border-radius: 0;
  font-family: var(--aac-texte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4375rem 0.75rem;
  margin: 0;
  color: var(--aac-blanc);
  background: var(--aac-sauge);
}

.aac-badge--nouveau { background: var(--aac-noir); color: var(--aac-ecru); }
.aac-badge--commande { background: transparent; color: var(--aac-encre-douce); border: 1px solid var(--aac-trait-fort); }
.aac-badge--epuise { background: var(--aac-ecru); color: var(--aac-alerte); border: 1px solid var(--aac-alerte); }

/* Badge des gabarits en blocs.
   La charte ne couvrait que « span.onsale » (ancien gabarit). Les gabarits en
   blocs rendent « .wc-block-components-product-sale-badge », que WooCommerce
   habille en pastille blanche à bord gris et coins arrondis. Sa feuille étant
   chargée APRÈS celle du thème, une règle de même spécificité perdrait : on
   monte donc à (0,2,0) plutôt que d'employer !important. */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge,
.woocommerce .wc-block-components-product-sale-badge {
  border: 0;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 0.4375rem 0.75rem;
  font-family: var(--aac-texte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--aac-blanc);
  background: var(--aac-sauge);
}

/* --- Fiche produit ----------------------------------------------------- */

/* Galerie produit (galerie classique + FlexSlider).
   functions.php retire « woocommerce-general », qui contient TOUTE la mise en
   page de FlexSlider. Le script reste chargé et construit bien le carrousel,
   mais sans « float » ni débordement caché les diapositives s'empilent les unes
   sous les autres. On réécrit donc ici le strict nécessaire, à la charte. */
.woocommerce div.product div.images,
.woocommerce-product-gallery {
  position: relative;
  margin: 0;
  opacity: 1 !important; /* le fondu au chargement vit dans la feuille retirée */
}

.woocommerce-product-gallery .flex-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--aac-radius);
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* FlexSlider pose les largeurs en style en ligne ; il attend le flottement
   de la feuille CSS, d'où l'empilement observé. */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
  float: left;
  display: block;
  margin: 0;
}

.woocommerce-product-gallery__wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--aac-lin);
  border-radius: var(--aac-radius);
}

/* Vignettes : une rangée régulière, jamais une liste à puces. */
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce-product-gallery--columns-5 .flex-control-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: pointer;
  background: var(--aac-lin);
  border: 1px solid transparent;
  border-radius: var(--aac-radius);
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--aac-noyer);
}

/* Loupe d'agrandissement : sans la feuille retirée, ce n'est qu'un lien nu. */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--aac-encre);
  background: var(--aac-ecru);
  border: 1px solid var(--aac-trait);
  border-radius: var(--aac-radius);
}

.woocommerce-product-gallery__trigger:hover {
  color: var(--aac-noyer);
  border-color: var(--aac-trait-fort);
}

.woocommerce div.product .product_title {
  font-family: var(--aac-titre);
  font-weight: 300;
  color: var(--aac-noyer);
  line-height: 1.1;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--aac-texte);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--aac-encre);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 52ch;
}

.woocommerce div.product form.cart { display: flex; align-items: center; gap: 0.875rem; }
.woocommerce div.product form.cart .button { flex: 1; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--aac-trait);
  padding: 0;
  margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.5rem 0 0;
  padding: 0 0 0.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aac-encre-douce);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 1px solid var(--aac-noir);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--aac-noir); }

/* --- Fil d'ariane, tri, pagination ------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
  font-size: 0.875rem;
  color: var(--aac-encre-douce);
  margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb a { color: var(--aac-noyer); }

.woocommerce .woocommerce-ordering select {
  font-family: var(--aac-texte);
  font-size: 0.875rem;
  color: var(--aac-encre);
  background: var(--aac-blanc);
  border: 1px solid var(--aac-trait-fort);
  border-radius: var(--aac-radius);
  padding: 0.625rem 1rem;
}

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 0.5rem; display: flex; }

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border: 1px solid var(--aac-trait-fort);
  border-radius: var(--aac-radius);
  padding: 0;
  color: var(--aac-encre);
  background: var(--aac-blanc);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  color: var(--aac-ecru);
  background: var(--aac-noir);
  border-color: var(--aac-noir);
}

/* --- Messages ---------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--aac-encre);
  background: var(--aac-ecru);
  border: 0;
  border-left: 3px solid var(--aac-sauge);
  border-radius: 0;
  padding: 0.875rem 1.125rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { border-left-color: var(--aac-alerte); }

/* --- Panier ------------------------------------------------------------ */

.woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}

.woocommerce table.shop_table th {
  font-family: var(--aac-texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aac-noyer);
  border-bottom: 1px solid var(--aac-trait);
  padding: 0.875rem 0;
}

.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--aac-trait);
  padding: 1.375rem 0;
}

.woocommerce table.shop_table img { width: 88px; aspect-ratio: 4 / 5; object-fit: cover; }

.woocommerce table.shop_table .product-name a {
  font-family: var(--aac-titre);
  font-size: 1.375rem;
  color: var(--aac-noyer);
}

/* Mention de gravure sous le nom du produit */
.woocommerce table.shop_table .variation,
.woocommerce table.shop_table dl.variation {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--aac-encre-douce);
  margin: 0.375rem 0 0;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--aac-titre);
  font-weight: 300;
  color: var(--aac-noyer);
}

.woocommerce .cart_totals table.shop_table tr.order-total .amount {
  font-size: 1.25rem;
  font-weight: 500;
}

/* --- Tunnel de commande ------------------------------------------------ */

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

.woocommerce-checkout #order_review {
  background: var(--aac-blanc);
  border: 1px solid var(--aac-trait);
  padding: 2rem;
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--aac-ecru);
  border-radius: 0;
  font-size: 0.9375rem;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order { width: 100%; }

/* Étapes du tunnel (si affichées par le thème) */
.aac-etapes { display: flex; gap: 0.625rem; margin-bottom: 1.625rem; }

.aac-etapes span {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aac-encre-douce);
  border: 1px solid var(--aac-trait);
  padding: 0.625rem 0.5rem;
}

.aac-etapes span[aria-current] {
  color: var(--aac-ecru);
  background: var(--aac-noir);
  border-color: var(--aac-noir);
}

/* --- Blocs WooCommerce de la page d'accueil ----------------------------
   Attention : WordPress pose la className sur l'élément racine du bloc, qui
   n'est pas toujours celui qui porte .wc-block-*. Tous les sélecteurs ci-
   dessous acceptent donc les deux structures (racine ou descendant). */

/* Héros : deux colonnes natives. Le bloc n'a pas besoin d'être « réparé »,
   la CSS ne fait que coller la photo aux bords et fixer sa hauteur. */
.aac-heros { margin-top: 0; margin-bottom: 0; }

.aac-heros > .wp-block-column { min-width: 0; }

.aac-heros .aac-heros__photo {
  height: 100%;
  margin: 0;
}

.aac-heros .aac-heros__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
  background: var(--aac-lin);
  border-radius: 0;
}

@media (max-width: 781px) {
  .aac-heros .aac-heros__photo img { min-height: 340px; }
}

/* Héros piloté par un produit.
   Le gabarit de produits est ici un héros, pas une liste : il ne doit pas
   hériter de la grille à quatre colonnes définie plus bas. La spécificité
   (0,2,0) l'emporte sur celle de la règle de grille (0,1,0). */
.aac-heros-produit .wc-block-product-template {
  display: block !important;
  grid-template-columns: none;
  gap: 0;
}

.aac-heros-produit .wc-block-product {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
}

/* La photo du produit remplit la colonne, comme le faisait l'image manuelle.
   Le bloc « Image du produit » intercale un lien entre le conteneur et l'img :
   sans hauteur sur ce lien, la photo retombe à sa hauteur naturelle. */
.aac-heros .aac-heros__photo,
.aac-heros .aac-heros__photo a {
  display: block;
  height: 100%;
  margin: 0;
}

/* Annule le format 4:5 imposé aux vignettes de liste : ici la photo est
   recadrée en hauteur sur toute la colonne. */
.aac-heros .aac-heros__photo img {
  aspect-ratio: auto;
}

/* Produits sélectionnés — même carte que la boutique.
   Sélecteurs non préfixés : la grille doit tenir quel que soit le bloc
   (handpicked, product-new, product-category, product-collection). */
.wc-block-grid__products,
.wc-block-product-template,
.wp-block-post-template.products-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .wc-block-grid__products,
  .wc-block-product-template,
  .wp-block-post-template.products-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .wc-block-grid__products,
  .wc-block-product-template,
  .wp-block-post-template.products-block-post-template { grid-template-columns: 1fr; }
}

/* La carte occupe toute sa colonne : jamais de largeur dictée par le contenu.
   WooCommerce impose « .wc-block-grid.has-4-columns .wc-block-grid__product
   { flex:1 0 25%; max-width:25% } » (spécificité 0,3,0) depuis all-products.css.
   Le conteneur étant passé en grille, ce 25 % se calculerait sur la colonne et
   non sur la rangée — soit un quart de quart. D'où le !important, seul moyen de
   reprendre la main sans surenchère de sélecteurs. */
.wc-block-grid__product,
.wc-block-product,
li.wc-block-product {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: 1 1 auto !important;
  margin: 0;
  padding: 0;
  text-align: left;
}

.wc-block-grid__product-image img,
.wc-block-product .wc-block-components-product-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--aac-lin);
  border-radius: 0;
}

.wc-block-grid__product-title,
.wc-block-product .wc-block-components-product-title {
  font-family: var(--aac-titre);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--aac-noyer);
  margin: 0.875rem 0 0.25rem;
}

.wc-block-grid__product-price,
.wc-block-product .wc-block-components-product-price {
  font-family: var(--aac-texte);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--aac-encre);
}

.wc-block-grid__product-price del,
.wc-block-components-product-price del { color: var(--aac-encre-douce); font-weight: 400; }
.wc-block-grid__product-price ins,
.wc-block-components-product-price ins { text-decoration: none; }

.wc-block-grid__product-onsale {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  border: 0;
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4375rem 0.75rem;
  color: var(--aac-blanc);
  background: var(--aac-sauge);
}

/* Bouton de carte : pleine largeur, texte sur une seule ligne */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wc-block-product .wp-block-button__link,
.wc-block-product .add_to_cart_button,
.woocommerce ul.products li.product a.button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  text-align: center;
  white-space: normal;
  border-radius: var(--aac-radius);
}

/* Catégories de produits avec image */
.wc-block-product-categories ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 782px) {
  .wc-block-product-categories ul { grid-template-columns: 1fr; }
}

.wc-block-product-categories li {
  border: 1px solid var(--aac-trait);
  padding: 1.5rem;
  margin: 0;
}

.wc-block-product-categories li a {
  font-family: var(--aac-titre);
  font-size: 1.375rem;
  color: var(--aac-noyer);
}

.wc-block-product-categories-list-item__image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: var(--aac-lin);
  margin-top: 1rem;
}

/* --- En-tête & pied de page sur fond noir ------------------------------ */

.aac-sombre {
  background: var(--aac-noir);
  color: var(--aac-ecru);
}

.aac-sombre a { color: var(--aac-ecru); }
.aac-sombre a:hover { color: var(--aac-chene); }
.aac-sombre .current-menu-item > a { border-bottom: 1px solid var(--aac-chene); padding-bottom: 3px; }
.aac-sombre .aac-panier { color: var(--aac-chene); }

/* --- Accessibilité ----------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--aac-chene);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}