/* ============================================================
   FICHE PRODUIT refonte V2.5 — fashioncurvyshop.com (02/08/2026, refonte-code)
   Étape 5 de l'intégration. Déployé dans :
   wp-content/themes/enfold-child/refonte-fiche.css (STAGING)
   Source de vérité : maintenance-fcs/ux/refonte-fiche.css
   Enfilé par : functions.php, hook wp_enqueue_scripts, prio 999,
   UNIQUEMENT sur is_product() (voir fonction fcs_refonte_is_product_page()).

   Terrain : template WooCommerce/Enfold single-product natif. 0 surcharge
   de template (budget registre inchangé, 0/4) — tout par CSS + hooks
   WooCommerce standards. Les sélecteurs `#top #main` sont utilisés
   uniquement quand une règle doit battre une règle Enfold déjà posée
   avec cette spécificité (2 ID) — cf. leçon étape 4 (jamais de !important
   sauf quand la règle adverse est elle-même !important, cf. §9 badge SAG).

   ⚠️ Bouton cabine d'essayage (.fcs-btn-essayage) : rendu par le mu-plugin
   fcs-cabine-essayage.php (v1.2.0), JAMAIS touché. Ce fichier ne fait que
   le RESTYLER — voir §6. Le mu-plugin imprime ses propres <style> inline
   (color/text-decoration en !important) : nos règles de mise en page
   (border/background/padding/radius/display, non !important côté plugin)
   n'ont pas besoin de !important, mais ont besoin d'une spécificité
   supérieure à la simple classe `.fcs-btn-essayage` du plugin pour gagner
   quel que soit l'ordre d'impression dans le DOM (son <style> est imprimé
   en plein milieu du <body>, après notre <link> de <head> — à spécificité
   égale, la règle la PLUS TARDIVE dans le document gagne, donc la sienne).
   D'où le préfixe #top #main sur les règles de mise en page du bouton.
   ============================================================ */

/* ------------------------------------------------------------
   1. Cadre général de la page produit
   ------------------------------------------------------------ */
#top.single-product #main .container {
  color: var(--fcs-prune);
}

#top #main .single-product-summary,
#top #main .single-product-main-image {
  font-family: var(--fcs-font-text);
}

/* Fil d'Ariane : alignement charte (police + couleurs), structure Enfold intacte */
#top #main .breadcrumb.breadcrumbs {
  font-family: var(--fcs-font-text);
  font-size: 13px;
}
#top #main .breadcrumb .trail-begin,
#top #main .breadcrumb a {
  color: var(--fcs-text-subtle);
}
#top #main .breadcrumb a:hover {
  color: var(--fcs-framboise);
}
/* Fiche produit mobile : le bandeau de titre Enfold réserve ~115px pour un
   simple fil d'Ariane sur une ligne — compacté pour laisser de la place au
   contenu utile au-dessus de la ligne de flottaison (voir §2bis). */
@media (max-width: 767px) {
  #top.single-product .title_container {
    min-height: 0;
    padding: 10px 16px;
    /* Enfold réserve une hauteur bien supérieure au simple fil d'Ariane sur
       ce gabarit mobile (~90 px mesurés pour une ligne de texte de ~15 px),
       sans qu'aucune règle héritée explique la différence (ni padding, ni
       min-height, ni style inline trouvés) — plutôt que de continuer à
       chasser une cascade opaque, on plafonne la hauteur visible au
       nécessaire : le texte du fil d'Ariane tient largement dans 34px. */
    max-height: 34px;
    overflow: hidden;
  }
  #top.single-product .title_container .container {
    min-height: 0 !important;
    height: auto !important;
    padding: 0;
  }
  #top #main .breadcrumb.breadcrumbs { font-size: 11px; }
}

/* ------------------------------------------------------------
   2. Rangée produit : galerie + colonne d'infos
   ------------------------------------------------------------ */
#top.single-product #main div[id^="product-"].product {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 999px) {
  #top.single-product #main div[id^="product-"].product {
    display: block;
  }
}
/* Neutralise les floats/largeurs Enfold (alpha/omega) une fois passés en grid */
#top #main .single-product-main-image.alpha,
#top #main .single-product-summary {
  float: none;
  width: auto;
  margin: 0;
}

/* --- Galerie : vignettes en colonne + grande image (desktop) --- */
#top #main .woocommerce-product-gallery {
  position: relative;
}
#top #main .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  margin: 0;
}
#top #main .woocommerce-product-gallery__wrapper > a {
  display: block;
  flex: 1 1 auto;
  border-radius: var(--fcs-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 560px;
  background: var(--fcs-bg-soft);
}
#top #main .woocommerce-product-gallery__wrapper > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#top #main .woocommerce-product-gallery .thumbnails {
  display: flex;
  flex: 0 0 72px;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  max-height: 560px;
  overflow-y: auto;
}
#top #main .woocommerce-product-gallery .thumbnails a {
  display: block;
  flex: none;
  width: 72px;
  aspect-ratio: 3 / 4;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .8;
  transition: opacity var(--fcs-duration-micro) var(--fcs-ease-out),
              border-color var(--fcs-duration-micro) var(--fcs-ease-out);
}
#top #main .woocommerce-product-gallery .thumbnails a:hover,
#top #main .woocommerce-product-gallery .thumbnails a:focus-visible {
  opacity: 1;
}
/* Repère visuel simple (pas d'état JS de "vignette active" sur ce gabarit :
   le gestionnaire de galerie natif ouvre une lightbox par vignette, il ne
   permute pas l'image principale — voir rapport de livraison). */
#top #main .woocommerce-product-gallery .thumbnails a:first-child {
  border-color: var(--fcs-rose);
  opacity: 1;
}
#top #main .woocommerce-product-gallery .thumbnails a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge promo natif WooCommerce (.onsale), repositionné sur l'image.
   `position:relative` sur le conteneur est OBLIGATOIRE : sans lui, le badge
   (position:absolute) remonte s'ancrer sur le premier ancêtre positionné
   trouvé plus haut dans l'arbre — constaté en test réel, le badge héritait
   alors une largeur de 1159px au lieu de la taille de son texte. */
#top #main .single-product-main-image.alpha {
  position: relative;
}
#top #main .single-product-main-image .onsale {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
  /* `width:auto` sur un élément en position:absolute avec seulement `left`
     renseigné (pas `right`) se résout, selon l'algorithme CSS de largeur
     automatique, en s'étirant jusqu'au bord du bloc englobant plutôt qu'en
     s'ajustant au contenu — constaté en test réel (489px de large pour le
     texte "Promo !", quel que soit le `display` essayé). `width:max-content`
     force explicitement un ajustement au contenu, sans ambiguïté. */
  width: max-content;
  min-width: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  background: var(--fcs-prune);
  color: var(--fcs-white);
  font-family: var(--fcs-font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--fcs-radius-pill);
  line-height: 1.4;
}

/* --- Galerie en mode "swipe" plein écran sur mobile ---
   `display:contents` sur .thumbnails aplatit son contenu au même niveau
   que le lien de l'image principale : les vignettes deviennent des
   éléments flex directs, au même titre visuel qu'un carrousel swipe,
   SANS dupliquer le DOM ni toucher au JS natif (lightbox intacte). */
@media (max-width: 767px) {
  #top #main .woocommerce-product-gallery__wrapper {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 2px;
  }
  #top #main .woocommerce-product-gallery .thumbnails {
    display: contents;
  }
  #top #main .woocommerce-product-gallery__wrapper > a {
    flex: none;
    width: 78%;
    max-width: 320px;
    max-height: none;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
    border-radius: var(--fcs-radius-md);
  }
  #top #main .woocommerce-product-gallery .thumbnails a:first-child {
    border: none;
  }
  /* Vignettes plus courtes (format proche du prototype mobile, ~250×158) :
     un 3/4 portrait comme sur desktop occuperait ~330px de haut, bien trop
     pour rester au-dessus de la ligne de flottaison (660px, cf. §2bis). */
  #top #main .woocommerce-product-gallery__wrapper > a {
    width: 66%;
    max-width: 260px;
    aspect-ratio: 3 / 2;
  }
}

/* ------------------------------------------------------------
   2bis. Réordonnancement mobile de la colonne d'infos — CSS pur (flex +
   `order`), AUCUN déplacement DOM. Objectif mesuré sur la maquette V2.5 :
   le bouton cabine reste visible SANS scroller à 375×812 (bas du bouton
   ≤ ~660 px). Le prototype mobile place déjà les avis/description APRÈS
   les CTA (contrairement au desktop) — on reproduit cet ordre ici.
   Desktop non concerné (garde l'ordre naturel du HTML, pas de flex/order).
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #top #main .single-product-summary > .summary.entry-summary {
    display: flex;
    flex-direction: column;
  }
  #top #main .summary.entry-summary > .fcs-fiche-eyebrow { order: 1; }
  #top #main .summary.entry-summary > h1.product_title { order: 2; margin-bottom: 4px; }
  /* .fcs-price-row (créé en JS, voir initPriceKlarnaRow) regroupe le prix
     natif ET la mention Klarna sous un seul order — sans ce wrapper, ce
     sont deux items flex distincts qui occupent chacun leur propre ligne
     (flex-direction:column empêche deux enfants de partager une ligne). */
  #top #main .summary.entry-summary > .fcs-price-row { order: 3; }
  #top #main .summary.entry-summary > p.price { order: 3; margin-bottom: 0; }
  #top #main .summary.entry-summary > .fcs-fiche-klarna { order: 3; }
  #top #main .summary.entry-summary > .woocommerce-product-rating { order: 3; }
  #top #main .summary.entry-summary > form.cart { order: 5; }
  #top #main .summary.entry-summary > .fcs-fiche-reassurance { order: 6; }
  #top #main .summary.entry-summary > .fcs-fiche-trust { order: 7; margin: 14px 0; }
  #top #main .summary.entry-summary > .woocommerce-product-details__short-description { order: 8; }
  #top #main .summary.entry-summary > .fcs-clamp-toggle { order: 8; }
  #top #main .summary.entry-summary > .yith-wcwl-add-to-wishlist { order: 9; }
  #top #main .summary.entry-summary > .fcs-wa-product { order: 10; }
  #top #main .summary.entry-summary > .product_meta { order: 11; }
  #top #main .summary.entry-summary > .fcs-fiche-cabine-more { order: 12; }
  /* Éléments techniques vides (attribution de commande Stripe, alerte
     lecteur d'écran) : peu importe leur place, hors du flux visuel. */
  #top #main .summary.entry-summary > .reset_variations_alert,
  #top #main .summary.entry-summary > wc-order-attribution-inputs {
    order: 99;
  }

  /* H1 nettement plus compact sur mobile (22px, cf. maquette) que le
     clamp desktop (28-40px) : gain direct sur la hauteur au-dessus du pli.
     !important nécessaire : Enfold pose lui-même
     `#top #wrap_all .all_colors h1 { font-size:35px !important }` en
     media query mobile (avia-merged-styles) — seul un !important ciblé
     sur cette propriété peut le battre, même à spécificité supérieure
     (cf. correctif badge SAG de l'étape 4, même méthode). */
  #top #main h1.product_title.entry-title {
    font-size: 22px !important;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  /* Prix + mention Klarna sur une seule ligne compacte (comme la maquette) */
  .fcs-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }
  .fcs-price-row p.price,
  .fcs-price-row .fcs-fiche-klarna {
    margin: 0;
  }
  /* Repli SANS JS (initPriceKlarnaRow n'a pas tourné) : les deux restent
     empilés proprement plutôt que de casser la mise en page. */
  .fcs-fiche-klarna { margin: 0 0 10px; }

  /* Description courte : repoussée après les CTA (order 8 ci-dessus) ET
     tronquée avec un bouton "Lire la suite" — même mécanique que la
     description de catégorie de l'étape 4 (clamp CSS + bouton JS dédié,
     jamais le même sélecteur, juste le même principe réutilisé). */
  #top #main .woocommerce-product-details__short-description.fcs-clamp {
    max-height: 4.6em;
    overflow: hidden;
    position: relative;
  }
  #top #main .woocommerce-product-details__short-description.fcs-clamp::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--fcs-white));
  }
  #top #main .woocommerce-product-details__short-description.fcs-clamp.fcs-clamp-open {
    max-height: none;
    overflow: visible;
  }
  #top #main .woocommerce-product-details__short-description.fcs-clamp.fcs-clamp-open::after {
    display: none;
  }
  .fcs-clamp-toggle {
    display: inline-flex;
    margin-top: 6px;
    font-family: var(--fcs-font-text);
    font-size: 13px;
    color: var(--fcs-framboise);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    min-height: 32px;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   3. Colonne d'infos — éléments injectés par hooks
   ------------------------------------------------------------ */
.fcs-fiche-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--fcs-font-text);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fcs-framboise-clair);
  font-weight: 600;
  margin: 0 0 6px;
}
.fcs-fiche-badge {
  letter-spacing: .04em;
  text-transform: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--fcs-radius-pill);
}
.fcs-fiche-badge--new {
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
}
.fcs-fiche-badge--promo {
  background: var(--fcs-prune);
  color: var(--fcs-white);
}

#top #main h1.product_title.entry-title {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: var(--fcs-prune);
  margin: 0 0 10px;
}

.fcs-fiche-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--fcs-font-text);
}
.fcs-fiche-trust-stars {
  color: var(--fcs-rose);
  font-size: 14px;
  letter-spacing: .08em;
}
.fcs-fiche-trust-text {
  font-size: 13px;
  color: var(--fcs-text-muted);
}

#top #main .single-product-summary p.price,
#top #main .single-product-summary .woocommerce-variation-price .price {
  font-family: var(--fcs-font-title);
  font-size: 26px;
  color: var(--fcs-prune);
  margin: 0 0 12px;
  display: block;
}
#top #main .single-product-summary p.price ins { text-decoration: none; }
#top #main .single-product-summary p.price del {
  color: var(--fcs-text-subtle);
  font-size: 16px;
  margin-right: 8px;
  opacity: .8;
}

.fcs-fiche-klarna {
  display: inline-block;
  font-family: var(--fcs-font-text);
  font-size: 12px;
  color: var(--fcs-framboise);
  background: var(--fcs-bg-soft);
  border-radius: 6px;
  padding: 3px 8px;
  margin: -6px 0 14px;
}

#top #main .woocommerce-product-details__short-description {
  font-family: var(--fcs-font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fcs-text-muted);
  margin: 0 0 18px;
}
#top #main .woocommerce-product-details__short-description > *:first-child { margin-top: 0; }
#top #main .woocommerce-product-details__short-description > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   4. Variations : tableau natif masqué, remplacé visuellement par
      les pastilles/pilules générées par refonte-fiche.js (progressive
      enhancement — le <select> natif reste dans le DOM, cible réelle
      de WooCommerce, jamais retiré : juste masqué visuellement une
      fois les boutons prêts, via la classe posée par le JS).
   ------------------------------------------------------------ */
#top #main table.variations {
  width: 100%;
  border: none;
  margin: 0 0 16px;
}
#top #main table.variations tbody,
#top #main table.variations tr,
#top #main table.variations th,
#top #main table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: none;
  text-align: left;
}
#top #main table.variations tr + tr { margin-top: 16px; }
#top #main table.variations th.label {
  font-family: var(--fcs-font-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fcs-text-secondary);
  margin-bottom: 8px;
}
#top #main table.variations th.label label { font: inherit; color: inherit; }
#top #main table.variations .reset_variations {
  font-size: 12.5px;
  color: var(--fcs-framboise);
  text-decoration: none;
  border-bottom: 1px solid var(--fcs-rose);
  margin-left: 10px;
}

/* Select natif : masqué dès que le JS a posé la classe (fallback stylé
   proprement tant que le JS n'a pas encore tourné / si JS désactivé). */
#top #main table.variations select {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  padding: 12px 16px;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm);
  background: var(--fcs-white);
  min-height: 44px;
}
#top #main table.variations select.fcs-variation-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pilules générées (tailles, et attributs génériques hors couleur) */
.fcs-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fcs-swatch-pill {
  font-family: var(--fcs-font-text);
  font-size: 14px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm);
  background: var(--fcs-white);
  color: var(--fcs-prune);
  cursor: pointer;
  transition: border-color var(--fcs-duration-micro) var(--fcs-ease-out),
              background var(--fcs-duration-micro) var(--fcs-ease-out);
}
.fcs-swatch-pill:hover { border-color: var(--fcs-rose); }
.fcs-swatch-pill[aria-pressed="true"] {
  border-color: var(--fcs-framboise);
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
  font-weight: 600;
}
.fcs-swatch-pill[disabled] {
  color: var(--fcs-border);
  background: var(--fcs-bg-card);
  border-color: var(--fcs-border-light);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Pastilles couleur (rondes) */
.fcs-swatch-color {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: var(--fcs-radius-pill);
  border: 2px solid var(--fcs-border);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  flex: none;
}
.fcs-swatch-color[aria-pressed="true"] {
  border-color: var(--fcs-prune);
  box-shadow: inset 0 0 0 3px var(--fcs-white);
}
.fcs-swatch-color[disabled] {
  cursor: not-allowed;
  opacity: .35;
}
.fcs-swatch-color[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top right, transparent 46%, var(--fcs-text-subtle) 48%, var(--fcs-text-subtle) 52%, transparent 54%);
}

.fcs-swatch-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.fcs-swatch-value {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
}
.fcs-guide-tailles {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-framboise);
  text-decoration: none;
  border-bottom: 1px solid var(--fcs-rose);
  padding-bottom: 1px;
}
.fcs-guide-tailles:hover { color: var(--fcs-prune); }

.fcs-fiche-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: #b3261e;
  font-weight: 500;
  margin-top: 6px;
}

/* ------------------------------------------------------------
   5. Ligne quantité + bouton + cabine (structure NATIVE : ces 3
      éléments sont déjà des frères directs, produit variable
      (.variations_button) ou simple (form.cart) — voir rapport,
      aucun display:contents nécessaire).
   ------------------------------------------------------------ */
#top #main form.cart:not(.variations_form),
#top #main .woocommerce-variation-add-to-cart.variations_button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "qty qty" "btn cab";
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}
#top #main .single_variation_wrap { display: block; }
#top #main .woocommerce-variation.single_variation:empty { display: none; }

#top #main .quantity { grid-area: qty; }
#top #main .quantity .qty {
  height: 56px;
  min-width: 90px;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-pill);
  padding: 0 20px;
  font-family: var(--fcs-font-text);
  font-size: 16px;
  color: var(--fcs-prune);
  text-align: center;
}

#top #main .single_add_to_cart_button.button {
  grid-area: btn;
  height: 56px;
  min-height: 0;
  margin: 0;
  background: var(--fcs-framboise);
  border: none;
  border-radius: var(--fcs-radius-pill);
  color: var(--fcs-white);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fcs-duration-fast) var(--fcs-ease-out);
}
#top #main .single_add_to_cart_button.button:hover,
#top #main .single_add_to_cart_button.button:focus-visible {
  background: var(--fcs-framboise-clair);
}
#top #main .single_add_to_cart_button.disabled {
  background: var(--fcs-border);
  cursor: not-allowed;
}

/* --- Bouton cabine (.fcs-btn-essayage, mu-plugin, INTERDIT d'y toucher) ---
   Voir bandeau en tête de fichier : #top #main nécessaire pour battre les
   propriétés NON !important du <style> inline du plugin (border/background/
   padding/radius/display), impression tardive dans le <body> oblige. */
#top #main .fcs-btn-essayage {
  grid-area: cab;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  background: var(--fcs-bg-soft);
  border: 1.5px solid var(--fcs-framboise);
  border-radius: var(--fcs-radius-pill);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--fcs-duration-fast) var(--fcs-ease-out);
}
#top #main .fcs-btn-essayage:hover {
  background: var(--fcs-rose-clair);
}
/* Couleur de texte : la règle du plugin est elle-même !important (voir
   bandeau en tête) — seul un !important peut la battre, avec la même
   spécificité renforcée pour ne dépendre d'aucun ordre de cascade. */
#top #main .fcs-btn-essayage,
#top #main .fcs-btn-essayage:hover {
  color: var(--fcs-framboise) !important;
}

@media (max-width: 480px) {
  #top #main form.cart:not(.variations_form),
  #top #main .woocommerce-variation-add-to-cart.variations_button {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #top #main .quantity { min-width: 0; }
}

/* Compaction supplémentaire mobile : pastilles/boutons + espacements resserrés
   pour tenir sous la ligne de flottaison de la maquette (voir §2bis). Tailles
   tactiles gardées ≥ 44px (seuil imposé), seuls les espaces autour rétrécissent. */
@media (max-width: 767px) {
  .fcs-swatch-wrap + .fcs-swatch-wrap { margin-top: 4px; }
  .fcs-swatch-label-row { margin-bottom: 6px; }
  /* Pilules de taille (texte, ex. "T3(46/48)") : en grille à colonnes
     égales plutôt qu'en flex-wrap, pour tenir sur UNE seule ligne à 375px
     quel que soit le nombre d'options — évite un retour à la ligne qui
     double la hauteur de cette rangée (mesuré : 140px sur 2 lignes contre
     ~50px sur 1 seule). Dégradation gracieuse si :has() n'est pas supporté
     (repli identique au flex-wrap actuel, non bloquant). Les pastilles
     couleur (rondes) restent en flex, une grille serait inutile pour elles. */
  .fcs-swatch-row:has(.fcs-swatch-pill) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  }
  .fcs-swatch-row:has(.fcs-swatch-pill) .fcs-swatch-pill {
    padding: 0 6px;
  }
  #top #main .quantity .qty,
  #top #main .single_add_to_cart_button.button,
  #top #main .fcs-btn-essayage {
    height: 48px;
  }
  #top #main form.cart:not(.variations_form),
  #top #main .woocommerce-variation-add-to-cart.variations_button {
    gap: 10px;
    margin-top: 2px;
  }
  #top #main .single-product-summary { padding-top: 4px; }

  /* Marges verticales par défaut (Enfold + notre propre padding desktop)
     entre galerie et colonne d'infos : mesurées à 52px avant la galerie et
     77px après sur ce gabarit — bien plus que nécessaire une fois empilé
     en une seule colonne mobile. Resserré au strict nécessaire. */
  #top #main .single-product-main-image.alpha {
    margin: 0 0 12px;
    padding: 0;
  }
  #top #main .single-product-summary {
    margin-top: 0;
  }
  #top #main div[id^="product-"].product {
    gap: 0;
    padding-top: 0;
  }
  /* Trouvé via mesure : `.container_wrap.template-shop` réserve 50px de
     padding-top (hérité du gabarit boutique desktop) avant même le
     conteneur produit — plus aucune raison d'être une fois la fiche
     compactée pour tenir sous la ligne de flottaison mobile. */
  #top.single-product .container_wrap.template-shop {
    padding-top: 12px;
  }
  /* Marge de la table cachée : sa hauteur ne compte plus (lignes display:none
     posées par le JS), mais sa propre margin-bottom continuait à pousser le
     bloc suivant de 16px pour rien. */
  #top #main table.variations { margin-bottom: 0; }
  #top #main .single_variation_wrap { margin-top: 4px; }
}

/* ------------------------------------------------------------
   6. Réassurance mini-cartes + liste de souhaits + WhatsApp + meta
   ------------------------------------------------------------ */
.fcs-fiche-reassurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 0;
}
.fcs-fiche-reassurance-item {
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcs-fiche-reassurance-item strong {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcs-prune);
}
.fcs-fiche-reassurance-item span {
  font-family: var(--fcs-font-text);
  font-size: 12px;
  color: var(--fcs-text-subtle);
}
@media (max-width: 480px) {
  .fcs-fiche-reassurance { grid-template-columns: 1fr; }
}

/* Wishlist YITH : bouton pilule pleine largeur sous les CTA (choix simple
   et robuste — cf. rapport, l'inline avec le stepper quantité aurait
   demandé un aplatissement display:contents multi-niveaux du <form>,
   jugé disproportionné pour un gain visuel mineur). */
#top #main .single-product-summary .yith-wcwl-add-to-wishlist {
  margin: 14px 0 0;
}
#top #main .yith-wcwl-add-to-wishlist a.add_to_wishlist,
#top #main .yith-wcwl-add-to-wishlist .yith-wcwl-icon,
#top #main .yith-wcwl-add-to-wishlist .add-to-wishlist-text {
  font-family: var(--fcs-font-text);
}
#top #main .yith-wcwl-add-to-wishlist a.add_to_wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--fcs-framboise);
  font-size: 14px;
  text-decoration: none;
}
#top #main .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover { color: var(--fcs-prune); }

/* Lien WhatsApp "Une question sur ce modèle ?" (mu-plugin fcs-whatsapp.php,
   INTERDIT d'y toucher) : simple espacement, aucune propriété de fond/texte
   modifiée pour ne pas interférer avec son propre style. */
#top #main .single-product-summary .fcs-wa-product {
  margin: 8px 0 0;
  font-family: var(--fcs-font-text);
}

#top #main .product_meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fcs-border-light);
  font-family: var(--fcs-font-text);
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
}
#top #main .product_meta a { color: var(--fcs-text-subtle); }
#top #main .product_meta a:hover { color: var(--fcs-framboise); }

.fcs-fiche-cabine-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-framboise);
  text-decoration: none;
  border-bottom: 1px solid var(--fcs-rose);
  padding-bottom: 2px;
}
.fcs-fiche-cabine-more:hover { color: var(--fcs-prune); }

/* ------------------------------------------------------------
   7. Onglets natifs → habillage "accordéon" (CSS pur, JS de tabulation
      natif WooCommerce INCHANGÉ : il ajoute déjà la classe .active au
      <li> cliqué et bascule l'affichage des .panel — on ne fait ici que
      restyler, jamais réimplémenter cette logique). Voir rapport pour la
      vérification en navigateur réel de ce comportement.
   ------------------------------------------------------------ */
#top #main .woocommerce-tabs.wc-tabs-wrapper {
  margin-top: 24px;
  border-top: 1px solid var(--fcs-border-light);
}
#top #main ul.tabs.wc-tabs {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
#top #main ul.tabs.wc-tabs li {
  margin: 0;
  border-bottom: 1px solid var(--fcs-border-light);
}
#top #main ul.tabs.wc-tabs li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 2px;
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fcs-prune);
  text-decoration: none;
}
#top #main ul.tabs.wc-tabs li a::after {
  content: "+";
  color: var(--fcs-framboise);
  font-size: 18px;
  font-weight: 400;
  margin-left: 12px;
}
#top #main ul.tabs.wc-tabs li.active a::after {
  content: "\2212"; /* − */
}
#top #main .woocommerce-Tabs-panel {
  padding: 0 2px 18px;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fcs-text-muted);
}
#top #main .woocommerce-Tabs-panel h2 {
  font-family: var(--fcs-font-title);
  font-size: 20px;
  font-weight: 400;
  color: var(--fcs-prune);
}
#top #main .woocommerce-product-attributes.shop_attributes {
  border: none;
  font-size: 13.5px;
}
#top #main .woocommerce-product-attributes.shop_attributes th,
#top #main .woocommerce-product-attributes.shop_attributes td {
  border: none;
  border-bottom: 1px solid var(--fcs-border-light);
  padding: 8px 0;
}

/* ------------------------------------------------------------
   8. "Vous aimerez aussi" (produits liés natifs WooCommerce —
      mêmes classes que la grille d'accueil : ul.products > li.product,
      h2.woocommerce-loop-product__title, .price).
   ------------------------------------------------------------ */
#top #main .related.products {
  margin-top: 56px;
  padding-top: 8px;
}
#top #main .related.products > h2 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--fcs-prune);
  margin: 0 0 26px;
}
#top #main .related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#top #main .related.products ul.products li.product {
  margin: 0;
  width: auto;
  float: none;
}
#top #main .related.products ul.products li.product a img {
  border-radius: var(--fcs-radius-md);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .5s var(--fcs-ease-out);
}
#top #main .related.products ul.products li.product a:hover img {
  transform: scale(1.04);
}
#top #main .related.products ul.products .woocommerce-loop-product__title {
  font-family: var(--fcs-font-text);
  font-size: 14.5px;
  color: var(--fcs-text-secondary);
  margin: 12px 0 2px;
}
#top #main .related.products ul.products .price {
  font-family: var(--fcs-font-title);
  font-size: 16px;
  color: var(--fcs-prune);
}
@media (max-width: 999px) {
  #top #main .related.products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #top #main .related.products ul.products {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }
  #top #main .related.products ul.products li.product {
    flex: none;
    width: 150px;
  }
}

/* ------------------------------------------------------------
   9. Widget tiers "Société des Avis Garantis" (badge flottant JS,
      wcsag-widget-js) : jamais touché, juste vérifié qu'il ne chevauche
      rien de nouveau (barre sticky mobile — voir §10). Sa règle
      .agJsWidget est elle-même !important (constaté étape 4) : si un
      chevauchement apparaissait ici, le même correctif !important ciblé
      serait à reprendre — non nécessaire à ce stade (vérifié en test).
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   10. Barre CTA sticky mobile — éléments DÉDIÉS (construits par
       fcs_refonte_fiche_sticky_bar(), injectés en wp_footer), AUCUN
       clonage de l'innerHTML du formulaire. Les clics déclenchent le
       VRAI bouton natif via refonte-fiche.js. PAS de bouton cabine ici
       (interdiction absolue de dupliquer .fcs-btn-essayage).
   ------------------------------------------------------------ */
.fcs-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--fcs-white);
  border-top: 1px solid var(--fcs-border-light);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  gap: 12px;
  box-shadow: 0 -6px 20px rgba(42, 22, 32, .08);
  font-family: var(--fcs-font-text);
}
@media (max-width: 767px) {
  .fcs-sticky-cta.is-visible { display: flex; }
}
.fcs-sticky-cta-info {
  display: flex;
  flex-direction: column;
  flex: none;
  max-width: 34%;
}
.fcs-sticky-cta-size {
  font-size: 11px;
  color: var(--fcs-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcs-sticky-cta-price {
  font-family: var(--fcs-font-title);
  font-size: 19px;
  color: var(--fcs-prune);
}
.fcs-sticky-cta-add {
  flex: 1;
  height: 50px;
  border: none;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.fcs-sticky-cta-add:disabled {
  background: var(--fcs-border);
  cursor: not-allowed;
}
/* CORRECTIF refonte-compat (03/08/2026, 2e REFUS, nouvelle approche imposée
   par le manager) : le cœur de la barre sticky est maintenant le VRAI
   bouton YITH natif (shortcode [yith_wcwl_add_to_wishlist], rendu
   SERVEUR — voir fcs_refonte_fiche_sticky_bar() dans functions.php), pas
   un bouton factice synchronisé en JS. Ciblage par la classe STABLE et
   native `.add_to_wishlist` (pas de classe personnalisée : `link_classes`
   en attribut de shortcode est silencieusement ignoré par YITH, vérifié
   dans le code source du plugin — `get_button_classes()` calcule
   toujours cette classe, aucun setter ne la rend modifiable). Le HTML
   natif imbrique 2 niveaux de <div> (.yith-wcwl-add-to-wishlist >
   .yith-wcwl-add-button) autour du <a> réel — `display:contents` les
   rend transparents à la mise en page flex de `.fcs-sticky-cta`, sans
   dupliquer ni déplacer aucun DOM. Portée limitée à `.fcs-sticky-cta` :
   la wishlist native de la fiche produit (buy box) n'est pas concernée. */
.fcs-sticky-cta .yith-wcwl-add-to-wishlist,
.fcs-sticky-cta .yith-wcwl-add-button {
  display: contents;
}
.fcs-sticky-cta a.add_to_wishlist {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--fcs-radius-pill);
  border: 1.5px solid var(--fcs-border);
  background: var(--fcs-white);
  color: var(--fcs-framboise);
  font-size: 18px;
  /* !important constaté nécessaire en test réel : le JS natif de YITH
     enrichit ce lien après coup (classe `tooltip-added` ajoutée par son
     propre widget d'info-bulle), et malgré une spécificité à égalité avec
     la seule règle plugin trouvée pour ce sélecteur (qui ne fixe d'ailleurs
     pas `display`), le rendu observé restait `display:block` sans qu'aucune
     règle concurrente n'ait pu être identifiée avec certitude via
     l'inspection de `document.styleSheets` — !important lève l'ambiguïté
     sans risque, cf. même réflexe déjà documenté pour le badge SAG. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none;
  cursor: pointer;
}
.fcs-sticky-cta a.add_to_wishlist svg {
  width: 20px;
  height: 20px;
}
/* Cœur seul, comme la maquette — le libellé texte natif de YITH ("Ajouter
   à la liste de souhaits") est conservé pour les lecteurs d'écran (technique
   "sr-only", pas un display:none qui supprimerait aussi le nom accessible
   du lien : ce <a> n'a pas d'aria-label propre dans le template YITH). */
.fcs-sticky-cta a.add_to_wishlist span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* État "déjà dans la liste" — markup RÉEL constaté en test réel (ajout
   effectif via le lien, cookie de session conservé) : PAS un simple ajout
   de classe sur le même <a>, mais un bloc entièrement différent,
   `<div class="yith-wcwl-wishlistaddedbrowse"><span class="feedback">
   ICÔNE + "Produit ajouté!"</span><a>Parcourir la liste de souhaits</a>
   </div>` (comportement "browse", réglage `yith_wcwl_after_add_to_wishlist_behaviour`
   de ce site — jamais modifié). Compacté en cœur plein (même cercle,
   même palette) pour la barre sticky : le texte de confirmation est masqué
   visuellement (`font-size:0`, pas `display:none` — le SVG a sa propre
   taille en CSS, indépendante du texte ; ne supprime aucun texte du DOM,
   seulement son rendu visuel dans ce contexte précis) plutôt que de
   reproduire un cœur "creux vs plein" inexistant dans ce gabarit YITH. Le
   lien "Parcourir la liste de souhaits" (texte réel toujours présent, vers
   la vraie page liste de souhaits) reste dans le DOM pour les lecteurs
   d'écran, visuellement réduit à la même taille de cercle. */
.fcs-sticky-cta .yith-wcwl-wishlistaddedbrowse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  position: relative;
}
.fcs-sticky-cta .yith-wcwl-wishlistaddedbrowse .feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* masque "Produit ajouté!" sans toucher au DOM */
}
.fcs-sticky-cta .yith-wcwl-wishlistaddedbrowse .feedback svg {
  width: 20px;
  height: 20px;
  color: var(--fcs-white);
}
.fcs-sticky-cta .yith-wcwl-wishlistaddedbrowse > a {
  position: absolute;
  inset: 0;
  font-size: 0; /* masque "Parcourir la liste de souhaits", lien gardé cliquable pleine zone */
}

/* Le bandeau WhatsApp flottant (mu-plugin fcs-whatsapp.php, bas-gauche)
   doit s'effacer quand la barre CTA sticky est visible. Même convention que
   le correctif tiroir mobile de l'étape 2 (html.fcs-drawer-open) : classe
   posée sur <html> par refonte-fiche.js, pas de dépendance à :has(). */
html.fcs-sticky-cta-visible .fcs-wa-float {
  display: none;
}

/* CORRECTIF refonte-compat (03/08/2026, REFUS bloquant) : le badge tiers
   « Société des Avis Garantis » (.agJsWidget, fixed bas-droite, z-index
   9990) chevauchait le bouton « Ajouter au panier » de la barre CTA sticky
   (~58×50px de zone morte au clic, mesurée). C'est la MÊME collision déjà
   corrigée à l'étape 4 (badge SAG vs pied du tiroir de filtres) — j'aurais
   dû reproduire ce correctif ici dès la première livraison de tout
   flottant/sticky, pas seulement pour WhatsApp. Sa règle .agJsWidget est
   elle-même !important (constaté étape 4, confirmé ici) : seul un
   !important peut la battre. Widget tiers jamais touché (ni script, ni
   réglages) — uniquement cette règle CSS côté refonte. */
html.fcs-sticky-cta-visible .agJsWidget {
  display: none !important;
}

/* CORRECTIF refonte-compat (03/08/2026, recommandé perf) : la barre CTA
   sticky (position:fixed, bas d'écran) peut recouvrir la fin de "Produits
   similaires" / le footer si aucun espace n'est réservé en dessous. Padding
   de réserve = hauteur réelle de la barre (mesurée ~70px avec l'encoche
   iOS), posé sur .single-product-summary (dernier bloc de contenu avant le
   footer sur ce gabarit) uniquement quand la barre est visible. */
@media (max-width: 767px) {
  html.fcs-sticky-cta-visible #top #main {
    padding-bottom: 78px;
  }
}

/* ==================================================================
   CORRECTIF 03/08/2026 — même bug sitewide que l'accueil (règle Enfold
   #top #wrap_all .all_colors h1/h2/h3 → birthstone-regular-ttf 80/70/40px)
   confirmé sur la fiche produit : onglets Description/Informations et
   « Produits similaires » en écriture manuscrite géante. Rejeu des valeurs
   voulues avec le préfixe #top #main.all_colors (2 ID + 2 classes) —
   motif éprouvé ce matin sur accueil/footer/catégorie, aucun !important
   hors media query (Enfold force font-size en !important sous 768px,
   constaté à l'étape 8). Réf. maquette V2.5 frames `fiche`.
   ================================================================== */
#top #main.all_colors h1.product_title {
  font-family: var(--fcs-font-title);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
}
#top #main.all_colors .woocommerce-tabs h2,
#top #main.all_colors .woocommerce-Tabs-panel h2,
#top #main.all_colors .products > h2,
#top #main.all_colors .related h2,
#top #main.all_colors .up-sells h2 {
  font-family: var(--fcs-font-title);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}
#top #main.all_colors h2.woocommerce-loop-product__title {
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  #top #main.all_colors h1.product_title { font-size: 24px !important; }
  #top #main.all_colors .woocommerce-tabs h2,
  #top #main.all_colors .woocommerce-Tabs-panel h2,
  #top #main.all_colors .products > h2 { font-size: 20px !important; }
  #top #main.all_colors h2.woocommerce-loop-product__title { font-size: 14px !important; }
}
