/* Bloc « À voir ensuite », posé entre la fin de page et le pied de page.
   Corps, graisse et interlignage du titre, du surtitre et du lien viennent des styles
   généraux du site (h2, p, a) : ne pas les redéclarer ici.
   Le fond reprend le blanc du pied de page : le bloc sort de la zone #fafafa du projet. */

.suite {
  --suite-papier: oklch(100% 0 0);
  --suite-attente: oklch(95% 0 0);
  --suite-filet: oklch(0% 0 0 / 0.06);
  --suite-marge: 6vw; /* marge mobile de la pagination du site */
  --suite-sortie: cubic-bezier(0.23, 1, 0.32, 1);

  background: var(--suite-papier);
  padding: clamp(3.5rem, 7vw, 7rem) var(--suite-marge) clamp(2.5rem, 4vw, 4rem);
  font-family: aktiv-grotesk, sans-serif;
}

.suite .suite-lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "tete"
    "cadre"
    "action";
  row-gap: 1.25rem;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.suite .suite-lien:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.suite-tete {
  grid-area: tete;
  min-width: 0;
}

.suite .suite-surtitre {
  margin: 0;
  line-height: 1.2;
}

.suite .suite-titre {
  margin: 0.3em 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.suite-cadre {
  grid-area: cadre;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--suite-attente);
  transition: transform 160ms var(--suite-sortie);
}

.suite .suite-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%; /* sur un portrait recadré, garde le haut du sujet */
  outline: 1px solid var(--suite-filet);
  outline-offset: -1px; /* une image claire ne se dissout pas dans le blanc */
  transition: transform 280ms var(--suite-sortie);
}

.suite-action {
  grid-area: action;
  justify-self: start;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.suite-lien:active .suite-cadre {
  transform: scale(0.98);
}

@media (min-width: 768px) {
  .suite {
    --suite-marge: 3vw; /* marge des images du site sur ordinateur */
  }

  .suite .suite-lien {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 50%, 760px));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "tete cadre"
      "action cadre";
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1.5rem;
  }

  .suite-action {
    align-self: end;
  }
}

@media (hover: hover) and (pointer: fine) {
  .suite-lien:hover .suite-image {
    transform: scale(1.02);
  }

  .suite-lien:hover .suite-action {
    text-decoration-thickness: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-cadre,
  .suite .suite-image {
    transition: opacity 160ms ease;
  }

  .suite-lien:active .suite-cadre {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .suite-lien:hover .suite-image {
    transform: none;
    opacity: 0.88;
  }
}