/*

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

*/

.templatePageTextBloc > div:not(:last-child) {
    margin-bottom:40px;
}

/* Bloc introduction */

.bloc-introduction {
    padding: 0 15%;
    text-align: center;
}
  p.text-intro,
  .bloc-introduction p {
      font-family: var(--font-primary);
      font-size: 1.8rem;
    }

/* Bloc texte et image */



/* Galerie image */

.galerie-image {
    margin: 0 -10px 50px -10px !important;
}
	.galerie-image .item {
		padding: 5px;
	}
	.galerie-image .item a{
		display: block;
		overflow: hidden;
		position: relative;
		background-color: #000;
	}
	.galerie-image .item a::before{
		display: block;
		width: 100%;
		padding-top: 100%;
		content: "";
	}

		.galerie-image .item img {
			position: absolute;
			top: 0;
			left: 0;
			transition: transform .3s, opacity .3s;
			/* height: 100%; */
		}



		.galerie-image .item:hover img {
			opacity: 0.5;
			transform: scale(1.05);
		}

/* Diaporama */

.slider-page .image-diapo {
    height: 500px;
}

/* Glissière */
.glissiere-item {
  padding: 8px 10px 8px 30px;
  margin: 0 0 15px 0;
  position: relative;
	border: 1px solid var(--gray-300);
}
.glissiere-item.active {
	border-left: 1px solid var(--color-primary);
}
	.glissiere-item .contenu {
		margin: 32px 0;
    display: none;
	}
	.glissiere-item .titre {
		font-family: var(--font-primary);
    font-weight: bold;
		font-size: 2.2rem;
		cursor: pointer;
		padding: 0 40px 0 0;
		color: var(--red);
	}
		.glissiere-item .titre::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			background-image: url('/wp-content/themes/mediapilote/img/charte/right-arrow.svg');
			background-repeat: no-repeat;
			background-position: center;
			transition: transform .2s;
		}
		.glissiere-item.active .titre::after {
			transform: rotate(90deg);
		}


/* Téléchargement fichier */
.fileDownload-item {
	margin-bottom: 10px;
}
.fileDownload-item a {
  text-decoration: none;
}
	.fileDownload-item .fileDownload-itemContent{
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.16);
	}
	.fileDownload-item .title {
		flex-grow: 1;
		font-size: 2rem;
    color: var(--color-primary);
    font-weight: bold;
		margin: 0;
	}
	.fileDownload-item .vignette {
		width: 97px;
		height: 100%;
	}
		.fileDownload-item .vignette a {
			display: block;
			overflow: hidden;
			position: relative;
			height: 100%;
		}
		.fileDownload-item .vignette a::before {
			display: block;
			width: 100%;
			padding-top: 100%;
			content: "";
		}
		.fileDownload-item .vignette img {
			position: absolute;
			top: 0;
			left: 0;
		}
	.fileDownload-item .link a:last-child {
		margin: 0 0 0 30px;
	}
.icon-view::before,
.icon-down-arrow:before {
	color: var(--red-light);
}

/* Vignette page */

.blocVignettesCarrefours-itemContent {
	overflow: hidden;
}
.blocVignettesCarrefours-itemContent h3 {
  margin: 18px 0;
}
	.blocVignettesCarrefours-item .image {
		display: block;
		overflow: hidden;
		position: relative;
	}


		.blocVignettesCarrefours-item .btn-tertiary {
      padding-left: 26px;
      padding-right: 26px;
		}
    .blocVignettesCarrefours-itemContent .content a {
      text-decoration: none;
    }

/* 14 - SLICK */
button.slick-arrow {
    background-color: var(--color02);
    border: transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    text-indent: -5000px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background-image: url('/wp-content/themes/mediapilote/img/charte/right-arrow.svg');
    background-repeat: no-repeat;
    background-size: 400px auto;
    outline: transparent;
    cursor: pointer;
    background-position: -192px -7px;
}
.slick-dots li {
	list-style: none;
}
	.slick-dots li::before {
		content: unset !important;
	}
		.slick-dots li button {
			border: none;
			color: transparent;
			background-color: transparent;
		}
.diaporama button.slick-prev {
	left: -30px;
	transform: rotate(180deg);
}
.diaporama button.slick-next {
	right: -30px;
}
.diaporama .slick-prev, .diaporama .slick-next {
  background: url('/wp-content/themes/mediapilote/img/charte/right-arrow.svg');
  border: none;
  color: transparent;
  width: 17px;
  height: 28px;
  background-size: contain;
  padding: 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
}
.diaporama ul.slick-dots {
	display: flex;
	justify-content: center;
}
	.diaporama .slick-dots li button:before {
		font-size: 70px;
		line-height: 20px;
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 20px;
		content: '•';
		text-align: center;
		opacity: .25;
		color: black;
	}
	.diaporama .slick-dots li.slick-active button:before {
		opacity: .75;
		color: black;
	}
    .bloc-texte-image-inte .slick-dots {
        display: none!important;
    }
    /* .bloc-texte-image-inte .col-md-6 h3 {
        margin: 0;
        padding-bottom: 20px;
    } */
    .bloc-texte-image-inte .slider-page .item {
        position: relative;
    }
    .bloc-texte-image-inte .slider-page .item::before {
        content: '';
        display: block;
        padding-top: 60%;
    }
    .bloc-texte-image-inte .slider-page .item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* ligne separateur */
.ligne {
	background-color: var(--color-primary);
  height: 6px !important;
  width: 38px !important;
}
	.ligne .hexa {
		display: flex;
		justify-content: center;
		position: relative;
		top: -11px;
		color: var(--color-primary);
	}

/* image en fond et texte dessus */
.bloc-texte-image-fond {
	margin-bottom: 200px;
  background-color: var(--color-primary);
  overflow: hidden;
}

	.imageFond {
    background-color: var(--color-primary);
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 40vh;
	}
  .texteDessus {
    padding-top: 110px;
    padding-bottom: 120px;
  }
  .texteDessus *{
		color: var(--white);
	}
    @media (max-width: 767px) {
      .texteDessus {
        padding: 40px;
      }
    }
    @media (min-width: 768px) {
      .texteDessus {
        padding-left: calc((100% - 720px)/2);
      }
    }
    @media (min-width: 992px) {
      .texteDessus {
        padding-left: calc((100% - 960px)/2);
      }
    }
    @media (min-width: 1200px) {
      .texteDessus {
        padding-left: calc((100% - 1090px)/2);
      }
    }
    @media (min-width: 1600px) {
      .texteDessus {
        padding-left: calc((100% - 1200px)/2);
      }
    }
    @media (max-width:1399px) {
      .texteDessus {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }


/* bloc équipe */
.blocEquipe .row,
.blocVignettesCarrefours .row {
  margin-left: -10px;
  margin-right: -10px;
}
.blocEquipe-item,
.blocVignettesCarrefours-item {
  padding: 0 10px;
}
.blocEquipe-item .image {
	display: block;
	overflow: hidden;
	position: relative;
	background-color: var(--gray-200);
}
	.blocEquipe-item .image::before {
		display: block;
		width: 100%;
		padding-top: 100%;
		content: "";
	}
  .blocEquipe-item .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
	.blocEquipe-item .content h2 {
		font-size: 2rem;
		color: var(--color-primary);
        margin: 14px 0;
        text-align: center;
	}
	.blocEquipe-item .content p {
		font-size: 1.6rem;
    font-family: 'Roboto', sans-serif;
	}



.bloc-formulaire-inte {
	margin-bottom: 200px;
}
	.bloc-formulaire-inte .relative {
		position: relative;
		top: 66px;
	}
	.bloc-formulaire-inte .bloc-formulaire-item {
    background-color: var(--red-dark);
    padding: 47px 44px;
	}
		.bloc-formulaire-inte .bloc-formulaire-item > p {
			color: var(--white);
			font-size: 1.4rem;
		}
			.bloc-formulaire-inte .bloc-formulaire-item > p a {
				color: var(--white);
				text-decoration: underline;
			}

/*RESPONSIVE
01 - DESKTOP */
@media screen and (max-width: 1400px), (max-device-width: 1400px){

}
@media screen and (min-width: 992px), (min-device-width: 992px){

}
/*03 MINI-TABLETTE et MOBILE */
@media screen and (max-width: 768px), (max-device-width: 768px) {
	.bloc-formulaire-inte .relative {
		top: 0;
	}
}
@media screen and (max-width: 430px), (max-device-width: 430px){
	.fileDownload-item .vignette {
		width: 100%;
	}
}