/*
 * Article : colonne de lecture (auteur et date, photo principale, blocs du contenu, partage) et colonne
 * des derniers articles, collante sur ordinateur. Le premier paragraphe du premier texte est le chapeau.
 */
@layer pages {
  .p-article {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-width: var(--prose);
  }

  .p-article__photo,
  .p-article__image {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;

    & a {
      display: block;
      overflow: hidden;
      border-radius: var(--r-md);
    }

    & figcaption {
      color: var(--c-text-3);
      font-size: var(--fs-xs);
    }
  }

  /* Photo principale : entière, jamais rognée (un cadrage fixe coupait la tête des personnes en haut de la photo) */
  .p-article__photo img {
    width: 100%;
    height: auto;
  }

  /* Photo d'un bloc : entière, à sa taille, au plus la largeur de la colonne (une affiche s'y étale pour rester lisible) */
  .p-article__image {
    align-items: flex-start;

    & img {
      width: auto;
      max-width: 100%;
      height: auto;
    }
  }

  /* Galerie : la grille des photos prend quatre colonnes sur ordinateur, trois dans la colonne de lecture */
  @media (min-width: 1025px) {
    .p-article__galerie {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Pas de voile marine au survol : il assombrirait des affiches qu'on veut lire */
  .p-article__galerie .c-photo-tile__lien::after {
    display: none;
  }

  .p-article__contenu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    margin-top: var(--sp-2);

    & > .c-texte-riche:first-child > p:first-of-type {
      color: var(--c-navy);
      font-size: var(--fs-lg);
      font-weight: var(--fw-regular);
      line-height: var(--lh-body);
    }
  }

  .p-article__partage {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
  }

  .p-article__aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .p-article__aside-titre {
    font-size: var(--fs-lg);
  }

  .p-article__aside-texte {
    margin-top: calc(-1 * var(--sp-2));
    color: var(--c-text-3);
    font-size: var(--fs-sm);
  }

  .p-article__derniers {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
}