/**
 * Pills AB - Divi 5 custom module (parent + child)
 * Variantes: rouge (défaut, bordure rouge / texte noir), noir, blanc.
 * Layout: piloté par le parent (flex-row wrap par défaut, flex-col, grid, block, inline).
 * Effet de fill hover commenté 2026-09-16 (pills statiques). Décommenter pour réactiver.
 */

.ab-pills {
  --ab-pill-radius: 5px;
  --ab-pill-padding-y: 10px;
  --ab-pill-padding-x: 20px;
  --ab-pill-border-width: 1px;
  --ab-pill-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  --ab-rouge: #F62E02;
  --ab-blanc: #FCFBF7;
  --ab-noir:  #222222;

  box-sizing: border-box;
}

/* Container par défaut (fallback si le CSS scopé du parent n'est pas encore émis) */
.ab-pills__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

/* Builder preview : quand les enfants sont rendus en isolation par Divi,
   ils apparaissent dans un container qui n'est pas .ab-pills__inner mais
   directement sous .ab-pills. On garde la mise en flex de secours. */
.ab-pills:not(:has(.ab-pills__inner)) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ----- PILL ITEM ----- */
.ab-pills-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0 !important;
  padding: var(--ab-pill-padding-y) var(--ab-pill-padding-x);
  border-radius: var(--ab-pill-radius);
  border: var(--ab-pill-border-width) solid transparent;
  background-color: transparent;
  font-family: 'PP Fragment Sans', 'PP Fragment', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: default;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  transition: color var(--ab-pill-transition), border-color var(--ab-pill-transition);
}

/* Effet de fill hover commenté 2026-09-16 (pills statiques). Décommenter pour réactiver.
--------------------------------------------------------------------------------------
.ab-pills-item::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: top var(--ab-pill-transition), left var(--ab-pill-transition);
  z-index: 0;
  pointer-events: none;
}

.ab-pills-item:hover::before,
.ab-pills-item:focus-visible::before {
  top: 0;
  left: 0;
}
-------------------------------------------------------------------------------------- */

/* Le label doit passer au-dessus du ::before (nécessaire si on réactive le hover) */
.ab-pills-item__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: inherit;
}

/* ----- Variantes ----- */

/* Rouge (défaut Figma) : bordure rouge, texte noir → remplissage rouge, texte blanc */
.ab-pills .ab-pills-item.ab-pills-item--rouge,
.ab-pills-item.ab-pills-item--rouge {
  border-color: var(--ab-rouge);
  color: var(--ab-noir);
}
/* Décommenter avec le hover ci-dessus pour réactiver le fill diagonal :
.ab-pills-item.ab-pills-item--rouge::before {
  background-color: var(--ab-rouge);
}
.ab-pills .ab-pills-item.ab-pills-item--rouge:hover,
.ab-pills-item.ab-pills-item--rouge:hover,
.ab-pills-item.ab-pills-item--rouge:focus-visible {
  color: var(--ab-blanc);
}
*/

/* Noir : bordure noire, texte noir → remplissage noir, texte blanc */
.ab-pills .ab-pills-item.ab-pills-item--noir,
.ab-pills-item.ab-pills-item--noir {
  border-color: var(--ab-noir);
  color: var(--ab-noir);
}
/* Décommenter avec le hover ci-dessus pour réactiver le fill diagonal :
.ab-pills-item.ab-pills-item--noir::before {
  background-color: var(--ab-noir);
}
.ab-pills .ab-pills-item.ab-pills-item--noir:hover,
.ab-pills-item.ab-pills-item--noir:hover,
.ab-pills-item.ab-pills-item--noir:focus-visible {
  color: var(--ab-blanc);
}
*/

/* Blanc : bordure blanche, texte blanc → remplissage blanc, texte rouge */
.ab-pills .ab-pills-item.ab-pills-item--blanc,
.ab-pills-item.ab-pills-item--blanc {
  border-color: var(--ab-blanc);
  color: var(--ab-blanc);
}
/* Décommenter avec le hover ci-dessus pour réactiver le fill diagonal :
.ab-pills-item.ab-pills-item--blanc::before {
  background-color: var(--ab-blanc);
}
.ab-pills .ab-pills-item.ab-pills-item--blanc:hover,
.ab-pills-item.ab-pills-item--blanc:hover,
.ab-pills-item.ab-pills-item--blanc:focus-visible {
  color: var(--ab-rouge);
}
*/

/* Décommenter avec le hover ci-dessus pour respecter prefers-reduced-motion :
@media (prefers-reduced-motion: reduce) {
  .ab-pills-item,
  .ab-pills-item::before {
    transition: none;
  }
}
*/