@import "../fonts/fonts.css";
:root {
  /* Couleurs */
  --couleur-blanc: #fafafa;
  --couleur-noir: #2A2A2A;
  --couleur-hover: #ffbb00;
  --couleur-fond: #ECA840;
  --couleur-marron: #9D4A01;
  /* Epaisseur police */
  --thin: 100;
  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;
  /* Divers */
  --transition: all .3s ease;
}

.flex {
  display: flex;
  flex-direction: row;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-evenly {
  justify-content: space-evenly;
}

.flex-center {
  justify-content: center;
}

.wrapper {
  width: clamp(320px, 100% - 256px, 1200px);
  margin: auto;
  position: relative;
}

html {
  font-family: "Inter", serif;
  scroll-behavior: smooth;
}

main {
  margin-top: 64px;
}

section {
  overflow-x: hidden;
}

h3 {
  font-size: 32px;
  font-weight: var(--semi-bold);
  color: var(--couleur-noir);
}

ul {
  list-style-type: none;
  padding: 0;
}

button.btn, input[type=submit].btn, input[type=reset].btn {
  padding: 0;
  background-color: var(--couleur-fond);
  border-radius: 36px;
  border: none;
  transition: var(--transition);
}
button.btn a, input[type=submit].btn a, input[type=reset].btn a {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 222px;
  height: 72px;
  line-height: 72px;
  display: block;
  padding: 0 64px;
  text-align: center;
  font-size: 20px;
  font-weight: var(--medium);
  text-decoration: none;
  color: var(--couleur-noir);
  transition: var(--transition);
}

input[type=submit].btn, input[type=reset].btn {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 222px;
  height: 72px;
  padding: 0 64px;
  font-size: 20px;
  font-weight: var(--medium);
}

input[type=reset].btn.btn-secondaire {
  font-size: 20px;
  font-weight: var(--medium);
  border: 1px solid var(--couleur-noir);
  color: var(--couleur-noir);
  background-color: transparent;
  transition: var(--transition);
}

input[type=reset].btn.btn-secondaire:hover {
  color: var(--couleur-noir);
  border-color: var(--couleur-fond);
  background-color: var(--couleur-fond);
}

button.btn:hover, input.btn:hover {
  color: var(--couleur-blanc);
  background-color: var(--couleur-marron);
}
button.btn:hover a, input.btn:hover a {
  color: var(--couleur-blanc);
}

body {
  background-color: #f8feff;
  position: relative;
  overflow-x: hidden;
}

header {
  width: 100vw;
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f8feff;
  z-index: 90;
  transition: var(--transition);
}
header nav.navbar {
  gap: 96px;
}
header nav.navbar h1 {
  margin: 0;
  width: 215px;
  height: 64px;
}
header nav.navbar h1 a {
  width: -moz-max-content;
  width: max-content;
  display: block;
  line-height: 64px;
  color: var(--couleur-noir);
  font-size: 32px;
  font-weight: var(--bold);
  text-decoration: none;
  transition: var(--transition);
}
header nav.navbar h1 a:hover {
  color: var(--couleur-marron);
}
header nav.navbar ul.liste_pages {
  width: 100%;
  margin: 0;
}
header nav.navbar ul.liste_pages li.page {
  height: 64px;
  line-height: 64px;
  padding: 0 12px;
  font-size: 20px;
  font-weight: var(--medium);
}
header nav.navbar ul.liste_pages li.page a {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  color: var(--couleur-noir);
  text-decoration: none;
  transition: var(--transition);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
header nav.navbar ul.liste_pages li.actif a,
header nav.navbar ul.liste_pages li:hover a {
  color: var(--couleur-marron);
}
header nav.navbar div.menu {
  align-self: center;
}
header nav.navbar div.menu svg {
  display: none;
}

section.hero {
  padding-bottom: 128px;
  overflow: initial;
}
section.hero div.enveloppe div.texte {
  width: 375px;
}
section.hero div.enveloppe div.texte h2.titre_page {
  width: -moz-max-content;
  width: max-content;
  padding: 128px 0 0 0;
  margin: 0;
  font-size: 52px;
  color: var(--couleur-noir);
}
section.hero div.enveloppe div.texte span.sous_titre_page {
  font-size: 36px;
  font-weight: var(--extra-light);
}
section.hero div.enveloppe div.texte hr {
  width: 64px;
  margin: 32px 0;
  height: 6px;
  background-color: var(--couleur-noir);
  border-radius: 3px;
}
section.hero div.enveloppe div.texte div.categories h3 {
  margin: 48px 0 16px 0;
}
section.hero div.enveloppe div.texte div.categories div.categorie {
  margin-bottom: 16px;
}
section.hero div.enveloppe div.texte div.categories div.categorie a.flex {
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  color: #737373;
  transition: var(--transition);
}
section.hero div.enveloppe div.texte div.categories div.categorie a.flex:hover {
  color: var(--couleur-fond);
}
section.hero div.enveloppe div.texte div.categories div.categorie .img {
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
section.hero div.enveloppe div.texte div.categories div.categorie .img svg {
  width: 24px;
  height: 24px;
}
section.hero div.enveloppe div.texte div.categories div.categorie p {
  margin: 0 0 0 6px;
  line-height: 24px;
}
section.hero div.enveloppe div.texte > div.image {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: 48px;
}
section.hero div.enveloppe div.texte > div.image img {
  width: auto;
  height: 288px;
  border-radius: 12px;
}
section.hero div.enveloppe div.texte > p {
  font-size: 16px;
  width: 212px;
  color: #737373;
  margin: 0 0 42px 0;
}
section.hero div.enveloppe ul.infos_importantes {
  position: absolute;
  width: 800px;
  bottom: 0;
  right: 0;
  font-size: 14px;
  color: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.photos {
  overflow: hidden;
}
section.hero div.slider ul.liste_elements li.element.photos img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
section.hero div.slider ul.liste_elements li.element.evenement {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 1s ease;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.evenement div.affiche {
  height: 400px;
  width: auto;
}
section.hero div.slider ul.liste_elements li.element.evenement div.affiche img {
  width: auto;
  height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
}
section.hero div.slider ul.liste_elements li.element.groupe,
section.hero div.slider ul.liste_elements li.element.calendrier {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe div.text,
section.hero div.slider ul.liste_elements li.element.calendrier div.text {
  background: rgba(250, 250, 250, 0.95);
  box-shadow: 0 -4px 20px 20px rgba(250, 250, 250, 0.95);
}
section.hero div.slider ul.liste_elements li.element.groupe span.tarif,
section.hero div.slider ul.liste_elements li.element.calendrier span.tarif {
  width: 128px;
  height: 128px;
  line-height: 96px;
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 24px;
  color: var(--couleur-blanc);
  text-align: center;
  font-size: 28px;
  font-weight: var(--medium);
  background-color: var(--couleur-noir);
  border-radius: 0 24px 0 256px;
  box-sizing: border-box;
}
section.hero div.slider ul.liste_elements li.element.groupe h4,
section.hero div.slider ul.liste_elements li.element.calendrier h4 {
  height: 40px;
  line-height: 20px;
  margin: calc(100% - 147px) 16px 16px 16px;
  padding-top: 12px;
  font-size: 24px;
  color: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe h4 span,
section.hero div.slider ul.liste_elements li.element.calendrier h4 span {
  font-size: 22px;
  font-weight: var(--regular);
}
section.hero div.slider ul.liste_elements li.element.groupe hr,
section.hero div.slider ul.liste_elements li.element.calendrier hr {
  width: 42px;
  height: 1px;
  margin: 0 16px;
  background-color: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe div.flex,
section.hero div.slider ul.liste_elements li.element.calendrier div.flex {
  padding: 16px 16px 24px 16px;
}
section.hero div.slider ul.liste_elements li.element.groupe div.flex svg,
section.hero div.slider ul.liste_elements li.element.calendrier div.flex svg {
  width: 36px;
  height: 36px;
  margin: 3px 0;
  stroke: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe div.flex p,
section.hero div.slider ul.liste_elements li.element.calendrier div.flex p {
  height: 42px;
  line-height: 20px;
  margin: 0 0 0 6px;
  font-size: 16px;
  color: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe:first-child,
section.hero div.slider ul.liste_elements li.element.calendrier:first-child {
  margin-left: 10px;
}
section.hero div.slider ul.liste_elements li.element.groupe:last-child,
section.hero div.slider ul.liste_elements li.element.calendrier:last-child {
  margin-right: 10px;
}
section.hero div.slider ul.liste_elements li.element.groupe {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--couleur-noir);
}
section.hero div.slider ul.liste_elements li.element.groupe div.flex p {
  height: 20px;
  line-height: 20px;
  padding: 11px 0;
}
section.hero ul.liste_elements li.element.groupe:nth-child(1) {
  background: url(../../public/images/gm16.jpg);
}
section.hero ul.liste_elements li.element.groupe:nth-child(2) {
  background: url(../../public/images/gl.jpg);
}
section.hero ul.liste_elements li.element.groupe:nth-child(3) {
  background: url(../../public/images/gkl.jpg);
  background-position: 0 -42px;
}
section.hero ul.liste_elements li.element.groupe:nth-child(4) {
  background: url(../../public/images/lpetitbal.jpg);
}
section.hero div.fond {
  position: absolute;
  width: calc(100vw - 350px);
  height: 100%;
  top: 0;
  left: 250px;
  background-color: #87c7e6;
  border-radius: 36px 0 0 36px;
  z-index: -1;
}

div.slider,
div.description {
  width: calc(100% - 313px);
  height: 500px;
  margin: 128px 0 0 0;
  position: relative;
  transform: translateX(112px);
  overflow: visible;
}
div.slider ul.liste_elements,
div.description ul.liste_elements {
  width: -moz-fit-content;
  width: fit-content;
  gap: 24px;
  position: relative;
}
div.slider ul.liste_elements li.element,
div.description ul.liste_elements li.element {
  width: 448px;
  height: 448px;
  border-radius: 12px;
  background-color: #d9d9d9;
}
div.slider ul.liste_elements li.element img,
div.description ul.liste_elements li.element img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
div.slider div.boutons_slider,
div.description div.boutons_slider {
  transform: translate(-128px, -54px);
}
div.slider div.boutons_slider span,
div.description div.boutons_slider span {
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
div.slider span.fleche svg,
div.description span.fleche svg {
  width: 36px;
  height: 36px;
  stroke: var(--couleur-blanc);
  stroke-width: 2px;
  transition: var(--transition);
}
div.slider span.fleche svg:hover,
div.description span.fleche svg:hover {
  stroke: var(--couleur-fond);
}
div.slider span.fleche.fleche_gauche svg,
div.description span.fleche.fleche_gauche svg {
  transform: rotate(-90deg);
}
div.slider span.fleche.fleche_droite svg,
div.description span.fleche.fleche_droite svg {
  transform: rotate(90deg);
}
div.slider span.fleche.stop svg,
div.description span.fleche.stop svg {
  stroke: var(--couleur-fond);
}

div.description {
  transform: translate(0, 32px);
  width: clamp(300px, 90% - 313px, 700px);
  color: var(--couleur-noir);
}

div.slider > div,
div.slider_bis > div {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--couleur-fond) transparent;
}

div.slider > div:not(.boutons_slider, .bouton) {
  overflow-x: scroll;
}

section.presentation {
  margin: 128px auto;
}
section.presentation h3.titre_section {
  margin: 0 0 42px 0;
}
section.presentation p {
  font-size: 16px;
}

section.calendrier div.wrapper {
  position: relative;
}
section.calendrier div.wrapper h3.titre_section {
  padding: 128px 0 32px 0;
  margin: 0;
  color: var(--couleur-noir);
}
section.calendrier div.wrapper div.slider {
  width: 100%;
  height: 100%;
  margin: 0;
  padding-bottom: 68px;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier {
  position: relative;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
  overflow: hidden;
  background-color: #1a1a1a;
  background-position: 0 42px;
  background-size: contain;
  background-repeat: no-repeat;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier span.tarif {
  width: 128px;
  height: 128px;
  line-height: 96px;
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 24px;
  color: var(--couleur-blanc);
  text-align: center;
  font-size: 28px;
  font-weight: var(--medium);
  background-color: var(--couleur-noir);
  border-radius: 0 12px 0 256px;
  box-sizing: border-box;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text {
  background: rgba(250, 250, 250, 0.7960784314);
  box-shadow: 0 -4px 20px 20px rgba(250, 250, 250, 0.7960784314);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text h4 {
  height: 40px;
  line-height: 20px;
  margin: calc(100% - 147px) 15px 16px 15px;
  padding-top: 12px;
  font-size: 24px;
  color: var(--couleur-noir);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text h4 span {
  font-size: 22px;
  font-weight: var(--regular);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text hr {
  width: 42px;
  height: 1px;
  margin: 0 16px;
  background-color: var(--couleur-noir);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text div.flex {
  padding: 16px 16px 24px 16px;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text div.flex svg {
  width: 36px;
  height: 36px;
  margin: 3px 0;
  fill: var(--couleur-noir);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text div.flex p {
  height: 20px;
  line-height: 20px;
  margin: 0 0 0 6px;
  font-size: 16px;
  color: var(--couleur-noir);
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier:first-child {
  margin-left: 12px;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier:last-child {
  margin-right: 12px;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gm {
  background-image: url("../../public/images/gm16.jpg");
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gm span.tarif {
  width: 100%;
  height: 100px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  font-size: 24px;
  border-radius: 0;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gkl {
  background-image: url("../../public/images/gkl.jpg");
  background-position: 0 -42px;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gkl span.tarif {
  width: 100%;
  height: 71px;
  line-height: 71px;
  left: 0;
  padding: 0;
  font-size: 24px;
  border-radius: 0;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gl {
  background-image: url("../../public/images/gl.jpg");
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.gl span.tarif {
  width: 100%;
  height: 71px;
  line-height: 71px;
  left: 0;
  padding: 0;
  font-size: 24px;
  border-radius: 0;
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.lpb {
  background-image: url("../../public/images/lpetitbal.jpg");
}
section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier.lpb span.tarif {
  width: 100%;
  height: 71px;
  line-height: 71px;
  left: 0;
  padding: 0;
  font-size: 24px;
  border-radius: 0;
}
section.calendrier div.wrapper div.fond {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  right: 350px;
  background-color: #87c7e6;
  border-radius: 0 36px 36px 0;
  z-index: -1;
}

section.prestations .wrapper {
  margin: 128px auto;
}
section.prestations .wrapper div.contenu {
  gap: 42px;
}
section.prestations .wrapper div.contenu ul.liste_prestations {
  gap: 16px;
}
section.prestations .wrapper div.contenu ul.liste_prestations li.prestation {
  width: 256px;
  height: 60px;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0px 3px 6px #737373;
  transition: all 0.3s ease;
}
section.prestations .wrapper div.contenu ul.liste_prestations li.prestation a {
  display: block;
  width: 100%;
  line-height: 60px;
  color: var(--couleur-noir);
  font-weight: var(--medium);
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  transition: var(--transition);
}
section.prestations .wrapper div.contenu ul.liste_prestations li.prestation div.contenu {
  display: none;
}
section.prestations .wrapper div.contenu ul.liste_prestations li.prestation.actif {
  background: #87c7e6;
}
section.prestations .wrapper div.contenu div.selection {
  background: var(--couleur-blanc);
  box-shadow: 0px 6px 12px #737373;
  border-radius: 24px;
}
section.prestations .wrapper div.contenu div.selection div.image {
  width: 56px;
  border-radius: 24px 0 0 24px;
  background-color: #000046;
}
section.prestations .wrapper div.contenu div.selection div.description {
  width: calc(100% - 56px);
  margin: 0 48px;
  transition: var(--transition);
}
section.prestations .wrapper div.contenu div.selection div.description h4 {
  margin: 36px 0 6px 0;
  font-size: 24px;
  font-weight: var(--medium);
  color: var(--couleur-noir);
  text-align: center;
}
section.prestations .wrapper div.contenu div.selection div.description span {
  display: block;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: var(--light);
  text-align: center;
}
section.prestations .wrapper div.contenu div.selection div.description p {
  line-height: 24px;
}
section.prestations .wrapper div.contenu div.selection div.description button {
  margin: 36px auto;
  display: block;
}

section.evenements {
  position: relative;
}
section.evenements h3.titre_section {
  padding: 128px 0 32px 0;
  margin: 0;
  color: var(--couleur-noir);
}
section.evenements div.slider_bis {
  height: -moz-fit-content;
  height: fit-content;
  margin: 0;
  padding-bottom: 90px;
  transform: translateX(112px);
}
section.evenements div.slider_bis div:not(.affiche) {
  width: 100%;
  overflow-y: hidden;
}
section.evenements div.slider_bis div:not(.affiche) ul.liste_elements {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 32px;
  gap: 0;
}
section.evenements div.slider_bis div:not(.affiche) ul.liste_elements li.element.evenement {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 24px 0 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 1s ease;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.evenements div.slider_bis div:not(.affiche) ul.liste_elements li.element.evenement div.affiche {
  height: 400px;
  width: auto;
}
section.evenements div.slider_bis div:not(.affiche) ul.liste_elements li.element.evenement div.affiche img {
  width: auto;
  height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
}
section.evenements div.slider_bis div.boutons_slider {
  transform: translate(-128px, -54px);
}
section.evenements div.slider_bis div.boutons_slider span {
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
section.evenements div.slider_bis span.fleche svg {
  width: 36px;
  height: 36px;
  stroke: var(--couleur-blanc);
  stroke-width: 2px;
  transition: var(--transition);
}
section.evenements div.slider_bis span.fleche svg:hover {
  stroke: var(--couleur-fond);
}
section.evenements div.slider_bis span.fleche.fleche_gauche svg {
  transform: rotate(-90deg);
}
section.evenements div.slider_bis span.fleche.fleche_droite svg {
  transform: rotate(90deg);
}
section.evenements div.slider_bis span.fleche.stop svg {
  stroke: var(--couleur-fond);
}
section.evenements div.fond {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  right: 350px;
  background-color: #87c7e6;
  border-radius: 0 36px 36px 0;
  z-index: -1;
}

section.lien_groupes {
  margin: 128px auto;
}
section.lien_groupes ul.liste_groupes {
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 6px;
}
section.lien_groupes ul.liste_groupes li.groupe {
  width: clamp(256px, 25vw, 406px);
  overflow-x: hidden;
  margin: auto;
}
section.lien_groupes ul.liste_groupes li.groupe a {
  text-decoration: none;
  color: var(--couleur-noir);
}
section.lien_groupes ul.liste_groupes li.groupe a div.image {
  width: 100%;
  height: 200px;
  border: 6px solid var(--couleur-blanc);
  background-color: #1a1a1a;
  transition: var(--transition);
  overflow: hidden;
}
section.lien_groupes ul.liste_groupes li.groupe a div.image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: var(--transition);
}
section.lien_groupes ul.liste_groupes li.groupe a p {
  height: 48px;
  padding: 24px 0;
  margin: 0;
  font-size: 24px;
  font-weight: var(--light);
  text-align: center;
}
section.lien_groupes ul.liste_groupes li.groupe a:hover div.image {
  background-color: #737373;
}
section.lien_groupes ul.liste_groupes li.groupe a:hover div.image img {
  transform: scale(1.2);
}

section.infos_groupes {
  margin-bottom: 128px;
}
section.infos_groupes h3.titre_section {
  margin: 0 0 42px 0;
}
section.infos_groupes ul.liste_groupes {
  gap: 128px;
  width: clamp(320px, 90%, 1000px);
  margin: auto;
}
section.infos_groupes ul.liste_groupes li.groupe {
  padding-top: 128px;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box {
  gap: 32px;
  margin-bottom: 32px;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box h4 {
  width: clamp(350px, 40% - 64px, 800px);
  line-height: 80px;
  margin: 0;
  align-self: center;
  font-size: 56px;
  font-weight: var(--light);
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box {
  width: clamp(308px, 90%, 320px);
  background: var(--couleur-blanc);
  border-radius: 16px;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box h5 {
  margin: 32px 0 0 0;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  color: var(--couleur-noir);
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box div.reseaux {
  gap: 16px;
  height: 64px;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box div.reseaux span {
  align-self: center;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box div.reseaux span svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.5px;
  stroke: var(--couleur-noir);
  transition: var(--transition);
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box div.reseaux span svg:hover {
  stroke: #055ee6;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box button.bouton {
  width: 184px;
  height: 42px;
  margin: 0 auto 16px auto;
  display: block;
  border: none;
  border-radius: 36px;
  background-color: #87c7e6;
  transition: var(--transition);
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box button.bouton a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 40px;
  color: var(--couleur-noir);
  text-decoration: none;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box button.bouton:hover {
  background-color: #055ee6;
}
section.infos_groupes ul.liste_groupes li.groupe div.head_box div.box button.bouton:hover a {
  color: var(--couleur-blanc);
}
section.infos_groupes ul.liste_groupes li.groupe div.main_box {
  gap: 32px;
}
section.infos_groupes ul.liste_groupes li.groupe div.main_box div.video {
  float: left;
  width: clamp(400px, 40vw, 600px);
  height: clamp(225px, 22.5vw, 400px);
  margin: 0 24px 16px 0;
  background-color: var(--couleur-noir);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
}
section.infos_groupes ul.liste_groupes li.groupe div.main_box div.video video {
  width: 100%;
  height: 100%;
}
section.infos_groupes ul.liste_groupes li.groupe div.main_box p.text {
  margin: 48px 0 12px 0;
  display: inline;
  text-align: justify;
}

section.liste_evenements {
  margin: 128px auto;
}
section.liste_evenements h3.titre_section {
  margin-bottom: 6px;
}
section.liste_evenements p {
  margin: 0 0 42px 0;
}
section.liste_evenements ul.liste_evenements {
  gap: 64px;
}
section.liste_evenements ul.liste_evenements li.evenement {
  align-self: center;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.liste_evenements ul.liste_evenements li.evenement div.image {
  width: clamp(400px, 35vw, 600px);
  height: inherit;
  background-color: var(--couleur-noir);
  overflow: hidden;
}
section.liste_evenements ul.liste_evenements li.evenement div.image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.liste_evenements ul.liste_evenements li.evenement div.description {
  width: clamp(348px, 35vw - 72px, 528px);
  height: -moz-fit-content;
  height: fit-content;
  padding: 0 36px;
  background-color: var(--couleur-blanc);
}
section.liste_evenements ul.liste_evenements li.evenement div.description h4.date {
  line-height: 32px;
  margin: 42px 0 6px 0;
  font-size: 24px;
}
section.liste_evenements ul.liste_evenements li.evenement div.description span {
  margin: 0;
}
section.liste_evenements ul.liste_evenements li.evenement div.description span.tarif {
  width: 128px;
  height: 128px;
  line-height: 96px;
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 24px;
  color: var(--couleur-blanc);
  text-align: center;
  font-size: 36px;
  font-weight: var(--medium);
  background-color: var(--couleur-principale);
  border-radius: 0 0 0 256px;
  box-sizing: border-box;
}
section.liste_evenements ul.liste_evenements li.evenement div.description hr {
  width: 42px;
  height: 3px;
  background-color: var(--couleur-noir);
  border-radius: 1.5px;
  margin: 24px 0;
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos {
  gap: 12px;
  margin-bottom: 42px;
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info .icon {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid var(--couleur-noir);
  transition: var(--transition);
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info .icon svg {
  width: 24px;
  height: 24px;
  margin: 6px;
  stroke-width: 2px;
  stroke: var(--couleur-noir);
  transition: var(--transition);
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info p {
  width: calc(100% - 48px);
  line-height: 36px;
  margin: 0;
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info p a {
  color: var(--couleur-noir);
  transition: var(--transition);
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info p a:hover {
  color: var(--couleur-hover);
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(2) .icon:hover,
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(3) .icon:hover,
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(5) .icon:hover {
  border: 1px solid var(--couleur-hover);
}
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(2) .icon:hover svg,
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(3) .icon:hover svg,
section.liste_evenements ul.liste_evenements li.evenement div.description ul.liste_infos .info:nth-child(5) .icon:hover svg {
  stroke: var(--couleur-hover);
}

section.liste_dates {
  margin: 128px 0;
}
section.liste_dates div.wrapper div.tableau table {
  width: 100%;
  border-collapse: collapse;
}
section.liste_dates div.wrapper div.tableau table thead {
  height: 80px;
  background-color: #87c7e6;
}
section.liste_dates div.wrapper div.tableau table thead th {
  width: 25%;
  font-size: 20px;
  color: var(--couleur-noir);
  letter-spacing: 2px;
}
section.liste_dates div.wrapper div.tableau table thead th.pub {
  padding: 0 16px;
}
section.liste_dates div.wrapper div.tableau table tbody tr.vide td {
  height: 56px;
}
section.liste_dates div.wrapper div.tableau table tbody tr.separateur td {
  border-top: 2px dashed #055ee6;
}
section.liste_dates div.wrapper div.tableau table tbody tr:last-child td {
  border-bottom: 2px dashed #055ee6;
}
section.liste_dates div.wrapper div.tableau table tbody td {
  color: var(--couleur-noir);
  text-align: center;
  transition: var(--transition);
  height: 80px;
  font-size: 18px;
  font-weight: var(--regular);
}
section.liste_dates div.wrapper div.tableau table tbody td a {
  color: var(--couleur-noir);
  transition: var(--transition);
}
section.liste_dates div.wrapper div.tableau table tbody td a:hover {
  color: var(--couleur-fond);
}
section.liste_dates div.wrapper div.tableau table tbody td span {
  font-size: 15px;
  color: #454;
}
section.liste_dates div.wrapper div.tableau table tbody td.pub a {
  display: block;
  padding: 0 16px;
  text-decoration: none;
  font-size: 16px;
}
section.liste_dates div.wrapper div.tableau table tbody td.pub a svg {
  width: 42px;
  height: 42px;
}
section.liste_dates div.wrapper div.tableau table tbody td.pub a p {
  margin: 0;
}

section.photos {
  margin: 128px auto;
  position: relative;
}
section.photos h3.titre_section {
  padding: 128px 0 32px 0;
  margin: 0;
  color: var(--couleur-blanc);
}
section.photos div.slider {
  width: calc(100% - 72px + 5vw);
  margin: 0;
  padding-bottom: 68px;
}
section.photos div.slider ul.liste_elements li.element {
  overflow: hidden;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.photos div.slider ul.liste_elements li.element img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.photos div.fond {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  right: 350px;
  background-color: #87c7e6;
  border-radius: 0 36px 36px 0;
  z-index: -1;
}

section.infos_locations {
  margin: 128px auto;
}
section.infos_locations div.infos {
  margin-bottom: 16px;
}
section.infos_locations div.infos div.infos_principales {
  gap: 32px;
}
section.infos_locations div.infos div.infos_principales div.box {
  width: 448px;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--couleur-blanc);
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
}
section.infos_locations div.infos div.infos_principales div.box h4 {
  margin: 0;
  padding: 32px 24px 16px 24px;
  font-size: 24px;
  font-weight: var(--light);
  color: var(--couleur-noir);
}
section.infos_locations div.infos div.infos_principales div.box p {
  margin: 0;
  padding: 0 24px 32px 24px;
  font-size: 16px;
  font-weight: var(--regular);
  color: #777;
}
section.infos_locations div.infos div.caracteristiques {
  width: 100%;
  margin: 56px auto 0;
  background-color: var(--couleur-blanc);
  border-radius: 24px;
  box-shadow: 0 4px 10px 2px var(--couleur-noir);
  overflow: hidden;
}
section.infos_locations div.infos div.caracteristiques div.image {
  width: 50%;
  height: initial;
  background-color: var(--couleur-noir);
}
section.infos_locations div.infos div.caracteristiques div.image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 450px;
}
section.infos_locations div.infos div.caracteristiques div.description {
  width: 50%;
  height: -moz-fit-content;
  height: fit-content;
  padding-left: 32px;
}
section.infos_locations div.infos div.caracteristiques div.description h4 {
  margin: 42px 36px 6px 0;
  font-size: 24px;
}
section.infos_locations div.infos div.caracteristiques div.description span {
  margin: 6px 36px 24px 0;
  font-size: 16px;
  color: #777;
}
section.infos_locations div.infos div.caracteristiques div.description hr {
  width: 42px;
  stroke: var(--couleur-noir);
  margin: 24px 0 32px 0;
}
section.infos_locations div.infos div.caracteristiques div.description ul.liste_infos {
  margin-bottom: 42px;
  gap: 12px;
}
section.infos_locations div.infos div.caracteristiques div.description ul.liste_infos li.info div.icon {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #777;
  margin: 0 12px 0 0;
}
section.infos_locations div.infos div.caracteristiques div.description ul.liste_infos li.info p {
  margin: 0;
  line-height: 32px;
}

form {
  margin: 16px 0 64px 0;
}
form .champ {
  margin-bottom: 32px;
}
form .champ label {
  margin-bottom: 6px;
  display: block;
  color: var(--couleur-noir);
  font-size: 18px;
  font-weight: var(--medium);
}
form .champ label span {
  font-weight: var(--light);
}
form .champ label[for=pdc] {
  line-height: 32px;
  font-size: 16px;
  margin: 0;
}
form .champ label[for=pdc] a {
  color: var(--couleur-noir);
  text-decoration: underline;
  transition: var(--transition);
}
form .champ label[for=pdc] a:hover {
  color: var(--couleur-hover);
}
form .champ input[type=tel],
form .champ input[type=email],
form .champ input[type=text]{
  width: calc(100% - 48px);
  height: 44px;
  padding: 6px 24px;
  border: none;
  outline: none;
  border-radius: 16px;
  background-color: var(--couleur-blanc);
}
form .champ textarea {
  width: calc(100% - 48px);
  height: 126px;
  padding: 12px 24px;
  border: none;
  outline: none;
  border-radius: 16px;
  background-color: var(--couleur-blanc);
}
form .champ input[type=checkbox] {
  width: 32px;
  height: 32px;
  margin-right: 6px;
  outline: none;
  border: 1px solid #055ee6;
  background-color: var(--couleur-noir);
}
form .boutons {
  padding: 32px 0 0 0;
  gap: 32px;
}
form .boutons input[type=submit],
form .boutons input[type=reset] {
  display: block;
}

section.formulaire div.formulaire form > p.probleme {
  margin: 32px 0;
  padding: 24px 42px;
  border: 2px dashed #ff0000;
  background-color: #ffcccc;
}

section.formulaire div.formulaire form > p.reussi {
  margin: 32px 0;
  padding: 24px 42px;
  border: 2px dashed #00bb00;
  background-color: #ccffcc;
}

section.coordonnees {
  margin: 128px auto;
}
section.coordonnees ul.liste_coordonnees {
  gap: 32px;
}
section.coordonnees ul.liste_coordonnees li.coordonnee {
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.image {
  width: 80px;
  height: 80px;
  margin-right: 24px;
  border: 1px solid var(--couleur-noir);
  border-radius: 50%;
  transition: var(--transition);
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.image svg {
  width: 56px;
  height: 56px;
  padding: 12px;
  stroke: var(--couleur-noir);
  transition: var(--transition);
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.flex.flex-column {
  align-self: center;
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.flex.flex-column h4 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: var(--light);
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.flex.flex-column p {
  margin: 0;
  font-size: 16px;
  text-decoration: underline;
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.flex.flex-column p a {
  line-height: 25px;
  color: var(--couleur-noir);
  transition: var(--transition);
}
section.coordonnees ul.liste_coordonnees li.coordonnee div.flex.flex-column p a:hover {
  color: var(--couleur-hover);
}

section.newsletter,
section.formulaire {
  position: relative;
  margin: 128px auto 0;
}
section.newsletter div.newsletter,
section.newsletter div.formulaire,
section.formulaire div.newsletter,
section.formulaire div.formulaire {
  padding: 128px 0;
  width: 70%;
  height: -moz-fit-content;
  height: fit-content;
}
section.newsletter div.newsletter h3.titre_section,
section.newsletter div.formulaire h3.titre_section,
section.formulaire div.newsletter h3.titre_section,
section.formulaire div.formulaire h3.titre_section {
  color: var(--couleur-noir);
  margin-bottom: 6px;
}
section.newsletter div.newsletter p,
section.newsletter div.formulaire p,
section.formulaire div.newsletter p,
section.formulaire div.formulaire p {
  margin: 0;
  font-size: 16px;
  color: var(--couleur-noir);
}
section.newsletter div.coordonnees,
section.formulaire div.coordonnees {
  width: 30%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 128px 0;
  transform: translateX(20%);
}
section.newsletter div.coordonnees h3.titre_section,
section.formulaire div.coordonnees h3.titre_section {
  text-align: center;
  margin-bottom: 96px;
  color: var(--couleur-noir);
}
section.newsletter div.coordonnees ul.liste_coordonnees,
section.formulaire div.coordonnees ul.liste_coordonnees {
  gap: 48px;
}
section.newsletter div.coordonnees ul.liste_coordonnees li.coordonnee div.image,
section.formulaire div.coordonnees ul.liste_coordonnees li.coordonnee div.image {
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  background-color: #d9d9d9;
}
section.newsletter div.coordonnees ul.liste_coordonnees li.coordonnee h4,
section.formulaire div.coordonnees ul.liste_coordonnees li.coordonnee h4 {
  margin: 16px 0 6px 0;
  font-size: 20px;
  text-align: center;
  color: var(--couleur-noir);
}
section.newsletter div.coordonnees ul.liste_coordonnees li.coordonnee p.image,
section.formulaire div.coordonnees ul.liste_coordonnees li.coordonnee p.image {
  margin: 6px 0;
  text-align: center;
  color: var(--couleur-noir);
  text-decoration: underline;
}
section.newsletter div.fond,
section.formulaire div.fond {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  right: 350px;
  background-color: #87c7e6;
  border-radius: 0 36px 36px 0;
  z-index: -1;
}

section.newsletter {
  display: none;
}

section.newsletter div.wrapper {
  position: unset;
}
section.newsletter div.wrapper div.coordonnees {
  width: 350px;
  position: absolute;
  right: 64px;
}

section.formulaire div.fond {
  width: 80vw;
  left: 0;
}

section.hero_section {
  background-color: #87c7e6;
}
section.hero_section h2.titre_page {
  margin: 128px 0 56px 0;
  text-align: center;
  font-size: 56px;
  font-weight: var(--medium);
  color: var(--couleur-noir);
}
section.hero_section p {
  margin: 0 0 128px 0;
  text-align: center;
  font-size: 20px;
  color: var(--couleur-noir);
}

section.sommaire {
  margin: 128px auto 0 auto;
}
section.sommaire ul.liste_parties li.partie {
  margin: 0 0 0 32px;
  cursor: pointer;
}
section.sommaire ul.liste_parties li.partie a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--couleur-noir);
  text-decoration: none;
  line-height: 36px;
  transition: var(--transition);
}
section.sommaire ul.liste_parties li.partie:hover a {
  color: var(--couleur-hover);
  letter-spacing: 1px;
}

section.ml-pdc {
  margin: 0 auto 128px auto;
}
section.ml-pdc ul.liste_parties li.partie {
  padding: 128px 0 0 0;
}
section.ml-pdc ul.liste_parties li.partie h3.titre_prtie {
  margin: 0;
}
section.ml-pdc ul.liste_parties li.partie p {
  line-height: 20px;
  margin: 0 0 32px 16px;
}
section.ml-pdc ul.liste_parties li.partie p a {
  color: var(--couleur-noir);
  transition: var(--transition);
}
section.ml-pdc ul.liste_parties li.partie p a:hover {
  color: var(--couleur-hover);
}
section.ml-pdc ul.liste_parties li.partie#failles_securite {
  padding-bottom: 0;
}
section.ml-pdc ul.liste_parties li.partie#failles_securite p.margin_bottom_none {
  margin-bottom: 24px;
}
section.ml-pdc ul.liste_parties li.partie#failles_securite ul {
  list-style-type: disc;
  padding-left: 32px;
}
section.ml-pdc ul.liste_parties li.partie#failles_securite ul li {
  line-height: 24px;
}

section.autres_pages {
  padding: 128px 0;
  background-color: #87c7e6;
}
section.autres_pages h3.titre_partie {
  margin: 0 0 64px 0;
  text-align: center;
  font-size: 36px;
  color: var(--couleur-noir);
}
section.autres_pages .boutons {
  gap: 36px;
}

section.erreur_section span {
  position: absolute;
  content: "";
  top: 0;
  left: 48%;
  transform: translateX(-50%);
  display: block;
  font-size: 448px;
  font-weight: var(--black);
  color: var(--couleur-blanc);
  opacity: 0.15;
  font-style: oblique;
  z-index: -1;
  text-shadow: -3px -3px 0 var(--couleur-noir), 3px -3px 0 var(--couleur-noir), -3px 3px 0 var(--couleur-noir), 3px 3px 0 var(--couleur-noir);
}
section.erreur_section div.text {
  width: clamp(320px, 70vw, 1200px);
  margin: 160px auto 64px auto;
  text-align: center;
}
section.erreur_section div.text h2 {
  font-size: 36px;
  color: var(--couleur-noir);
}
section.erreur_section div.text p {
  margin: 0 0 72px 0;
  font-size: 16px;
}

footer {
  padding: 64px 0;
  background-color: var(--couleur-blanc);
}
footer ul.liste_pages {
  padding: 0;
  margin: 0 auto 32px;
  gap: 32px;
  list-style-type: none;
}
footer ul.liste_pages li a {
  color: var(--couleur-noir);
  text-decoration: none;
  font-weight: var(--medium);
  transition: var(--transition);
}
footer ul.liste_pages li a:hover {
  color: var(--couleur-hover);
}
footer p {
  margin: 0;
  text-align: center;
  color: var(--couleur-noir);
}
footer p a {
  display: inline-block;
  height: 24px;
  line-height: 25px;
  color: var(--couleur-noir);
  transition: var(--transition);
}
footer p a:hover {
  color: var(--couleur-hover);
}

/* =================================================================
    Media Queries
==================================================================*/
@media screen and (max-width: 1200px) {
  section.prestations div.wrapper div.contenu {
    flex-direction: column;
  }
  section.prestations div.wrapper div.contenu ul.liste_prestations {
    flex-direction: row;
    flex-wrap: wrap;
  }
  section.prestations div.wrapper div.contenu ul.liste_prestations li.prestation {
    margin: auto;
  }
  section.evenements div.wrapper ul.liste_elements li.element div.image,
  section.infos_locations div.wrapper div.caracteristiques div.image {
    display: none;
  }
  section.evenements div.wrapper ul.liste_elements li.element div.description,
  section.infos_locations div.wrapper div.caracteristiques div.description {
    width: clamp(320px, 60vw, 748px);
  }
  section.infos_groupes ul.liste_groupes li.groupe div.main_box {
    flex-direction: column-reverse;
  }
  section.infos_groupes ul.liste_groupes li.groupe div.main_box div.infos div.image {
    width: 100%;
    height: 35vw;
  }
  section.infos_groupes ul.liste_groupes li.groupe div.main_box div.infos div.box {
    top: calc(100% - 128px);
    height: -moz-fit-content;
    height: fit-content;
  }
}
@media screen and (max-width: 1024px) {
  header nav.navbar {
    gap: 64px;
  }
  header nav.navbar ul.liste_pages li.page:nth-child(4),
  header nav.navbar ul.liste_pages li.page:nth-child(5) {
    display: none;
  }
  section.hero div.enveloppe {
    flex-direction: column;
  }
  section.hero div.enveloppe div.texte {
    width: 100%;
  }
  section.hero div.enveloppe div.texte h2.titre_page {
    width: 100%;
    text-align: center;
    color: var(--couleur-noir);
  }
  section.hero div.enveloppe div.texte span.sous_titre_page {
    width: 100%;
    display: inline-block;
    text-align: center;
  }
  section.hero div.enveloppe div.texte hr {
    margin: 32px auto;
    border: none;
    background-color: #055ee6;
  }
  section.hero div.enveloppe div.texte p {
    margin: 0 auto 42px auto;
    color: var(--couleur-noir);
    text-align: center;
  }
  section.hero div.enveloppe div.texte button {
    display: block;
    margin: auto;
  }
  section.hero div.enveloppe div.texte div.categories {
    display: none;
  }
  section.hero div.enveloppe div.texte > div.image {
    display: none;
  }
  section.hero div.enveloppe div.slider {
    display: none;
  }
  section.hero div.enveloppe div.description {
    transform: translate(0);
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
  }
  section.hero div.fond {
    width: 150vw;
    left: -128px;
    border-radius: 0;
  }
  section.calendrier div.wrapper div.fond,
  section.evenements div.wrapper div.fond,
  section.newsletter div.wrapper div.fond,
  section.photos div.wrapper div.fond {
    left: -128px;
    border-radius: 0;
    width: 150vw;
  }
  section.liste_dates div.wrapper div.tableau th:nth-child(4),
  section.liste_dates div.wrapper div.tableau td:nth-child(4) {
    display: none;
  }
  section.newsletter div.wrapper div.formulaire,
  section.newsletter div.wrapper div.newsletter,
  section.newsletter div.wrapper div.coordonnees {
    width: 100%;
  }
  section.newsletter div.fond {
    width: 100vw;
    left: 0;
    border-radius: 0;
  }
  section.liste_evenements div.wrapper ul.liste_evenements li.evenement div.image {
    display: none;
  }
  section.liste_evenements div.wrapper ul.liste_evenements li.evenement div.description {
    width: clamp(320px, 80vw, 748px);
  }
  section.prestations div.wrapper div.contenu div.selection div.image {
    display: none;
  }
  section.prestations div.wrapper div.contenu div.selection div.description {
    width: clamp(320px, 100%, 450px);
    margin: auto;
    padding: 12px;
  }
  section.prestations div.wrapper div.contenu div.selection div.description p {
    width: calc(100% - 24px);
  }
  section.infos_groupes ul.liste_groupes li.groupe div.head_box h4 {
    width: 320px;
    line-height: 32px;
    font-size: 32px;
  }
  section.infos_groupes ul.liste_groupes li.groupe div.main_box div.video {
    margin: auto;
  }
  section.infos_groupes ul.liste_groupes li.groupe div.main_box p.text {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  button.btn a,
  input[type=submit].btn a,
  input[type=reset].btn a {
    min-width: 260px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 12px;
  }
  header nav.navbar {
    position: initial;
  }
  header nav.navbar ul.liste_pages {
    width: 100vw;
    height: -moz-fit-content;
    height: fit-content;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    top: 65px;
    left: 120vw;
    opacity: 0;
    border-top: 1px solid var(--couleur-noir);
    background-color: var(--couleur-blanc);
    box-shadow: 0 4px 10px 2px var(--couleur-noir);
    transition: var(--transition);
  }
  header nav.navbar ul.liste_pages li.page > a {
    display: block;
    width: 320px;
    height: 64px;
    text-align: center;
    transition: var(--transition);
  }
  header nav.navbar ul.liste_pages li.page > a:hover,
  header nav.navbar ul.liste_pages li.page.actif > a {
    color: var(--couleur-noir);
    background-color: var(--couleur-fond);
  }
  header nav.navbar div.menu svg {
    width: 48px;
    height: 48px;
    display: block;
    stroke: var(--couleur-noir);
    stroke-width: 2px;
  }
  section.calendrier div.wrapper,
  section.evenements div.wrapper {
    width: clamp(320px, 90%, 600px);
  }
  section.calendrier div.wrapper div.slider,
  section.calendrier div.wrapper div.slider_bis,
  section.evenements div.wrapper div.slider,
  section.evenements div.wrapper div.slider_bis {
    transform: translate(0, 0);
  }
  section.calendrier div.wrapper div.slider .boutons_slider,
  section.calendrier div.wrapper div.slider_bis .boutons_slider,
  section.evenements div.wrapper div.slider .boutons_slider,
  section.evenements div.wrapper div.slider_bis .boutons_slider {
    display: flex;
    justify-content: center;
    gap: 24px;
    transform: translate(0);
  }
  section.infos_groupes div.wrapper {
    width: 100%;
  }
  section.infos_groupes div.wrapper ul.liste_groupes li.groupe div.head_box h4 {
    font-size: 32px;
  }
  section.infos_groupes div.wrapper ul.liste_groupes li.groupe div.head_box div.box {
    margin-top: 72px;
  }
  section.infos_groupes div.wrapper ul.liste_groupes li.groupe div.main_box div.video {
    display: none;
  }
  section.infos_groupes div.wrapper ul.liste_groupes li.groupe div.main_box p.text {
    width: calc(100% - 24px);
    margin: 0 12px;
  }
  section.infos_groupes div.wrapper ul.liste_groupes li.groupe:last-child div.main_box {
    margin-bottom: 72px;
  }
  section.hero_section h2.titre_page {
    font-size: 36px;
  }
  section.ml-pdc ul.liste_parties li.partie {
    padding: 64px 0 0 0;
  }
  section.ml-pdc ul.liste_parties li.partie h3.titre_partie {
    font-size: 20px;
  }
  section.evenements div.wrapper {
    width: 100%;
  }
  section.evenements div.wrapper h3.titre_section {
    margin: 0 0 0 6px;
  }
  section.evenements div.wrapper ul.liste_elements li.element,
  section.infos_locations div.wrapper div.caracteristiques {
    border-radius: 0;
    width: 100vw;
    overflow: unset;
  }
  section.evenements div.wrapper ul.liste_elements li.element div.description,
  section.infos_locations div.wrapper div.caracteristiques div.description {
    width: 100%;
    padding: 0;
  }
  section.evenements div.wrapper ul.liste_elements li.element div.description span.tarif,
  section.infos_locations div.wrapper div.caracteristiques div.description span.tarif {
    width: 64px;
    height: 64px;
    line-height: 64px;
    padding-left: 16px;
    font-size: 20px;
    border-radius: 0 0 0 128px;
  }
  section.infos_locations div.wrapper div.infos div.caracteristiques {
    width: 100%;
    box-shadow: none;
  }
  section.photos div.wrapper {
    width: calc(100% - 12px);
  }
  section.photos div.wrapper div.slider {
    transform: translate(0);
    width: 100%;
  }
  section.photos div.wrapper div.slider div.boutons_slider {
    width: 100%;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 32px;
    transform: translate(0, 0);
  }
  section.liste_dates div.wrapper {
    width: calc(100% - 12px);
  }
  section.liste_dates div.wrapper div.tableau table {
    width: 100%;
  }
  section.liste_dates div.wrapper div.tableau table thead tr th {
    width: 33.33%;
  }
  section.liste_dates div.wrapper div.tableau table thead tr th:nth-child(5),
  section.liste_dates div.wrapper div.tableau table tbody tr td:nth-child(5),
  section.liste_dates div.wrapper div.tableau table tbody tr td span {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .wrapper {
    width: calc(100vw - 12px);
  }
  header nav.navbar {
    gap: 36px;
  }
  section.hero div.enveloppe div.texte h2.titre_page {
    font-size: 42px;
  }
  section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier {
    width: clamp(320px, 90vw, 448px);
    height: clamp(320px, 90vw, 448px);
    margin: 0;
    background-position: center;
  }
  section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text h4 {
    margin-top: calc(100% - 165px);
    font-size: 24px;
  }
  section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier div.text h4 span {
    display: block;
    font-size: 20px;
  }
  section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier:first-child,
  section.calendrier div.wrapper div.slider ul.liste_elements li.element.calendrier:last-child {
    margin: 0;
  }
  section.prestations div.wrapper div.contenu div.selection {
    box-shadow: none;
  }
  section.formulaire div.wrapper div.formulaire form div.boutons input,
  section.newsletter div.wrapper div.newsletter form div.boutons input {
    width: 80vw;
    margin: auto;
  }
  section.formulaire div.wrapper div.formulaire form div.boutons input:last-child,
  section.newsletter div.wrapper div.newsletter form div.boutons input:last-child {
    display: none;
  }
  section.photos div.wrapper ul.liste_elements li.element {
    width: clamp(320px, 90vw, 448px);
  }
  section.liste_dates div.wrapper div.tableau table thead tr th,
  section.liste_dates div.wrapper div.tableau table tbody tr td {
    font-size: 16px;
  }
  section.liste_dates div.wrapper div.tableau table tr > *:nth-child(2),
  section.liste_dates div.wrapper div.tableau table tr > *:nth-child(3) {
    width: 40vw;
  }
}/*# sourceMappingURL=style.css.map */