/**
 * Module 03: Catalogue & Fiches Produits WooCommerce
 * Thème Storefront Child - SDMA Agri / TUG
 */

/* Cartes produits dans la grille */
ul.products li.product {
  background: var(--agri-white);
  border: 1px solid var(--agri-border-subtle);
  border-radius: var(--agri-radius);
  padding: 1rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

ul.products li.product:hover {
  border-color: var(--agri-green-light);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

ul.products li.product .woocommerce-loop-product__title {
  color: var(--agri-anthracite-base) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-top: 0.75rem !important;
}

/* Prix */
.price, ul.products li.product .price {
  color: var(--agri-amber-accent) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}

/* Boutons d'action */
button.button, 
input[type="submit"].button, 
.button, 
a.button.alt, 
button.button.alt {
  background-color: var(--agri-green-primary) !important;
  border-color: var(--agri-green-primary) !important;
  color: var(--agri-white) !important;
  border-radius: var(--agri-radius) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.75rem 1.5rem !important;
  transition: background-color 0.15s ease !important;
}

button.button:hover, 
input[type="submit"].button:hover, 
.button:hover, 
a.button.alt:hover, 
button.button.alt:hover {
  background-color: var(--agri-green-dark) !important;
  border-color: var(--agri-green-dark) !important;
}

/* Badge de stock */
.stock.in-stock {
  color: var(--agri-green-primary) !important;
  font-weight: 600;
  background: var(--agri-green-subtle);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--agri-radius);
}

/* Onglets fiche produit */
.woocommerce-tabs ul.tabs li.active a {
  color: var(--agri-green-primary) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--agri-green-primary) !important;
}

/* ==========================================================================
   PAGE « MON COMPTE »
   Le header du thème n'ouvre pas le conteneur `.col-full` de Storefront (c'est
   le header parent qui le fait, et son footer qui le referme). Sans cet
   encadrement, le formulaire de connexion s'étire sur toute la largeur de
   l'écran — champs de plus de 1400px, illisibles et inutilisables — et le
   titre laisse un vide de 96px en dessous.
   On encadre donc nous-mêmes le contenu de cette page.
   ========================================================================== */

@media (min-width: 769px) {
  /* Storefront réserve 5.99em (96px) sous le titre des pages compte */
  .woocommerce-account .entry-header {
    padding-bottom: 2.5rem !important;
  }
}

/* Visiteur déconnecté : formulaire de connexion centré et lisible */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Client connecté : espace compte (navigation + contenu) */
.woocommerce-account.logged-in .woocommerce {
  max-width: 1064px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Champs de l'espace client, alignés sur la charte du site.
   Storefront applique par défaut un fond gris et des angles droits, ce qui
   jure avec le reste (champs blancs, arrondis, focus vert). */
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce textarea {
  min-height: 48px;
  padding: 0.7rem 0.9rem !important;
  border: 1px solid var(--agri-border-subtle, #e2e8f0) !important;
  border-radius: 6px !important;
  background-color: var(--agri-white, #ffffff) !important;
  color: var(--agri-anthracite-base, #1e2322) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  /* 16px : évite le zoom automatique iOS au focus */
  font-size: 1rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce input[type="password"]:focus,
.woocommerce-account .woocommerce textarea:focus {
  border-color: var(--agri-green-primary, #215833) !important;
  box-shadow: 0 0 0 3px rgba(33, 88, 51, 0.12) !important;
}

/* ------------------------------------------------------------------
 * Accueil pleine largeur
 * #primary possede la classe .tma-front-page (voir front-page.php).
 * Storefront applique .right-sidebar .content-area { width: 73.913% }
 * car sidebar-1 contient des widgets, alors que l'accueil n'affiche
 * pas de colonne laterale -> bande blanche de 26% a droite.
 * ------------------------------------------------------------------ */
.tma-front-page {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}