/* Presentoirs categories (boutique) - animation au survol
   Le corps du presentoir (le croissant sous la ligne, hors du bol)
   se remplit en montant. Meme duree et meme courbe que les boutons
   de sous-categories (.cv-filter-btn).

   Geometrie reprise du SVG de fond du presentoir (repere 200x200) :
     ligne horizontale  y = 113        -> 56.5 %
     arc du bol         rx 69 / ry 63  -> 34.5 % / 31.5 %
   Si le dessin change, ce sont ces 3 valeurs a mettre a jour. */

.cv-wrap .cv-cat-btn {
  position: relative;
}

.cv-wrap .cv-cat-btn::after {
  content: "";
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50% !important;

  /* remplissage qui monte depuis le bas du cercle */
  background: linear-gradient(to top, #2e2417 50%, transparent 50%) !important;
  background-size: 100% 200% !important;
  background-position: 0 0 !important;

  /* on ne garde que la partie sous la ligne horizontale... */
  clip-path: inset(56.5% 0 0 0);
  /* ...et on evide l'interieur du bol */
  -webkit-mask-image: radial-gradient(ellipse 34.5% 31.5% at 50% 56.5%, transparent 99.5%, #000 100%);
  mask-image: radial-gradient(ellipse 34.5% 31.5% at 50% 56.5%, transparent 99.5%, #000 100%);

  transition: background-position .45s cubic-bezier(.22, .61, .36, 1) !important;
  pointer-events: none;
  z-index: 1;
}

.cv-wrap .cv-cat-btn:hover::after {
  background-position: 0 100% !important;
}

/* La categorie de la page en cours reste remplie en permanence,
   mais en dore plutot qu'en brun, et sans l'icone a l'interieur du bol.
   Selecteurs repetes : Elementor pose ces valeurs en !important avec
   quatre classes, il faut passer devant. */
.cv-wrap .cv-cats .cv-cat-btn.active::after {
  background: linear-gradient(to top, #B29760 50%, transparent 50%) !important;
  background-size: 100% 200% !important;
  background-position: 0 100% !important;
}

/* on masque la couche d'icone (1re des deux images de fond) sans
   toucher au trace du presentoir (2e couche).
   Desktop uniquement : en mobile le presentoir est redessine plus bas
   et n'a qu'une seule couche. */
@media (min-width: 768px) {
  .cv-wrap .cv-cats .cv-cat-btn.active.active.active {
    background-size: 0 0, 100% 100% !important;
  }
}

/* ---- Version mobile ----
   Elementor ne dessine les presentoirs qu'a partir de 768px : en dessous,
   les categories redeviennent de simples boutons rectangulaires.
   On redessine ici les memes cercles, sur une seule ligne que l'on fait
   defiler au doigt.
   NB : le trace du presentoir est redefini en CSS ci-dessous. Si le dessin
   est modifie dans Elementor, il faudra reporter la modif ici. */
@media (max-width: 767px) {

  /* la rangee devient un rail horizontal */
  .cv-wrap .cv-cats {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 16px 6px !important;
  }

  .cv-wrap .cv-cats::-webkit-scrollbar { display: none; }

  .cv-wrap .cv-cat-btn {
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    display: block !important;
    white-space: normal !important;
    text-wrap: balance;
    text-align: center !important;
    width: 110px !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 50% !important;
    border:2px solid #402E15 !important;
    color:#402E15 !important;
    background-color: #fffbf0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='3' y1='113' x2='197' y2='113' stroke='%232e2417' stroke-width='3.6'/%3E%3Cpath d='M 31 113 A 69 63 0 0 0 169 113' fill='none' stroke='%232e2417' stroke-width='3'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
    /* padding en px : en % il se calculerait sur la largeur du rail */
    padding: 22px 14px 0 !important;
  }

  .cv-wrap .cv-cat-btn.active {
    color:#B29760 !important;
    border-color:#B29760 !important;
    background-color: #fffbf0 !important;
  }
}