@charset "UTF-8";

/*
 * « Actualités » — module 121, mod_articles, position bottom-b.
 *
 * Layout alternatif `cassiopeia_reemploi:actualites` : il ne fait qu'ajouter la
 * date avant le titre et le lien « Toutes les actualités ». Tout le reste des
 * classes (.mod-articles-*) vient du cœur, et toute la mise en page est ici.
 *
 * La brève en vedette est la **première de la liste**, pas une brève marquée
 * comme telle : c'est le rang qui décide, donc rien à saisir en administration.
 * Réordonner ou publier une actualité plus récente suffit à changer la vedette.
 */

/* Fond crème pleine largeur, après le fond forêt de l'agenda : c'est le dernier
   temps clair de l'alternance olive → crème → kraft → forêt → crème. */

/* La grille du conteneur `.container-bottom-b` (partagée avec Ressources et
   Rejoindre) vit dans accueil-bottom-b.css, chargée par les trois gabarits
   concernés — ce n'est pas une affaire de style de carte propre à Actualités. */

/* Grille de section : le titre et le lien « toutes les actualités » partagent la
   première ligne, la liste occupe la seconde. Placement explicite, donc
   indépendant de l'ordre du DOM — le lien est imprimé en dernier par le layout. */
/* En dessous de 40 rem, tout s'empile : un titre et un lien côte à côte dans une
   colonne `auto` débordent de l'écran dès que le titre est un peu long — c'est
   ce qui arrive sur un mobile étroit. */
.sema-actus {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--rem-marge-page);
  background-color: var(--rem-creme);
}

.sema-actus__titre {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-block-end: 0.6rem;
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

.sema-actus__tout {
  grid-column: 1;
  grid-row: 2;
  margin: 0.75rem 0 0;
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (width >= 40rem) {
  .sema-actus {
    grid-template-columns: minmax(0, 1fr) auto;
    /* `end` et non `baseline` : les deux éléments d'en-tête portent chacun la
       moitié du filet, leurs bords bas doivent coïncider pour qu'il n'en fasse
       qu'un seul. */
    align-items: end;
  }

  .sema-actus__tout {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-block-end: 0.9rem;
    padding-inline-start: 1.5rem;
    border-block-end: var(--rem-trait) solid var(--rem-encre);
  }

  .sema-actus .mod-articles-items {
    grid-row: 2;
  }
}

/* Forêt et non terre cuite : sur le crème, la terre cuite plafonne à ~3,5:1,
   insuffisant pour du texte de cette taille. Voir la note de la synthèse. */
.sema-actus__tout a {
  color: var(--rem-foret);
  text-decoration: none;
}

.sema-actus__tout a:hover,
.sema-actus__tout a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------------ Grille */

.sema-actus .mod-articles-items {
  grid-column: 1 / -1;
  /* Rangée 3 tant que l'en-tête est empilé, rangée 2 dès qu'il repasse sur une
     seule ligne (voir la requête média ci-dessus). */
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (width >= 48rem) {
  .sema-actus .mod-articles-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La vedette occupe toute la largeur ; les suivantes se rangent en dessous. */
  .sema-actus .mod-articles-items > li:first-child {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------- Carte */

.sema-actus .mod-articles-item {
  display: flex;
  flex-direction: column;
  /* Sans ça, un mot insécable dans le corps (adresse e-mail, URL collée dans
     le texte — ça arrive, voir la liste des actualités) impose sa largeur
     minimale à la tuile, qui déborde alors de sa piste de grille et fait
     déborder la page entière en mobile. Même piège que le bandeau d'en-tête
     (header.css) : un enfant de grille en `display:flex` a un minimum par
     défaut fondé sur son contenu, que `minmax(0, 1fr)` sur la piste ne suffit
     pas à annuler. */
  min-inline-size: 0;
  block-size: 100%;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
}

/* `.mod-articles-image` est la <figure>, pas l'<img> : le recadrage se règle
   sur l'image qu'elle contient. */
.sema-actus .mod-articles-image {
  margin: 0;
  overflow: hidden;
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

.sema-actus .mod-articles-image img {
  display: block;
  inline-size: 100%;
  block-size: clamp(9rem, 16vw, 12rem);
  object-fit: cover;
}

.sema-actus .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.4rem 1.5rem;
}

.sema-actus .sema-actus__date {
  margin: 0 0 0.6rem;
  color: color-mix(in oklch, var(--rem-encre) 65%, transparent);
  font-family: var(--rem-police-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.sema-actus .mod-articles-title {
  margin: 0;
  font-family: var(--rem-police-display);
  /* Mesuré sur la maquette : ~23 px à 1440 pour les brèves secondaires. */
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

.sema-actus .mod-articles-link {
  color: var(--rem-encre);
  text-decoration: none;
}

.sema-actus .mod-articles-link:hover,
.sema-actus .mod-articles-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait);
  text-underline-offset: 0.25em;
}

/* Chapô : rendu par le cœur, donc dans des <p> anonymes. Coupure autorisée à
   l'intérieur d'un mot trop long (adresse e-mail, URL) plutôt que de laisser
   le mot forcer la largeur de la tuile — filet de sécurité en complément du
   `min-inline-size: 0` posé sur la tuile elle-même. */
.sema-actus .mod-articles-item-content p:not(.sema-actus__date) {
  margin: 0.9rem 0 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.6;
}

.sema-actus .mod-articles-item-content ul,
.sema-actus .mod-articles-item-content ol {
  overflow-wrap: anywhere;
}

/* Un seul paragraphe d'accroche. La troncature du cœur compte des caractères
   sans regarder les paragraphes : quelle que soit la limite réglée, elle laisse
   presque toujours un second paragraphe amputé, suivi de points de suspension.
   On n'affiche donc que le premier, entier — la limite du module ne sert plus
   qu'à borner un chapô exceptionnellement long. `.sema-actus__suite` (liste
   uniquement, voir plus bas) est exclu des deux côtés du sélecteur : c'est le
   seul paragraphe qui doit survivre après le premier. */
.sema-actus .mod-articles-item-content p:not(.sema-actus__date, .sema-actus__suite) ~ p:not(.sema-actus__suite) {
  display: none;
}

/* Lien « Lire la suite » (liste uniquement : la brève d'accueil ne le pose
   pas). Rendu systématiquement, pas seulement quand le cœur détecte une
   coupure « Lire la suite » dans l'article — le contenu de démonstration ne
   l'utilise pas, il n'y aurait donc aucun repère indiquant que le chapô est
   tronqué. `margin-block-start: auto` le colle en pied de tuile quelle que
   soit la hauteur du chapô au-dessus (la tuile étant déjà en flex colonne). */
.sema-actus__suite {
  margin-block-start: auto;
  padding-block-start: 0.9rem;
}

.sema-actus__suite a {
  color: var(--rem-foret);
  font-family: var(--rem-police-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.sema-actus__suite a:hover,
.sema-actus__suite a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.3em;
}

/* --------------------------------------------------------------- Vedette */

/* Deux colonnes seulement si la brève a bien un visuel : sans ce garde-fou,
   une vedette sans image laisserait une colonne vide. */
@media (width >= 48rem) {
  .sema-actus .mod-articles-items > li:first-child .mod-articles-item:has(.mod-articles-image) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .sema-actus .mod-articles-items > li:first-child .mod-articles-image {
    block-size: 100%;
    border-block-end: 0;
    border-inline-end: var(--rem-trait) solid var(--rem-encre);
  }

  .sema-actus .mod-articles-items > li:first-child .mod-articles-image img {
    block-size: 100%;
    min-block-size: 17rem;
  }

  .sema-actus .mod-articles-items > li:first-child .mod-articles-item-content {
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.25rem);
  }

  .sema-actus .mod-articles-items > li:first-child .mod-articles-title {
    /* Mesuré sur la maquette : ~33 px à 1440. */
    font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  }

  .sema-actus .mod-articles-items > li:first-child .mod-articles-item-content p:not(.sema-actus__date) {
    font-size: 1.05rem;
  }
}

/* Corps kraft sur la vedette, à toutes les largeurs : c'est ce qui la distingue
   des brèves secondaires quand la grille repasse en une colonne. */
.sema-actus .mod-articles-items > li:first-child .mod-articles-item-content {
  background-color: var(--rem-kraft);
}

.sema-actus .mod-articles-items > li:first-child .sema-actus__date {
  color: var(--rem-terre);
  font-weight: 700;
}