/* Version: 27-09-2026 */
/* Liens plateformes (#goto) — cartes mises en avant, habillées par la personnalisation du créateur :
   fond / bordure / rayon / ombre / survol des vignettes, pastille aux couleurs des boutons. */

#portfolio_page #goto {
  scroll-margin-top: 90px;
}

#portfolio_page #goto .platform-links-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--layout-space-y-sm, 15px);
}

#portfolio_page #goto .platform-link,
#portfolio_page #goto article a.platform-link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 18px 18px 22px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--portfolios-content-bg-color, transparent);
  border-width: var(--portfolios-thumbnail-border-width, 1px);
  border-style: var(--portfolios-thumbnail-border-type, solid);
  border-color: var(--portfolios-thumbnail-border-color, currentColor);
  border-radius: var(--portfolios-thumbnail-radius, 0);
  box-shadow: var(--portfolios-thumbnail-box-shadow, none);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

#portfolio_page #goto .platform-link:hover,
#portfolio_page #goto .platform-link:focus-visible {
  color: inherit;
  transform: var(--portfolios-thumbnail-hover-transform, translateY(-2px));
  filter: var(--portfolios-thumbnail-hover-filter, none);
}

#portfolio_page #goto .platform-link:active {
  transform: var(--portfolios-thumbnail-click-transform, scale(0.98));
}

#portfolio_page #goto .platform-link__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.35;
}

/* Pastille « ouvrir » aux couleurs du bouton du créateur */
#portfolio_page #goto .platform-link__open {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--portfolios-button-text-color, #fff);
  background-color: var(--portfolios-button-background-color, #222);
  background-image: var(--portfolios-button-gradient, none);
  border-radius: var(--portfolios-button-radius, 50%);
  transition: filter 0.2s ease;
}

#portfolio_page #goto .platform-link:hover .platform-link__open,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open {
  color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
  filter: var(--portfolios-button-hover-filter, brightness(110%));
}

/* Token direct dans fill : main.css colore tout `#portfolio_page *` (svg compris), currentColor ne suffit pas. */
#portfolio_page #goto .platform-link .platform-link__open svg {
  display: block;
  width: 16px;
  height: 16px;
  max-height: none;
  margin: 0;
  fill: var(--portfolios-button-text-color, #fff);
}

#portfolio_page #goto .platform-link:hover .platform-link__open svg,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open svg {
  fill: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
}

/* Bouton du hero (« Où regarder / lire / écouter ») et autres actions de la fiche */
#portfolio_page #hero #title-about .title-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--layout-space-y-sm, 15px);
}

#portfolio_page #hero #title-about .title-about-actions .folio_button {
  margin: 0;
}

@media screen and (max-width: 500px) {
  #portfolio_page #goto .platform-links-list {
    grid-template-columns: 1fr;
  }

  #portfolio_page #goto .platform-link,
  #portfolio_page #goto article a.platform-link {
    padding: 14px 14px 14px 18px;
  }
}