/* ---------- responsive 320 --------- */
@media only screen and (min-width: 320px){
  section#fond_titre {padding: 30px 0;background-size: auto 250%;}
  section#fond_titre h1{width: 240px;margin: 0 calc(50% - 120px);font-size : 16px;line-height: 19px;}
  section#fond_titre h2{width: 290px;margin: 0 calc(50% - 145px);font-size : 16px;line-height: 19px;}
  section#calendrier_section1 {padding: 20px 0;}
  #calendrier_section1 .img a.btn{width: 280px;margin: 0 calc(50% - 140px);}
  #calendrier_section1 .img a.btn1 {border-radius:7px;-webkit-border-radius: 7px;-moz-border-radius: 7px;-ms-border-radius: 7px;-o-border-radius: 7px;font-size: 11px;line-height: 11px;padding: 8px 8px;width: 180px;margin: 20px calc(50% - 90px) 0;}
  section#calendrier_section2 { padding: 30px 0;background-size: cover;}
  section#calendrier_section2 h2{font-size : 16px;line-height: 19px;margin:0;}
  section#calendrier_section2 h3{font-size : 16px;line-height: 19px;margin:0 auto 20px;}
  section#calendrier_section2 .periodes ul {width : 280px;margin: 0 calc(50% - 140px);}
  section#calendrier_section2 .periodes ul li{width: 100%;margin: 20px 5px;padding: 0px 0 0px 55px;}
  section#calendrier_section2 .periodes ul li::before{width : 40px;height: 40px;left: 0;top: 0;background-size : auto 100%;}
  section#calendrier_section2 .periodes ul li::after {display: none;}
  section#calendrier_section2 .periodes ul li h4{font-size : 14px;line-height: 15px; margin: 0;}
  section#calendrier_section2 .periodes ul li p{font-size : 14px;line-height: 19px;margin: 10px auto 0;}
  section#calendrier_section3 h2{font-size : 16px;line-height: 19px;margin:20px auto 0px;}
}

/* ---------- responsive 480 --------- */
@media only screen and (min-width: 480px){
  section#fond_titre {padding: 30px 0;background-size: auto 250%;}
  section#fond_titre h1{width: 270px;margin: 0 calc(50% - 135px);font-size : 18px;line-height: 21px;}
  section#fond_titre h2{width: 330px;margin: 0 calc(50% - 155px);font-size : 18px;line-height: 21px;}
  section#calendrier_section1 {padding: 40px 0;}
  #calendrier_section1 .img a.btn{width: 400px;margin: 0 calc(50% - 200px);}
  #calendrier_section1 .img a.btn1 {border-radius:7px;-webkit-border-radius: 7px;-moz-border-radius: 7px;-ms-border-radius: 7px;-o-border-radius: 7px;font-size:12px;line-height: 12px;padding: 9px 17px;width: 212px;margin: 20px calc(50% - 106px) 0;}
  section#calendrier_section2 { padding: 30px 0;background-size: cover;}
  section#calendrier_section2 h2{font-size : 18px;line-height: 21px;}
  section#calendrier_section2 h3{font-size : 18px;line-height: 21px;}
  section#calendrier_section2 .periodes ul {width : 400px;margin: 0 calc(50% - 200px);}
  section#calendrier_section2 .periodes ul li{width: 100%;margin: 20px 5px;padding: 0px 0 0px 55px;}
  section#calendrier_section2 .periodes ul li::before{width : 40px;height: 40px;left: 0;top: 0;background-size : auto 100%;}
  section#calendrier_section2 .periodes ul li::after {display: none;}
  section#calendrier_section2 .periodes ul li h4{font-size : 14px;line-height: 15px; margin: 0;}
  section#calendrier_section2 .periodes ul li p{font-size : 14px;line-height: 19px;margin: 10px auto 0;}
  section#calendrier_section3 h2{font-size : 18px;line-height: 21px;margin:30px auto 0px;}
}


  /* ---------- responsive 768 --------- */
  @media only screen and (min-width: 768px){
    section#fond_titre {padding: 40px 0;background-size: auto 250%;}
    section#fond_titre h1{width: 320px;margin: 0 calc(50% - 160px);font-size : 21px;line-height: 24px;}
    section#fond_titre h2{width: 380px;margin: 0 calc(50% - 190px);font-size : 21px;line-height: 24px;}
    section#calendrier_section1 {padding: 50px 0;}
    #calendrier_section1 .img a.btn{width: 610px;margin: 0 calc(50% - 305px);}
    #calendrier_section1 .img a.btn1 {border-radius:7px;-webkit-border-radius: 7px;-moz-border-radius: 7px;-ms-border-radius: 7px;-o-border-radius: 7px;font-size:13px;line-height: 13px;padding: 10px 18px;width: 230px;margin: 20px calc(50% - 115px) 0;}
    section#calendrier_section2 { padding: 40px 0;background-size: cover;}
    section#calendrier_section2 h2{font-size : 21px;line-height: 24px;margin:0;}
    section#calendrier_section2 h3{font-size : 21px;line-height: 24px;margin:0 auto 40px;}
    section#calendrier_section2 .periodes ul {width : 660px;margin: 0 calc(50% - 305px);}
    section#calendrier_section2 .periodes ul li{width: calc(33.334% - 50px);margin: 0 25px;padding: 0px 0 0px 45px;}
    section#calendrier_section2 .periodes ul li::before{width : 40px;height: 40px;left: 0;top: 0;background-size : auto 100%;}
    section#calendrier_section2 .periodes ul li::after {display: block;width: 10px;height: 20px;right: -35px;top: 30px;background-size: auto 100%;}
    section#calendrier_section2 .periodes ul li h4{font-size : 14px;line-height: 15px; margin: 0;}
    section#calendrier_section2 .periodes ul li p{font-size : 14px;line-height: 19px;margin: 10px auto 0;}
    section#calendrier_section3 h2{font-size : 21px;line-height: 24px;margin:40px auto 0px;}
  }




  /* ---------- responsive 992 --------- */
  @media only screen and (min-width: 992px){
    section#fond_titre {padding: 50px 0;background-size: auto 250%;}
    section#fond_titre h1{width: 360px;margin: 0 calc(50% - 180px);font-size : 24px;line-height: 28px;}
    section#fond_titre h2{width: 440px;margin: 0 calc(50% - 220px);font-size: 24px;line-height: 28px;}
    section#calendrier_section1 {padding: 70px 0 60px 0;}
    #calendrier_section1 .img a.btn{width: 760px;margin: 0 calc(50% - 380px);}
    #calendrier_section1 .img a.btn1 {border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;font-size: 14px;line-height: 14px;padding: 11px 20px;width: 250px;margin: 40px calc(50% - 125px) 0;}
    section#calendrier_section2 { padding: 50px 0;background-size: cover;}
    section#calendrier_section2 h2{font-size : 24px;line-height: 28px;margin:0;}
    section#calendrier_section2 h3{font-size : 24px;line-height: 28px;margin:0 auto 40px;}
    section#calendrier_section2 .periodes ul {width : 800px;margin: 0 calc(50% - 400px);}
    section#calendrier_section2 .periodes ul li{width: calc(33.334% - 92px);margin: 0 35px;padding: 0px 0 0px 70px;}
    section#calendrier_section2 .periodes ul li::before{width : 50px;height: 50px;left: 0;top: 0;background-size : auto 100%;}
    section#calendrier_section2 .periodes ul li::after {width: 16px;height: 25px;right: -35px;top: 30px;background-size: auto 100%;}
    section#calendrier_section2 .periodes ul li h4{font-size : 14px;line-height: 15px; margin: 0;}
    section#calendrier_section2 .periodes ul li p{font-size : 14px;line-height: 19px;margin: 10px auto 0;}
    section#calendrier_section3 h2{font-size : 24px;line-height: 28px;margin:60px auto 0px;}
  }


  /* ---------- responsive 1200 --------- */
  @media only screen and (min-width: 1200px) {
    section#fond_titre {padding: 70px 0;background-size: auto 250%;}
    section#fond_titre h1{width: 1200px;margin: 0 calc(50% - 600px);font-size : 28px;line-height: 32px;}
    section#fond_titre h2{width: 1200px;margin: 0 calc(50% - 600px);font-size : 28px;line-height: 32px;}
    section#calendrier_section1 {padding: 80px 0 70px 0;}
    #calendrier_section1 .img a.btn{width: 880px;margin: 0 calc(50% - 440px);}
    #calendrier_section1 .img a.btn1 {border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;font-size: 15px;line-height: 15px;padding: 12px 23px;width: 270px;margin: 50px calc(50% - 135px) 0;}
    section#calendrier_section2 { padding: 60px 0;background-size: cover;}
    section#calendrier_section2 h2{font-size : 28px;line-height: 32px;margin:0;}
    section#calendrier_section2 h3{font-size : 28px;line-height: 32px;margin:0 auto 60px;}
    section#calendrier_section2 .periodes ul {width : 900px;margin: 0 calc(50% - 450px);}
    section#calendrier_section2 .periodes ul li{width: calc(33.334% - 92px);margin: 0 46px;padding: 0px 0 0px 70px;}
    section#calendrier_section2 .periodes ul li::before{width : 60px;height: 60px;left: 0;top: 0;background-size : auto 100%;}
    section#calendrier_section2 .periodes ul li::after {width: 18px;height: 27px;right: -45px;top: 20px;background-size: auto 100%;}
    section#calendrier_section2 .periodes ul li h4{font-size : 15px;line-height: 15px; margin: 0;}
    section#calendrier_section2 .periodes ul li p{font-size : 15px;line-height: 19px;margin: 10px auto 0;}
    section#calendrier_section3 h2{font-size : 28px;line-height: 32px;margin:80px auto 0px;}
}


  /* ---------- responsive 1400 --------- */
  @media only screen and (min-width: 1400px){
    section#fond_titre {padding: 80px 0;background-size: auto 250%;}
    section#fond_titre h1{width: 1200px;margin: 0 calc(50% - 600px);font-size : 30px;line-height: 36px;}
    section#fond_titre h2{ width: 1200px;margin: 0 calc(50% - 600px); font-size : 30px;line-height: 36px;}
    section#calendrier_section1 {padding: 100px 0 80px 0;}
    #calendrier_section1 .img a.btn{width: 940px;margin: 0 calc(50% - 470px);}
    #calendrier_section1 .img a.btn1 {border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px; -ms-border-radius: 10px;-o-border-radius: 10px;font-size: 16px;line-height: 16px; padding: 15px 30px;width: 302px;margin: 50px calc(50% - 151px) 0;}
    section#calendrier_section2 { padding: 80px 0;background-size: cover;}
    section#calendrier_section2 h2{font-size: 30px;line-height: 36px;margin:0;}
    section#calendrier_section2 h3{font-size: 30px;line-height: 36px;margin:0 auto 70px;}
    section#calendrier_section2 .periodes ul {width : 1082px;margin: 0 calc(50% - 541px);}
    section#calendrier_section2 .periodes ul li{width: calc(33.334% - 110px);margin: 0 55px;padding: 0px 0 0px 80px;}
    section#calendrier_section2 .periodes ul li::before{width : 60px;height: 60px;left: 0;top: 0;background-size : auto 100%;}
    section#calendrier_section2 .periodes ul li::after {width : 20px;height: 30px;right : -55px;top : 15px;background-size : auto 100%;}
    section#calendrier_section2 .periodes ul li h4{font-size : 16px;line-height: 16px; margin: 0;}
    section#calendrier_section2 .periodes ul li p{font-size : 16px;line-height: 20px;margin: 10px auto 0;}
    section#calendrier_section3 h2{font-size: 30px;line-height: 36px;margin:80px auto 0px;}
  }