/**
 * Harmonisation visuelle — Studio Goodies
 *
 * Palette reprise du prototype stratégique fourni par le client, afin que la
 * boutique parle le même langage que le reste de la marque.
 * Sélecteurs volontairement ciblés : on ne touche ni à l'en-tête, ni au pied de
 * page, ni aux pages construites sous Elementor.
 */

:root{
  --sg-rose:#e50052; --sg-rose-fonce:#b90042;
  --sg-encre:#171719; --sg-papier:#f5f2ec; --sg-lime:#d9ff4f;
  --sg-gris:#69696f; --sg-trait:rgba(23,23,25,.14);
  --sg-rayon:10px;
  --sg-ombre:0 1px 2px rgba(23,23,25,.05), 0 8px 24px rgba(23,23,25,.06);
  --sg-ombre-forte:0 6px 14px rgba(23,23,25,.10), 0 18px 44px rgba(23,23,25,.12);
}

/* ─────────────────────────── Grille de produits ─────────────────────────── */

/* Grille véritable : toutes les cartes d'une rangée ont la même hauteur, et les
   marges latérales sont régulières. En flex, elles se calaient sur leur contenu,
   d'où les hauteurs inégales et les boutons désalignés. */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:1.5rem; margin:0; padding:0; list-style:none;
}
.woocommerce ul.products.columns-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.woocommerce ul.products.columns-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.woocommerce ul.products li.product{ width:auto !important; float:none !important; margin:0 !important; clear:none !important; }
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after{ display:none; }
@media(max-width:1100px){ .woocommerce ul.products.columns-4{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media(max-width:820px){ .woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media(max-width:520px){ .woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3{ grid-template-columns:1fr; } }

/* Section « Produits similaires » : un peu d'air autour. */
.related.products, .upsells.products{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--sg-trait); }
.related.products > h2, .upsells.products > h2{ margin-bottom:1.4rem; font-size:1.6rem; }

.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--sg-trait); border-radius:var(--sg-rayon);
  padding:0 0 1.1rem; margin:0; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--sg-ombre);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-3px); box-shadow:var(--sg-ombre-forte); border-color:rgba(229,0,82,.3);
}

/* L'image occupe toute la largeur de la carte, sans fond ni marge ajoutés :
   les photos produit ont déjà leur propre arrière-plan, en superposer un second
   créait un cadre dans le cadre. */
.woocommerce ul.products li.product a img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:0; background:none; padding:0;
  margin:0 0 .9rem; display:block;
  transition:transform .35s ease;
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__buttons,
.woocommerce ul.products li.product .sgd-btn{ margin-left:1rem; margin-right:1rem; }

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.98rem; line-height:1.32; font-weight:700; margin-bottom:.45rem;
  color:var(--sg-encre); min-height:2.6em;
}

/* Le prix était masqué par le thème : on le rétablit explicitement. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product .tiered-pricing-dynamic-price-wrapper{
  display:block !important; visibility:visible !important;
  font-size:1rem; font-weight:800; color:var(--sg-encre); margin-bottom:.8rem;
}
.woocommerce ul.products li.product .price del{ opacity:.45; font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--sg-rose); }
.woocommerce ul.products li.product .woocommerce-loop-product__buttons{ margin-top:auto; }

/* Bouton de la carte : plein, pour être identifiable au premier regard. */
.woocommerce ul.products li.product .sgd-btn--liste{
  background:var(--sg-rose); border-color:var(--sg-rose); color:#fff;
  width:calc(100% - 2rem); margin-top:auto;
}
.woocommerce ul.products li.product .sgd-btn--liste:hover{
  background:var(--sg-rose-fonce); border-color:var(--sg-rose-fonce);
}

/* Badges : cadrés pour ne pas dominer la vignette. */
.wpcbm-badge{ border-radius:999px !important; font-size:.68rem !important; letter-spacing:.02em; }

/* ───────────────────────────── Fiche produit ───────────────────────────── */

.single-product div.product .product_title{
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; letter-spacing:-.025em;
  margin:.3rem 0 .8rem; font-weight:800;
}
.single-product div.product p.price{
  font-size:2rem; font-weight:800; color:var(--sg-encre); margin:0 0 .3rem; line-height:1;
}
.single-product div.product p.price small{ font-size:.9rem; font-weight:600; color:var(--sg-gris); }
.single-product div.product .woocommerce-product-details__short-description{
  color:var(--sg-gris); font-size:1.02rem; line-height:1.6; margin-bottom:1.4rem;
}
.single-product .woocommerce-product-gallery img{ border-radius:var(--sg-rayon); }
.single-product .product_meta{
  font-size:.85rem; color:var(--sg-gris);
  border-top:1px solid var(--sg-trait); padding-top:1rem; margin-top:1.6rem;
}

/* Bloc d'ajout à la demande : c'est l'action principale de la page, il doit
   se lire comme telle. Fond encre, bouton plein, rappel de réassurance. */
.sgd-ajout{
  background:var(--sg-encre); color:#fff;
  border:0; border-radius:var(--sg-rayon);
  padding:1.5rem 1.6rem; margin:1.6rem 0;
  box-shadow:var(--sg-ombre-forte);
}
.sgd-ajout__label{
  display:block; font-size:.75rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:rgba(255,255,255,.65); margin-bottom:.6rem;
}
.sgd-ajout__ligne{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:stretch; }
.sgd-ajout__qte{
  width:7.5rem; padding:.85rem .9rem; border:0; border-radius:6px;
  font-size:1.05rem; font-weight:700; background:#fff; color:var(--sg-encre);
}
.sgd-ajout .sgd-btn{
  flex:1 1 14rem; background:var(--sg-rose); border-color:var(--sg-rose); color:#fff;
  font-size:1.02rem; padding:.85rem 1.5rem;
}
.sgd-ajout .sgd-btn:hover{ background:var(--sg-lime); border-color:var(--sg-lime); color:var(--sg-encre); }
.sgd-ajout__aide{ margin:.9rem 0 0; font-size:.85rem; color:rgba(255,255,255,.62); line-height:1.45; }

/* Réassurance sous le bloc d'action. */
.sgd-reassurance{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:1.1rem 0 0;
  font-size:.85rem; color:var(--sg-gris); list-style:none; padding:0;
}
.sgd-reassurance li{ display:flex; align-items:center; gap:.45rem; }
.sgd-reassurance li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sg-rose); flex:0 0 auto; }

/* Onglets */
.woocommerce-tabs ul.tabs{ border-bottom:2px solid var(--sg-trait); padding:0 !important; margin-bottom:1.6rem; }
.woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce-tabs ul.tabs li{
  background:none !important; border:0 !important; border-radius:0 !important;
  margin:0 1.8rem 0 0 !important; padding:0 !important; box-shadow:none !important;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce-tabs ul.tabs li a{
  padding:.75rem 0 !important; font-weight:700; color:var(--sg-gris) !important;
  display:inline-block; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--sg-encre) !important; border-bottom-color:var(--sg-rose); }
.woocommerce-tabs .panel h2:first-child{ display:none; }

/* ─────────────────────────── Filtres latéraux ─────────────────────────── */

.wpf_block, .woocommerce .widget, .wpf-filters{
  background:#fff; border:1px solid var(--sg-trait); border-radius:var(--sg-rayon);
  padding:1.1rem 1.2rem; margin-bottom:1.2rem; box-shadow:var(--sg-ombre);
}
.wpf_block .wpf_item_name, .woocommerce .widget .widget-title, .wpf_block_title{
  font-size:.8rem !important; text-transform:uppercase; letter-spacing:.06em;
  font-weight:800; color:var(--sg-encre); margin:0 0 .8rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--sg-trait);
}
.wpf_item_desc label, .woocommerce .widget li{ font-size:.92rem; line-height:1.9; }
.wpf_item_desc label:hover{ color:var(--sg-rose); cursor:pointer; }
.wpf_submit, .wpf_reset{ border-radius:6px !important; font-weight:700 !important; }

/* ─────────────────────────────── Boutons ─────────────────────────────── */

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt, .sgd-btn{
  border-radius:6px; font-weight:700; letter-spacing:.01em; padding:.75rem 1.3rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .sgd-btn:hover{
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(23,23,25,.14);
}
.woocommerce .button.alt, .sgd-btn--primaire{ background:var(--sg-rose); border-color:var(--sg-rose); color:#fff; }
.woocommerce .button.alt:hover, .sgd-btn--primaire:hover{ background:var(--sg-rose-fonce); border-color:var(--sg-rose-fonce); color:#fff; }

/* ──────────────────────────── En-têtes d'archive ────────────────────────── */

.woocommerce-products-header{ margin-bottom:1.6rem; }
.woocommerce-products-header__title{
  font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.02em; margin-bottom:.5rem;
}
.term-description{ color:var(--sg-gris); font-size:1rem; line-height:1.6; max-width:70ch; }
.term-description h3{ font-size:1.05rem; margin:1.2rem 0 .4rem; color:var(--sg-encre); }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select{
  font-size:.9rem; color:var(--sg-gris);
}

/* ──────────────────────────────── Pagination ──────────────────────────── */

.woocommerce nav.woocommerce-pagination ul{ border:0; gap:.4rem; display:flex; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--sg-trait); border-radius:6px; min-width:2.4rem; padding:.5rem .7rem; font-weight:700;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--sg-encre); border-color:var(--sg-encre); color:#fff;
}

@media(max-width:780px){
  .woocommerce ul.products li.product{ padding:.8rem .8rem 1rem; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:.92rem; min-height:0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Correctifs d'accessibilité — audit du 28/08/2026
   Mesures Playwright : ratios de contraste et zones tactiles réels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Titres produit écrits en blanc sur fond blanc (ratio 1,0 : illisibles).
      Le widget avait été réglé pour un fond sombre qui a changé depuis. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor-products-grid li.product .woocommerce-loop-product__title,
.elementor-widget-wc-archive-products .woocommerce-loop-product__title {
  color: var(--sg-encre) !important;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--sg-rose) !important; }

/* 2. Coordonnées du pied de page : rose #CC3366 sur #242424 donnait 3,1.
      En blanc sur ce fond on atteint 14:1, avec le rose réservé au survol. */
footer a[href^="tel:"], footer a[href^="mailto:"],
.elementor-location-footer a[href^="tel:"],
.elementor-location-footer a[href^="mailto:"] {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.4);
}
footer a[href^="tel:"]:hover, footer a[href^="mailto:"]:hover,
.elementor-location-footer a[href^="tel:"]:hover,
.elementor-location-footer a[href^="mailto:"]:hover {
  color: var(--sg-lime) !important; text-decoration-color: var(--sg-lime);
}

/* 3. Zones tactiles : 44 px minimum (norme WCAG 2.5.5 et recommandation Apple).
      Les items de menu et les boutons de filtre étaient à 30-40 px. */
.elementor-nav-menu a.elementor-item,
.wpf_item_desc label,
.wpf_submit, .wpf_reset,
.woocommerce nav.woocommerce-pagination ul li a {
  min-height: 44px; display: flex; align-items: center;
}
.woocommerce nav.woocommerce-pagination ul li a { justify-content: center; }
.wpf_item_desc label { padding: .3rem 0; }

/* 4. Débordement horizontal sur mobile : l'animation de titre Elementor et
      certains SVG dépassaient la largeur de l'écran. */
@media (max-width: 780px) {
  html, body { overflow-x: hidden; }
  .elementor-headline, .elementor-headline-dynamic-wrapper,
  .elementor-headline-dynamic-text { max-width: 100%; white-space: normal !important; }
  .elementor-inline-items { flex-wrap: wrap; }
  svg { max-width: 100%; height: auto; }
}

/* 5. Focus visible au clavier : absent, et exigé pour l'accessibilité. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sg-rose); outline-offset: 2px; border-radius: 3px;
}

/* 6. Respect de prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .woocommerce ul.products li.product:hover { transform: none; }
}