/*
marron : #bf4611
bordeau : #662b27
rose : #be9579
*/
@import url('../../css/common.css');
h2, h3 {font-family: Roboto, Arial, Verdana, Helvetica, Sans-Serif;}
#accueilLogo {
  position: absolute;
  margin: 14% 40px;
}
#diagonal {
  left: -120px;
  width: 554px;
}

#barresParc {margin-top:50px;}

#franceRenovParcLogo {
  position: absolute;
  bottom: 60px;
  width: 30vw;
  left: 70vw;
}
#bandeauText {
  position: absolute;
  top: 370px;
  right: 100px;
  height: 114px;
  background: url("../images/accueil/bandeau-background-text.png") no-repeat;
  color: #fff;
  font-size: 41px;
  font-family: ZapfHumanist601BT-Bold, Arial, Verdana, Helvetica, Sans-Serif;
  line-height: 1.2;
  width: 400px;
}
#bandeauText span:nth-child(1) {display: block;padding-left: 33px;}
/*#bandeauText span:nth-child(2) {display: block;padding-left: 42px;}*/
/*#bandeauDecoration {position: absolute; bottom: -40px; width:100%px;height:74px;background: url("../../images/accueil-bandeau-decoration-bottom.png");}*/
#bandeauDecoration {
  position: absolute;
  top: 96.2%;
  width: 100%;
  height: 8%;
  background: url("../images/accueil/accueil-dechirure.png");
  z-index: 2;
}

body.wrapper-fluid .site-grid {
  grid-gap: 0;
}
.grid-child.container-component {
  z-index: 1;
  background-color: #fff;
  margin-top: 30px;
}
main {
  display: grid;
  grid-template-columns: repeat(3,33%);
  grid-gap:13px;
  align-self: center;
}
main > div {width:493px; height: 588px;}
#centera > div:first-child {
  background: url("../images/accueil/a-la-une-background.jpg") repeat-x;
  padding: 0.8rem 1.5rem 3.5rem 1.5rem;
}
#aLaUne {
  position: relative;
  overflow: hidden;
  /*height: 398px;*/
  margin-bottom: 40px;
  margin-left: 9px;
  color: #616161;
  font-family: Roboto, Arial, Verdana, Helvetica, Sans-Serif;
}
#centera h1:first-child {
  width: 236px;
  height: 33px;
  color: #fff;
  background: url("../images/accueil/a-la-une-background-title.png") no-repeat;
  padding-left: 30px;
  margin-bottom : 1.2rem;
}
#aLaUne figure {
  margin: 0 0 0.5em;
}
#aLaUne h2 {font-size:20px;text-transform: uppercase;}
#aLaUne h2 a {color: #662b27;text-decoration: none;}
/*#aLaUne .mod-articlesnews__item {height:244px;}*/
#aLaUne figure img {width:100%;}
#dots {width: 105px;margin: 0 auto;position: relative; bottom:13px; display:grid; grid-template-columns: repeat(5,10px); grid-gap:6px; font-size: 150px;color:#c9a285;}
main > #centera .dot {
    height: 12px;
  width: 12px;
  background-color: #be9579;
  border-radius: 50%;
  display: inline-block;

  position: absolute;  bottom: 0;}
main > #centera:nth-child(1) #dot0 {margin-left:0px;}
main > #centera:nth-child(1) #dot1 {margin-left:20px;}
main > #centera:nth-child(1) #dot2 {margin-left:40px;}
main > #centera:nth-child(1) #dot3 {margin-left:60px;}
main > #centera:nth-child(1) #dot4 {margin-left:80px;}

#aLaUne .container-news {
  position: absolute;
}
#aLaUne .mod-articlesnews__item:first-child .container-news {
  position: relative;
}
#mod-custom118 {margin-top:28px;}
#liensAnnuaireRessources {display: grid;grid-template-rows: 50% 50%;grid-gap:9px;}
#liensAnnuaireRessources > div {display: grid;grid-template-columns: 85% 15%;}
#liensAnnuaireRessources p {padding-top:5px;padding-top:5px;padding-left:55px;color:white;font-size:30px;font-family: ZapfHumanist601BT-Roman, Arial, Verdana, Helvetica, Sans-Serif;}
/*grid-template-columns: 80% 20%*/
#liensAnnuaireRessources > div:nth-child(1) {width:493px; height:73px;background: url("../images/accueil/annuaire-des-pros-background-title.png") no-repeat;}
#liensAnnuaireRessources > div:nth-child(2) {width:493px; height:73px;background: url("../images/accueil/ressources-en-ligne-background-title.png") no-repeat;}
#agenda {
  line-height: initial;
  position: relative;
  overflow: hidden;
  height: 588px;
  background: url("../../images/agenda-background.jpg") no-repeat;
  padding: 0.8rem 1.5rem 0 1.5rem;
  color: #616161;
}
#agenda h1 {
  width: 236px;
  height: 33px;
  color: #fff;
  background: url("../../images/agenda-background-title.png") no-repeat;
  padding-left: 30px;
  margin-bottom : 1.2rem;
  margin-left: -10px;
}
/*#agenda {background:#73af01;padding:19px 20px 0 20px;height: 657px;}
#agenda h1 {color:#fff;margin-top:0;padding-bottom:20px;line-height:24px;}*/
#agenda .container-news {margin-bottom:23px;height: auto;}
/*#agenda .photoLink {width: 30%;overflow:hidden;}*/
#agenda .photoLink {position: relative;display: grid;grid-template-columns: 119px 315px;grid-gap: 20px;color:#616161;}
#agenda .photoLink img {width: 119px;height: 119px;max-width:initial;}
#agenda .agendaPlusBackground {position: absolute; bottom: 12px; left: 90px;color:#fff;text-align:center;padding-top:3px;font-weight:bold;width: 24px;height: 24px;background: url("../../images/agenda-plus-background.png") no-repeat;}

#agenda .agendaPlusBackground:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#agenda .texteModuleSorties {
  margin-left: 10px;
  display: grid;
  grid-gap: 8px;
}
#agenda .newsflash-title {margin-top: 0;margin-bottom: 8px;padding: 0;color: #662b27;}
#agenda .texteModuleSorties h2 {line-height: 1;margin-top: 0;margin-bottom: 0;padding: 0;color: #662b27;font-size:26px;text-transform:lowercase;text-transform: capitalize;font-family: ZapfHumanist601BT-Bold, Arial, Verdana, Helvetica, Sans-Serif;}
#agenda .texteModuleSorties a {text-decoration: none;}
#agenda .dateTitleCommune {display: grid;grid-template-columns:  38px 232px;grid-gap: 23px;}
/*#agenda .dateTitle {display:grid;grid-template-columns: 38px 232px;}*/
#agenda .date {color:#fff;font-weight: bold;}
#agenda .j {font-size: 36px;line-height: 1;}
#agenda .m {font-size: 25px;text-transform: lowercase;line-height: 0.8;}
#agenda .titleCommune {
  display: grid;
  grid-template-rows: auto 39%;
  grid-gap: 0.2rem;
}
#agenda .commune {color:#bf4611;font-size: 20px;margin-top:4px;font-family: ZapfHumanist601BT-Bold, Arial, Verdana, Helvetica, Sans-Serif;}
#agenda .toutesLesDates {text-align: center;margin-top: 36px;}
#agenda .toutesLesDates a {
  font-family: ZapfHumanist601BT-Roman, Arial, Verdana, Helvetica, Sans-Serif;
  color: #fff;
  background: url("../../images/agenda-voir-toutes-les-dates-background.png") no-repeat;
  width: 236px;
  height: 33px;
  display: block;
  margin: 0 auto;
  padding-top: 6px;
  font-size: 20px;
  text-decoration: none;
}

#center-c {
  display: grid;
  grid-template-rows: 231px 343px;
  grid-gap:14px;  
}
#mod-custom116 {
  color: white;
  background: url("../images/accueil/horaires-d-ouverture-background.jpg") no-repeat;
  padding: 0.8rem 1.5rem 0.8rem 1.5rem;
  min-height: 250px;
}

#mod-custom116 h1 {
  /*width: 381px;*/
  height: 33px;
  background: url("../images/accueil/horaires-d-ouverture-background-title.png") no-repeat;
  padding-left: 30px;
  margin-left: -10px;
}
#mod-custom116 p {margin: 0;}

/* Contact form Accueil */
.contactezNous {background: url("../images/accueil/contactez-nous-background.png") no-repeat;padding: 0.8rem 1.5rem 1.5rem 1.5rem;}
.rapid_contact_form div:nth-child(2), .rapid_contact_form div:nth-child(4) {display: none;}
.contactezNous h1 {
  width: 260px;
  height: 33px;
  color: #fff;
  background: url("../images/accueil/contactez-nous-title-background.png") no-repeat;
  padding-left: 30px;
  margin-bottom : 0.3rem;
  margin-left: -10px;
}
.contactezNous .intro_text {margin-top:20px;margin-bottom:20px;font-family: ZapfHumanist601BT-Bold, Arial, Verdana, Helvetica, Sans-Serif;font-size:18px;}
.contactezNous form div:nth-child(2) > div:nth-child(1) {width:227px;}
.contactezNous form div:nth-child(2) > div:nth-child(1) .form-control {margin-bottom: 1px;}
.contactezNous form div:nth-child(2) > div:nth-child(5) {justify-content: end;}

.contactezNous form div:nth-child(2) > div:nth-child(5) .rapid_contact.button {
  background: none;
  border: 0;
  border-left: 1px solid #bf4611;
  float: right;
  margin-right: 35px;
  font-family: ZapfHumanist601BT-Bold, Arial, Verdana, Helvetica, Sans-Serif;
  font-size: 18px;
  border-width: 2px;
  line-height: 0;
  margin-top: 5px;
  width: 50px;
  padding-bottom: 7px;
  padding-top: 0px;
  height: 25px;
}
.accueilBandeauBas {display: grid;align-items: center;font-family: Roboto, Arial, Verdana, Helvetica, Sans-Serif;height: 252px; text-align: center; color: #fff;background: url("../images/accueil/bandeau-decoration-top.png") no-repeat;}
.accueilBandeauBas h1 {margin-top: 10px;font-family: ZapfHumanist601BT-Roman, Arial, Verdana, Helvetica, Sans-Serif; font-size: 36px;font-weight: initial;}
.container-footer {margin-top: -35px; z-index: 1;}

@media (min-width:992px) and (max-width:1520px) {
  #centera {grid-area: centera;}
  #centerb {grid-area: centerb;}
  #centerc {grid-area: centerc;}
  main {
    display: grid;
    grid-template-columns:initial;
    grid-template-areas:
    'centera centerb'
    'centerc centerc';
  }
  #centerc {
    width: initial;
    height: 343px;
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-gap: 7px;
  }
  #bandeauText {
    top: 160px;
  }
  #franceRenovParcLogo {
    position: absolute;
    bottom: 20px;
    width: 23vw;
    left: 75vw;
  }
}

@media (min-width:0px) and (max-width:991.8px) {
  main {
    display: grid;
    grid-template-columns:initial;
    grid-template-areas:
    'centera'
    'centerb'
    'centerc';
  }
  #barresParc {
    margin-top: 0;
  }
  #bandeauText {
    top: 150px;
    font-size: 27px;
    width: 300px;
    background-size: 100%;
  }
  #franceRenovParcLogo {
    bottom: 10px;
  }
}

@media (width <= 767.8px) {
  .container-topbar img {width: 65%;}
  .container-topbar div:last-child .custom p:last-child img {width: 10%;}
  .container-topbar .topBarTel {font-size: 16px !important;}


  #diagonal {
    left: -120px;
    width: 64%;
  }
  #accueilLogo {
    position: absolute;
    margin: 33px 13px;
  }
  #accueilLogo {
    width: 99px;
  }
  #franceRenovParcLogo {
    position: absolute;
    bottom: 10px;
    /*right: -60px;*/
  }
  #bandeauText {
    top: 80px;
    font-size: 17px;
    width: 200px;
    background-size: 100%;
  }
  /*#franceRenovParcLogo img {width: 50%;}*/

  main > div {
    height: initial;
  }
  #centera > div:first-child {
    padding: 0.8rem .5rem 0 .5rem;
  }
  #centera h1:first-child {
    margin-bottom: 0.5rem;
    margin-left: 9px;
  }
  #aLaUne {
    padding: 0.8rem 0 0 0;
    /*height: 520px;*/
  }
  #aLaUne figure {
    margin: 0 0.2em 1.5em 0.2em;
  }
  #dots {
    margin: 0 auto 20px;
  }

  #mod-custom118 {
    margin-top: 0; 
  }
  #liensAnnuaireRessources {
    width: 92vw;
    grid-template-rows: 50% 50%;
    grid-gap: 9px;
    margin: 0 auto;
  }
  #liensAnnuaireRessources > div:nth-child(1) {
    height: initial;
    background: url("../images/accueil/annuaire-des-pros-background-title.png") no-repeat;
    background-size: contain;
  }
  #liensAnnuaireRessources > div:nth-child(2) {
    height: initial;
    background: url("../images/accueil/ressources-en-ligne-background-title.png") no-repeat;
    background-size: contain;
  }
  #liensAnnuaireRessources p {
    padding-left:20px;
  }


  #agenda {
    height: initial; 
    background-repeat: repeat;
    padding: 0.8rem 1rem 1rem 1rem;
  }
  #agenda .container-news {
    grid-template-rows: auto auto;
    grid-template-columns: initial;
  }
  #agenda .photoLink img {
    width: 100%;
    height: 100%;
  }
  #agenda .dateTitle {
    grid-template-columns: 38px 170px;
  }
  #agenda .agendaPlusBackground {
      bottom: 7px;
      right: 9px;
    }
  #agenda .date {
    margin-top: 3px;
  }

  #mod-custom116 {
    background: url("../images/accueil/horaires-d-ouverture-background.jpg") repeat;
    background-size: contain;
  }
  #mod-custom116 #horairesDOuverture {
    display: grid;
    grid-template-columns: initial;
    grid-gap: initial;
    grid-template-rows: 50%;
    padding-bottom: 10px;
    padding-top: 5px;
  }
  #mod-custom116 ul li span:nth-child(2) {
    padding-right: 330px;
  }
  .contactezNous {
    padding: 0.8rem 1rem 1.5rem 1rem;
    margin-top: 13px;
  }
  .accueilBandeauBas h1 {
    font-size: 25px;
  }

}
@media (width <= 500px) {
  #bandeauText {
    top: 70px;
    right: 20px;
  }
  main > div {
    width: 95vw;
  }
  #agenda .photoLink {
    display: initial;
  }
  #agenda .texteModuleSorties {
    margin-top: 10px;
  }
  .agendaPlusBackground {display: none;}
}
@media (width <= 399.98px) {
  #franceRenovParcLogo {
    position: absolute;
    bottom: 10px;
    /*right: -149.2px;*/
  }
  #franceRenovParcLogo img {
    margin: initial; 
  }
  #liensAnnuaireRessources p {
    padding: 0px 0 0px 10px;
    font-size: 25px;
  }
  main #mod-custom116 h1 {
    font-size: 18px;
    padding-top:3px;
  }
  #mod-custom116 {
    background-size: cover;
    background-position: 0px;
  }
  #mod-custom116 ul li span:nth-child(2) {
    padding-right: 0%;
  }
}