/*
 * Boutique — excel-exercice.com
 * Fichier : woocommerce-boutique.css   ·   v2.1.0 (branché sur la charte)
 * Chargé UNIQUEMENT sur la page /shop/ via functions.php (is_shop()).
 * Thème enfant : infinite-child
 *
 * ⚠️ ARCHITECTURE RÉELLE (vérifiée en direct le 03/06/2026) :
 * La page /shop/ est une ARCHIVE produit rendue par **Themify Builder Pro**
 * (pas le markup WooCommerce standard). Chaque produit est structuré ainsi :
 *
 *   li.product.product_cat-XXX
 *     span.edit-button                      (admin — masqué)
 *     div.tbp_advanced_archive_wrap
 *       div.module_row.themify_builder_row
 *         div.row_inner
 *           div.module_column               ← on en fait la GRILLE liste
 *             div.module-product-image  > figure.product-image > img
 *             div.module-product-title  > h3.tbp_title
 *             div.module-product-description
 *             div.module-product-price  > p.price
 *             div.module-add-to-cart    > a.button.add_to_cart_button
 *
 * Ce CSS cible donc les modules Themify (.module-product-*), PAS le markup Woo.
 * Les sections déco (hero, garanties, FAQ) se mettent dans le GABARIT D'ARCHIVE
 * Themify (bouton « Turn On Builder »), pas dans ce fichier.
 */

/* ── POLICES — fournies par la CHARTE (Inter + Space Mono). Plus d'@import ici. ──
   Fraunces et JetBrains Mono sont ABANDONNÉS (décision charte). */

/* ── VARIABLES — branchées sur la CHARTE (mutualisation) ─────────────────────
   Chaque variable pointe sur le token de la charte ; la valeur après la virgule
   est une SÉCURITÉ si la charte n'était pas chargée. Source unique = la charte. */
:root {
  --sh-ink:    var(--c-ink,     #0e1814);
  --sh-text:   var(--c-text,    #36443e);
  --sh-muted:  var(--c-muted,   #677571);
  --sh-border: var(--c-border,  #d4dcd7);
  --sh-card:   var(--c-surface, #ffffff);

  --btn-bg:       var(--c-btn,       #8F6316);
  --btn-bg-hover: var(--c-btn-hover, #7B5513);
  --accent:       var(--c-accent,    #a8741a);

  /* Liseré + tuile par type de fichier (tokens charte) */
  --xls:  var(--t-xls,  #107C41);  --xls-bg:  var(--t-xls-bg,  #eaf4ee);
  --doc:  var(--t-doc,  #185ABD);  --doc-bg:  var(--t-doc-bg,  #eaf0f9);
  --ppt:  var(--t-ppt,  #C43E1C);  --ppt-bg:  var(--t-ppt-bg,  #fbeee9);
  --pbi:  var(--t-pbi,  #9a7d0a);  --pbi-bg:  var(--t-pbi-bg,  #fbf6e2);
  --quiz: var(--t-quiz, #107C41);  --quiz-bg: var(--t-quiz-bg, #e6f3ec);

  /* --radius, --radius-sm, --shadow, --shadow-hover : héritées de la charte. */
}

/* ════════════════════════════════════════════════════════
   1. CORRECTIONS THÈME — pleine largeur, sidebar, titre natif
   ════════════════════════════════════════════════════════ */
body.woocommerce-page .sidebar,
body.woocommerce-page #sidebar,
body.woocommerce-page aside.sidebar,
body.woocommerce-page .sidebars { display: none !important; }

body.woocommerce-page .content,
body.woocommerce-page #content .content,
body.woocommerce-page .post-content,
body.woocommerce-page .pagewrap {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Titre natif « Shop » masqué */
body.woocommerce-page .woocommerce-products-header,
body.woocommerce-page h1.page-title,
body.woocommerce-page .woocommerce-products-header__title { display: none !important; }

/* ════════════════════════════════════════════════════════
   2. LISTE PRODUITS — ul.products en colonne (bat columns-3/4)
   ════════════════════════════════════════════════════════ */
body.woocommerce-page ul.products,
body.woocommerce-page ul.products.columns-3,
body.woocommerce-page ul.products.columns-4 {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* La carte : on remet li.product en bloc — la grille liste est portée
   par .module_column (la structure interne de Themify Builder Pro). */
body.woocommerce-page ul.products li.product {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.woocommerce-page ul.products li.product:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-hover) !important;
}
body.woocommerce-page ul.products li.product .edit-button { display: none !important; }

/* On neutralise les wrappers Themify intermédiaires */
body.woocommerce-page ul.products li.product .tbp_advanced_archive_wrap,
body.woocommerce-page ul.products li.product .themify_builder_row,
body.woocommerce-page ul.products li.product .row_inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* La colonne Themify DEVIENT la grille liste : image | corps | prix+bouton */
body.woocommerce-page ul.products li.product .module_column {
  display: grid !important;
  grid-template-columns: 150px 1fr 190px;
  grid-template-areas:
    "img title price"
    "img desc  button";
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 18px 22px !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Liseré coloré en tête de carte, piloté par la catégorie.
   On gère les slugs RÉELS actuels ET les slugs cibles (après reclassement). */
body.woocommerce-page ul.products li.product::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  z-index: 2;
}
body.woocommerce-page ul.products li.product.product_cat-fichiers::before,
body.woocommerce-page ul.products li.product.product_cat-fichiers-excel::before,
body.woocommerce-page ul.products li.product.product_cat-excel::before     { background: var(--xls) !important; }
body.woocommerce-page ul.products li.product.product_cat-plugin::before,
body.woocommerce-page ul.products li.product.product_cat-word::before       { background: var(--doc) !important; }
body.woocommerce-page ul.products li.product.product_cat-powerpoint::before { background: var(--ppt) !important; }
body.woocommerce-page ul.products li.product.product_cat-powerbi::before,
body.woocommerce-page ul.products li.product.product_cat-power-bi::before    { background: var(--pbi) !important; }
body.woocommerce-page ul.products li.product.product_cat-quiz::before        { background: var(--quiz) !important; }

/* ── VIGNETTE (zone img) ── */
body.woocommerce-page ul.products li.product .module-product-image {
  grid-area: img !important;
  margin: 0 !important;
}
body.woocommerce-page ul.products li.product .module-product-image figure,
body.woocommerce-page ul.products li.product .module-product-image .product-image {
  margin: 0 !important;
  width: 150px !important;
  height: 112px !important;
  border-radius: 10px;
  border: 1px solid var(--sh-border);
  background: linear-gradient(160deg, #f3f9f5, var(--xls-bg));
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.woocommerce-page ul.products li.product .module-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* Tuile de fallback teintée par catégorie (visible si pas d'image) */
body.woocommerce-page ul.products li.product.product_cat-plugin .product-image,
body.woocommerce-page ul.products li.product.product_cat-word .product-image       { background: linear-gradient(160deg,#f2f6fc,var(--doc-bg)); }
body.woocommerce-page ul.products li.product.product_cat-powerpoint .product-image  { background: linear-gradient(160deg,#fcf3ef,var(--ppt-bg)); }
body.woocommerce-page ul.products li.product.product_cat-powerbi .product-image,
body.woocommerce-page ul.products li.product.product_cat-power-bi .product-image    { background: linear-gradient(160deg,#fcf9ec,var(--pbi-bg)); }
body.woocommerce-page ul.products li.product.product_cat-quiz .product-image        { background: linear-gradient(160deg,#f3f9f5,var(--quiz-bg)); }

/* ── TITRE (zone title) : retirer le cadre vert du gabarit, passer Fraunces ── */
body.woocommerce-page ul.products li.product .module-product-title {
  grid-area: title !important;
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
body.woocommerce-page ul.products li.product .module-product-title h3,
body.woocommerce-page ul.products li.product .module-product-title .tbp_title,
body.woocommerce-page ul.products li.product .module-product-title a {
  font-family: var(--font-display, 'Inter', system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
  color: var(--sh-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
}
body.woocommerce-page ul.products li.product .module-product-title a:hover { color: var(--accent) !important; }

/* ── DESCRIPTION (zone desc) ── */
body.woocommerce-page ul.products li.product .module-product-description {
  grid-area: desc !important;
  align-self: start !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--sh-muted) !important;
  margin: 0 !important;
}

/* ── PRIX (zone price) : Fraunces encre, € en exposant ── */
body.woocommerce-page ul.products li.product .module-product-price {
  grid-area: price !important;
  align-self: end !important;
  text-align: right !important;
  margin: 0 !important;
}
body.woocommerce-page ul.products li.product .module-product-price .price,
body.woocommerce-page ul.products li.product .module-product-price p {
  font-family: var(--font-display, 'Inter', system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--sh-ink) !important;
  margin: 0 !important;
  text-align: right !important;
}
body.woocommerce-page ul.products li.product .module-product-price .woocommerce-Price-currencySymbol {
  font-size: .62em;
  vertical-align: super;
  font-weight: 500;
  color: var(--sh-text);
  margin-left: 1px;
}

/* ── BOUTON (zone button) : ambre, MAJUSCULES — jamais de transition sur background (bug Chrome) ── */
body.woocommerce-page ul.products li.product .module-add-to-cart {
  grid-area: button !important;
  align-self: start !important;
  margin: 0 !important;
  text-align: right !important;
}
body.woocommerce-page ul.products li.product .module-add-to-cart a.button,
body.woocommerce-page ul.products li.product a.button.add_to_cart_button {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  background-color: var(--btn-bg) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  cursor: pointer;
  margin: 0 !important;
  transition: box-shadow .15s, transform .15s; /* jamais sur background */
}
body.woocommerce-page ul.products li.product .module-add-to-cart a.button:hover {
  background-color: var(--btn-bg-hover) !important;
}

/* ════════════════════════════════════════════════════════
   3. BARRE DE FILTRES (.boutique-filters injectée par le JS)
   ════════════════════════════════════════════════════════ */
.boutique-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.boutique-filters .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sh-text);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.boutique-filters .chip:hover { border-color: var(--accent); color: var(--btn-bg); }
.boutique-filters .chip.active {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: #fff;
}
.boutique-filters .chip .num {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11px;
  opacity: .7;
}
.boutique-filters .chip.active .num { opacity: .85; }

/* Produit masqué par le filtre JS */
body.woocommerce-page ul.products li.product.woo-filtered-out { display: none !important; }

/* ════════════════════════════════════════════════════════
   4. RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  body.woocommerce-page ul.products li.product .module_column {
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "img title"
      "img desc"
      "img price"
      "img button";
    align-items: start;
  }
  body.woocommerce-page ul.products li.product .module-product-image figure,
  body.woocommerce-page ul.products li.product .module-product-image .product-image { width: 120px !important; height: 90px !important; }
  body.woocommerce-page ul.products li.product .module-product-price,
  body.woocommerce-page ul.products li.product .module-product-price p,
  body.woocommerce-page ul.products li.product .module-add-to-cart { text-align: left !important; }
  body.woocommerce-page ul.products li.product .module-add-to-cart a.button { width: auto !important; padding: 9px 18px !important; }
  body.woocommerce-page ul.products li.product .module-product-price { margin: 8px 0 6px !important; }
}
@media (max-width: 600px) {
  body.woocommerce-page ul.products li.product .module_column {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "title"
      "desc"
      "price"
      "button";
    text-align: left;
  }
  body.woocommerce-page ul.products li.product .module-product-image figure,
  body.woocommerce-page ul.products li.product .module-product-image .product-image { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  body.woocommerce-page ul.products li.product .module-add-to-cart a.button { width: 100% !important; }
}

/*
 * ─────────────────────────────────────────────────────────────
 * SNIPPET functions.php (déjà installé) — pour mémoire :
 *
 * function excel_boutique_assets() {
 *     if ( is_shop() ) {
 *         wp_enqueue_style ( 'woocommerce-boutique', get_stylesheet_directory_uri().'/css/woocommerce-boutique.css', array(), '2.0.0' );
 *         wp_enqueue_script( 'boutique-filters',     get_stylesheet_directory_uri().'/js/boutique-filters.js',      array(), '2.0.0', true );
 *     }
 * }
 * add_action( 'wp_enqueue_scripts', 'excel_boutique_assets' );
 * ─────────────────────────────────────────────────────────────
 */