@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

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

body {
  background-image: url("BackgroudFleurs.jpg");
  font-family: Raleway, Helvetica, sans-serif;
  position: relative;
}

/* Pour le Menu */
.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, rgb(73, 89, 57) 0%, rgb(87,105,70) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icone-sage-femme img{
    width: 140px;
    padding-bottom: 15px;
}

.nav-bloc {
  padding: 0px 0;
  background: linear-gradient(90deg, rgb(73, 89, 57) 0%, rgb(87,105,70) 100%);
}

.nav-bloc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.nav-bloc li{
  margin: 0;
}
.nav-bloc li:hover {
  background: linear-gradient(90deg, rgb(198, 120, 124) 0%, rgb(198, 120, 124) 100%);
}
.nav-bloc a {
  color: #f2f2f2;
  text-decoration: none;
  cursor: pointer;
  display: block;
  padding: 10px 20px;
}
/* Pour le Menu Téléphone*/
.hamburger{
  display: none;
}
@media (max-width: 900px){
  .icone-sage-femme img{
    display: none;
  }
 .side-nav{
    background: none;
    align-items: initial;
  }
  /*Hamburger*/
.hamburger {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border: none;
    display: flex;
    background: rgb(73, 89, 57);
    align-items: center;
    position: relative;
    border: solid 2px rgb(198, 120, 124);
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: rgb(198, 120, 124);
    position: absolute;
    pointer-events: none;
    transition: opacity 0.3s 0.15s ease-out;
  }
  .hamburger span:nth-child(1),
  .hamburger span:nth-child(3) {
    transition: transform 0.3s ease-out;
  }
  .hamburger span:nth-child(1) {
    transform: translateY(7px);
  }
  .hamburger span:nth-child(3) {
    transform: translateY(-7px);
  }
  .hamburger.open span:nth-child(1) {
    transform: translate(0) rotate(135deg);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
    transition: opacity 0s ease-out;
  }
  .hamburger.open span:nth-child(3) {
    transform: translate(0) rotate(-135deg);
  }

  .nav-bloc{
    transform: translate(-100%);
  }
  .open {
    background: linear-gradient(90deg, rgb(73, 89, 57) 0%, rgb(87,105,70) 100%);
    transform: translate(0%);
  }
  .nav-bloc li a {
    font-size: 18px;
    margin: 0;
  }
}

/* Pour le Main*/
.main-content {
  padding-left: 207px;
  color: #050505;
}
@media (max-width: 900px){
  .main-content{
    padding: 0px 0px;
  }
  .main-content h1 {
  padding-left: 10px;
}
}
.main-content p {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0px;
  line-height: 1.7;
}
/*Section Présentation des Sage-femmes*/
.top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.presentation {
  background: #f1f1f1;
  margin: 10px 20px;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
}
.presentation img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin: 5px;
  border: solid 2px rgb(0, 0, 0);
  shape-outside: margin-box;
}
@media (max-width: 491px){
  .presentation img {
  width: 150px;
  height: 150px;
  }
}
@media (max-width: 350px){
  .presentation img {
  display: none;
  }
}
.texte-presentation {
  padding: 5px;
}
.texte-presentation h2{
  padding: 5px 0px;
}
.texte-presentation a{
  color: #050505;
  text-decoration: none;
}

.texte-presentation svg{
  width: 1.2em;
  height: 1.2em;
}
/* Section Basique */
.SectionBasique{
  padding: 15px 0;
  margin: 10px 0;
  background: linear-gradient(0deg, rgba(176,201,152, 0.8) 0%, rgba(143,181,120, 0.8) 100%);
  border-bottom: 2px rgb(30, 50, 13) solid;
  border-top: 2px rgb(30, 50, 13) solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 1225px){
  #pair.SectionBasique {
    flex-wrap: wrap-reverse;
  }
}
.TexteSectionBasique{
  text-align: justify;
}
.SectionBasique img{
  max-width: 400px;
  max-height: 400px;
}

.image_paragraphe{
  border: 2px rgb(30, 50, 13) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

@media (max-width: 420px){
  .SectionBasique img{
  width: 100%;
    }
  }
/* Google Map*/
.Localisation{
 width: 450px;
 height: 350px;
}
@media (max-width: 460px){
  .Localisation{
  max-width: 450px;
  width: 100%;
}
}

.SectionBasique ul {
  list-style-type: none;
}
@media (max-width: 900px){
  .SectionBasique{
  padding: 10px 15px;
}
}
/*Bordereau*/
.bordereau{
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(0deg, rgba(176,201,152, 0.8) 0%, rgba(143,181,120, 0.8) 100%);
  border-top: 2px rgb(30, 50, 13) solid;
  border-bottom: 2px rgb(30, 50, 13) solid;
  font-family: Open Sans, sans-serif;
  text-align: center;

}
@media (max-width: 900px){
  .bordereau h1{
  padding-left: 40px;
}
}

/*Prise de Rdv*/
footer{
  height: 35px;
}
.rdv{
  position: fixed;
  bottom: 0;
  right: 10%;
  background: rgb(198, 120, 124);
  border: 2px rgb(30, 50, 13) solid;
  color: #050505;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 10px;
  margin: 3px;
}

/* Section INFO */
.SectionInfo{
  padding: 15px 0;
  margin: 10px 0;
  background: linear-gradient(0deg, rgba(198, 120, 124, 0.8) 0%, rgba(198, 120, 124, 0.8) 100%);
  border-bottom: 2px rgb(30, 50, 13) solid;
  border-top: 2px rgb(30, 50, 13) solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 1225px){
  #pair.SectionInfo {
    flex-wrap: wrap-reverse;
  }
}
.TexteInfoBasique{
  text-align: justify;
}

/* Gestion des Sliders */
.slider-horizontal {
  max-width: 600px;
  overflow: hidden;
  border: 2px rgb(30, 50, 13) solid;
  border-radius: 10px;
}

.slider-horizontal img {
  max-width: 600px;
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

/*Animation Slider IVG*/
.slider-horizontal .slider-horizontal-1 {
  display: flex;
  animation: slider-anim-ivg 9s infinite ease-in-out;
}

@keyframes slider-anim-ivg
{
  0%,
  30% {
    transform: translateX(0);
  }
  35%,
  65% {
    transform: translateX(-100%);
  }
  70%,
  95% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-300%);
  }
}

/* Animation: 5% du temps par transition.
   reste divisé par nb de pauses
   80(%) / 4 = 20(%) par pause*/


/*Animation Slider Contact*/
.slider-horizontal .slider-horizontal-contact {
  display: flex;
  animation: slider-anim-contact 12s infinite ease-in-out;
}

@keyframes slider-anim-contact {
  0%,
  20% {
    transform: translateX(0);
  }
  25%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  70% {
    transform: translateX(-200%);
  }
  75%,
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}