/*!
 * likes.css — Le bouton « j'aime ».
 * Discret par defaut, lisible en clair comme en sombre, et respectueux de
 * « prefers-reduced-motion » (comme le reste du site).
 */
.like-zone {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1rem;
}

.like-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.1em;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;

  /* ⚠️ INDISPENSABLE — ne pas retirer.
   * Les cartes de composants ont un « lien etire »
   * (.comp-card__link::after { position:absolute; inset:0; z-index:1 })
   * qui recouvre toute la carte pour la rendre cliquable. Sans ce z-index,
   * le bouton passe DESSOUS : le clic ouvre le composant et le coeur ne
   * repond jamais. (Bug constate le 2026-08-04.) */
  position: relative;
  z-index: 2;
}

.like-bouton:hover,
.like-bouton:focus-visible {
  opacity: 1;
  color: #e0245e;
  border-color: #e0245e;
}

.like-bouton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Le coeur est un SVG (et non le caractere ♥, qui n'est jamais centre
 * optiquement dans sa boite et bascule en emoji sur certaines plateformes).
 * `display: block` supprime l'espace de ligne de base sous un element inline :
 * c'est ce qui garantit un centrage exact dans la pastille. */
.like-coeur {
  display: block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease, fill 0.18s ease;
}

.like-bouton.est-aime {
  opacity: 1;
  color: #e0245e;
  border-color: #e0245e;
}

/* Aime = coeur plein. La couleur seule ne suffit pas : elle est invisible
 * pour qui ne la distingue pas. La forme, elle, se voit toujours. */
.like-bouton.est-aime .like-coeur {
  fill: currentColor;
  transform: scale(1.12);
}

.like-compte {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

.like-bouton[disabled] {
  cursor: progress;
}

/* ⚠️ INDISPENSABLE — ne pas retirer.
 * Le script masque le bouton (`hidden`) tant que le serveur n'a pas renvoye
 * le compteur, pour ne jamais afficher un chiffre faux. Mais l'attribut
 * `hidden` agit via la feuille de style DU NAVIGATEUR ([hidden]{display:none}),
 * que la regle `display: inline-flex` ci-dessus ecrase — une regle d'auteur
 * bat toujours celle du navigateur. Sans cette ligne, le bouton s'affiche
 * avec un compteur VIDE. (Bug constate le 2026-08-04.) */
.like-bouton[hidden] {
  display: none;
}

/* --- Dans une carte de composant : a gauche de « Voir le composant → » ---
 * .comp-card__body est une colonne flex, d'ou la ligne intermediaire creee
 * par le script. Elle reprend la marge que portait le CTA, pour ne rien
 * decaler par rapport a l'ancienne mise en page. */
.like-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.like-ligne .comp-card__cta {
  margin-top: 0;
}

.like-ligne .like-bouton {
  padding: 0.32em 0.7em;
  font-size: 0.78rem;
  gap: 0.4em;
  flex: none;
}

/* --- A la fin du sommaire d'une page de composant ---
 * Centre dans la colonne du sommaire (choix de Nelson, 2026-08-04).
 * Une premiere version l'alignait a gauche pour suivre l'indentation des
 * liens du sommaire — ca le faisait paraitre deporte. */
.like-zone--toc {
  justify-content: center;
  margin: 16px 0 0;
}

.like-zone--toc .like-bouton {
  padding: 0.36em 0.8em;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .like-bouton,
  .like-coeur {
    transition: none;
  }
  .like-bouton.est-aime .like-coeur {
    transform: none;
  }
}