/*
 * Accueil : chapôs, photos des sections (coins arrondis, recadrées), encart des infos, bandeau de l'Amicale, section
 * Nous rejoindre. La mise en page vient des classes l- (l-split, l-grid), les cartes de leurs composants.
 */
@layer pages {
  .p-accueil__chapo,
  .p-accueil__intro {
    max-width: var(--lecture);
    color: var(--tone-text);
  }

  .p-accueil__chapo {
    font-size: var(--fs-lead);
  }

  /* Même écart vertical que la grille des articles d'à côté */
  .p-accueil__infos {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  /* Les infos sont centrées (image, texte, lien : demande du 2026-10-26) ; leur titre, comme celui des rendez-vous,
     le titre de la colonne et les rendez-vous restent à gauche */
  .p-accueil__infos .c-info-card {
    text-align: center;

    & :is(.c-info-card__image, .c-info-card__suite) {
      align-self: center;
    }
  }

  /* Téléphone et tablette (la page tient en une colonne) : les dernières infos passent avant les articles, la
     colonne de droite de l'ordinateur ; elles restent après dans le code de la page, qui suit l'ordinateur */
  @media not all and (min-width: 1025px) {
    .p-accueil__infos {
      order: -1;
    }
  }

  /* « Toutes les actualités », sous les articles, à gauche */
  .p-accueil__toutes {
    display: flex;
    justify-content: flex-start;
  }

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

  .p-accueil__photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-md);
    object-fit: cover;
  }

  /* Photo de « Nous rejoindre » : en bandeau sous le texte */
  .p-accueil__photo--large {
    aspect-ratio: 12 / 5;
  }

  .p-accueil__amicale-carte {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }

  .p-accueil__rejoindre {
    gap: var(--sp-6);
  }
}