/* CSS Agenda */

#calendrier {
  display:flex;
}

#calendrier_calendar {
  background-color: #aed8af;
  padding:24px;
  width: calc(25% - 25px);
  position:relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#calendrier_event_principal {
  flex:2;
}

#calendrier_calendar #pagination {
  width:100%;
  justify-content: space-around;
  margin: 20px 0 0 0;
}
#calendrier_calendar #pagination #calendar_mois_prev {
  flex:1;
}
#calendrier_calendar #pagination .pagination_active {
  flex:3;
}
#calendrier_calendar #pagination #calendar_mois_next {
  flex:1;
}


#calendar_titre {
  margin:0 auto 20px auto;
  font-weight:700;
  text-align:center;
  font-size: 18px!important;
  text-transform: uppercase;
  text-align: left;
  display: flex;
  line-height: 1.2;

}

#calendar_grille {
  height: 225px;
}

#calendar_titre::before {
  content: '';
  display: inline-block;
  width: 60px;
  min-width: 60px;
  margin-right: 20px;
  background-image: url('../images/assets/icon-calendar-58x67.svg');
  background-position: center;
  background-size: contain;
}

#calendar_header, #calendar_body {
  display:flex;
  justify-content: center;
}
#calendar_body {
  flex-wrap:wrap;
  margin-bottom:10px;
}
#calendar_header div {
  width: calc(100% / 7);
  text-align:center;
  border-bottom:1px solid #323535;
  border-left:1px solid #323535;
  padding:5px;
  margin:0;
}
#calendar_body div {
  width: calc(100% / 7);
  text-align:center;
  padding: 1.4%;
  margin:0;
  border-bottom:1px solid #323535;
  border-left:1px solid #323535;
}

/* pas de bordure bottom sur les 7 dernieres */
#calendar_body div:nth-last-child(-n+7) {
  border-bottom:0px;
}

/* pas de bordure gauche sur les debuts de lignes */
#calendar_body div:nth-last-child(7n) {
  border-left:0px;
}
#calendar_header div:nth-last-child(7n) {
  border-left:0px;
}

#calendrier_calendar #pagination a {
  border:0;
  color: #323535;
}

#calendrier_calendar #pagination a:hover {
  color: #FFF;
  background-color: #323535;
}

.pagination_active {
  font-family: 'Amaranth';
}

#calendrier_event_principal {
  display:flex;
  margin-left: 30px;
}

.calendrier_event_principal_photo {
  background-size: cover;
  background-position: center center;
  width: calc(25% - 20px);
  margin-left: 30px;
}

.calendrier_event_principal_infos {
  flex:2;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}

/* EVENT DU JOUR */

.calendrier_event_principal_infos .date {
  display: block;
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 18px;
  padding-top: 10px;
  font-family: 'Amaranth'!important;
  margin-bottom: 15px;
}

.calendrier_event_principal_infos .date::before {
  content: '';
  position: absolute;
  top: 0;
  height: 4px;
  width: 40px;
  background-color: 
  #323535;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.calendrier_event_principal_infos h4 {
  font-family: 'Amaranth'!important;
  font-weight: 700;
  font-size: 20px;
  margin: 20px 0;
}

.calendrier_event_principal_infos .resume {
  margin-bottom: 20px;
}

.calendrier_event_principal_infos .theme {
  font-family: 'Amaranth'!important;
  display: inline-block;
  color: #FFF;
  text-transform: uppercase;
  background-color: #aed8af;
  font-weight: 400;
  padding: 2px 4px;
  letter-spacing: 2px;
}

.calendrier_event_principal_infos .event-bot {
  display: flex;
  justify-content: space-between;
  margin: auto 0 0 auto;
  flex-wrap: wrap;
}


/* jour actif */
#calendar_body div[active=on] {
  background-color:rgba(228, 242, 224,0.7);
  cursor:pointer;
  font-weight: 600;
  transition:all 0.2s ease;
}
#calendar_body div[active=on]:hover {
  background-color:#323535!important;
  color:#aed8af;
}

#calendar_body div.actif {
  background-color:#323535!important;
  color:#aed8af;
  font-weight: 700;
}

#calendar_body div.jour_j {
  background-color:rgba(0, 0, 0,0.3);
  color:#FFF;
}

/* detail */
#agenda_detail {
  /*display: flex;*/
}
#agenda_texte {
  width:58%;
  margin-right:2%;
}
#agenda_photo {
  width:40%;
}
#agenda_photo img {
  max-width:100%;
  height:auto;
}
#agenda_theme {
    font-family: 'Amaranth'!important;
    font-weight: 400;
    font-size: 16px;
    color: #FFF!important;;
    background-color: #bbdeb0;
    text-transform: uppercase;
    padding: 2px 4px;
    display:inline-block;
    margin:0 0 10px 0;
    letter-spacing: 2px;
}
.agenda_date {
    font-size: 20px!important;
    font-weight: 800;
    margin-bottom:10px;
    color:#444;
  }
  
.infos-agenda {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
} 
.infos-agenda li {
  width:50%;
}

/* ------------------------------------------- 
  MAX-WIDTH 1800px
------------------------------------------- */
@media (max-width: 1800px) {
  #calendar_titre {
    font-size: 20px !important;
  }
  #contenu-page #calendrier_calendar div {
    font-size: 16px;
  }
}

/* ------------------------------------------- 
  MAX-WIDTH 1500px
------------------------------------------- */
@media (max-width: 1500px) {
  #calendrier_calendar {
    width: calc(33.33% - 20px);
  }
  .calendrier_event_principal_photo {
    width: calc(33.33% - 20px);
  }
}

/* ------------------------------------------- 
  MAX-WIDTH 1100px
------------------------------------------- */
@media (max-width: 1100px) {
  #calendrier {
    flex-wrap: wrap;
  }
  #calendrier_calendar {
    width: calc(50% - 20px);
  }
  .calendrier_event_principal_photo {
    width: calc(50% - 20px);
  }
  .calendrier_event_principal_infos {
    flex: unset;
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .calendrier_event_principal_infos .event-bot {
    margin-top: 0px;
  }
  .calendrier_event_principal_infos .resume {
    margin-bottom: 15px;
  }
  #agenda-list .agenda-list__item {
    margin-bottom: 50px;
  }
}

/* ------------------------------------------- 
  MAX-WIDTH 700px
------------------------------------------- */
@media (max-width: 700px) {
  #calendrier_calendar {
    width: 100%;
  }
  .calendrier_event_principal_photo {
    width: 100%;
    height: 200px;
    margin: 20px 0 0 0;
  }
  
  #agenda_detail {
    display: block;
  }  
   #agenda_texte {
     width:100%;
     margin:0 0 20px 0;
   }
   #agenda_photo {
    width:100%;
   }  
   
  .infos-agenda {
    display:block;
  } 
  .infos-agenda li {
    width:100%;
  }
   
}