@charset "UTF-8";

/*
 * Page événement (vue unique) — com_dpcalendar/event.
 *
 * Gabarit réécrit de zéro dans html/com_dpcalendar/event/default.php (voir
 * webdesign/Site Réemploi en Mellois-agenda.png) : bandeau plein écran,
 * badges, encadré pratique, déroulé — hors d'atteinte d'un simple habillage
 * du gabarit en grille du cœur. Classes maison (.sema-evt-*), scopées sous
 * .sema-evt pour ne rien faire fuiter sur les autres vues DPCalendar.
 */

/* Le cœur pose `.com-dpcalendar-event{display:grid;grid-template-columns:...}`
   (dpcalendar/views/event/default.min.css) pour répartir ses propres blocs
   (__taxes, __header, __information…). Le gabarit a été réécrit et ne les
   utilise plus, mais la classe reste sur le conteneur pour les hooks JS du
   cœur (impression, ajout à l'agenda). Sans ce reset, les enfants directs
   sont replacés n'importe où par la grille du cœur (repéré à l'écran : blocs
   superposés, texte compressé sur un mot par ligne). */
.com-dpcalendar-event.sema-evt {
  display: block;
}

/* ------------------------------------------------------------------- Bandeau */

/* Fond bord à bord de l'écran, comme les sections de l'accueil et la fiche
   acteur : mêmes sélecteurs que Cassiopeia (spécificité (0,4,1) à reprendre
   telle quelle, voir acteurs.css et fiche-acteur.css pour le détail).
   Le crochet est .sema-evt — porté par le conteneur racine de toute la page,
   pas seulement le bandeau — pour que .sema-evt-corps et .sema-evt-suite
   plus bas soient eux aussi plein écran et se redonnent la marge de page
   individuellement, comme .sema-fiche__grille sur la fiche acteur. */
body:not(.has-sidebar-left) .site-grid .container-component:has(.sema-evt) {
  grid-column-start: full-start;
}

body:not(.has-sidebar-right) .site-grid .container-component:has(.sema-evt) {
  grid-column-end: full-end;
}

.container-component:has(.sema-evt) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.container-component:has(.sema-evt) main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.container-component:has(.sema-evt) .mod-breadcrumbs__wrapper {
  padding-inline: var(--rem-marge-page);
}

.sema-evt-bandeau {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
  color: var(--rem-creme);
  background-color: var(--rem-terre);
}

/* Ni max-inline-size, ni margin-inline: auto — .sema-evt-bandeau est déjà
   plein écran (voir plus haut), donc « 100% » ici vaut la largeur de
   l'écran et --rem-marge-page suffit seul à retrouver la colonne de
   1320 px, comme .sema-fiche__bandeau sur la fiche acteur. Cumuler les deux
   recalcule la marge deux fois : la colonne se retrouve écrasée à ~550 px
   sur grand écran, avec un vide énorme de chaque côté — piège repéré le
   2026-09-10 sur cette page et sur .sema-evt-corps / .sema-evt-suite
   ci-dessous, mêmes causes mêmes effets. */
.sema-evt-bandeau__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-inline: var(--rem-marge-page);
}

@media (width >= 62rem) {
  .sema-evt-bandeau__inner {
    grid-template-columns: auto 1fr auto;
  }
}

/* ------------------------------------------------------------ Tampon de date */

.sema-evt-bandeau__tampon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 1rem 1.25rem;
  color: var(--rem-encre);
  text-align: center;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.4rem 0.4rem 0 var(--rem-encre);
  rotate: -2deg;
}

.sema-evt-bandeau__jour-nom {
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sema-evt-bandeau__jour-num {
  font-family: var(--rem-police-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 0.95;
}

.sema-evt-bandeau__mois {
  font-family: var(--rem-police-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sema-evt-bandeau__quand {
  margin-block-start: 0.3rem;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- Badges

   Le badge coloré est déterminé côté PHP par filiation de tag (enfant du
   tag technique « Type d'activité », alias type-dactivite, id 11) et non
   plus par une liste d'identifiants codée en dur — voir default.php. Rien
   à changer ici pour un nouveau type d'activité. */

.sema-evt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.sema-evt-badges__item {
  padding: 0.35rem 0.75rem;
  color: var(--rem-encre);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--rem-creme);
}

.sema-evt-badges__item--type {
  color: var(--rem-creme);
  background-color: var(--rem-foret);
}

/* ---------------------------------------------------------------------- Titre */

.sema-evt-titre {
  margin: 0 0 1rem;
  font-family: var(--rem-police-display);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

/* -------------------------------------------------------------------- Actions */

.sema-evt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  /* Respiration avec le titre : avant le retrait du chapô du bandeau
     (2026-09-10), c'est sa propre marge basse qui espaçait titre et boutons. */
  margin-block-start: 1.5rem;
}

/* Pas de couleur posée ici sur .sema-bouton--secondaire : `.sema-bouton` du
   composant (composants.css) porte déjà `color: inherit`, donc le bouton
   reprend le crème du bandeau tout seul. Une version antérieure fixait ce
   même crème explicitement sur ce sélecteur — à spécificité égale avec la
   règle `:hover` de composants.css (0,2,0 chacune), c'est le chargement le
   plus tardif qui gagnait, donc CETTE règle plutôt que le survol : le bouton
   restait crème sur crème au survol, texte illisible. Ne pas la réintroduire. */

/* dpcalendar/views/event/default.min.css pose `.com-dpcalendar-event
   .dp-button{...}` (spécificité (0,2,0), fond blanc, texte gris, bordure
   argent, angles arrondis) sur les mêmes boutons — nécessaire pour les
   hooks JS d'ajout à l'agenda (dp-button-copy-google). Nos classes de charte
   sont posées en plus, pas à la place (`sema-bouton dp-button …`), mais
   `.sema-bouton`/`.sema-bouton--clair` ne pèsent qu'(0,1,0) chacune : le
   cœur gagne quel que soit l'ordre de chargement des feuilles. Reprendre le
   sélecteur du cœur pour rétablir la charte sans !important. */
.com-dpcalendar-event .dp-button.sema-bouton {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-family: var(--rem-police-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background-color 0.12s ease, color 0.12s ease;
}

.com-dpcalendar-event .dp-button.sema-bouton--clair {
  color: var(--rem-encre);
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid transparent;
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
}

.com-dpcalendar-event .dp-button.sema-bouton--clair:hover,
.com-dpcalendar-event .dp-button.sema-bouton--clair:focus-visible {
  color: var(--rem-encre);
  background-color: var(--rem-creme);
  transform: translate(0.2rem, 0.2rem);
  box-shadow: 0.3rem 0.3rem 0 var(--rem-encre);
}

.com-dpcalendar-event .dp-button.sema-bouton--primaire {
  color: var(--rem-encre);
  background-color: var(--rem-moutarde);
  border: var(--rem-trait) solid transparent;
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
}

.com-dpcalendar-event .dp-button.sema-bouton--primaire:hover,
.com-dpcalendar-event .dp-button.sema-bouton--primaire:focus-visible {
  color: var(--rem-encre);
  background-color: var(--rem-moutarde);
  transform: translate(0.2rem, 0.2rem);
  box-shadow: 0.3rem 0.3rem 0 var(--rem-encre);
}

@media (prefers-reduced-motion: reduce) {
  .com-dpcalendar-event .dp-button.sema-bouton {
    transition: none;
  }

  .com-dpcalendar-event .dp-button.sema-bouton--clair:hover,
  .com-dpcalendar-event .dp-button.sema-bouton--clair:focus-visible,
  .com-dpcalendar-event .dp-button.sema-bouton--primaire:hover,
  .com-dpcalendar-event .dp-button.sema-bouton--primaire:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------- Photo */

/* Même tirage que .sema-fiche__photo sur la fiche acteur (liseré crème,
   ombre dure, léger désaxement) : demandé le 2026-09-10 pour harmoniser les
   deux traitements — l'ombre floue et la rotation plus discrète d'une
   version précédente ne reprenaient pas cette recette. */
.sema-evt-photo {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  background-color: var(--rem-creme);
  border: 0.5rem solid var(--rem-creme);
  box-shadow: 0.6rem 0.6rem 0 oklch(from var(--rem-encre) l c h / 55%);
  rotate: 2deg;
  justify-self: start;
}

@media (width >= 62rem) {
  .sema-evt-photo {
    grid-column: 3;
    inline-size: 16rem;
  }
}

.sema-evt-photo img {
  display: block;
  inline-size: 100%;
  block-size: 12rem;
  object-fit: cover;
}

.sema-evt-photo figcaption {
  padding: 0.5rem 0.6rem;
  color: var(--rem-creme);
  font-family: var(--rem-police-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-align: center;
  background-color: var(--rem-foret);
}

/* ----------------------------------------------------------------------- Corps */

.sema-evt-corps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) var(--rem-marge-page) 0;
}

@media (width >= 62rem) {
  .sema-evt-corps {
    grid-template-columns: 1fr 20rem;
    align-items: start;
  }
}

.sema-evt-principal {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
  min-inline-size: 0;
}

.sema-evt-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-inline-size: 0;
}

/* ------------------------------------------------------------------- Chapô */

/* La description de l'événement vit dans le contenu, pas dans le bandeau :
   demandé le 2026-09-10, le bandeau ne garde que le repère de date, le
   titre, les badges et les actions. Premier bloc de .sema-evt-principal,
   sans titre de section — c'est l'accroche qui introduit tout le reste. */
.sema-evt-chapo {
  max-inline-size: var(--sema-mesure, 42rem);
  margin: 0;
  color: var(--rem-encre);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.sema-evt-chapo p {
  margin-block: 0 0.85em;
}

.sema-evt-chapo p:last-child {
  margin-block-end: 0;
}

/* --------------------------------------------------------------- Titres de section */

.sema-evt-section__titre {
  margin: 0 0 1rem;
  padding-block-end: 0.45rem;
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

.sema-evt-section__contenu {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--rem-encre);
}

.sema-evt-section__contenu p {
  margin-block: 0 1em;
}

/* -------------------------------------------------------------------- Déroulé */

.sema-evt-deroule {
  padding: 1.5rem 1.75rem;
  color: var(--rem-creme);
  background-color: var(--rem-foret);
}

.sema-evt-deroule .sema-evt-section__titre {
  color: inherit;
  border-block-end-color: var(--rem-creme);
}

.sema-evt-deroule__liste {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sema-evt-deroule__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.25rem 1rem;
}

.sema-evt-deroule__heure {
  font-family: var(--rem-police-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sema-evt-deroule__titre {
  font-weight: 700;
}

.sema-evt-deroule__description {
  grid-column: 2;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* --------------------------------------------------------------- Organisé par */

.sema-organisateur__liste {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sema-organisateur__tuile {
  display: flex;
  gap: 1rem;
  max-inline-size: var(--sema-mesure, 42rem);
  padding: 1rem 1.1rem;
  background-color: var(--rem-kraft);
  border: var(--rem-trait-fin) solid var(--rem-encre);
}

.sema-organisateur__logo {
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin: 0;
  background-color: var(--rem-creme);
  border: var(--rem-trait-fin) solid var(--rem-encre);
}

.sema-organisateur__logo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 0.3rem;
}

.sema-organisateur__texte {
  min-inline-size: 0;
}

.sema-organisateur__ligne {
  margin: 0 0 0.15rem;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sema-organisateur__nom {
  margin: 0 0 0.3rem;
  font-family: var(--rem-police-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

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

.sema-organisateur__nom a:hover,
.sema-organisateur__nom a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait-fin);
}

.sema-organisateur__chapo {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ En pratique */

.sema-evt-pratique {
  padding: 1.25rem 1.4rem 1.4rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.4rem 0.4rem 0 var(--rem-encre);
}

/* Police posée sur le `dl` entier, comme .sema-fiche__pratique dl sur la
   fiche acteur : sans elle, `dd` hérite de la police par défaut du corps
   (celle de Cassiopeia), pas de la charte — seul `dt` la reprenait jusqu'ici. */
.sema-evt-pratique__liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--rem-police-mono);
}

.sema-evt-pratique__liste dt {
  color: var(--rem-terre);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sema-evt-pratique__liste dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.sema-evt-pratique__bouton {
  display: block;
  inline-size: 100%;
  text-align: center;
}

/* --------------------------------------------------------------- Ça revient */

.sema-evt-recurrence {
  padding: 1.25rem 1.4rem 1.4rem;
  color: var(--rem-creme);
  background-color: var(--rem-olive);
  border: var(--rem-trait) solid var(--rem-encre);
}

.sema-evt-recurrence__accroche {
  margin: 0;
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.sema-evt-recurrence__titre {
  margin: 0.25rem 0 1rem;
  font-family: var(--rem-police-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

.sema-evt-recurrence__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sema-evt-recurrence__dates a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  color: var(--rem-encre);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  text-decoration: none;
  background-color: var(--rem-kraft);
}

.sema-evt-recurrence__dates a:hover,
.sema-evt-recurrence__dates a:focus-visible {
  background-color: var(--rem-moutarde);
  text-decoration: underline;
}

/* « Les prochaines dates » : c'était ici, en bande kraft avec ses propres
   cartes .sema-evt-suite__*. Remplacé le 2026-09-10 par le module 129
   (mod_dpcalendar_upcoming, layout cassiopeia_reemploi:agenda, position
   evenement-bas, rendu par default.php) — même mécanisme que « Prochains
   rendez-vous » sur l'accueil : styles dans agenda.css. Deux écarts propres
   à cette page, ci-dessous : le fond et l'espacement du haut.

   Fond kraft et non forêt (comme sur l'accueil) : sur la fiche événement,
   cette section précède directement le pied de page, lui aussi en forêt —
   les deux se confondraient sans un fond différent. Toutes les couleurs de
   texte du module sont pensées pour le forêt ; sur kraft, encre est le seul
   choix qui reste lisible.

   Marge du haut : .sema-evt-corps n'a pas de padding-block-end (0, voir plus
   haut) — sur l'accueil, l'espacement avec la section précédente vient de la
   frontière entre deux positions de gabarit différentes, qui n'existe pas
   ici : tout est dans le même .sema-evt. Sans cette marge, la section
   touchait directement l'encadré « Ça revient » de la colonne de droite. */
.sema-evt .sema-agenda {
  margin-block-start: clamp(3rem, 5vw, 4rem);
  color: var(--rem-encre);
  background-color: var(--rem-kraft);
}

.sema-evt .sema-agenda__tout a {
  color: var(--rem-terre);
}