/*
bordeau #6a000f
yellow	#e2c8ad 
brown #3c0008
red   #dc504f
*/

/******************************************
****************** GLOBAL *****************
******************************************/
@font-face {
  font-family: Questrial;
  src: url(font/Questrial-Regular.ttf);
}

:root {
  --primary: #6a000f; /* bordeau */
  --secondary: #dc504f; /* rouge */
  --brown: #3c0008;
  --beige: #e2c8ad;
}

body {
  background-color: var(--secondary); /* #fafafa; */
  font-family: Questrial;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0;
}

h2 {
  color: var(--primary);
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px var(--brown);
  text-align: center;
  font-size: 2rem;
}

/* hide license advertize  */
.fp-watermark {
  display: none;
}

/* change position of navigation */
#fp-nav.fp-right {
  top: 90%;
  background-color: #ffffffa1;
  border-radius: 15px;
}

/* change color of navigation */
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: var(--primary) !important;
}

/* change color of navigation tooltips */
#fp-nav ul li .fp-tooltip.fp-right {
  background-color: var(--primary);
  padding: 3px;
}

/* avoid scollbars */
.fp-overflow {
  overflow: hidden !important;
}

.section:not(:first-of-type) {
  padding: 30px 80px;
}

.section.fp-table {
  justify-content: flex-start;
}

.section .fp-overflow,
.section .section-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.section:not(:first-of-type) > .fp-overflow,
.section .section-content {
  padding: 30px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 15px;
}

/******************************************
****************** SOMMAIRE ***************
******************************************/
.menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 100vw;
  padding: 10px;
  background-color: var(--brown);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}

.menu-container > div {
  height: 100%;
}

.menu {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-grow: 1;
  list-style: none;
  height: 100%;
}

.menu-item {
  height: 100%;
  width: 180px;
  margin: 0 8px;
  text-align: center;
  font-size: 1.1rem;
  background-color: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item a {
  transition: all 0.2s ease-in-out;
  color: white;
  text-decoration: none;
}

.menu-item:hover {
  background-color: var(--secondary);
  transform: scale(1.1);
  margin: 0 15px;
}

.menu-item:hover a {
  color: black;
  font-weight: bold;
}

.plaquette {
  margin: auto;
  width: auto;
  height: calc(100% - 250px); /** soustrait la hauteur du menu + les logos + un espacement */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.plaquette img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.plaquette img:hover {
  transform: scale(1.02);
}

.logos-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100px;
  width: 100vw;
  margin: auto;
}

.logo {
  border: 3px solid var(--primary);
  border-radius: 15px;
  height: 100%;
  width: auto;
}

.logo img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

/******************************************
****************** PROGRAMME **************
******************************************/
.programme-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}

.programme-container article {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.programme-container .time {
  font-size: 1.1rem;
}

.programme-container .theme {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--brown);
  margin-top: 8px;
}

.programme-container .group {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--brown);
}

#programme h3 {
  color: var(--secondary);
  font-size: 1.5rem;
}

/******************************************
****************** GROUPES ****************
******************************************/
#groupes.fp-section {
  font-size: 1.1rem;
}

#groupes.section .section-content {
  height: 90%;
}

#groupes .fp-next {
  border-color: transparent transparent transparent var(--primary);
}

#groupes .fp-prev {
  border-color: transparent var(--primary) transparent transparent;
}

#groupes.section .fp-overflow {
  overflow-y: auto !important;
  margin-right: 1px; /** Pour ne pas voir la scrollbar de la section précédente */
}

.group h3 {
  font-size: 1.5rem;
  color: var(--secondary);
  text-align: center;
}

.group-img-container {
  height: 200px;
  width: auto;
  text-align: center;
}

.group-img-container img {
  height: 100%;
}

.group a {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

.group p {
  margin: 8px 0;
}

.group-musicians {
  text-align: center;
}

.group-musicians h4 {
  color: var(--secondary);
}

.group-musicians span {
  margin-top: 5px;
  display: block;
}

/******************************************
****************** COMMENT VENIR **********
******************************************/
.plans {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  font-size: 1.1rem;
}

.plan-line {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 15px;
}

.plan-line .plan-img1 {
  margin-left: 15px;
  height: 250px;
  transition: all 0.2s ease-in-out;
}

.plan-line .plan-img1:hover {
  transform: scale(1.02);
}

.plan-line .plan-img1 img {
  height: 100%;
  cursor: pointer;
}

.plan-line .plan-img2 {
  height: 200px;
  margin-right: 15px;
}

.plan-line .plan-img2 img {
  height: 100%;
}

/******************************************
****************** CONTACT  ***************
******************************************/
.email {
  display: flex;
  justify-content: center;
  align-items: center;
}

.email img {
  height: 3rem;
  width: auto;
  margin-right: 1.5rem;
}

.developper {
  margin-top: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.developper img {
  height: 1.5rem;
  width: auto;
  cursor: pointer;
}

/******************************************
****************** RESPONSIVE *************
******************************************/
@media all and (orientation: portrait) {
  :root {
    font-size: 24px;
  }

  /* change position of navigation */
  #fp-nav.fp-right {
    top: 80%;
  }

  /** hide tooltips */
  .fp-tooltip.fp-right {
    display: none !important;
  }

  /* change color of navigation tooltips */
  #fp-nav ul li .fp-tooltip.fp-right {
    padding: 1px;
  }

  /* change size of navigation list item */
 #fp-nav ul li {
    height: 40px !important;
    width: 30px !important;
  }

  /* change size of navigation bullet */
  #fp-nav ul li a span {
    height: 15px !important;
    width: 15px !important;
  }

  /* change size of navigation active bullet */
  #fp-nav ul li a.active span {
    height: 25px !important;
    width: 25px !important;
    margin: -2px 0 0 -2px !important;
  }

  #fp-nav ul li a span {
    transform: translate(-50%, -50%);
  }

  .menu-container {
    height: 100px;
  }

  .plaquette-container {
    flex-direction: column;
    flex-grow: 1;
  }

  .plaquette {
    flex-grow: 1;
    margin: 10px 20px;
  }

  .programme-container {
    flex-direction: column;
    gap: 2rem;
  }

  .group p {
    padding: 0 50px;
  }

  .plans {
    justify-content: start;
  }

  .plan-line {
    flex-direction: column;
  }
}