/* ---------------------------------------------------------------------------
   Le CŒUR des offres d'Avenir et des annonces du Bazar, et la pastille
   « Favoris » qui les filtre.

   Une feuille à part, et non dans css/stages.css ou css/bazar.css : le cœur
   est le même des deux côtés, et le profil reprend les cartes des deux
   sections sans charger leurs listes. Chacune des trois pages la charge.

   Le cœur plein prend L'ACCENT DE LA SECTION — le violet d'Avenir, l'ambre du
   Bazar — et non un rouge de convention : il dit « gardé ici », dans la
   couleur de l'endroit. Vide, il est du gris du texte secondaire, pour ne pas
   disputer l'attention au titre de la carte.
   --------------------------------------------------------------------------- */

.favori {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: var(--text-3, #777);
  transition: color .2s var(--ease, ease), background-color .2s var(--ease, ease), transform .18s var(--ease, ease);
}

.favori__coeur {
  display: block;
  flex: none;
}

.favori__coeur path {
  transition: fill-opacity .2s var(--ease, ease);
}

.favori[aria-pressed="true"] {
  color: var(--accent);
}

.favori[aria-pressed="true"] .favori__coeur path {
  fill-opacity: 1;
}

/* Au moment où il se remplit, un battement : assez pour qu'on voie que le
   clic a pris, pas assez pour qu'on le regarde. Supprimé pour qui a demandé
   moins de mouvement. */
.favori[aria-pressed="true"] .favori__coeur {
  animation: favori-battement .32s var(--ease, ease);
}

@keyframes favori-battement {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .favori,
  .favori__coeur,
  .favori__coeur path { transition: none; }
  .favori[aria-pressed="true"] .favori__coeur { animation: none; }
}

.favori:active {
  transform: scale(.9);
}

.favori:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Un envoi refusé : le cœur rougit le temps de le dire (son libellé porte le
   message, javascript/favoris-listes.js). */
.favori[data-favori-erreur] {
  color: var(--danger, #c0392b);
}

/* ---- le NOMBRE ---------------------------------------------------------------

   Combien de comptes gardent l'élément, à partir de deux
   (php/favoris_listes.php). Des chiffres de même largeur : un « 9 » qui
   devient « 10 » ne fait pas sauter le cœur. */
.favori__nombre {
  font-size: .76rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.favori__nombre[hidden] {
  display: none;
}

/* ---- sur une CARTE : l'icône seule, dans le coin haut droit ----------------

   Un rond de trente-quatre pixels autour d'un cœur de dix-huit : la zone de
   toucher qu'un doigt atteint sans viser, sans que l'icône grossisse. Le
   nombre l'allonge en pilule, vers la gauche : c'est le rembourrage qui fait
   le rond, et sans nombre il tombe juste sur la largeur minimale.

   Il se pose AU-DESSUS du lien de la carte. Le titre d'une offre ou d'une
   annonce étire son lien sur toute la carte (son ::after, à z-index 1 —
   css/stages.css, css/bazar.css) : le cœur était dessous, et un vrai clic
   dessus ouvrait l'offre — ou, pour un chantier, le site du partenaire —
   au lieu de la garder. */
.favori--carte {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  line-height: 1;
}

.favori--carte:hover {
  background: color-mix(in srgb, var(--text, #222) 7%, transparent);
  color: var(--text, #222);
}

.favori--carte[aria-pressed="true"]:hover {
  color: var(--accent);
}

/* -- sur la carte d'une OFFRE (stages_carte, php/stages_offres.php) -----------

   À hauteur des étiquettes, centré sur leur ligne, le bord du cœur aligné sur
   celui du texte. Les étiquettes lui laissent sa place. */
.card--offre > .favori--carte {
  position: absolute;
  top: calc(1rem - 5px);
  right: calc(1.05rem - 8px);
}

.card--offre:has(> .favori--carte) .offre__tete {
  padding-right: 2.6rem;
}

.card--offre-photo:has(> .favori--carte) .offre__photo-tags {
  max-width: calc(100% - 2.1rem - 2.6rem);
}

/* Sur une photo, il prend l'habit des étiquettes d'en face : le fond de la
   page et une ombre courte. Sans flou : css/stages.css dit ce qu'il coûtait. */
.card--offre-photo > .favori--carte {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 1px 6px rgb(0 0 0 / .22);
}

.card--offre-photo > .favori--carte:hover {
  background: var(--surface);
}

/* -- sur une tuile du BAZAR (bazar_carte, php/bazar_annonces.php) -------------

   Dans le cadre, en haut à droite. Avec une photo, le bouton qui la retourne
   se pose juste SOUS lui : deux pastilles rondes l'une sur l'autre, de même
   taille et de même habit — la taille, la marge et l'écart sont ceux du
   bouton (--geste, --geste-marge, --geste-ecart, css/bazar.css).

   Le rembourrage suit la taille du bouton : un cœur de quinze pixels et deux
   filets d'un pixel, le reste de part et d'autre — rond au téléphone comme
   ailleurs. */
.tuile__cadre > .favori--carte {
  position: absolute;
  top: var(--geste-marge, .45rem);
  right: var(--geste-marge, .45rem);
  z-index: 3;
  min-width: var(--geste, 30px);
  height: var(--geste, 30px);
  padding: 0 calc((var(--geste, 30px) - 17px) / 2);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

/* Le bouton de la photo descend d'un cran : la place du haut est au cœur.
   Sans cœur — les favoris pas encore installés —, il garde la sienne. */
.tuile__cadre:has(> .favori--carte) .tuile__bascule {
  top: calc(var(--geste-marge, .45rem) + var(--geste, 30px) + var(--geste-ecart, .3rem));
}

.tuile__cadre > .favori--carte:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

/* Le cœur à la taille de l'icône du bouton sous lui. */
.tuile__cadre > .favori--carte .favori__coeur {
  width: 15px;
  height: 15px;
}

/* Les étiquettes lui laissent sa place — et un peu plus quand le nombre
   l'allonge. */
.tuile__cadre:has(> .favori--carte) .tuile__badges {
  right: calc(var(--geste-marge, .45rem) + var(--geste, 30px) + .35rem);
}

.tuile__cadre:has(> .favori--carte .favori__nombre:not([hidden])) .tuile__badges {
  right: calc(var(--geste-marge, .45rem) + 3.2rem);
}

/* Retournée sur sa description, une tuile à photo garde ses deux pastilles
   dans le coin. Le cœur, en haut, reste au-dessus du texte ; c'est du bouton,
   sous lui, que le texte s'écarte pour ses premières lignes, sans perdre sa
   largeur plus bas. La cale part du haut du texte (--desc-haut) et descend
   jusque sous le bouton ; elle s'arrête à son bord gauche, rembourrage du
   texte déduit (--desc-cote). */
.tuile__cadre--photo:has(> .favori--carte) .tuile__description::before {
  content: "";
  float: right;
  width: calc(var(--geste-marge, .45rem) + var(--geste, 30px) + .25rem - var(--desc-cote, .95rem));
  height: calc(var(--geste-marge, .45rem) + 2 * var(--geste, 30px) + var(--geste-ecart, .3rem) + .25rem - var(--desc-haut, 2.55rem));
}

/* ---- dans une FENÊTRE : l'icône et le mot, parmi les autres gestes ----------- */
.favori--fenetre {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.favori--fenetre[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Le nombre, au bout du mot, dans sa petite pastille : « Enregistrer 12 ». */
.favori--fenetre .favori__nombre {
  min-width: 1.4rem;
  padding: .16rem .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: .74rem;
  text-align: center;
}

/* ---- la pastille « Favoris » ------------------------------------------------

   Sous la barre de recherche, à droite du tri : le cœur et le nombre de
   favoris, sans le mot — il n'est dit qu'à qui écoute la page. Le cœur se
   remplit quand le filtre est actif : c'est la même chose que le cœur des
   cartes, vue de l'autre côté. La ligne qui la porte est commune aux deux
   listes (.liste-vite, css/section-liste.css). */
.chip--favoris {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.chip--favoris .favori__coeur path {
  fill-opacity: 0;
}

.chip--favoris[aria-pressed="true"] .favori__coeur path {
  fill-opacity: 1;
}