:root {
  --numDays: 7;
  --numHours: 32;
  --timeHeight: 40px;
  --calBgColor: #f1f1f1;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #fff18a;
  --eventColor1-1: #ffbb5d;
  --eventColor1-2: #fa5539;
  --eventColor2: #d1ffe6;
  --eventColor3: #d1f2ff;
  --eventColor4: #fff;
  --eventColor5: #bbb;
}

.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
  width: 100%;
  font-family: system-ui, sans-serif;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (min-width: 600px) {
  .calendar.mixte .days {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}
.events {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

.moduleEnsemble {
  grid-column: span 2;
}

.moduleNiveau {
  grid-column: span 1;
}

/*.start-8 { grid-row-start : 2}
.start-9 { grid-row-start : 3}
.start-10 { grid-row-start: 4}
.start-11 { grid-row-start: 5}
.start-12 { grid-row-start: 6}
.start-13 { grid-row-start: 7}
.start-14 { grid-row-start: 8}
.start-15 { grid-row-start: 9}
.start-16 { grid-row-start: 10}
.start-17 { grid-row-start: 11}
.start-18 { grid-row-start: 12}
.start-19 { grid-row-start: 13}
.start-20 { grid-row-start: 14}
.start-21 { grid-row-start: 15}
.start-22 { grid-row-start: 16}

.end-9 { grid-row-end: 3}
.end-10 { grid-row-end: 4}
.end-11 { grid-row-end: 5}
.end-12 { grid-row-end: 6}
.end-13 { grid-row-end: 7}
.end-14 { grid-row-end: 8}
.end-15 { grid-row-end: 9}
.end-16 { grid-row-end: 10}
.end-17 { grid-row-end: 11}
.end-18 { grid-row-end: 12}
.end-19 { grid-row-end: 13}
.end-20 { grid-row-end: 14}
.end-21 { grid-row-end: 15}
.end-22 { grid-row-end: 16}
.end-23 { grid-row-end: 17}*/
.start-8-00 {
  grid-row-start: 3;
}

.start-8-30 {
  grid-row-start: 4;
}

.start-9-00 {
  grid-row-start: 5;
}

.start-9-30 {
  grid-row-start: 6;
}

.start-10-00 {
  grid-row-start: 7;
}

.start-10-30 {
  grid-row-start: 8;
}

.start-11-00 {
  grid-row-start: 9;
}

.start-11-30 {
  grid-row-start: 10;
}

.start-12-00 {
  grid-row-start: 11;
}

.start-12-30 {
  grid-row-start: 12;
}

.start-13-00 {
  grid-row-start: 13;
}

.start-13-30 {
  grid-row-start: 14;
}

.start-14-00 {
  grid-row-start: 15;
}

.start-14-30 {
  grid-row-start: 16;
}

.start-15-00 {
  grid-row-start: 17;
}

.start-15-30 {
  grid-row-start: 18;
}

.start-16-00 {
  grid-row-start: 19;
}

.start-16-30 {
  grid-row-start: 20;
}

.start-17-00 {
  grid-row-start: 21;
}

.start-17-30 {
  grid-row-start: 22;
}

.start-18-00 {
  grid-row-start: 23;
}

.start-18-30 {
  grid-row-start: 24;
}

.start-19-00 {
  grid-row-start: 25;
}

.start-19-30 {
  grid-row-start: 26;
}

.start-20-00 {
  grid-row-start: 27;
}

.start-20-30 {
  grid-row-start: 28;
}

.start-21-00 {
  grid-row-start: 29;
}

.start-21-30 {
  grid-row-start: 30;
}

.start-22-00 {
  grid-row-start: 31;
}

.start-22-30 {
  grid-row-start: 32;
}

.end {
  grid-row-end: 3;
}

.end-8-30 {
  grid-row-end: 4;
}

.end-9-00 {
  grid-row-end: 5;
}

.end-9-30 {
  grid-row-end: 6;
}

.end-10-00 {
  grid-row-end: 7;
}

.end-10-30 {
  grid-row-end: 8;
}

.end-11-00 {
  grid-row-end: 9;
}

.end-11-30 {
  grid-row-end: 10;
}

.end-12-00 {
  grid-row-end: 11;
}

.end-12-30 {
  grid-row-end: 12;
}

.end-13-00 {
  grid-row-end: 13;
}

.end-13-30 {
  grid-row-end: 14;
}

.end-14-00 {
  grid-row-end: 15;
}

.end-14-30 {
  grid-row-end: 16;
}

.end-15-00 {
  grid-row-end: 17;
}

.end-15-30 {
  grid-row-end: 18;
}

.end-16-00 {
  grid-row-end: 19;
}

.end-16-30 {
  grid-row-end: 20;
}

.end-17-00 {
  grid-row-end: 21;
}

.end-17-30 {
  grid-row-end: 22;
}

.end-18-00 {
  grid-row-end: 23;
}

.end-18-30 {
  grid-row-end: 24;
}

.end-19-00 {
  grid-row-end: 25;
}

.end-19-30 {
  grid-row-end: 26;
}

.end-20-00 {
  grid-row-end: 27;
}

.end-20-30 {
  grid-row-end: 28;
}

.end-21-00 {
  grid-row-end: 29;
}

.end-21-30 {
  grid-row-end: 30;
}

.end-22-00 {
  grid-row-end: 31;
}

.end-22-30 {
  grid-row-end: 32;
}

.end-23-00 {
  grid-row-end: 33;
}

.title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: white;
  position: relative;
  text-align: center;
}

.events > .event > p {
  margin: 0;
}

.space,
.date {
  height: 60px;
}

.module-1 {
  background: var(--eventColor1);
}

.event > .ride {
  position: absolute;
  bottom: 0;
  border-top: 1px black solid;
  width: calc(100% - 16px);
}

.event > .desc {
  position: absolute;
  right: 5px;
  bottom: 0;
}

.module-1-1 {
  background: var(--eventColor1-1);
}

.module-1-2 {
  background: var(--eventColor1-2);
  color: white;
}

.textmodule-1-1 {
  color: var(--eventColor1-1);
}

.textmodule-1-2 {
  color: var(--eventColor1-2);
}

.module-2 {
  background: var(--eventColor2);
}

.module-3 {
  background: var(--eventColor3);
}

.module-4 {
  background: var(--eventColor4);
}

.module-5 {
  background: var(--eventColor5);
}

.date {
  display: flex;
  gap: 1em;
}

.calendar p {
  line-height: initial;
}

.date-num {
  font-size: 3rem;
  font-weight: 600;
  display: inline;
}

.date-day {
  display: inline;
  font-size: 3rem;
  font-weight: 100;
}