/* ==========================================================================
   Activités, annonces, mise à l'honneur (§9.1, §9.3).
   Aucune couleur écrite ici : uniquement des variables de tokens.css.
   ========================================================================== */

/* --- Les trois colonnes des activités --------------------------------------
   Le §9.3 demande trois colonnes, le §6 impose de tenir à 375 px. La grille
   tranche seule : une pile sur un téléphone, trois colonnes dès qu'il y a la
   place. Aucune requête de média n'est écrite pour le passage — `auto-fit` et
   un minimum de 17 rem s'en chargent, et rien ne casse à une largeur qu'on
   n'aurait pas prévue. */

.colonnes-activites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: calc(var(--pas) * 3);
  align-items: start;
}

/* La section porte déjà sa marge haute ; dans une colonne elle la reprendrait
   au sommet de la grille et décalerait les trois têtes les unes des autres. */
.colonne-activites > .section { margin-top: 0; }

/* --- Le tableau des annonces ----------------------------------------------- */

.annonce {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 4);
}
.annonce + .annonce { border-top: 1px solid var(--filet); }

.annonce__entete {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  flex-wrap: wrap;
}
.annonce__titre { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.2px; }
.annonce__texte { font-size: 0.88rem; line-height: 1.5; color: var(--encre-70); white-space: pre-wrap; }
.annonce__pied {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--encre-55);
}
/* Une annonce périmée reste lisible dans l'écran de gestion, mais se voit :
   elle n'est plus affichée aux autres, et rien ne doit le laisser oublier. */
.annonce--perimee { opacity: 0.55; }

/* --- La mise à l'honneur de la semaine ------------------------------------- */

.honneur {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pas) * 4);
  padding: calc(var(--pas) * 4);
}
.honneur__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--pas) * 1.5); }
.honneur__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; }
.honneur__classe { font-size: 0.76rem; color: var(--encre-55); font-weight: 600; }
.honneur__texte { font-size: 0.9rem; line-height: 1.5; color: var(--encre-70); white-space: pre-wrap; }
.honneur__lien {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primaire-profond);
}