/* Comptes des visiteurs — le cœur (favori)
   (fonctions/compte-coeur.php, compte-marque.js ; maquette du 08/10/2026,
   choix de François) :
   - fiche : cœur de 40 px au bout de la ligne du titre, puis l'icône PDF
     (la coche « faite » retirée le même jour : peu claire sur mobile) ;
   - vignettes (D'autres randonnées, Top 5, pages pays…) : cœur de 27 px en
     haut à droite de la photo ;
   - une randonnée faite montre « ✓ Faite » à la place du cœur. */

:root { --hr-coeur: #d64545; --hr-faite: #00a896; }

/* ── Boutons ronds ── */
.hr-coeur {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(28, 42, 49, .22);
    color: var(--hr-encre);
    cursor: pointer;
    transition: transform .12s, background-color var(--hr-transition), color var(--hr-transition);
}
/* Zone de toucher de 44 px au moins, quelle que soit l'icône */
.hr-coeur::after { content: ""; position: absolute; inset: -9px; }
.hr-coeur:hover { transform: scale(1.06); }
.hr-coeur:active { transform: scale(.94); }
.hr-coeur:focus-visible { outline: 2px solid var(--hr-petrole); outline-offset: 2px; }
.hr-coeur svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hr-coeur[aria-pressed="true"] { color: var(--hr-coeur); }
.hr-coeur[aria-pressed="true"] svg { fill: var(--hr-coeur); }
.hr-coeur--bat svg { animation: hr-coeur-bat .3s; }
@keyframes hr-coeur-bat { 50% { transform: scale(1.25); } }

/* Vignette d'une randonnée faite : « ✓ Faite » à la place du cœur (compte-marque.js) */
.hr-coeur.hr-coeur--faite {
    width: auto;
    height: 26px;
    grid-auto-flow: column;
    gap: 4px;
    padding: 0 9px 0 6px;
    border-radius: 999px;
    background: var(--hr-faite);
    color: #fff;
    font: 600 12px/1 var(--hr-font-texte);
}
.hr-coeur.hr-coeur--faite svg { width: 14px; height: 14px; fill: none; stroke-width: 2.4; }

/* ── Fiche : au bout de la ligne du titre ── */
/* Le cœur seul (l'icône PDF est passée au bout de la ligne de l'auteur, 09/10/2026 ;
   la coche a été retirée le 08/10/2026). Faite :
   « ✓ Faite » à la place du cœur, et le titre laisse la place (hr-fiche-tete--faite, posée par le script). */
.hr-fiche-tete--marques { position: relative; }
.hr-fiche-tete--marques .hr-fiche-tete__titre { padding-right: 54px; }
.hr-fiche-tete--marques.hr-fiche-tete--faite .hr-fiche-tete__titre { padding-right: 104px; }
.hr-marques {
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    gap: 10px;
}
.hr-marques .hr-coeur {
    width: 40px;
    height: 40px;
    border: 1px solid var(--hr-bordure);
    background: var(--hr-surface);
    box-shadow: none;
}
.hr-marques .hr-coeur::after { inset: -3px; }
.hr-marques svg { width: 22px; height: 22px; }
.hr-marques .hr-coeur[aria-pressed="true"] { border-color: #f0c4c4; }
.hr-marques .hr-coeur.hr-coeur--faite { width: auto; height: 40px; padding: 0 14px 0 11px; border-color: var(--hr-faite); background: var(--hr-faite); font-size: 14px; }
.hr-marques .hr-coeur.hr-coeur--faite svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
    .hr-fiche-tete--marques .hr-fiche-tete__titre { padding-right: 46px; }
    .hr-fiche-tete--marques.hr-fiche-tete--faite .hr-fiche-tete__titre { padding-right: 96px; }
    .hr-marques { top: 2px; gap: 8px; }
    .hr-marques .hr-coeur { width: 38px; height: 38px; }
    .hr-marques .hr-coeur.hr-coeur--faite { height: 38px; padding: 0 11px 0 9px; font-size: 13px; }
}

/* ── Vignettes : en haut à droite de la photo ── */
.hr-carte-rando__media > .hr-coeur { position: absolute; top: 8px; right: 8px; z-index: 2; }   /* au-dessus du lien étendu */
.pc-rando { position: relative; }
.pc-rando > .hr-coeur { position: absolute; top: 8px; right: 8px; z-index: 2; }
/* Top 5 : même case de la grille que la photo, calé en haut à droite */
.top5__rangee > .hr-coeur { justify-self: end; align-self: start; z-index: 2; margin: 8px; }
@media (min-width: 768px) {
    .top5__rangee > .top5__photo,
    .top5__rangee > .hr-coeur { grid-column: 2; grid-row: 1; }
}
@media (max-width: 767px) {
    .top5__rangee > .hr-coeur { grid-area: photo; }
}

/* Petit cœur des petites photos (liste des guides, liste de la carte pays, bulle de la carte) */
.hr-coeur--mini:not(.hr-coeur--faite),
.pc-liste__el > .hr-coeur:not(.hr-coeur--faite),
.hr-carte__fiche > .hr-coeur:not(.hr-coeur--faite),
.hr-carte__bande-apercu .hr-coeur:not(.hr-coeur--faite),
.hr-carte__popup .hr-coeur:not(.hr-coeur--faite) { width: 24px; height: 24px; }
.pc-liste__el > .hr-coeur svg,
.hr-carte__fiche > .hr-coeur svg,
.hr-carte__bande-apercu .hr-coeur svg,
.hr-carte__popup .hr-coeur svg { width: 13px; height: 13px; }
.pc-liste__el > .hr-coeur.hr-coeur--faite,
.hr-carte__fiche > .hr-coeur.hr-coeur--faite { height: 22px; padding: 0 7px 0 5px; font-size: 11px; }

/* Accueil et guides (pc_vignette) : lien étendu depuis le nom, cœur sur la photo */
.pc-vignette--carte > .hr-coeur { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pc-vignette--carte > .hr-coeur:not(.hr-coeur--faite) { padding: 0; }
@media (max-width: 767px) {
    /* Vignettes en lignes : la photo de 112 px à gauche */
    .pc .pc-grille--lignes .pc-vignette--carte > .hr-coeur { top: 16px; right: auto; left: 81px; }
    .pc .pc-grille--lignes .pc-vignette--carte > .hr-coeur.hr-coeur--faite { left: 4px; }
}
/* Liste en bas des guides, liste de la carte pays : même case de la grille que la photo */
.pc-liste__el > .pc-liste__photo,
.pc-liste__el > .hr-coeur { grid-column: 2; grid-row: 1; }
.hr-carte__fiche > .hr-carte__photo,
.hr-carte__fiche > .hr-coeur { grid-column: 1; grid-row: 1; }
.pc-liste__el > .hr-coeur,
.hr-carte__fiche > .hr-coeur { justify-self: end; align-self: start; z-index: 2; margin: 4px; }
/* Bulle de la carte (ordinateur) : à gauche de la croix ; bande (mobile) : sur la photo */
.hr-carte__popup .hr-coeur { position: absolute; top: 8px; right: 44px; z-index: 2; }
.hr-carte__popup .hr-coeur:not(.hr-coeur--faite) { width: 26px; height: 26px; }
.hr-carte__popup .hr-coeur.hr-coeur--faite { top: 9px; }
.hr-carte__bande-apercu .hr-coeur { position: absolute; top: 12px; left: 100px; z-index: 2; }
.hr-carte__bande-apercu .hr-coeur.hr-coeur--faite { left: 12px; }

/* ── Bulle : confirmation, ou invitation à créer un compte ── */
.hr-bulle {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1150;   /* au-dessus des pastilles collées de la fiche (1100) */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 12px;
    width: max-content;
    max-width: min(440px, calc(100vw - 32px));
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--hr-r-lg);
    /* Blanc à 75 %, la page floutée derrière (François, 08/10/2026) */
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: var(--hr-texte);
    font: 400 15px/1.4 var(--hr-font-texte);
    box-shadow: 0 10px 30px rgba(28, 42, 49, .18), 0 2px 6px rgba(28, 42, 49, .08);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity var(--hr-transition), transform var(--hr-transition);
}
.hr-bulle--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hr-bulle__icone {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbeaea;
    color: var(--hr-coeur);
}
.hr-bulle__icone svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.hr-bulle--faite .hr-bulle__icone { background: #def5f1; color: var(--hr-faite); }
.hr-bulle--faite .hr-bulle__icone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-bulle--faite .hr-bulle__icone svg circle { stroke: none; }
.hr-bulle__texte { align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 32px; }
.hr-bulle__texte strong { font-weight: 600; color: var(--hr-encre); }
.hr-bulle__texte a { font-weight: 600; color: var(--hr-petrole); white-space: nowrap; }
.hr-bulle__texte a:hover { color: var(--hr-petrole-fonce); }
.hr-bulle__aide { flex-basis: 100%; font-size: 14px; color: var(--hr-texte-2); }
/* « Déjà faite ? » : un lien de plus, au style de « Voir mon carnet » */
.hr-bulle__lien { padding: 0; border: 0; background: none; color: var(--hr-petrole); font: 600 15px var(--hr-font-texte); white-space: nowrap; cursor: pointer; }
.hr-bulle__lien:hover { color: var(--hr-petrole-fonce); text-decoration: underline; }
.hr-bulle__actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hr-bulle__actions[hidden] { display: none; }
.hr-bulle__actions a,
.hr-bulle__actions button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--hr-bordure);
    border-radius: var(--hr-r-sm);
    font: 600 14px var(--hr-font-texte);
    background: rgba(255, 255, 255, .7);
    color: var(--hr-encre);
    text-decoration: none;
    cursor: pointer;
}
.hr-bulle__actions > :first-child { border-color: var(--hr-petrole); background: var(--hr-petrole); color: #fff; }
.hr-bulle__actions > :first-child:hover { background: var(--hr-petrole-fonce); }
.hr-bulle__actions > :not(:first-child):hover { border-color: var(--hr-petrole); color: var(--hr-petrole); }
.hr-bulle__fermer {
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--hr-texte-3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.hr-bulle__fermer:hover { background: var(--hr-filet); color: var(--hr-encre); }

/* ── Petite fenêtre « Quand l'avez-vous faite ? » ── */
.hr-marque-fenetre {
    width: min(360px, calc(100vw - 32px));
    padding: 22px;
    border: 0;
    border-radius: var(--hr-r-lg);
    background: var(--hr-surface);
    color: var(--hr-texte);
    box-shadow: var(--hr-om-tooltip);
}
.hr-marque-fenetre::backdrop { background: rgba(28, 42, 49, .45); }
.hr-marque-fenetre__titre { margin: 0 0 14px; font: 600 20px/1.3 var(--hr-font-titre); color: var(--hr-encre); }
.hr-marque-fenetre__champ { display: grid; gap: 4px; margin: 0 0 18px; font: 600 14px var(--hr-font-texte); color: var(--hr-encre); }
.hr-marque-fenetre__champ input {
    min-height: 46px;
    padding: 0 10px;
    border: 1.5px solid var(--hr-bordure);
    border-radius: var(--hr-r-sm);
    font: 400 17px var(--hr-font-texte);
    color: var(--hr-encre);
}
.hr-marque-fenetre__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-marque-fenetre__actions button {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--hr-r-sm);
    font: 600 15px var(--hr-font-texte);
    cursor: pointer;
}
.hr-marque-fenetre__ok { flex: 1 0 100%; border: 0; background: var(--hr-petrole); color: #fff; }
.hr-marque-fenetre__ok:hover { background: var(--hr-petrole-fonce); }
.hr-marque-fenetre__sans, .hr-marque-fenetre__annuler { flex: 1; border: 1.5px solid var(--hr-bordure); background: var(--hr-surface); color: var(--hr-texte-2); }

@media print {
    .hr-coeur, .hr-marques, .hr-bulle, .hr-marque-fenetre { display: none !important; }
    .hr-fiche-tete--marques .hr-fiche-tete__titre { padding-right: 0; }
}