/*

    STYLE GUIDE
    Mise en forme de l'article texte en bloc de wordpress

*/

@media (max-width: 767px) {
  .bloc {
    padding: 25px 0;
  }
}
@media (min-width: 768px) {
  .bloc {
    padding: 50px 0;
  }
}

/* Bloc introduction */

.bloc-introduction {
    padding: 0 15%;
    text-align: center;
}
	.bloc-introduction p {
		font-size: 1.8rem;
		font-weight: 800;
	}

/* Bloc texte et image */

/* Diaporama */

@media (max-width: 767px) {
  .slider-page .image-diapo {
      aspect-ratio: 16 / 9;
  }
}
@media (min-width: 768px) {
  .slider-page .image-diapo {
      aspect-ratio: 11 / 4;
  }
}

/* Glissière */
.glissiere-item {
    margin: 0 0 15px 0;
    position: relative;
	  background-color: var(--gray-100);
}
.glissiere-item .icon-arrow-long {
  background-color: var(--color-primary);
  padding: 30px 22px;
  transition: all .2s;
}
@media (min-width: 768px) {
  .glissiere-item .icon-arrow-long {
    padding: 20px 13px;
  }
}
.glissiere-item .titre:hover .icon-arrow-long {
  background-color: var(--yellow);
}
.glissiere-item .icon-arrow-long::before {
  color: var(--white);
  display: block;
  transform: scaleX(-1);
  transition: transform .2s;
}
.glissiere-item .titre:hover .icon-arrow-long::before {
  transform: scaleX(-1) translateX(5px);
}
.glissiere-item.active .icon-arrow-long::before {
  transform: scaleX(-1) rotate(-90deg);
}
.glissiere-item.active .titre:hover .icon-arrow-long::before {
  transform: scaleX(-1) rotate(-90deg) translateX(5px);
}
	.glissiere-item .contenu {
		display: none;
		padding: 20px;
	}
	.glissiere-item .titre {
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--bold);
    color: var(--color-primary);
    padding-left: 20px;
    line-height: 1;
	}

/* Téléchargement fichier */
.fileDownload-itemContent{
	background-color: var(--gray-100);
  width: 100%;
  padding-bottom: 17px;
}
.fileDownload-item .title {
  font-weight: var(--bold);
  color: var(--color-primary);
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  padding: 8px 0;
}
.fileDownload-item .vignette {
    aspect-ratio: 278 / 122;
}
.fileDownload-item .vignette__pdf {
    display: flex;
    align-items: center;
    justify-content: center;
}
  .fileDownload-item .vignette__pdf span{
      font-size: 65px;
      color: var(--color-primary);
  }
.fileDownload-item .link a {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
}
.fileDownload-item .link a:not(:first-child) {
  margin: 0 0 0 5px;
}
  .fileDownload-item .link a i{
    color: var(--white);
  }
  .fileDownload-item .link a i.icon-view{
    font-size: 23px;
  }
  .fileDownload-item .link a i.icon-arrow-long{
    transform: scaleX(-1) rotate(-90deg);
    font-size: 12px;
  }

@media (max-width: 767px) {
  .fileDownload-item {
    padding: 0 32px;
  }
}
@media (min-width: 768px) {
  .fileDownload-item {
    padding: 0 8px;
  }
}

/* Vignette page */

.blocVignettesCarrefours-itemContent {
	overflow: hidden;
  background-color: var(--gray-100);
  position: relative;
}
  .blocVignettesCarrefours-itemContent span.icon-arrow-long{
      transform: scaleX(-1);
      display: flex;
      width: 60px;
      height: 60px;
      background-color: var(--color-primary);
      color: var(--white);
      align-items: center;
      justify-content: center;
      font-size: 18px;
      position: absolute;
      bottom: 0;
      right: 0;
  }

.blocVignettesCarrefours-item {
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .blocVignettesCarrefours-item {
    padding: 0 32px;
  }
}
@media (min-width: 768px) {
  .blocVignettesCarrefours-item {
    padding: 0 8px;
  }
}

	.blocVignettesCarrefours-item .image {
    aspect-ratio: 279 / 160;
	}

  .blocVignettesCarrefours-item .content{
    padding: 18px 20px 60px;
  }
    .blocVignettesCarrefours-item .content h2{
      font-weight: var(--light);
    }
    .blocVignettesCarrefours-item .content .more{
      font-size: 1.1rem;
      text-transform: uppercase;
      color: var(--color-primary);
    }

/* 14 - SLICK */
button.slick-arrow {
  border: none;
  background: transparent;
  color: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 767px) {
  button.slick-arrow {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 768px) {
  button.slick-arrow {
    width: 130px;
    height: 130px;
  }
}
button.slick-arrow::before {
  content: "\e900";
  font-family: 'icomoon';
  color: var(--color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: left .2s;
}
@media (max-width: 767px) {
  button.slick-arrow::before {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  button.slick-arrow::before {
    font-size: 34px;
  }
}
button.slick-arrow.slick-prev {
  right: 100%;
}
button.slick-arrow.slick-prev::before {
  transform: translate(-50%, -50%);
}
button.slick-arrow.slick-prev:hover::before {
  left: 40%;
}
button.slick-arrow.slick-next {
  left: 100%;
}
button.slick-arrow.slick-next::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
button.slick-arrow.slick-next:hover::before {
  left: 60%;
}

.slick-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
#wrapperInner ul.slick-dots li::before {
  content: unset;
}
.slick-dots li {
  padding: 0;
}
.slick-dots li:not(:first-child) {
  margin-left: 2px;
}
  .slick-dots li button {
    width: 14px;
    height: 14px;
    background-color: var(--gray-100);
    border: none;
    color: transparent;
    border-radius: 50%;
  }
  .slick-dots li.slick-active button {
    background-color: var(--color-primary);
  }

/* Bloc texte */
.bloc__texte-img--1 {
  position: absolute;
  max-width: 431px;
  top: 65px;
  left: -110px;
  filter: blur(4px);
}
.bloc__texte-img--2 {
  position: absolute;
  bottom: 25%;
  right: 0;
  filter: blur(4px);
  max-width: 270px;
}

.bloc__texte-title h2,
.bloc__texte-title h3 {
  margin-bottom: 43px;
}
.bloc__texte-title h4 {
  margin-bottom: 28px;
}