@charset "UTF-8";

/*
 * « Structure, artisan, bénévole : rejoignez le réseau » — module 122,
 * mod_custom en position bottom-b, juste après les actualités.
 *
 * Aucune surcharge : chrome `cassiopeia-noCard` pour la <section> et le <h2>,
 * layout `cassiopeia_reemploi:brut` pour que les deux paragraphes saisis dans le
 * module soient enfants directs de la section — donc placés dans la grille
 * ci-dessous sans div intermédiaire.
 *
 * Le bord déchiré du haut ne tient à aucune règle d'ici : il vient des classes
 * `sema-bord-dechire sema-bord-dechire--haut`, posées dans le suffixe de classe
 * du module et définies dans `composants.css`.
 */

.sema-rejoindre {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  /* Le haut ménage la place de la dentelure, qui remonte de 1,5 rem. */
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--rem-marge-page);
  color: var(--rem-creme);
  background-color: var(--rem-terre);
  /* Couleur de la dentelure : ici celle de la section **elle-même**, puisque
     ses dents mordent vers le haut, sur le crème des actualités. */
  --rem-dechirure-couleur: var(--rem-terre);
}

.sema-rejoindre__titre {
  grid-column: 1;
  grid-row: 1;
  /* La largeur est bornée pour que le titre se casse après « bénévole : »,
     comme dans la maquette : sur toute la largeur disponible il tiendrait sur
     une seule ligne et perdrait son aplomb. Pas de `text-wrap: balance` ici,
     qui égaliserait les deux lignes et déplacerait la césure. */
  max-inline-size: 50rem;
  margin: 0 0 1.1rem;
  color: inherit;
  font-family: var(--rem-police-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Courier comme la maquette, mais en gras et jamais en dessous de 19 px : le
   crème sur terre cuite plafonne à 3,6:1, ce qui ne passe qu'au titre de « texte
   de grande taille » (≥ 18,66 px en gras). En corps de texte ordinaire, cette
   ligne échouerait au critère de contraste. */
.sema-rejoindre__texte {
  grid-column: 1;
  grid-row: 2;
  max-inline-size: 46ch;
  margin: 0;
  font-family: var(--rem-police-mono);
  font-size: clamp(1.2rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.7;
}

.sema-rejoindre__action {
  grid-column: 1;
  grid-row: 3;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/* À partir de 52 rem, le bouton passe à droite et occupe les deux rangées de
   texte, centré comme dans la maquette. */
@media (width >= 52rem) {
  .sema-rejoindre {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .sema-rejoindre__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
}

/* Le bouton porte déjà son ombre : la marge droite empêche qu'elle soit rognée
   par le bord de la section. */
.sema-rejoindre__action .sema-bouton {
  margin-inline-end: 0.5rem;
  font-size: 1.05rem;
}