/**
 * @file
 * Is the responsive layout composition.
 *
 * Is intented to set basic layout rules to regions and global blocks.
 * Also add grid rules.
 */



/**
 * Layout content
 */


/**
 * Grid row
 */

 .grid-row {
	padding: 0 1rem;
}
@media all and (min-width: 700px) {
  .grid-row {
  	padding: 0;
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
  }
  .grid-row--12{
    max-width: 1330px!important;
  }
  .grid-row--10{
    max-width: 1080px!important;
  }
  .grid-row--8{
    max-width: 858px!important;
  }
  .grid-row--6{
    max-width: 636px!important;
  }
}



.grid-row, .paragraphe-instance-de-bloc--grid-row-yes{
	max-width: 1330px;
	margin: 0 auto;
  width: 100%;
}

.grid-row--without-padding{
  max-width: 1330px;
  margin: 0 auto;
  padding:0;
  width: 100%;
}





.main-inner{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.main .layout-sidebar-first{
  width:26%;
  padding-right:2em;
}
.layout-content--with-sidebar{
  width:74%;
}




@media screen and (max-width: 1200px) {
/*    .layout-sidebar-first{
      display: none;
    }*/
    .layout-sidebar-first .menu-sidebar span{
      font-size: 1.25em;
    }
}
@media screen and (max-width: 1024px) {
  .layout-sidebar-first{
    display: none;
  }
  .layout-content--with-sidebar{
    width:100%;
  }
}







/**
 * Paragraphe image-seule
 */
.paragraphe-image-seule{
  padding:1.5em 0;
}
.image-seule{
  text-align: center;
}

/**
 * Paragraphe text-seul
 */
.paragraphe-texte-seul{
  padding:1.5em 0;
}
.texte-title{
  text-align: center;
}











/**
 * Text specificities
 */
.content-title{
  font-size:1.5em;
  text-align: left;
  text-transform: uppercase;
  margin:0;
}






/**
 * Paragraphe card list
 */
.paragraphe-liste-de-carte{
  padding:1.5em 0;
}
.liste-de-carte__wrapper{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
}
.paragraphe-carte{
  width: calc(33.333% - 1.333rem);
  margin:1rem 2rem 1rem 0;
  border:1px solid #dddddd;
}
.paragraphe-carte:nth-child(3n+3){
  margin-right:0;
}
.carte__content{
  padding:1.25em;
  word-wrap: break-word;
}
@media screen and (max-width:850px) {
  .paragraphe-carte{
    width: calc(33.333% - 0.666rem);
    margin:0.5rem 1rem 0.5rem 0;
  }
  .carte__content{
    padding:0.75em;
  }
}
@media screen and (max-width:750px) {
  .paragraphe-carte{
    width: calc(50% - 0.5rem);
    margin:0.5rem 1rem 0.5rem 0;
  }
  .paragraphe-carte:nth-child(3n+3){
    margin-right:auto;
  }
  .paragraphe-carte:nth-child(2n+2){
    margin-right:0;
  }
  .carte__content{
    padding:1.25em;
  }
}
@media screen and (max-width:500px) {
  .paragraphe-carte{
    width: calc(100%);
    margin:0.5rem 0rem 0.5rem 0;
  }
  .paragraphe-carte:nth-child(2n+2){
    margin-right:auto;
  }
  .carte__content{
    padding:1.25em;
  }
}






/**
 * Paragraph File
 */
.file{
  padding:1.5em 0;
}
.file__list{
  margin:0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
}
.file__item{
  list-style:none;
  width:100%;
  align-self: stretch;
  border:1px solid #dddddd;
  position: relative;
  padding-left:45px;
  margin:1em 0;
  min-height: 60px;
}
.file__item:before{
  content:'';
  display: block;
  width:45px;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  background-image:url('../images/file-icon.svg');
  background-size:30px;
  background-position: center;
  background-repeat: no-repeat;
  border-right:1px solid #dddddd;
}
.file__item:hover{
  border-color:#18ad8a;
}
.file__item:hover:before{
  border-color:#18ad8a;
}
.file-item__link{
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
.file-item__title{
  padding:0.5em 0.85em;
  display: block;
}
@media screen and (min-width: 480px){
  .file__item{
    width:calc(50% - 0.5em);
  }
  .file__item:nth-child(2n+1){
    margin-right:.5em;
  }
  .file__item:nth-child(2n+2){
    margin-left:.5em;
  }
}
@media screen and (min-width: 768px){
  .file__item{
    width:calc(33.333% - 1em);
  }
  .file__item:nth-child(2n+1), .file__item:nth-child(2n+2){
    margin-right:0;
    margin-left:0;
  }
  .file__item:nth-child(1n+1){
    margin-right:1.5rem;
  }
  .file__item:nth-child(3n+3){
    margin-right:0;
  }
}


/**
 * Bloc communes
 */


.bloc-communes{
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 100px;
  margin-bottom: 70px;
}
.bloc-communes, .bloc-communes__part-left-inner{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.bloc-communes__part-left-inner{

}
.bloc-communes a{
  color:#333;
  text-decoration:none;
}

.bloc-communes a:before {
    content: "»";
    color:#550c55;
    padding:0 6px 0 0;
}

.bloc-communes__part-left{
  width:60%;
  background-color:#eeeeee;
  padding:2em;
  z-index: 1
}
.bloc-communes__part-right{
  position: absolute;
  width:50%;
  right:0;
  margin-right: 3rem;

}
.bloc-communes-left__image{
  width:66.666%;

}
.bloc-communes-left__content{
  width:33.333%;
  padding-left:2em;

}
.bloc-communes-left__title{
  font-size:1.5em;
  color:#f3a330;
  text-transform: uppercase;
  line-height:1em;
  font-weight: 700;
}

@media screen and (max-width: 1024px) {
  .bloc-communes{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  }

  .bloc-communes__part-left{

     width: 100%;
  }

  .bloc-communes__part-right{
     position: relative;
     margin: 0;
     padding-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .bloc-communes__part-right{
    display: none;
  }
  .bloc-communes-left__title{
  font-size:1.5em;
  padding-top: 1rem;
  }
}

@media screen and (max-width: 600px) {
  .bloc-communes__part-left-inner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .bloc-communes-left__image{
    max-width:100%;
  }
  .bloc-communes-left__content{
    width:100%;
  }
}

@media screen and (max-width: 500px) {
    .bloc-communes-left__image{
    width:100%;
  }
}


/*
 * Layout Custom CSS
 *
 */

 .layout {
  padding: 0 1.5rem;
}
.layout__region {
  display: flex;
  flex-direction: column;
}
.layout--onecol {
  padding: 0;
}
.grid-row .layout {
  padding: 0;
}

/**
 * Layout TwoCol
 */


@media screen and (min-width: 900px) {
  .layout--twocol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
  }
}

@media screen and (min-width: 1300px) {
  .layout--twocol {
    gap: 2rem;
  }
  .layout--twocol {
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
}