/* ============================================
   IAF CTA — composants globaux
   Deux variantes coexistent :

   1) `.iaf-cta` (marker + underline) — CTA principal utilisé dans les extensions
      de type "hero" ou "quote".
      <a class="iaf-cta gt-caption-upper" href="...">
        <span class="iaf-cta__marker" aria-hidden="true"></span>
        <span class="iaf-cta__label">Label</span>
      </a>

   2) `.iaf-cta-pill` (pill blanche, inline à la fin d'un texte) — utilisé par
      l'extension `iaf_text`. Casse mixte, pas d'underline, pas de marker.
      <a class="iaf-cta-pill iaf-interaction-shift gt-caption" href="...">Label</a>

   Hover shift : `.iaf-interaction-shift` (translate 8px, pas d’ombre).
   Ombre au survol : `.iaf-cta-pill`, `.iaf-listing-logo__link-btn` uniquement.
   ============================================ */

:root {
  --iaf-primary-2: #114e6d;
  --iaf-cta-color: var(--iaf-canvas-accent);
  --iaf-interaction-hover-shift: 8px;
  --iaf-cta-hover-shift: var(--iaf-interaction-hover-shift);
  --iaf-cta-gap: 8px;                 /* espace entre marker et label */
  --iaf-cta-marker-size: 8px;         /* côté du carré marker */
  --iaf-cta-underline-offset: 4px;    /* distance entre texte et underline */
  --iaf-cta-underline-thickness: 1px;

  /* Pill variant (iaf_text) */
  --iaf-cta-pill-bg: #FFFFFF;
  --iaf-cta-pill-radius: 4px;
  --iaf-cta-pill-padding-y: 3px;
  --iaf-cta-pill-padding-x: 7px;
  /* Figma hover : fond blanc inchangé, ombre portée légère */
  --iaf-interaction-shadow-hover: 0 3px 14px rgba(30, 30, 30, 0.11), 0 1px 4px rgba(12, 54, 75, 0.07);
  --iaf-cta-pill-shadow-hover: var(--iaf-interaction-shadow-hover);
  --iaf-cta-pill-shadow-hover-on-dark: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 5px rgba(0, 0, 0, 0.16);
}

/* -------- Shared hover: shift right (text links + generic modifier) -------- */

:where(.iaf-interaction-shift) {
  transform: translateX(0);
  box-shadow: none;
  transition:
    box-shadow var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing),
    transform var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing);
}

:where(.iaf-interaction-shift):hover,
:where(.iaf-interaction-shift):focus-visible {
  transform: translateX(var(--iaf-interaction-hover-shift));
  box-shadow: none;
}

/* -------- Shift + shadow (pills, listing arrow buttons only) -------- */

:where(
  .iaf-cta-pill,
  .iaf-listing-logo__link-btn
) {
  transform: translateX(0);
  box-shadow: none;
  transition:
    box-shadow var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing),
    transform var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing);
}

:where(
  .iaf-cta-pill,
  .iaf-listing-logo__link-btn
):hover,
:where(
  .iaf-cta-pill,
  .iaf-listing-logo__link-btn
):focus-visible {
  transform: translateX(var(--iaf-interaction-hover-shift));
  box-shadow: var(--iaf-interaction-shadow-hover);
}

/* Accent inline links — never pill box or drop shadow */
:where(
  .iaf-contact-details__accent,
  .iaf-header__panel-accent-link,
  .iaf-team__link,
  .iaf-contact-page__link--accent
):hover,
:where(
  .iaf-contact-details__accent,
  .iaf-header__panel-accent-link,
  .iaf-team__link,
  .iaf-contact-page__link--accent
):focus-visible {
  box-shadow: none;
  background: transparent;
}

/* -------- Tiny accent links (READ MORE, MORE, MAIL, LINKEDIN, etc.) -------- */
/* Pas de underline au repos ; underline + shift à droite au survol / focus. */

:where(
  .iaf-cta__label,
  .iaf-modular__toggle-read,
  .iaf-modular__toggle-close,
  .iaf-team__link,
  .iaf-contact-details__accent,
  .iaf-header__panel-accent-link,
  .iaf-contact-page__link--accent
) {
  text-decoration: none;
  text-underline-offset: var(--iaf-cta-underline-offset);
  text-decoration-thickness: var(--iaf-cta-underline-thickness);
}

:where(
  .iaf-cta:hover,
  .iaf-cta:focus-visible
) .iaf-cta__label,
:where(
  .iaf-modular__toggle-trigger:hover,
  .iaf-modular__toggle-trigger:focus-visible
) .iaf-modular__toggle-read,
:where(
  .iaf-modular__toggle.is-open .iaf-modular__toggle-footer--open:hover,
  .iaf-modular__toggle.is-open:hover .iaf-modular__toggle-footer--open
) .iaf-modular__toggle-close,
:where(
  .iaf-team__link:hover,
  .iaf-team__link:focus-visible,
  .iaf-contact-details__accent:hover,
  .iaf-contact-details__accent:focus-visible,
  .iaf-header__panel-accent-link:hover,
  .iaf-header__panel-accent-link:focus-visible,
  .iaf-contact-page__link--accent:hover,
  .iaf-contact-page__link--accent:focus-visible
) {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--iaf-cta-underline-thickness);
  text-underline-offset: var(--iaf-cta-underline-offset);
}

.iaf-modular__toggle-trigger {
  transform: translateX(0);
  transition:
    color var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing),
    transform var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing);
}

:where(
  .iaf-modular__toggle-trigger:hover,
  .iaf-modular__toggle-trigger:focus-visible
) {
  transform: translateX(var(--iaf-interaction-hover-shift));
}

.iaf-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--iaf-cta-gap);
  color: var(--iaf-cta-color);
  text-decoration: none;
  align-self: flex-start;
  transform: translateX(0);
  transition:
    color var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing),
    transform var(--iaf-interaction-hover-duration) var(--iaf-interaction-hover-easing);
}

.iaf-cta:hover,
.iaf-cta:focus-visible {
  color: var(--iaf-primary-2);
  transform: translateX(var(--iaf-interaction-hover-shift));
}

.iaf-cta__marker {
  display: inline-block;
  flex-shrink: 0;
  width: var(--iaf-cta-marker-size);
  height: var(--iaf-cta-marker-size);
  background-color: currentColor;
}

.iaf-cta__label {
  display: inline-block;
  text-decoration: none;
}

/* -------- Pill variant -------- */

.iaf-cta-pill {
  display: inline-block;
  padding: var(--iaf-cta-pill-padding-y) var(--iaf-cta-pill-padding-x);
  border-radius: var(--iaf-cta-pill-radius);
  background-color: var(--iaf-cta-pill-bg);
  color: var(--iaf-cta-color);
  text-decoration: none;
  /* Alignement vertical doux quand inline dans un H3 serif. */
  vertical-align: baseline;
  /* La pill ne se coupe jamais au milieu du mot. */
  white-space: nowrap;
}

.iaf-cta-pill:hover,
.iaf-cta-pill:focus-visible {
  color: var(--iaf-cta-color);
}

/* Même géométrie que la pill iaf_text, texte blanc pour fonds type Léman 150. */
.iaf-cta-pill--on-dark {
  background-color: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.iaf-cta-pill--on-dark:hover,
.iaf-cta-pill--on-dark:focus-visible {
  color: #ffffff;
  box-shadow: var(--iaf-cta-pill-shadow-hover-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .iaf-cta,
  :where(.iaf-interaction-shift),
  :where(
    .iaf-cta-pill,
    .iaf-listing-logo__link-btn
  ),
  .iaf-modular__toggle-trigger,
  .iaf-modular__toggle-footer--open {
    transition-duration: 200ms;
  }

  .iaf-cta:hover,
  .iaf-cta:focus-visible,
  :where(.iaf-interaction-shift):hover,
  :where(.iaf-interaction-shift):focus-visible,
  :where(
    .iaf-cta-pill,
    .iaf-listing-logo__link-btn
  ):hover,
  :where(
    .iaf-cta-pill,
    .iaf-listing-logo__link-btn
  ):focus-visible,
  :where(
    .iaf-modular__toggle-trigger:hover,
    .iaf-modular__toggle-trigger:focus-visible
  ),
  :where(
    .iaf-modular__toggle.is-open .iaf-modular__toggle-footer--open:hover,
    .iaf-modular__toggle.is-open:hover .iaf-modular__toggle-footer--open
  ) {
    transform: none;
  }
}