@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* placeholder: proportions vidéo youtube responsive */
/* placeholder : width de 100vw */
/* changer delay selon position dans la liste*/
/* changer width selon position dans la liste */
@media (min-width: 1024px) {
  .paragraph--type--section.section-methode {
    padding: 80px 0;
  }
}
.paragraph--type--section.section-methode {
  padding: 40px 0;
  background-color: var(--sable);
}
.paragraph--type--section.section-methode .field--name-field-elements {
  width: calc(100% - 30px);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .paragraph--type--section.section-methode .field--name-field-elements {
    width: calc(100% - 60px);
    margin: 0 auto;
    max-width: 75vw;
  }
}
@media (min-width: 1536px) {
  .paragraph--type--section.section-methode .field--name-field-elements {
    width: calc(100% - 100px);
    margin: 0 auto;
  }
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--titre h2 {
  margin-bottom: 20px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--textarea h3 {
  margin-bottom: 25px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images {
  margin-top: 40px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes {
  position: relative;
  padding-bottom: 40px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list {
  counter-reset: moncompteur;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .slick-track {
  display: flex;
  align-items: stretch;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .slick-slide {
  counter-increment: moncompteur;
  padding-bottom: 60px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .slick-slide h4:before {
  content: counter(moncompteur) ". ";
  color: var(--raphia);
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .field--name-field-para-contenu .paragraph--type--image img {
  width: 100%;
  border-radius: 0;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .field--name-field-para-contenu .paragraph--type--textarea {
  margin-top: 22px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--bouton {
  margin-top: 10px;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--bouton .field--name-field-lien {
  text-align: center;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--bouton .field--name-field-lien a {
  font-size: 0.875rem;
  color: var(--laine);
  padding: 14px 40px 13px 20px;
  background-color: var(--raphia);
  background-image: url(../images/fl-big-pale.png);
  background-size: 13px;
  background-position: right 15px center;
  background-repeat: no-repeat;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--bouton .field--name-field-lien a:hover {
  background-color: var(--lime);
  color: var(--raphia);
  background-image: url(../images/fl-big-fonce.png);
}

@media only screen and (min-width: 620px) {
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .slick-track .slick-slide {
    margin-right: 10px;
  }
}
@media only screen and (max-width: 767px) {
  /*.paragraph--type--section.section-methode{
      .paragraph--type--multi-colonne-texte-image-lien.liste-images{
          position: relative;
          .field--name-field-colonnes{
              > .field__item:nth-child(4){
                  overflow: hidden;
                  max-height: 260px;
                  transition: max-height 2s ease-out;

              }
              > .field__item:nth-child(5),
              > .field__item:nth-child(6){
                  display: grid;
                  grid-template-rows: 0fr;
                  transition: grid-template-rows 1000ms; 
                  margin-bottom: 0;
                  .paragraph--type--colonne{
                      overflow: hidden;
                  }
              }
              .btn-voir-plus{
                  opacity: 1;
                  transition: opacity 0.2s ease;
                  position: absolute;
                  left: 0;
                  width: 100%;
                  bottom: 0;
                  height: 190px;
                  display: flex;
                  align-items: flex-end;
                  justify-content: center;
                  background: linear-gradient(180deg, rgba(15,28,42,0) 0%, rgba(15,28,42,1) 80%);
                  /*&:after{
                      content: "";
                      width: 100%;
                      height: 100%;
                      background-image: url(../images/background-lines-mobile.png);
                      background-size: 375px;
                      background-position: center top;
                      background-repeat: repeat-y;
                      position: absolute;
                      left: 0px;
                      right: -20px;
                  }*/
  /*span{
                      font-size: 0.875rem;
                      height: 18px;
                      line-height: 22px;
                      color: #fff;
                      text-transform: none;
                      display: inline-block;
                      padding: 0 20px 0 0;
                      background-image: url(../images/fl-plus.png);
                      background-size: 11px;
                      background-position: right center;
                      background-repeat: no-repeat;
                  }
              }

              > .field__item:nth-child(4){
                  &.show-all{
                      max-height: 1000px;
                      .btn-voir-plus{
                          opacity: 0;
                      }
                  }
              }
              > .field__item:nth-child(5),
              > .field__item:nth-child(6){
                  &.show-all{
                      grid-template-rows: 1fr;
                      margin-bottom: 45px;
                  }
              }
          }
      }
  }*/
}
@media only screen and (min-width: 768px) {
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes {
    /*> .field__item{
        width: calc(50% - 20px);
        margin-right: 40px;
        margin-bottom: 60px;
        &:nth-child(2n){
            margin-right: 0;
        }
    }*/
  }
}
@media only screen and (min-width: 1024px) {
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes {
    /*> .field__item{
        width: calc(33% - 20px);
        margin-right: 34px;
        &:nth-child(2n){
            margin-right: 34px;
        }
        &:nth-child(3n){
            margin-right: 0;
        }
        .field--name-field-para-contenu{
            .paragraph--type--textarea{
                margin-top: 30px;
            }
        }
    }*/
  }
}
@media only screen and (min-width: 1200px) {
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--titre h2 {
    margin-bottom: 40px;
  }
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images {
    margin-top: 50px;
  }
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes .slick-list .slick-track .slick-slide {
    margin-right: 20px;
  }
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes {
    /*> .field__item{
        width: calc(33% - 20px);
        margin-right: 34px;
        margin-bottom: 70px;
        &:nth-child(2n){
            margin-right: 34px;
        }
        &:nth-child(3n){
            margin-right: 0px;
        }
        .field--name-field-para-contenu{
            .paragraph--type--textarea{
                margin-top: 30px;
            }
        }
    }*/
  }
}
@media only screen and (min-width: 1440px) {
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien .paragraph--type--titre h2 {
    margin-bottom: 40px;
  }
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images {
    margin-top: 40px;
  }
  .paragraph--type--section.section-methode .paragraph--type--multi-colonne-texte-image-lien.liste-images .field--name-field-colonnes {
    /*> .field__item{
        margin-right: 36px;
        margin-bottom: 90px;
        &:nth-child(2n){
            margin-right: 34px;
        }
        &:nth-child(3n){
            margin-right: 0px;
        }
    }*/
  }
}