@import url("https://unpkg.com/wave-ui/dist/wave-ui.css");
:root {
  --group1: rgba(221, 238, 255, 0.5);
  --group2: rgba(255, 206, 178, 0.5);
  --group3: rgba(221, 255, 239, 0.5);
  --group4: rgba(255, 250, 196, 0.5);
  --group5: rgba(255, 232, 251, 0.5);
  --background-gray: rgba(242, 242, 242, 1);
  --background-default: white;
  --target-color: rgba(255, 250, 196, 0.5);

  /* outdoor */
  --green-primary: rgba(157, 217, 63, 1);
  --green-dark: rgba(133, 208, 0, 1);
  --event-type-outdoor-primary: var(--green-primary);
  --event-type-outdoor-dark: var(--green-dark);

  /* hands-on contribution */
  --yellow-primary: rgba(255, 236, 106, 1);
  --yellow-dark: rgba(254, 232, 65, 1);
  --event-type-hands-on-primary: var(--yellow-primary);
  --event-type-hands-on-dark: var(--yellow-dark);

  /* social */
  --orange-primary: rgba(253, 156, 66, 0.9);
  --orange-dark: rgba(233, 136, 46, 1);
  --event-type-social-primary: var(--orange-primary);
  --event-type-social-dark: var(--orange-dark);

  /* maker */
  --blue-primary: rgba(93, 132, 184, 1);
  --blue-dark: rgba(50, 102, 166, 1);
  --event-type-maker-primary: var(--blue-primary);
  --event-type-maker-dark: var(--blue-dark);

  /* talk */
  --red-primary: rgba(255, 102, 102, 0.9);
  --red-dark: rgba(235, 82, 82, 1);
  --event-type-talk-primary: var(--red-primary);
  --event-type-talk-dark: var(--red-dark);

  --event-type-welcome-dark: var(--background-gray);
  --event-type-repas-dark: var(--background-gray);
  --event-type-rangement-dark: var(--background-gray);

  --event-type-margin: 4px;
  --event-margin: 8px;
}

.qr-code {
  float: right;
  width: 15em;
  height: 15em;
  top: 0;
  margin-right: 5em;
  margin-bottom: 6em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* remove text wrapping */
  white-space: nowrap;
  dl {
    display: grid;
    grid-template-columns: max-content auto;
    margin-top: .5em;
  }
  dl dt {
    margin-top: 0;
    width: fit-content;
    grid-column-start: 1;
  }
  dl dd {
    padding: 0;
    grid-column-start: 2;
    text-align: left;
    margin-bottom: 0;
  }
  dl code {
    margin-left: .5em;
  }
}

#LàO {
  & .lead.top {
    max-width: 60vw;
    margin-left: 2em;
  }
  & .lead {
    max-width: 80vw;
    text-align: left;
    margin: auto;
    margin-bottom: 1em;
  }
  & .lead:last-of-type {
    margin-bottom: 2em;
  }
}
/* You can easily set a different style for each split of your days. */
.vuecal__cell-split.track-fete1 {
  background-color: var(--background-default); /*rgba(221, 238, 255, 0.5); */
}

.vuecal__cell-split.track-fete2 {
  background-color: var(--background-gray); /*rgba(255, 206, 178, 0.5); */
}

.vuecal__cell-split.track-presby {
  background-color: var(--background-default); /*rgba(221, 255, 239, 0.5); */
}

.vuecal__cell-split.track-outdoor {
  background-color: var(--background-gray); /*rgba(255, 250, 196, 0.5); */
}

.vuecal__cell-split.kid3 {
  background-color: var(--background-default); /*rgba(255, 232, 251, 0.5); */
}

.vuecal__cell-split .split-label {
  color: var(--w-disabled-color);
  font-size: larger;
  height: 3em;
  display: inline-block;
  align-content: center;
}

/* Different color for different event types. */
.vuecal__event.social {
  background-color: var(--event-type-social-primary);
  border: 1px solid var(--event-type-social-dark);
  color: var(--background-default);
}

.vuecal__event.hands-on {
  background-color: var(--event-type-hands-on-primary);
  border: 1px solid var(--event-type-hands-on-dark);
}

.vuecal__event.talk {
  background-color: var(--event-type-talk-primary);
  border: 1px solid var(--event-type-talk-dark);
  color: var(--background-default);
}

.vuecal__event.maker {
  background-color: var(--event-type-maker-primary);
  border: 1px solid var(--event-type-maker-dark);
  color: var(--background-default);
}

.vuecal__event.outdoor {
  background-color: var(--event-type-outdoor-primary);
  border: 1px solid var(--event-type-outdoor-dark);
  color: var(--background-default);
}

.vuecal__event.repas {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vuecal__event.repas,
.vuecal__event.welcome,
.vuecal__event.rangement {
  background: repeating-linear-gradient(
    45deg,
    var(--background-default),
    var(--background-default) 10px,
    rgba(242, 242, 242, 1) 10px,
    rgba(242, 242, 242, 1) 20px
  );
  /* IE 10+ */
  color: rgba(153, 153, 153, 1);
}

.vuecal__event-time {
  display: none;
  align-items: center;
}

.vuecal__event {
  cursor: pointer;
}

.vuecal__event-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 4px 0 4px;
}

.vuecal__event-content {
  font-style: italic;
}

/* Styles pour le programme statique */
.programme-section {
  margin: 40px 0;
}

.programme-section .w-app {
  min-height: auto;
}
.event-card::after {
  display: inline-block;
  content: " ";
  position: relative;
  bottom: 3vh;
  width: calc(100% - var(--event-type-margin) * 2);
  height: 3vh;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.75), #fff) left
    repeat;
  margin-left: var(--event-type-margin);
}
.event-card .event-card-content {
  height: 15em;
  overflow-y: auto;
  position: relative;
}
.event-card-content {
  border: 1px solid #ddd;
  border-radius: var(--event-margin);
  padding: 15px;
  background: var(--background-default);
  box-shadow: 0 2px var(--event-type-margin) rgba(0, 0, 0, 0.1);
}

.event-card .event-card-content .event-time {
  position: absolute;
  top: 0.5em;
}

.event-card-content.welcome,
.event-card-content.repas,
.event-card-content.rangement {
  background: var(--background-gray);
}
.event-card:has(.event-card-content.repas)::after,
.event-card:has(.event-card-content.welcome)::after,
.event-card:has(.event-card-content.rangement)::after {
  background: linear-gradient(
      transparent,
      hwb(from var(--background-gray) h w b / 0.75),
      var(--background-gray)
    )
    left repeat;
}
.event-card-content.welcome {
  border-left: var(--event-type-margin) solid var(--event-type-welcome-primary);
}
.event-card-content.repas {
  border-left: var(--event-type-margin) solid var(--event-type-repas-primary);
}
.event-card-content.rangement {
  border-left: var(--event-type-margin) solid
    var(--event-type-rangement-primary);
}

.event-card-content.talk {
  border-left: var(--event-type-margin) solid var(--event-type-talk-primary);
}
.event-card-content.hands-on {
  border-left: var(--event-type-margin) solid var(--event-type-hands-on-primary);
}
.event-card-content.maker {
  border-left: var(--event-type-margin) solid var(--event-type-maker-primary);
}
.event-card-content.outdoor {
  border-left: var(--event-type-margin) solid var(--event-type-outdoor-primary);
}

article:has(> :target),
div:has(> article > :target)::after {
  background: var(--target-color);
}
article.event-card-content:has(> :target) {
  border-left-width: calc(var(--event-type-margin) * 2);
}

.event-time {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.1em;
}

.event-title {
  font-size: 1.3em;
  margin: 10px 0;
  color: #2c3e50;
}

.event-speaker {
  color: #7f8c8d;
  font-style: italic;
  margin: 5px 0;
}

.event-description {
  margin: 10px 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
  padding: 15px;
  background: var(--background-default);
  border-radius: var(--event-margin);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--event-margin);
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: var(--event-type-margin);
  margin-right: var(--event-type-margin);
}

/* Styles pour le filtrage */
.event-card.filtered-out,
.event-card-content.filtered-out {
  display: none !important;
}

/* Styles pour l'impression */
/* #app should use full height and printing should be in landscape */
@media print {
  @page {
    size: landscape;
    margin: 0;
  }
  #app .vuecal {
    height: auto !important;
  }
  /* Masquer tout sauf le programme */
  body > div:not(#LàO),
  #LàO > *:not(#app):not(.programme-section),
  #LàO h1,
  #LàO .lead,
  #LàO > ul,
  #LàO h2:not(#programme),
  #LàO h2:not(#programme-detail-title),
  #LàO #affiche,
  #LàO #remerciements,
  #LàO .footer,
  .anchorjs-link,
  .event-card::after,
  script {
    display: none !important;
  }

  #LàO {
    max-width: 100vw;
  }
  /* Afficher le programme */
  #LàO #app,
  #LàO .programme-section {
    display: block !important;
  }
  #LàO .programme-section {
    margin: 0;
    padding: 0;
  }

  /* Optimiser l'affichage pour l'impression */
  #fete2 {
    break-before: always;
  }

  /* Éviter les coupures de page dans les cartes */
  .event-card {
    break-inside: avoid;
    /* margin-bottom: 2em; */
  }
  /* Supprimer les ombres et effets pour l'impression */
  .event-card .event-card-content {
    box-shadow: none;
    /* border: 1px solid #ddd; */
    height: 18em;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    margin-bottom: 10px;
  }
  /* Masquer les éléments interactifs non nécessaires */
  event-legend[interactive] {
    /* display: none !important; */
  }
  /* Ajuster la légende pour l'impression */
  event-legend:not([interactive]) {
    break-after: avoid;
  }
}