/**
 * Shine (thème enfant) — carte produit (miniature) : hover, rupture de stock,
 * labels / flags. Complète catalog.css (ne pas dupliquer les styles de base).
 *
 * Variables réutilisées : --shine-race (var(--shine-race)), --shine-ink (var(--shine-ink)).
 * Rouge « best-seller » demandé : var(--shine-flag-best). Noir « Exclu Web » : var(--shine-flag-web), texte blanc.
 */



/* ==========================================================================
   Rapatrié de header.css le 18/08/2026 — un composant, un fichier.
   Le quickview n'est pas un composant d'en-tête : il s'ouvre depuis une
   miniature et affiche un produit. Il vit donc avec la carte produit.
   ⚠ Placé en TÊTE de fichier : shine-miniature.css étant chargé APRÈS
   header.css, l'ordre relatif des déclarations est conservé — cascade intacte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Quickview restylé en BOTTOM SHEET (BAT V3) — ouvert depuis les listes de
   produits pour choisir une déclinaison avant l'ajout au panier.
   Markup du parent inchangé (contrats data-ps-* intacts) : habillage pur CSS.
   -------------------------------------------------------------------------- */

.quickview .modal-dialog {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: none !important; /* neutralise le slide-down du .modal.fade */
}

.quickview .modal-content {
  width: 100%;
  max-width: none; /* pleine largeur du site (demande client) */
  max-height: 88vh;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0 -20px 50px rgb(var(--shine-black-rgb) / 0.3);
  animation: shine-sheet-up 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* poignée de sheet */
.quickview .modal-content::before {
  display: block;
  flex: none;
  width: 42px;
  height: 5px;
  margin: 10px auto 2px;
  content: "";
  background: rgb(var(--shine-ink-rgb) / 0.15);
  border-radius: 3px;
}

.quickview .modal-header {
  padding: 0 18px;
  border: 0;
}

@keyframes shine-sheet-up {
  from {
    opacity: 0.4;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quickview .modal-content {
    animation: none;
  }
}

/* ---- Intérieur de la sheet quickview (BAT V3) ---- */

.shine-qv {
  display: block;
  width: 100%;
  max-width: 1280px; /* contenu aligné sur le gabarit du site */
  padding: 2px 22px 6px;
  margin: 0 auto;
  font-family: "Anek", system-ui, sans-serif;
  font-weight: 400;
}

/* desktop : 2 colonnes (produit/description | déclinaison/prix/CTA) */
@media (min-width: 921px) {
  .shine-qv {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 10px 56px;
    align-items: start;
    padding-block: 10px 14px;
  }

  .shine-qv__head {
    grid-column: 1;
    margin-bottom: 4px;
  }

  .shine-qv__desc {
    grid-column: 1;
    margin-bottom: 0;
  }

  .shine-qv__actions {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

.shine-qv__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.shine-qv__img {
  flex: none;
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--shine-ink-3), var(--shine-ink-5));
  border-radius: 14px;
}

.shine-qv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shine-qv__cat {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--shine-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.shine-qv__name {
  margin: 3px 0 2px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--shine-ink);
  text-transform: uppercase;
}

.shine-qv__brand {
  font-size: 12.5px;
  color: var(--shine-muted);
}

.shine-qv__desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--shine-ink-7);
}

.shine-qv__desc p {
  margin: 0;
}

.shine-qv__price-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 6px 0 12px;
}

.shine-qv__price-row .product__prices {
  margin: 0;
}

.shine-qv__price-row .product__current-price,
.shine-qv__price-row .current-price {
  font-family: "Saira", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--shine-ink);
}

.shine-qv__ship {
  font-size: 12.5px;
  color: var(--shine-muted);
}

/* déclinaisons : libellé façon BAT, select propre */
.shine-qv .product-variant__legend {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--shine-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cyliumee-pv__radio--btn input:checked ~ .cyliumee-pv__option {
  color: var(--shine-white);
  background: var(--shine-ink, var(--shine-ink));
  border-color: var(--shine-ink, var(--shine-ink));
}

/* CTA : gros bouton rouge pleine largeur ; quantité compacte à gauche */
.shine-qv .product__actions-qty-add {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.shine-qv .product__add-to-cart {
  flex: 1;
}

.shine-qv .product__add-to-cart-button {
  width: 100%;
  min-height: 52px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--shine-race);
  border: 0;
  border-radius: 13px;
}

.shine-qv .product__add-to-cart-button:hover {
  background: var(--shine-race-d);
}

.shine-qv__footer {
  justify-content: center;
  padding: 0 22px 22px;
  border: 0;
}

.shine-header ~ * .shine-qv__details,
.shine-qv__details {
  padding-bottom: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--shine-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--shine-race);
}

/* ==========================================================================
   Rapatrié de catalog.css le 18/08/2026 — un composant, un fichier.
   ⚠ Placé en TÊTE de fichier : shine-miniature.css étant chargé APRÈS catalog.css,
   l'ordre relatif des déclarations est conservé et la cascade ne bouge pas.
   ========================================================================== */



/* ----- Carte produit (BAT V3) ----- */
.shine-card {
  height: 100%;
}

.shine-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Cadre de carte retire le 19/08/2026 : la vignette se pose directement sur la
     page. Les trois declarations sont conservees en commentaire — les remettre
     est immediat si la grille parait trop nue une fois les visuels definitifs en
     place.
     ⚠ Le meme element porte aussi `.product-miniature__inner`, que le theme
     PARENT style dans theme.css (`background-color: var(--bs-body-bg)`). Le fond
     ne disparait donc pas en commentant la ligne ci-dessous : il repasse
     simplement sous la main du parent. C'etait le doublon signale. */
  /* background: var(--shine-surface, var(--shine-white)); */
  /* border: 1px solid var(--shine-line, var(--shine-line)); */
  /* border-radius: 16px; */
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Survol de la carte : UNIQUEMENT le zoom de la photo (+ fondu vers la 2e image),
   voir shine-miniature.css. Pas de translation, pas de bordure ni d'ombre rouges,
   pas de changement de couleur des textes (demande du 04/08/2026). */

/* média : cadre carré, photo produit centrée (contain, fond blanc — les
   visuels Shine sont détourés ; cover dark du BAT = placeholders) */
.shine-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--shine-white);
}

.shine-card__media .product-miniature__image-link,
.shine-card__media picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Le cadrage de l'image de miniature vit dans shine-miniature.css. */

/* badge / flags (promo, nouveauté…) */
.shine-card__media .product-flags,
.shine-card__media .product-flag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 0;
  margin: 0;
  list-style: none;
}

.shine-card__media .product-flag {
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  color: var(--shine-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--shine-race, var(--shine-race));
  border-radius: 6px;
}

/* bouton "aperçu rapide" du thème : discret, en survol */
.shine-card__media .product-miniature__quickview-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.shine-card__inner:hover .product-miniature__quickview-button {
  opacity: 1;
}

/* corps */
.shine-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 15px 15px 16px;
}

.shine-card__name {
  /* Réserve DEUX lignes : les noms courts gagnent l'espace sous eux, donc toutes les
     cartes gardent la même hauteur et la ligne prix + bouton reste alignée d'une carte
     à l'autre. Indispensable dans les carrousels (chaque diapositive se dimensionne sur
     son contenu), inoffensif dans la grille catégorie où les lignes s'égalisent déjà.
     Au-delà de deux lignes, le nom est coupé par des points de suspension : la carte
     garde sa hauteur, et un nom à rallonge ne décale plus le prix d'une carte sur
     l'autre. `-webkit-box` reste la seule écriture universellement comprise pour un
     nombre de lignes donné — `line-clamp` standard n'est pas encore partout. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.15em);
  margin-bottom: 4px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--shine-ink, var(--shine-ink));
  text-transform: uppercase;
  text-decoration: none;
}

/* pas de rouge au survol du nom : la couleur reste --shine-ink (shine-miniature.css) */

/* étoiles avis (productcomments) */
.shine-card .product-list-review {
  margin: 2px 0 4px;
}

.shine-card .grade-stars {
  --star-color: var(--shine-star);
}

/* pied : prix + bouton */
.shine-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  /* padding-top: 8px; */
}

.shine-card__price {
  font-family: "Saira", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--shine-ink, var(--shine-ink));
}

.shine-card__old {
  margin-top: 2px;
}

.shine-card__regular {
  font-size: 13px;
  color: var(--shine-muted, var(--shine-muted));
  text-decoration: line-through;
}

/* .shine-card__actions et .shine-card__form : voir shine-miniature.css. */

/* Charte 13/08/2026 — bouton de liste produits : vert sur noir, et l'inverse au
   survol. La bordure est explicite (et non `border: 0`) : c'est elle qui dessine
   le bouton dans l'état survolé comme dans l'état désactivé. */
.shine-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--shine-race);
  cursor: pointer;
  background: var(--shine-dark);
  border: 1.5px solid var(--shine-dark);
  border-radius: 11px;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.shine-card__add:hover {
  color: var(--shine-dark);
  background: var(--shine-race);
  border-color: var(--shine-race);
}

/* -------------------------------------------------------------------------
 * 1. Survol de la carte : les textes NE changent PAS de couleur (04/08/2026).
 *    Seule la carte reagit (translation + bordure/ombre rouges, catalog.css).
 *    On reaffirme --shine-ink pour neutraliser aussi le hover des liens herite
 *    du parent hummingbird.
 * ---------------------------------------------------------------------- */
.shine-card:hover .shine-card__name,
.shine-card__name:hover,
.shine-card:hover .shine-card__price {
  color: var(--shine-ink);
}

/* -------------------------------------------------------------------------
 * 1 bis. Survol : zoom de la photo + fondu vers la 2e image du produit
 *        (.shine-card__image-hover, posee par miniatures/product.tpl quand le
 *        produit a au moins deux images). Le debordement est deja coupe par
 *        l'overflow: hidden de .shine-card__inner (catalog.css).
 * ---------------------------------------------------------------------- */
.shine-card__media .product-miniature__image,
.shine-card__image-hover {
  transition: transform 0.35s ease, opacity 0.3s ease;
}

/* Rapatriés de catalog.css le 18/08/2026 : la miniature était décrite dans deux
   fichiers à la fois, et c'est ainsi que des styles finissent par diverger. */
.shine-card__media .product-miniature__image {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

.shine-card__actions {
  flex: none;
}

.shine-card__form {
  margin: 0;
}

.shine-card__image-hover {
  position: absolute;
  inset: 0;
  z-index: 1; /* sous les flags (z-index 2), au-dessus de la photo principale */
  width: 100%;
  height: 100%;
  padding: 8px; /* meme cadrage que .shine-card__media .product-miniature__image */
  object-fit: contain;
  background: var(--shine-white);
  opacity: 0;
  pointer-events: none; /* le lien de l'image reste cliquable */
}

.shine-card__inner:hover .product-miniature__image,
.shine-card__inner:hover .shine-card__image-hover {
  transform: scale(1.07);
}

.shine-card__inner:hover .shine-card__image-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .shine-card__media .product-miniature__image,
  .shine-card__image-hover {
    transition: opacity 0.3s ease;
  }

  .shine-card__inner:hover .product-miniature__image,
  .shine-card__inner:hover .shine-card__image-hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 2. Rupture de stock → bouton « + » visible mais grisé et non cliquable
 * ---------------------------------------------------------------------- */
/* Charte 13/08/2026 : blanc sur gris. L'opacité de 0.55 a été retirée — elle
   délavait des couleurs désormais choisies pour cet état précis. */
.shine-card__add--disabled,
.shine-card__add[disabled] {
  cursor: not-allowed;
  color: var(--shine-white);
  background: var(--shine-gray);
  border-color: var(--shine-gray);
}

/* Survol : le gris fonce. ⚠ `pointer-events: none` a été retiré — il empêchait le
   survol d'exister. Le bouton reste inopérant par son attribut `disabled`. */
.shine-card__add--disabled:hover,
.shine-card__add[disabled]:hover {
  color: var(--shine-white);
  background: var(--shine-dark-gray);
  border-color: var(--shine-dark-gray);
}

/* -------------------------------------------------------------------------
 * 3. Labels / flags (.shine-flag, poses par product-flags.tpl)
 *
 *    Ces pastilles n'ont PAS la classe Bootstrap `badge` : hummingbird colore
 *    `.product-flags .badge:not(.discount)` en bleu avec !important DANS UN @layer,
 *    et pour les declarations !important l'ordre des couches est inverse — notre CSS
 *    hors couche perdrait quelle que soit sa specificite. En sortant du selecteur du
 *    parent, on style librement, sans un seul !important. Les regles ne sont pas
 *    limitees a .shine-card__media : elles servent aussi la galerie de la fiche produit.
 * ---------------------------------------------------------------------- */

.product-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Base commune des pastilles : rouge Shine, texte blanc. */
.shine-flag {
  /* inline-flex et non inline-block : c'est ce qui met toutes les pastilles à la
     MÊME hauteur. En inline-block, la hauteur dépend de la boîte de ligne, donc
     du contenu — une pastille avec icône devenait plus haute que sa voisine sans.
     Avec `align-items: center` et une hauteur minimale, l'icône se cale sur le
     texte et toutes les pastilles s'alignent, quel que soit leur contenu. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--shine-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: var(--shine-race);
  border: 1px solid var(--shine-race);
  border-radius: 6px;
}

/* Icône éventuelle : elle suit la taille du texte et ne se déforme pas si le
   libellé est long. Le sélecteur descend aussi dans `.cyliumee-badge__icon`,
   l'enveloppe que pose le widget du module — une icône n'y est donc pas un
   enfant DIRECT de la pastille. */
/* ⚠ Icônes MASQUÉES, pas supprimées (demande du 19/08). Le balisage reste en
   place — celui du widget comme celui du thème — et les remettre tient en une
   ligne : passer ce bloc en `inline-flex`. Les règles de taille ci-dessous sont
   conservées pour ce jour-là. */
.shine-flag > i,
.shine-flag > svg,
.shine-flag > img,
.shine-flag .material-icons,
.shine-flag .cyliumee-badge__icon,
.cyliumee-badge .cyliumee-badge__icon {
  display: none;
  flex: 0 0 auto;
  width: auto;
  font-size: 12px;
  line-height: 1;
}

/* ⚠ Les pastilles rendues par le widget `cyliumee-badges` portent À LA FOIS
   `.shine-flag` et `.cyliumee-badge`, et leur géométrie est écrite dans les
   RÉGLAGES du widget Elementor — compilés dans le CSS du document, chargé après
   le thème. Une classe simple perd donc contre eux. La classe est répétée pour
   passer devant sans `!important`, et la même géométrie est appliquée aux deux
   familles : c'est ce qui met TOUTES les pastilles du site à la même hauteur,
   qu'elles viennent du thème ou du module.
   La bonne pratique reste de VIDER ces réglages dans le widget : une valeur
   saisie dans Elementor est recompilée à chaque sauvegarde de la page. */
.shine-flag.shine-flag,
.cyliumee-badge.cyliumee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  line-height: 1;
  /* 🔴 `!important` sur ces quatre propriétés seulement. Le CSS du document
     Elementor les écrit avec un sélecteur à quatre classes
     (`.elementor-9040101 .elementor-element.elementor-element-300ed2f .cyliumee-badge`) :
     aucune spécificité raisonnable ne passe devant. Le reste de la règle n'en a
     pas besoin et n'en porte pas. */
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

/* Remise (-20%, -3,70 €) : fond rouge Shine, texte blanc — comme la base. */
.shine-flag--discount,
.shine-flag--on-sale {
  color: var(--shine-dark);
  background: var(--shine-race);
  border-color: var(--shine-race);
}

/* Rupture de stock (charte 13/08/2026) : texte et contour gris foncé sur blanc —
   un état neutre, qui ne doit pas attirer l'œil comme une promotion. */
.shine-flag--out_of_stock,
.shine-flag--out-of-stock {
  color: var(--shine-dark-gray);
  background: var(--shine-white);
  border-color: var(--shine-dark-gray);
}

/* Best-seller / Top vente : rouge var(--shine-flag-best), texte blanc. */
.shine-flag--best-seller,
.shine-flag--best-sellers,
.shine-flag--top-seller,
.shine-flag--bestseller {
  color: var(--shine-white);
  background: var(--shine-flag-best);
  border-color: var(--shine-flag-best);
}

/* Pack : noir, texte blanc, contour noir (charte 13/08/2026). C'est une mention
   de nature, pas une promotion — elle ne doit pas capter l'œil comme le vert. */
/* Contour BLANC : la pastille est noire et se pose sur des visuels produit sombres,
   où un contour noir la faisait disparaître dans l'image (13/08/2026). */
.shine-flag--pack {
  color: var(--shine-white);
  background: var(--shine-dark);
  border-color: var(--shine-white);
}

/* Exclu Web (charte 13/08/2026) : texte et contour noirs sur le vert de marque. */
/* « Exclu web » n'est pas une promotion : le vert de marque, réservé aux prix et
   aux remises, y attirait l'œil pour une information de second rang. Fond noir,
   contour et texte gris — la pastille se lit sans crier. */
.shine-flag--online-only,
.cyliumee-badge--online.cyliumee-badge--online {
  color: var(--shine-gray);
  background: var(--shine-dark);
  border-color: var(--shine-border-neutral) !important;
}

/* Les autres types (new, pack…) gardent le rouge de base : seul le libellé change. */

/* ==========================================================================
   Correctifs mobile — checkup du 06/08/2026, session « maison »
   ========================================================================== */

/* PIED DE CARTE SUR PETIT ÉCRAN — corrige un bouton d'ajout inatteignable.
   En 2 colonnes à 375 px, la carte n'offre que ~109 px utiles alors que le pied
   (prix + bouton carré de 40 px côte à côte) en réclame 110 à 131 : l'overflow
   hidden du cadre rognait le bouton, qui devenait impossible à toucher.
   On empile donc le pied sous 480 px et on étire le bouton sur toute la largeur :
   plus rien n'est coupé, et la cible tactile passe de 40 px à toute la largeur
   de la carte (l'un des rares endroits où l'on atteint enfin la cible des 44 px). */
@media (max-width: 480px) {
  /* Gouttières latérales resserrées : à deux colonnes sur un téléphone, 15 px de
     chaque côté prennent près d'un tiers de la largeur utile du texte. */
  .shine-card__body {
    padding-left: 8px;
    padding-right: 8px;
  }

  .shine-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Prix en LIGNE : le prix courant et le prix barré côte à côte plutôt qu'empilés,
     ce qui rend au pied une hauteur de deux lignes au lieu de trois.
     `align-items: baseline` cale le prix barré sur la ligne d'écriture du prix
     courant — les deux n'ont ni la même taille ni la même graisse, un alignement
     par le haut ou par le bas les ferait boiter. */
  .shine-card__prices {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .shine-card__actions,
  .shine-card__form {
    width: 100%;
  }

  .shine-card__add {
    width: 100%;
    min-height: 44px;
  }
}