/* 4.1.3 — compléments isolés : aucune incidence sur la section Composition. */
.harry-transparency-detail__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* Les deux scores principaux partagent strictement la même hiérarchie. */
.harry-score-toggle .harry-main-score-heading,
.harry-transparency-score .harry-main-score-heading {
  color: var(--harry-text-main, #2d3032);
  font-family: "Space Grotesk", "DM Sans", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* Le score de transparence reprend exactement la taille du score d’équilibre. */
.harry-transparency-score .harry-main-score-heading {
  font-size: 1rem !important;
}

/* Pastille continue : sa teinte évolue directement avec pourcentage_vert. */
.harry-transparency-summary-ring {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: hsl(calc(var(--harry-progress) * 1.2), 58%, 40%);
}

/* Jaune franc de la DA Harry — distinct de l'orange. */
.harry-transparency-pill--yellow {
  background: #fff200;
}

/* Catégorie affichée seulement dans le nouveau détail des additifs. */
.harry-transparency-element .harry-transparency-additive-category {
  padding: .1rem .3rem;
  border-radius: 99px;
  background: #f2f4f4;
  color: #555d60;
  font-size: .61rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.harry-transparency-pill--lime { background: #9aad32; }

/* Les ingrédients n'ont pas de libellé de catégorie : le bloc d'actions est ancré au bord droit. */
.harry-transparency-element--ingredient > summary {
  display: flex;
}

.harry-transparency-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}

/* Les hauteurs sont animées au clic par harry-product.js, y compris lors de la fermeture. */
.harry-smooth-accordion > .harry-transparency-detail__content {
  display: block;
  grid-template-rows: none;
  overflow: hidden;
  transition: none;
}

/* Même lorsqu'un <details> est ouvert, aucune transition CSS native ne doit
   concurrencer l'animation de hauteur calculée par le script. */
.harry-transparency-detail.harry-smooth-accordion[open] > .harry-transparency-detail__content,
.harry-transparency-detail.harry-smooth-accordion > .harry-transparency-detail__content {
  display: block !important;
  grid-template-rows: none !important;
  transition: none !important;
}

/* Le contenu est découpé pendant le mouvement ; une fois ouvert, il peut agrandir son parent. */
.harry-transparency-element.harry-smooth-accordion > p {
  overflow: hidden;
}

.harry-smooth-accordion > .harry-transparency-detail__content > * {
  min-height: auto;
  overflow: visible;
}

/* La marge devient du padding, donc elle participe à l'animation de fermeture. */
.harry-transparency-element.harry-smooth-accordion > p {
  margin-bottom: 0;
  padding-bottom: .7rem;
}

/* La bulle reste sous le ? : elle ne peut plus être découpée par le haut du panneau. */
.harry-equilibrium-panel.is-open {
  overflow: visible;
}

.harry-info-btn .harry-tooltip {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  z-index: 1000 !important;
}

.harry-info-btn .harry-tooltip::after {
  top: auto !important;
  bottom: 100% !important;
  border-color: transparent transparent var(--harry-text-main) transparent !important;
}

@media (max-width: 868px) {
  .harry-info-btn .harry-tooltip {
    width: min(260px, calc(100vw - 32px)) !important;
    right: auto !important;
    left: var(--harry-tooltip-left, 0px) !important;
    transform: none !important;
  }

  .harry-info-btn .harry-tooltip::after {
    right: auto !important;
    left: 9px !important;
    margin-left: 0 !important;
  }

  .harry-info-btn:focus .harry-tooltip {
    visibility: visible;
    opacity: 1;
  }
}

/* Les intitulés historiques de Composition restent des sous-titres bleu-vert, jamais des pills. */
.harry-ingredients-section .harry-additive-category {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--harry-brand-teal, #007c78);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}