@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 */
/* 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 */
.page-node-type-projet .field--name-field-images-et-videos, .page-node-type-projet .field--name-field-elements,
.page-node-type-page .field--name-field-images-et-videos,
.page-node-type-page .field--name-field-elements {
  background-color: #68AB4E;
  padding: 40px 40px 40px 40px;
  position: relative;
}
.page-node-type-projet .field--name-field-images-et-videos button, .page-node-type-projet .field--name-field-elements button,
.page-node-type-page .field--name-field-images-et-videos button,
.page-node-type-page .field--name-field-elements button {
  font-size: 0;
  border: 0;
  background-color: transparent;
  width: 18px;
  height: 32px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(50% - 21px);
}
.page-node-type-projet .field--name-field-images-et-videos button.slick-prev, .page-node-type-projet .field--name-field-elements button.slick-prev,
.page-node-type-page .field--name-field-images-et-videos button.slick-prev,
.page-node-type-page .field--name-field-elements button.slick-prev {
  background-image: url(../images/prev.png);
  left: 20px;
}
.page-node-type-projet .field--name-field-images-et-videos button.slick-next, .page-node-type-projet .field--name-field-elements button.slick-next,
.page-node-type-page .field--name-field-images-et-videos button.slick-next,
.page-node-type-page .field--name-field-elements button.slick-next {
  background-image: url(../images/next.png);
  right: 20px;
}
.page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide,
.page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide,
.page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide {
  margin: 0 15px 0 15px;
}
.page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
.page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
.page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  cursor: pointer;
}
.page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
.page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
.page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 0;
  padding-bottom: 74%;
  cursor: pointer;
  overflow: hidden;
  background-color: #000;
}
.page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
.page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
.page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe {
  width: 100%;
  height: 250px;
}
.page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-description, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-description,
.page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-description,
.page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-description {
  color: white;
}

@media only screen and (min-width: 1440px) {
  .page-node-type-projet .field--name-field-images-et-videos, .page-node-type-projet .field--name-field-elements,
  .page-node-type-page .field--name-field-images-et-videos,
  .page-node-type-page .field--name-field-elements {
    padding: 40px 50px 40px 50px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img {
    border-radius: 35px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure {
    border-radius: 35px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe {
    height: 292px;
  }
}
@media only screen and (min-width: 1920px) {
  .page-node-type-projet .field--name-field-images-et-videos, .page-node-type-projet .field--name-field-elements,
  .page-node-type-page .field--name-field-images-et-videos,
  .page-node-type-page .field--name-field-elements {
    padding: 60px 120px 60px 120px;
  }
  .page-node-type-projet .field--name-field-images-et-videos button, .page-node-type-projet .field--name-field-elements button,
  .page-node-type-page .field--name-field-images-et-videos button,
  .page-node-type-page .field--name-field-elements button {
    width: 24px;
    height: 42px;
  }
  .page-node-type-projet .field--name-field-images-et-videos button.slick-prev, .page-node-type-projet .field--name-field-elements button.slick-prev,
  .page-node-type-page .field--name-field-images-et-videos button.slick-prev,
  .page-node-type-page .field--name-field-elements button.slick-prev {
    left: 40px;
  }
  .page-node-type-projet .field--name-field-images-et-videos button.slick-next, .page-node-type-projet .field--name-field-elements button.slick-next,
  .page-node-type-page .field--name-field-images-et-videos button.slick-next,
  .page-node-type-page .field--name-field-elements button.slick-next {
    right: 40px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-image img {
    border-radius: 55px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure {
    border-radius: 55px;
  }
  .page-node-type-projet .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe, .page-node-type-projet .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
  .page-node-type-page .field--name-field-images-et-videos .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe,
  .page-node-type-page .field--name-field-elements .slick-list .slick-track .slick-slide .paragraph--type--image-ou-video .field--name-field-youtube figure iframe {
    height: 292px;
  }
}