@charset "UTF-8";

/*
 * « Prochains rendez-vous » — module 120, mod_dpcalendar_upcoming.
 * Layout alternatif `cassiopeia_reemploi:agenda` : le balisage est le nôtre,
 * plus aucune classe de DPCalendar à combattre.
 *
 * Section sur fond forêt : c'est le contraste sombre de la maquette, entre le
 * kraft des acteurs et le crème des actualités.
 */

.site-grid > .container-bottom-a {
  grid-column: full-start / full-end;
  max-width: none;
  padding: 0;
}

/* Cassiopeia pose `margin: .5em 0` sur CHAQUE enfant des positions top-a, top-b,
   bottom-a et bottom-b. Une section pleine largeur en hérite et laisse
   apparaître une bande de fond de page entre deux sections colorées.
   C'était la seule cause de l'espace entre les sections acteurs et agenda : le
   conteneur de composant, pourtant vide, n'y était pour rien. */
.container-top-a > *,
.container-top-b > *,
.container-bottom-a > *,
.container-bottom-b > * {
  margin-block: 0;
}

/* Seconde cause, distincte de la précédente : l'accueil n'a aucun contenu
   d'article — toute la page est faite de modules — mais le conteneur de
   composant occupe quand même de la hauteur entre les sections acteurs et
   agenda. On masque le <main> plutôt que le conteneur entier, pour que
   #system-message-container puisse continuer d'afficher les messages de Joomla.
   `page-accueil` vient du suffixe de classe de page de l'entrée de menu Accueil.
   À retirer si l'accueil reçoit un jour du contenu rédactionnel. */
body.page-accueil .site-grid > .container-component {
  padding-block: 0;
}

body.page-accueil .site-grid > .container-component > main {
  display: none;
}

/* `:empty` : le conteneur de messages ne disparaît que tant qu'il est vide.
   Dès que Joomla y écrit, il réapparaît. */
body.page-accueil #system-message-container:empty {
  display: none;
}

/* Grille de section : le titre et le lien « tout l'agenda » 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 gabarit. */
.sema-agenda {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--rem-marge-page);
  color: var(--rem-creme);
  background-color: var(--rem-foret);
}

.sema-agenda__titre {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: inherit;
  font-family: var(--rem-police-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

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

.sema-agenda__tout {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Moutarde et non terre cuite : sur le fond forêt, la terre cuite tombe sous
   3:1 alors que la moutarde dépasse 7:1. */
.sema-agenda__tout a {
  color: var(--rem-moutarde);
  text-decoration: none;
}

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

.sema-agenda__liste {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (width >= 40rem) {
  .sema-agenda__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .sema-agenda__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.sema-agenda__evenement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  block-size: 100%;
  padding: 1.25rem 1.4rem;
  color: var(--rem-encre);
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
}

/* Date et horaire sur une ligne, en Courier terre cuite comme la maquette.
   Filet en dessous : sur un agenda, la date est l'information de tête — elle se
   lit avant le titre, et le trait l'isole du reste de la carte. */
.sema-agenda__quand {
  margin: 0 0 0.25rem;
  padding-block-end: 0.6rem;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-block-end: var(--rem-trait-fin) solid var(--rem-encre);
}

.sema-agenda__heure {
  margin-inline-start: 0.5rem;
  color: var(--rem-encre);
  font-weight: 400;
}

.sema-agenda__evenement-titre {
  margin: 0;
  font-family: var(--rem-police-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

.sema-agenda__evenement-titre a {
  color: var(--rem-encre);
  text-decoration: none;
}

.sema-agenda__evenement-titre a:hover,
.sema-agenda__evenement-titre a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait);
  text-underline-offset: 0.25em;
}

/* Colle le lieu en pied de carte : les cartes s'alignent quelle que soit la
   longueur du titre. */
.sema-agenda__lieu {
  margin: auto 0 0;
  padding-block-start: 0.75rem;
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Pas de lien : cible /component/dpcalendar/location/{id}, une page nue sans
   gabarit ni contenu prévu — même piège déjà corrigé sur la liste de
   l'agenda (default_events_locations.php). */

.sema-agenda__commune {
  color: var(--rem-olive);
}

.sema-agenda__annule {
  margin: 0;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}