@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

body,
html,
.col,
.row,
.container-fluid,
.leftBody,
.centerBody,
.rightBody,
.blockForm,
.navbar {
  margin: 0;
  padding: 0 !important;
}

h1 {
  font-family: 'Kalam', cursive;
  text-align: center;
  margin: 40px 0 !important;
  text-decoration: underline;
}

.h1Admin {
  margin: 40px 0;
  color: white;
  background-color: #EDA5A5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.btn-dark {
  margin: 10px 10px 10px;
}

.designAdmin {
  font-weight: bold;
  text-align: center;
  color: #426691 !important;
}

.designAdmin img {
  align-items: center;
  border-radius: 6px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  margin: 10px 0 10px;
}

.tableau {
  padding: 0;
}

.connexion {
  align-self: center;
  text-align: center;
}

.blockConnexion {
  background-color: #EDA5A5;
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
}

.iconeConnected {
  max-width: 40px;
  padding: 5px;
  margin: 5px;
}

#iconeConnexion {
  max-width: 45px;
}

#iconeConnexion:hover {
  transform: scale(1.2);
  border-radius: 6px;
}

#iconeConnexion2 {
  max-width: 45px;
}

#iconeConnexion2:hover {
  transform: scale(1.2);
  border-radius: 6px;
}

.form-check {
  display: inline;
  padding: 0;
  
}

.form-check .form-check-input {
  margin-left: 0;
  margin-right: .5rem;
  padding: 8px;
  margin-top: 6px;
}



.login {
  padding: 40px;
  margin-top: 60px;
  border-radius: 6px;
  background-color: #EDA5A5;
  opacity: 0.9;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.login input {
  width: 50%;
  margin: 20px auto;
}

.titleCompte {
  text-align: center;
}

.infoCompte {
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 6px;
  padding: 20px;
  margin: 40px;
}

.infoCompte input {
  margin: 20px 0 20px 0;
}

.monCompte {
  padding: 40px 120px 40px 120px;
  background-color: #EDA5A5;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.headerImg {
  width: 100%;
  height: auto;
  border-radius: 0 0 10px 10px;
  margin-bottom: 20px;
}

.h1Cours {
  text-align: center;
  margin: 20px;
}

.imgCours {
  width: 100%;
  padding: 0;
  border-radius: 6px 6px 0 0;
}

.pCours {
  padding: 20px;
  text-align: center;
  font-size: larger;
}

.bottomIndex {
  padding: 0;
}

.texteCours {
  align-self: center;
  text-align: center;
  padding: 20px;
}

.hrIndex {
  width: 50%;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 5px;
  margin-left: 25% !important;
  margin-right: 25%;
}

#calendar {
  margin: 40px 0 40px 0;
  width: 100%;
}

.iconGateau {
  max-width: 7%;
}

/*page cours*/

#blockCours {
  padding: 40px;
  background: rgba(238, 156, 167, 0.7);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#titreTextCours {
  font-weight: bold;
}

.textCours,
#titreTextCours {
  font-size: 20px;
  text-align: center;
}

#hrCours {
  width: 50%;
  margin: 20px 25% 20px 25%;
  height: 7px;
  color: rgb(2, 2, 2);
}

.prochaineDate {
  color: white;
  font-size: 40px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 0 0 6px 6px;
  background: black;
  padding: 20px 0 20px;
  font-size: 20px;
}

/* .listCours {

  list-style: url(assets/iconeGateau.png);

} */

ul.listCours {
  display: inline-block;
  text-align: center;
  padding: 0;
  border-radius: 20px;
}

.nomGateau {
  font-weight: bold;
}
/* fin page cours*/

/*debut realisation*/
.miniatureReal {
  width: 100%;
  margin: 40px 0 40px;
  padding: 0;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.lastProduct {
  text-align: center;
  font-size: 28px;
  background-color: #EDA5A5;
  padding: 20px 0 20px;
  border-radius: 6px;
}

.lastProduct img {
  width: 40%;
  padding: 0;
  cursor: zoom-in;
  border-radius: 6px;
}

.imgLastProd img {
  width: 100%;
  padding: 0;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.h2Real {
  text-align: center;
  margin: 40px 0 40px;
}

#photoSpec {
  margin-top: 0;
}

.blockRealisation {
  background-color: #ECE9E9;
  border-radius: 6px;
  padding: 20px 0 20px !important;
}

.btn-like {
  margin: 20px;
  border: none;
  background-color: #1674EA;
  border-radius: 6px;
  color: white;
}

/*fin realisations*/


/* debut page cake design*/
.h1CakeDesign {
  text-align: center;
  margin: 40px 0 40px;
}

.h2cakeDesign {
  text-align: center;
  margin-bottom: 20px;
}

.hautCakeDesign {
  text-align: center;
}

.imgMainCakeDesign {
  max-width: 50% !important;
  margin-bottom: 40px;
}

.imagesCakeDesign {
  padding: 20px;
  border-radius: 6px;
  margin: 20px 0 20px;
}

.imagesCakeDesign img {
  width: 100%;
  height: 80%;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.carteSaveur {
  width: 80%;
  border-radius: 6px;
}
/* fin page  cake design*/


/* debut page  number cake*/
.imagesNumberCake {
  margin: 40px 0;
  text-align: center;
}



.imagesNumberCake img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  cursor: zoom-in;
}
/* fin page  number cake*/

/*debut patisserie*/
.imgpatisserieTradi {
  text-align: center;
}

.imgpatisserieTradi img {
  width: 50%;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin-bottom: 40px;
}
/*fin patisserie*/

/*debut mignardise*/
.imgMainMignardise {
  width: 100%;
  margin: 40px 0 40px;
}
/*fin mignardise*/

/*scroll haut*/
.scroll {
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 40px;
  right: -80px;
  border-radius: 100%;
  background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(133, 145, 150) 0%, rgb(202, 86, 164) 81.3%);
  text-align: center;
  box-shadow: #888;
  transition: 400ms;
  /*temps de disparition du btn */
}

.scroll img {
  padding-top: 5px;
  width: 38px;
  height: 40px;
  filter: invert(100%);
  /* Changement de couleur avec l'opposé (white-black)*/
  -webkit-filter: invert(100%);
}

.scroll:hover {
  animation-name: rotate;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  /*Animation rêpéter à l'infini */
  animation-direction: alternate;
  /*Animation qui alterne ou rebondi sur sa trajectoire*/
}

@keyframes rotate {
  /*Animation de rotation et de déplacement*/
  from {
    margin-top: 15px
  }

  to {
    margin-top: 5px
  }
}

.visible {
  right: 30px;
  transition: all 1000ms;
  transform: rotate(360deg)
}

.swal2-title {
  padding: 0px;
}
/*fin scroll haut*/

/* Sidenav menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -250px;
  background-color: #e8e8e8;
  padding-top: 60px;
  transition: left 0.7s ease;
}

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

/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #111;
}

/* Active class */
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.burger-icon span {
  display: block;
  max-width: 45px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

.topblock2 {
  display: none;
}
/* End Sidenav menu links */


/*navbar bar*/

.navbar {
  justify-content: center;
  align-self: center;
}

.navbar2 {
  justify-content: center;
  align-self: center;
}

.topnav {
  background-color: #EDA5A5;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  text-align: center;
}

/* Style the links inside the navigation bar */
.topnav a {
  display: inline-block;
  justify-content: space-around;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #b36464;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #b36464;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/*end navbar bar*/


/*search bar*/
.searchDiv {
  align-self: center;
  text-align: center;
  padding: 0;
}

.search-icon {
  max-width: 40px;
  transition: transform 0.1s ease-in-out;
}

.search-icon:hover {
  transform: scale(1.2);
}

/*end search bar*/

.navTop {
  margin-top: 40px;
}

.menuTop {
  text-align: center;
  background-color: #EDA5A5;
  justify-content: center;
  border-radius: 6px;
  border: solid black 1px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.nav-link {
  font-weight: bold;
  font-size: 20px;
  color: black !important;
}

.rowCentral {
  margin: 40px 0 40px;
  background-color: #ece9e9;
  border-radius: 6px;
  padding: 20px !important;
}

.photoAccueil {
  margin: 0;
  padding: 0;
  width: fit-content;
  text-align: center;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 100%;
}

.textAcceuil {
  text-align: center;
  margin: 0;
  font-size: 20px;
  align-self: center;
}

.blockActu {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #ece9e9;
  border-radius: 6px;
}

.blockActuTexte {
  display: block;
  margin-bottom: 40px;
  padding: 20px;
  background-color: #ece9e9;
  border-radius: 6px;
  font-size: 24px;
  justify-content: center;
}

.blockActu img {
  display: flex;
  border-radius: 6px;
  width: 50%;
  margin: auto !important;
}

.titreActu {
  text-align: center;
  font-family: 'Kalam', cursive;
  text-decoration: underline;
}

.centreGauche {
  margin: 0;
  padding: 0;
}

.iconFollow {
  margin: 5px;
  max-height: 40px;
}

.blockForm {
  align-self: center;
}

.dateCours {
  font-size: 20px;
}

.pic {
  margin: 40px 0 40px;
  border-radius: 6px;
}

.titreImg {
  font-weight: bold;
  font-size: 20px;
}

.formInscription {
  background-color: #EDA5A5;
  padding: 40px;
  border-radius: 6px;
}

.formInscription input {
  padding: 10px 0;
  font-size: 16px;
  color: rgb(114, 111, 111);
  margin-bottom: 30px;
}

.articleCGU {
  font-weight: bolder;
}

.BlockIndex {
  padding-right: 20px !important;
  background-color: #ECE9E9;
  border-radius: 6px;
}

.formSub {
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color: #D9D9D9;
  padding: 20px 0 20px 0;
}

.formSub-item {
  margin: 10px;
  text-align: center;
  overflow: hidden;
}

.blockphotoCentre {
  padding: 0;
  align-self: center;
  margin: 20px 0;
}

.photoCentre {
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 100%;
}

.dateCours {
  font-size: 20px;
}

.footer {
  margin-top: 40px;
}

.contactShort {
  margin: 5px;
}

.blockFooter {
  padding: 0;
  text-align: center;
}

.blockLogoFooter {
  padding: 0;
  text-align: left;
}

.logoFooter {
  width: 30%;
}

.alert {
  font-size: 20px;
  color: red;
  font-style: italic
}

.alertEmail {
  color: red;
  font-style: italic;
  margin: 0;
}

#alertEvent {
  font-size: 20px;
  color: white;
  font-style: italic;
}

.infoEvent {
  color: white;
  text-align: right;
  padding: 0 10px;
}

.heureEvent {
  color: white;
  margin-bottom: -1%;
}

#heureEvent {
  padding: 0;
  align-self: center;
}

.registerCoursBlock {
  margin-top: 60px;
  border: 2px solid black;
  border-radius: 6px;
  padding: 20px;
}

.textRegisterCour {
  text-align: center;
  font-size: 28px;
}

.btnShowCours {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}


.fc-daygrid-day-number {
  text-decoration: none;
  font-weight: bold;
  color: black;
}

.fc-event-title-container {
  background-color: #F3BAC1;
  font-weight: bold;
  text-align: center;
  padding: 10px 0 10px 0;
}

.fc-col-header-cell-cushion {
  text-decoration: none;
  font-weight: bold;
  color: black;
  text-transform: capitalize;
}

.fc-toolbar-title {
  text-transform: capitalize;
}

.blockEvent {
  background-color: #ECE9E9;
  padding: 40px;
  border-radius: 6px;
  margin-top: 40px;
}

.formEvent {
  padding: 0;
}

#picker {
  padding: 50px;
  max-width: 80%;
  margin: auto;
  margin-top: 40px;
  border: 2px solid rgb(133, 125, 125);
  border-radius: 6px;
  background-color: white;
}

#calendar {
  padding: 50px;
  max-width: 80%;
  margin: 40px auto;
  border: 2px solid rgb(133, 125, 125);
  border-radius: 6px;
  background-color: white;
}

.modalFilm {
  margin: auto;
  max-width: 100%;
}

/* evenement form */

.login-box {
  margin: 40px 0 40px;
  display: inline-block;
  align-items: center;
  width: 100%;
  padding: 40px;
  background: rgba(0, 0, 0, .5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  border-radius: 10px;
}

.user-box ::placeholder {
  color: white;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
/* fin evenement form */

/*contact-form*/
#contact {
  background-color: #bfd1e0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.contact-box {
  width: clamp(100px, 90%, 1000px);
  margin: 80px 50px;
  display: flex;
  flex-wrap: wrap;
}

.contact-links,
.contact-form-wrapper {
  width: 50%;
  padding: 8% 5% 10% 5%;
}

.contact-links {
  background-color: #1f2e43;
  background:
    radial-gradient(circle at 55% 92%, #426691 0 12%, transparent 12.2%),
    radial-gradient(circle at 94% 72%, #426691 0 10%, transparent 10.2%),
    radial-gradient(circle at 20% max(78%, 350px), #263a53 0 7%, transparent 7.2%),
    radial-gradient(circle at 0% 0%, #263a53 0 40%, transparent 40.2%),
    #1f2e43;
  border-radius: 10px 0 0 10px;
}

.contact-form-wrapper {
  background-color: #ffffff8f;
  border-radius: 0 10px 10px 0;
}

@media only screen and (max-width: 800px) {
  .contact-links,
  .contact-form-wrapper {
    width: 100%;
  }

  .contact-links {
    border-radius: 10px 10px 0 0;
  }

  .contact-form-wrapper {
    border-radius: 0 0 10px 10px;
  }
}

@media only screen and (max-width: 400px) {
  .contact-box {
    width: 95%;
    margin: 8% 5%;
  }
}

.h2Contact {
  font-family: 'Arimo', sans-serif;
  color: #fff;
  font-size: clamp(30px, 6vw, 60px);
  letter-spacing: 2px;
  text-align: center;
  transform: scale(.95, 1);
}

.linksContact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 50px;
}

.linkContact {
  margin: 10px;
  cursor: pointer;
}

.iconContact {
  width: 45px;
  height: 45px;
  filter:
    hue-rotate(220deg) drop-shadow(2px 4px 4px #0006);
  transition: 0.2s;
  user-select: none;
}

.iconContact:hover {
  transform: scale(1.1, 1.1);
}

.iconContact:active {
  transform: scale(1.1, 1.1);
  filter:
    hue-rotate(220deg) drop-shadow(2px 4px 4px #222) sepia(0.3);
}

.form-item {
  position: relative;
}

label,
.inputContact,
.texteareaContact {
  font-family: 'Poppins', sans-serif;
}

label {
  position: absolute;
  top: 10px;
  left: 2%;
  color: #999;
  font-size: clamp(14px, 1.5vw, 18px);
  pointer-events: none;
  user-select: none;
}

.inputContact,
.texteareaContact {
  width: 100%;
  outline: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 12px;
  font-size: clamp(15px, 1.5vw, 18px);
}

.inputContact:focus+label,
.inputContact:valid+label,
.texteareaContact:focus+label,
.texteareaContact:valid+label {
  font-size: clamp(13px, 1.3vw, 16px);
  color: #777;
  top: -20px;
  transition: all .225s ease;
}

.submit-btn {
  background-color: #EDA5A5;
  filter: drop-shadow(2px 2px 3px #0003);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 1.6vw, 18px);
  display: block;
  padding: 12px 20px;
  margin: 2px auto;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
}

.submit-btn:hover {
  transform: scale(1.1, 1.1);
}

.submit-btn:active {
  transform: scale(1.1, 1.1);
  filter: sepia(0.5);
}

@media only screen and (max-width: 800px) {
  .h2Contact {
    font-size: clamp(40px, 10vw, 60px);
  }
}

@media only screen and (max-width: 400px) {
  .h2Contact {
    font-size: clamp(30px, 12vw, 60px);
  }

  .links {
    padding-top: 30px;
  }

  .iconContact {
    width: 38px;
    height: 38px;
  }
}

/*end contact-form*/

@media (max-width: 1400px) {
  .pic {
    width: 50%;
  }

  .logoFooter {
    width: 30%;
  }

  .blockLogoFooter {
    padding: 0;
    text-align: center;
  }

  .textAcceuil {
    text-align: justify;
    margin: 0;
    font-size: 20px;
  }

  .blockForm {
    margin-top: 40px;
    width: 100%;
  }

  .texteCours {
    width: 50%;
  }

  .blockphotoCentre {
    width: 50%;
  }
}

@media (max-width: 992px) {
  .photoCentre {
    width: 100%;
    height: 275px;
  }

  .card {
    margin: 20px 0 20px;
    width: 100%;
    align-self: center;
  }

  .textAcceuil {
    text-align: center;
    padding-right: 50px;
    font-size: 16px;
  }

  .dateCours {
    font-size: 16px;
  }

  .follow {
    width: fit-content;
    padding: 10px;
  }

  .designAdmin {
    font-size: 12px;
  }

  .blockphotoCentre {
    width: auto !important;
    padding: 40px;
    align-self: center;
    margin: auto;
  }

  .texteCours {
    width: 100%;
    margin: auto;
    ;
  }

  .textAcceuil {
    width: 100%;
    padding: 40px;
  }

  .centreGauche {
    margin: auto;
  }

  .searchDiv {
    justify-content: center;
    display: none;
  }

  #photoSpec {
    margin-top: 40px;
  }

  .topblock2 {
    display: block;
  }

  .navbar {
    display: none;
  }

  .connexion {
    display: none;
  }

  .searchDiv2 {
    display: flex;
    margin: auto;
    margin-bottom: 40px;
    justify-content: center;
  }

  .connexion2 {
    display: flex;
    margin: auto;
    margin-bottom: 40px;
    justify-content: center;
  }

  .navbar2 {
    display: flex;
    margin: auto;
    margin-bottom: 40px;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .blockFooter {
    border-top: 1px solid #111;
    padding-top: 10px;
  }

  .blockLogoFooter {
    border-top: 1px solid #111;
    padding-top: 10px;
  }

  .card {
    align-self: center;
    margin: 20px auto;
  }

  .pic {
    width: 100%;
  }

  .textAcceuil {
    margin-top: 40px;
  }

  #calendar {
    max-width: 100%;
    padding: 0;
  }

  #picker {
    max-width: 100%;
    padding: 0;
  }

  .blockEvent {
    padding: 0 5px 40px 5px;
  }

  #myTopnav2 a {
    font-size: 10px;
  }
}

@media (max-width: 762px) {
  .photoCentre {
    margin-bottom: 40px;
    width: 100%;
    height: 275px;
  }

  .dateCours {
    font-size: 14px;
  }

  .designAdmin {
    font-size: 10px;
  }

  .btn-secondary {
    width: 100%;
    font-size: 50%;
    align-self: center;
    margin: auto;
    padding: 2px !important;
  }
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  #myTopnav2 {
    display: flex;
    flex-direction: column;
    font-size: 16px;
  }

  #myTopnav2 a {
    font-size: 16px;
  }

  .monCompte {
    padding: 20px;
  }
}

@media screen and (max-width: 572px) {
  .topnav {
    width: auto;
  }

  .designAdmin {
    font-size: 8px;
  }

  .designAdmin img {
    width: 100%;
  }

  #dtBasicExample {
    margin: 0;
  }

  .btn-secondary {
    width: 100%;
    font-size: 50%;
    align-self: center;
    margin: auto;
    padding: 2px !important;
  }

  .fc-toolbar-title {
    font-size: 100% !important;
  }
}



@media (max-width: 461px) {
  .photoAccueil {
    width: 100%;
    text-align: center;
  }

  .textAcceuil {
    width: fit-content;
  }

  .blockphotoCentre {
    width: 100%;
  }

  .dateCours {
    font-size: 14px;
    max-width: 100%;
  }

  .texteCours {
    width: 100%;
    text-align: center;
  }

  .hidden {
    display: none;
  }

  .connexion a {
    font-size: 70%;
    align-self: center;
  }

  .fc-button-group {
    max-width: fit-content;
  }
}

@media (max-width: 445px) {
  .fc-today-button {
    margin: 0 !important;
  }
}



@media (max-width: 361px) {
  .pic {
    max-width: fit-content;
    text-align: center;
  }
}