/* 

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


00 - GENERAL
01 - TEXTE
02 - VIGNETTE PAGE AVEC IMG
03 - IMG 3 COLONNES
04 - TEXTE + IMAGE
05 - CHIFFRES CLES
06 - CHIFFRES CLES
07 - INFORMATION
08 - GLISSIERE
08 - LIENS

*/


/* -----------
00 - GENERALE
-------------*/



/*-------------------------
01 - TEXTE
-------------------------*/

.bloc-texte-colonnes .col.bg-color-primary-x-light {
	border-radius: 32px;
}
.bloc-texte-colonnes .bloc-texte-inte a {
	margin-bottom: 0!important;
}

/*-------------------------
02- TEXTE + IMAGE
--------------------------*/

.bloc-texte-image-inte img{
	border-radius: 32px;
}
.bloc-texte-image-inte a {
	margin-bottom: 0!important;
}

/*-------------------------
03- IMAGE LARGEUR
--------------------------*/

.img-single img {
	width: 100%;
	height: 522px;
	object-fit: cover;
	border-radius: 16px;
}


/* Galerie image */



.galerie-image-container {
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}
	.galerie-image .item {
	}
	.galerie-image .item a{
		position: relative;
		overflow: hidden;
		display: block;
		background-color: #fff;
	}
	.galerie-image .item a::before{
		content: "";
		display: block;
		width: 100%;
		padding-top: 100%;
	}
		.galerie-image .item img {
			position: absolute;
			top: 0;
			left: 0;
			transition: transform .3s, opacity .3s;
		}
		.galerie-image .item:hover img {
			opacity: 0.5;
			transform: scale(1.05);
		}

/*accroche*/
.accrocheCarrefours ul{
	padding-left: 0 !important;
}
.accrocheCarrefours ul li{
	margin-bottom: 0 !important;
	text-align: left;
}
.accrocheCarrefours-item {
	background-color:#FDFAF2;
}
.accrocheCarrefours {
	gap:20px;
}
.accrocheCarrefours .accrocheCarrefours-itemContent {
	padding:24px;
}
.accrocheCarrefours .accrocheCarrefours-itemContent h4 {
	margin-bottom: 5px!important;
}
.accrocheCarrefours .accrocheCarrefours-itemContent p {
	margin-bottom: 0px!important;
}

/* Carrousel */

.carrousel .carrousel-content {
	padding: 24px;
	border-radius: 24px;
}

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


/* Vignette page */

/* .blocVignettesCarrefours .text{
	font-size: 20px;
	text-align: center;
}
	.blocVignettesCarrefours-item .image {
	
	}
		
		.headerPage_text_inner--img img
		{
			opacity: 0.5;
		}
		.blocVignettesCarrefours-item .image:hover img {
			
		}
		.blocVignettesCarrefours-item .date{
			font-size: 80px;
			color: #fff;
			font-weight: 700;
		}

		.blocVignettesCarrefours-itemContent .text-content{

			border-bottom: 1px solid #EDEDED;

		} */

/*accroche*/

.accrocheSectionContainer{
	position: relative;
}

.accrocheSection {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.accrocheSection .accrocheContent {
	padding: 48px 48px 60px 48px;
}
.accrocheSection .accrocheContent > p {
	font-family: "Inter", serif;
	font-size: 20px;
	font-size: 2rem;
	line-height: 150%;
}
.accrocheSection .accrocheContent ul li {
	padding-left:35px!important;
	color: var(--color-secondary);
	font-weight: 600;
	margin-bottom: 12px!important;
	font-family: "Inter", serif;
}
.accrocheSection .accrocheContent ul li::before {
	content: "";
	background-image: url(/wp-content/themes/mediapilote/img/charte/sign_cobade.svg);
	background-color: transparent!important;
	position: absolute;
	left:0!important;
	top:0!important;
	width: 24px!important;
    height: 25px!important;
}

/*mise en avant*/
.blocMiseEnAvant {
	border-radius: 1000px;
	padding:80px;
}
.blocMiseEnAvant .like-h2 {
	color:var(--white)!important;
	margin-bottom: 0!important;
}
.blocMiseEnAvant p {
	font-size: 6.4rem;
	font-family: "Cormorant Garamond", serif;
	/*font-style: italic;*/
	font-weight: 700;
	line-height: 76%;
	margin-bottom: 0;
}
.blocMiseEnAvant p > span {
	margin-bottom: 0;
}
.page-template-page-home .blocMiseEnAvant p {
	line-height: 72px;
}
.blocMiseEnAvant .btn-secondary {
	font-family: "Cormorant Garamond", serif;
	font-size: 2.6rem;
	line-height: 36.4px;
	height:60px;
	width: 300px;
}
/*---------------------
04- VIGNETTE
----------------------*/

.blocVignettesCarrefours-itemContent .image {
	height: 343px;
	border-radius: 32px;
	margin-bottom: 20px;
}
.blocVignettesCarrefours-itemContent .vignetteTitle {
	font-weight: 600;
}
.blocVignettesCarrefours-itemContent .vignetteText {
	color: var(--gray-600);
}

/*---------------------
05- BLOC CHIFFRES CLES
----------------------*/

.chiffresClesCarrefour {
    gap:24px;
}
.chiffresCarrefours-item {
    box-shadow: 0px 0px 14px -1px rgba(0, 0, 0, 0.10);
    border-radius: 32px;
    padding: 24px;
}
.chiffresCarrefours-itemContent .number {
    background: var(--color-degrad-primary);
    -webkit-background-clip: text; /* Pour Safari */
    -webkit-text-fill-color: transparent; /* Pour Safari */
    background-clip: text; /* Pour les autres navigateurs */
    color: transparent; /* Assurez-vous que la couleur du texte est transparente */
    margin-bottom: 15px;
	display: inline-block;
}
.chiffresCarrefours-itemContent .number svg {
    vertical-align: bottom;
}
.chiffresCarrefours-itemContent .text {
    color: var(--gray-600);
    margin-bottom: 0;
}

/* ------------------
07 - BLOC INFORMATION
---------------------*/

.infoCarrefours .infoCarrefours-item {
	padding: 32px;
	border-radius: 32px;
}
.infoCarrefours .infoCarrefours-item .infosTitle {
	position: relative;
	padding-left: 50px;
}
.infoCarrefours .infoCarrefours-item .infosTitle::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	width: 40px;
    height: 41px;
}

.infoCarrefours .infoCarrefours-item.color-blue {
	background-color: var(--color-primary-x-light);
}
.infoCarrefours .infoCarrefours-item.color-blue .infosTitle {
	color: var(--color-primary-active);
}
.infoCarrefours .infoCarrefours-item.color-blue .infosTitle::before {
	background-image: url(/wp-content/themes/mediapilote/img/charte/picto-idee.svg);
}

.infoCarrefours .infoCarrefours-item.color-red {
	background-color: var(--color-danger-light);
}
.infoCarrefours .infoCarrefours-item.color-red .infosTitle {
	color: var(--color-danger);
}
.infoCarrefours .infoCarrefours-item.color-red .infosTitle::before {
	background-image: url(/wp-content/themes/mediapilote/img/charte/picto-alerte.svg);
}

.infoCarrefours .infoCarrefours-item.color-orange {
	background-color: var(--color-warning-light);
}
.infoCarrefours .infoCarrefours-item.color-orange .infosTitle {
	color: var(--color-warning);
}
.infoCarrefours .infoCarrefours-item.color-orange .infosTitle::before {
	background-image: url(/wp-content/themes/mediapilote/img/charte/picto-infos.svg);
}

/*------------------------------
08 - INFORMATIONS PRATIQUES
-------------------------------*/

.usefulInfo .usefulInfo-inner {
	position: relative;
	padding:90px 32px 32px;
	border-radius: 32px;
}
.usefulInfo .usefullInfo-ontitle {
	position: absolute;
	left:0;
	top:32px;
	border-top-right-radius: 32px;
	border-bottom-right-radius: 32px;
	padding: 5px 20px 8px 35px;
	color: var(--color-primary-dark);
}
.usefulInfo .usefulInfo-inner .usefulInfo-wrap {
	gap:16px;
}
.usefulInfo .usefulInfo-inner .usefulInfo-content {
	padding: 12px 28px;
	border-radius: 99px;
}
.usefulInfo .usefulInfo-inner .usefulInfo-text > p {
	margin-bottom: 0;
}


.slider-page-container {
    position: relative;
    overflow: hidden; /* Empêche le débordement des images */
}

.slider-page {
    display: flex; /* Permet d'afficher les images en ligne */
    transition: transform 0.3s ease; /* Animation pour le défilement */
}
/* .slider-page .slick-slide {
	width: 775px!important;
} */

.slider-inte {
    min-width: 80%; /* Ajustez à la taille désirée pour chaque slide */
    margin-right: -20%; /* Ajuste l'espace entre les slides */
    position: relative; /* Pour positionner les éléments enfants */
}

.image-diapo {
    position: relative; /* Pour la superposition */
}

/* ------------------
09 - BLOC GLISSIERE
---------------------*/

.glissiere{
	position: relative;
	z-index: 1;
	/* margin-bottom: 6.4rem;
	margin-top: 6.4rem; */
}
.glissiere-item--inner {
    position: relative;
	background-color: var(--color-primary-x-light);
    border-radius: 24px;
	margin-bottom: 2rem;
	padding:16px;
	transition: 0.8s all;
}
.glissiere-item--inner:hover {
	background-color: var(--color-primary-light);
	transition: 0.8s all;
}
.glissiere-item.active .glissiere-item--inner{
	background-color: var(--white);
	box-shadow: 0px 0px 14px -1px rgba(0, 0, 0, 0.10);
}
.glissiere-item--inner .titre{
	transition: 0.8s all;
}
.glissiere-item .icon-arrow {
	margin-left: auto;
}
.glissiere-item.active .icon-arrow {
	transform: rotate(90deg);
}
.glissiere-item .contenu {
	display: none;
	font-size:16px;
}
.glissiere-item .contenu .text{
	padding: 0 3rem 3rem;
}
.glissiere .arrow-container {
	background-color: var(--color-primary-dark);
	padding:20px;
	border-radius: 12px;
	transition: 0.8s all;
}
.glissiere .glissiere-item--inner:hover .arrow-container {
	background-color: var(--color-primary-hover);
	transition: 0.8s all;
}
.glissiere .glissiere-item.active .arrow-container {
	background-color: var(--color-primary-light);
}
.glissiere .ico-arrow{
	background-image: url(/wp-content/themes/mediapilote/img/charte/arrow-select.svg);
    background-repeat: no-repeat;
	width: 20px;
    height: 20px;
	display: inline-block;
	vertical-align: middle;
}
.glissiere-item.active .ico-arrow{
	background-image: url(/wp-content/themes/mediapilote/img/charte/arrow-top.svg);
}
.glissiere-item .titre {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}

/* Texte cta et list 50% */
.bloc-text-cta-list ul{
	display: flex;
	flex-wrap: wrap;
}
.bloc-text-cta-list ul li{
	width: 50%;
}
	
/*----------------------------------------
--------------- RESPONSIVE ---------------
------------------------------------------*/

@media screen and (max-width:1480px) {
	.chiffresCarrefours-item:nth-child(1) .chiffresCarrefours-itemContent .content,
	.chiffresCarrefours-item:nth-child(2) .chiffresCarrefours-itemContent .content {
		margin-right: 50px;
	}
}

@media screen and (max-width:1000px) {
	.chiffresCarrefours-item:nth-child(1) .chiffresCarrefours-itemContent .content::after,
	.chiffresCarrefours-item:nth-child(2) .chiffresCarrefours-itemContent .content::after {
		content:none;
	}
}

@media screen and (max-width:980px) {
	.blocMiseEnAvant p {
		font-size: 5rem;
	}
}

@media screen and (max-width:780px) {
	.blocMiseEnAvant {
		padding: 35px;
		width: 100% !important;
        border-radius: 0;
	}

	.chiffresCarrefours-itemContent .number {
		font-size:5rem;
	}
}

@media screen and (max-width: 765px), (max-device-width: 765px){

	.glissiere-item tbody tr{
		flex-wrap: wrap;
	}
}

@media screen and (max-width:680px) {
	.blocMiseEnAvant p {
		font-size: 4rem;
		line-height: 90%;
	}
}