* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  color: whitesmoke;
}


.lesduarigs,
.les30ans {
  color: #ef7707;
  text-shadow: 2px 4px 0px rgba(153, 18, 243, 0.36);
}

/**Navigation**/

.nav-container {
  background: #000000;
  padding-right: 5px;
  position: fixed;
  width: 100%;
  height: 45px;
  top: 0;
  left: 0;
  z-index: 1;
}

.nav-content {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-content>a {
  text-decoration: none;
  font-size: 1.5rem;
}

.nav-links {
  display: flex;
  background: #000000;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 20px;
  color: white;
  text-decoration: none;
  position: relative;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  width: 25px;
  height: 25px;
}

.menu-toggle span {
  position: absolute;
  width: 25px;
  height: 3px;
  background: #ff8c00;
  transition: 0.3s;
  left: 0;
}

.menu-toggle span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}

.menu-toggle span:nth-child(2) {
  opacity: 0;
  top: 11px;
}

.menu-toggle span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

.menu-toggle.closed span:nth-child(1) {
  transform: rotate(0);
  top: 2px;
}

.menu-toggle.closed span:nth-child(2) {
  opacity: 1;
  top: 11px;
  transform: none;
}

.menu-toggle.closed span:nth-child(3) {
  transform: rotate(0);
  top: 20px;
}

.nav-item-wrapper {
  padding: 5px;
  background-color: #472aea;
  border-radius: 5px;
  transition: all 0.3s;
}

.nav-item-wrapper:hover {
  color: #ef7707;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-item-wrapper {
    width: 100%;
    text-align: center;
  }
}

p {
  font-size: 20px;
}

/*Réseaux*/
.social-links a {
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
  color: whitesmoke
}

.social-links {
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
  color: whitesmoke
}

@media screen and (min-width: 800px) {

  .icones {
    font-size: 200%;
  }
}

.bi-envelope {
  color: #e80675;
}

.bi-facebook {
  color: #3b5998;
}

.bi-youtube {
  color: #FF0000;
}

.bi-phone {
  color: #ef7707;
}

@keyframes glow {

  0%,
  100% {
    border-color: black;
  }

  50% {
    box-shadow: 0 0 15px #7c4dff;
  }
}

/*****Présentation*****/

/*Effet sur les textes et titres*/
.clamp {
  font-size: clamp(0.5125rem, -0.5208rem + 6.6667vw, 1.5625rem);
}

.sectionPresentation {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 3px 25px 9px rgba(28, 0, 72, 0.729);
  border-radius: 30px;
}

.TextePresentation {
  padding: 5px;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
}

.TextePresentation2 {
  background: -webkit-linear-gradient(0deg, #d20303 5%, #48abe0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wave {
  width: 200px;
}

.DivimagesPresentations {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2%;
}

.ImagesPresentationsImg {
  border: #4a1ce0 3px solid;

}

.ImagesPresentationsImg {
  border-radius: 1%;
  box-shadow: 2px 0px 5px -3px #d72f23;
}

/*****Navigation****/
.logoAgprod {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: glow 8s infinite;
}

/*****Footer*****/
.footer-bottom {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 3px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  color: whitesmoke
}

.Creditphoto>a {
  text-decoration: none;
  color: rgb(109, 0, 0);
}

/*********************************/
/*********************************/
/*********Autres Pages****************/
/*********************************/
/*********************************/

/*****Les images*****/
.fancy00 {
  border-radius: 58% 42% 70% 30% / 0% 58% 42% 100%;
}

.fancy01 {
  border-radius: 77% 23% 0% 100% / 0% 100% 0% 100%;
}

.img-fluid {
  object-fit: cover;
}

/*********************************/
/***** Soirées Dancantes*****/
/*********************************/
.ImagesLesDuarigsHeaderGauche {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #c423b5;
  transition: 0.3s ease;
}

.ImagesLesDuarigsSoireesDansantesHeaderDroite {
  border-radius: 5px;
  box-shadow: 3px 0px 10px #6a3ec7;
  transition: 0.3s ease;
}

.ImagesLesDuarigsHeaderGauche:hover {
  box-shadow: none;
}

.ImagesLesDuarigsSoireesDansantesHeaderDroite:hover {
  box-shadow: none;
}

.DivesduarigssoireesdancantsPresentation {
  background-image: radial-gradient(circle at 100% 100%, transparent 0px, #3643f7 0px, #3643f7 3px, transparent 3px), linear-gradient(to right, #3643f7, #9c90f3), radial-gradient(circle at 0% 100%, transparent 0px, #9c90f3 0px, #9c90f3 3px, transparent 3px), linear-gradient(to bottom, #9c90f3, #f4f6f6), radial-gradient(circle at 0% 0%, transparent 0px, #f4f6f6 0px, #f4f6f6 3px, transparent 3px), linear-gradient(to left, #f4f6f6, #ff0000), radial-gradient(circle at 100% 0%, transparent 0px, #ff0000 0px, #ff0000 3px, transparent 3px), linear-gradient(to top, #ff0000, #3643f7);
  background-size: 3px 3px, calc(100% - 2px) 3px, 3px 3px, 3px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.DivesduarigssoireesdancantsPresentationTexte {
  font-size: 25px;
  text-align: justify;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
  padding: 5%;
}

.VideoLesDuarigsSoireesDansantes {
  height: 100%;
}

.VideoLesDuarigsSoireesDansantes iframe {
  width: 100%;
  height: 100%;
  padding: 5%;
}

/*********************************/
/*****Années 80*****/
/*********************************/

.ImagesLesDuarigsAnnees80HeaderGauche {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #c423b5;
  transition: 0.3s ease;
}

.ImagesLesDuarigsAnnees80HeaderDroite {
  border-radius: 5px;
  box-shadow: 3px 0px 10px #3580d2;
  transition: 0.3s ease;
}

.ImagesLesDuarigsAnnees80HeaderGauche:hover {
  box-shadow: none;
}

.ImagesLesDuarigsAnnees80HeaderDroite:hover {
  box-shadow: none;
}

.Divesduarigsannees80Presentation {
  background-image: radial-gradient(circle at 100% 100%, transparent 0px, #3643f7 0px, #3643f7 3px, transparent 3px), linear-gradient(to right, #3643f7, #9c90f3), radial-gradient(circle at 0% 100%, transparent 0px, #9c90f3 0px, #9c90f3 3px, transparent 3px), linear-gradient(to bottom, #9c90f3, #f4f6f6), radial-gradient(circle at 0% 0%, transparent 0px, #f4f6f6 0px, #f4f6f6 3px, transparent 3px), linear-gradient(to left, #f4f6f6, #ff0000), radial-gradient(circle at 100% 0%, transparent 0px, #ff0000 0px, #ff0000 3px, transparent 3px), linear-gradient(to top, #ff0000, #3643f7);
  background-size: 3px 3px, calc(100% - 2px) 3px, 3px 3px, 3px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.Divesduarigsannees80PresentationTexte {
  font-size: 25px;
  text-align: justify;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
  padding: 5%;
}

.VideoLesDuarigsannees80 {
  height: 100%;
}

.VideoLesDuarigsannees80 iframe {
  width: 100%;
  height: 100%;
  padding: 5%;
}

/*********************************/
/*****Chasons Françaises*****/
/*********************************/

.ImagesLesDuarigsChansonsFrancaisesGauche {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #c423b5;
  transition: 0.3s ease;
}

.ImagesLesDuarigsChansonsFrancaisesDroite {
  border-radius: 5px;
  box-shadow: 1px 0px 20px #3580d2;
  transition: 0.3s ease;
}

.ImagesLesDuarigsChansonsFrancaisesGauche:hover {
  box-shadow: none;
}

.ImagesLesDuarigsChansonsFrancaisesDroite:hover {
  box-shadow: none;
}

.DivLesDuarigsChansonsFrancaisesPresentation {
  background-image: radial-gradient(circle at 100% 100%, transparent 0px, #3643f7 0px, #3643f7 3px, transparent 3px), linear-gradient(to right, #3643f7, #9c90f3), radial-gradient(circle at 0% 100%, transparent 0px, #9c90f3 0px, #9c90f3 3px, transparent 3px), linear-gradient(to bottom, #9c90f3, #f4f6f6), radial-gradient(circle at 0% 0%, transparent 0px, #f4f6f6 0px, #f4f6f6 3px, transparent 3px), linear-gradient(to left, #f4f6f6, #ff0000), radial-gradient(circle at 100% 0%, transparent 0px, #ff0000 0px, #ff0000 3px, transparent 3px), linear-gradient(to top, #ff0000, #3643f7);
  background-size: 3px 3px, calc(100% - 2px) 3px, 3px 3px, 3px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.DivLesDuarigsChansonsFrancaisesTexte {
  font-size: 25px;
  text-align: justify;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
  padding: 5%;
}

.VideoLesDuarigsChansonsFrancaises {
  height: 100%;
}

.VideoLesDuarigsChansonsFrancaises iframe {
  width: 100%;
  height: 100%;
  padding: 5%;
}

/*********************************/
/*****100% Variés et Rock Française*****/
/*********************************/

.ImagesLesDuarigsChansonsFrancaisesGauche {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #c423b5;
  transition: 0.3s ease;
}

.ImagesLesDuarigsChansonsFrancaisesDroite {
  border-radius: 5px;
  box-shadow: 1px 0px 20px #3580d2;
  transition: 0.3s ease;
}

.ImagesLesDuarigsChansonsFrancaisesGauche:hover {
  box-shadow: none;
}

.ImagesLesDuarigsChansonsFrancaisesDroite:hover {
  box-shadow: none;
}

.DivLesDuarigsChansonsFrancaisesPresentation {
  background-image: radial-gradient(circle at 100% 100%, transparent 0px, #3643f7 0px, #3643f7 3px, transparent 3px), linear-gradient(to right, #3643f7, #9c90f3), radial-gradient(circle at 0% 100%, transparent 0px, #9c90f3 0px, #9c90f3 3px, transparent 3px), linear-gradient(to bottom, #9c90f3, #f4f6f6), radial-gradient(circle at 0% 0%, transparent 0px, #f4f6f6 0px, #f4f6f6 3px, transparent 3px), linear-gradient(to left, #f4f6f6, #ff0000), radial-gradient(circle at 100% 0%, transparent 0px, #ff0000 0px, #ff0000 3px, transparent 3px), linear-gradient(to top, #ff0000, #3643f7);
  background-size: 3px 3px, calc(100% - 2px) 3px, 3px 3px, 3px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.DivLesDuarigsChansonsFrancaisesTexte {
  font-size: 25px;
  text-align: justify;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
  padding: 5%;
}

.VideoLesDuarigsChansonsFrancaises {
  height: 100%;
}

.VideoLesDuarigsChansonsFrancaises iframe {
  width: 100%;
  height: 100%;
  padding: 5%;
}

/*********************************/
/*****Cabaret Rétro*****/
/*********************************/

.ImagesLesDuarigsCabaretRetrogGauche {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #8b2a03;
  transition: 0.3s ease;
}

.ImagesLesDuarigsCabaretRetrogDroite {
  border-radius: 5px;
  box-shadow: 1px 0px 20px #4e29c9;
  transition: 0.3s ease;
}

.ImagesLesDuarigsCabaretRetrogGauche:hover {
  box-shadow: none;
}

.ImagesLesDuarigsCabaretRetrogDroite:hover {
  box-shadow: none;
}

.DivLesDuarigsCabaretRetroPresentation {
  background-image: radial-gradient(circle at 100% 100%, transparent 0px, #3643f7 0px, #3643f7 3px, transparent 3px), linear-gradient(to right, #3643f7, #9c90f3), radial-gradient(circle at 0% 100%, transparent 0px, #9c90f3 0px, #9c90f3 3px, transparent 3px), linear-gradient(to bottom, #9c90f3, #f4f6f6), radial-gradient(circle at 0% 0%, transparent 0px, #f4f6f6 0px, #f4f6f6 3px, transparent 3px), linear-gradient(to left, #f4f6f6, #ff0000), radial-gradient(circle at 100% 0%, transparent 0px, #ff0000 0px, #ff0000 3px, transparent 3px), linear-gradient(to top, #ff0000, #3643f7);
  background-size: 3px 3px, calc(100% - 2px) 3px, 3px 3px, 3px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.DivLesDuarigsCabaretRetroTexte {
  font-size: 25px;
  text-align: justify;
  font-size: clamp(0.3125rem, -0.5208rem + 6.6667vw, 1.5625rem);
  padding: 5%;

}

.VideoLesDuarigsCabaretRetro {
  height: 100%;
}

.VideoLesDuarigsCabaretRetro iframe {
  width: 100%;
  height: 100%;
  padding: 5%;
}

/*********************************/
/*********************************/
/*****Animations*****/
/*********************************/
/*********************************/

/************Animation Page d'ouverture ******************/
.animationheader {
  -webkit-animation: animationheader 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: animationheader 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes animationheader {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

@keyframes animationheader {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

.annimation2 {
  -webkit-animation: annimation2 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: annimation2 3s scubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes annimation2 {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes annimation2 {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

/************Animation formules image gauche et droite ******************/

.animImgGauche {
  -webkit-animation: animImgGauche 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: animImgGauche 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes animImgGauche {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}

@keyframes animImgGauche {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}

.animImgDroite {
  -webkit-animation: animImgDroite0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: animImgDroite0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes animImgDroite {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }
}

@keyframes animImgDroite {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }
}

.animImgDroite {
  -webkit-animation: animImgDroite 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: animImgDroite 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes animImgDroite {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }
}

@keyframes animImgDroite {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 1;
  }
}