/* 

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


00 - GENERAL
01 - TEXTE
02 - VIGNETTE PAGE AVEC PICTO
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-inte.bg-color-secondary-x-light {
	border-radius: 24px;
} 
.bloc-texte-inte img {
	width: 100%;
	border-radius: 24px;
}
.bloc-texte-inte p:last-child {
	margin-bottom: 0!important;
}

.img-single img {
	border-radius: 24px;
}
/* -----------------------------
02 - VIGNETTE PAGE AVEC PICTO
-------------------------------*/

.blocVignettesCarrefours {
    gap:24px;
}
.blocVignettesCarrefours-itemContent {
	overflow: hidden;
    border-radius: 24px;
    padding:32px;
}
.blocVignettesCarrefours-item-picto .blocVignettesCarrefours-itemContent {
	padding-top:95px;
	transition:0.8s all;
}
.blocVignettesCarrefours-itemContent .image {
	top:0;
	left: 0;
	background-color: var(--color-secondary-light);
	padding: 11px 57px 17px 20px;
	border-radius: 0 0 300px 0px;
	transition:0.8s all;
}
.blocVignettesCarrefours-item-picto .vignettePicto {
	display: block;
	width: 56px;
	height: 56px;
	background-color: var(--white);
	border-radius: 99px;
	padding: 10px;
}
.blocVignettesCarrefours-itemContent .vignetteTitle {
    margin-bottom: 8px;
}
.blocVignettesCarrefours-itemContent .vignetteText {
    color: var(--gray-600);
	margin-bottom: 20px;
}
.blocVignettesCarrefours-itemContent .vignetteLink {
	position: absolute;
	bottom: 24px;
}

/*-----------------
03- IMG 3 COLONNES
-------------------*/

.slidercontainer .slidercontainer-inner {
    gap: 28px;
}

/*-------------------
04- BLOC TEXTE + IMG
--------------------*/

.bloc-texte-image .item img {
    height: 538px;
	width: 100%;
	object-fit: cover;
	border-radius: 24px;
}
.bloc-texte-image-inte p:last-child {
	margin-bottom: 0!important;
}


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

.chiffresClesCarrefour {
    gap:40px;
}
.chiffresCarrefours-item {
    border: 5px solid var(--neutral-100);
    border-radius: 24px;
    padding: 24px;
}
.chiffresCarrefours-itemContent .number {
	align-content: center;
    color: var(--color-primary-dark);
	/* width: max-content; */
    padding: 13px 16px;
    border-radius: 99px;
    height: 64px;
	min-width: 64px;
}
.chiffresCarrefours-itemContent .text {
    color: var(--gray-600);
}

/*----------------
06- BLOC ACCROCHE
-----------------*/

.blocAccroche-itemContent {
	border-radius:32px;
}
.accrocheCarrefours .blocAccroche-itemContent .imgAccroche {
	object-fit: cover;
}
.accrocheCarrefours .blocAccroche-itemContent .img-large {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	height: 190px;
}
.accrocheCarrefours .blocAccroche-itemContent .img-medium {
	width: 182px;
	aspect-ratio: 1/1;
	border-radius: 24px;
}
.accrocheCarrefours .blocAccroche-itemContent .img-small {
	width: 130px;
	aspect-ratio: 1/1;
	border-radius: 24px;
}
.accrocheCarrefours .blocAccroche-itemContent .content {
	flex:1;
}
.accrocheCarrefours .blocAccroche-itemContent .content-col {
	padding: 16px 24px;
}
.accrocheCarrefours .blocAccroche-itemContent .accrocheLink {
	bottom: 16px;
}

/*----------------
07- ACCESS RAPIDE
-----------------*/

.accessCarrefours {
    padding: 64px;
    border-radius: 24px;
}
.accessCarrefours .accessCarrefours-itemContent .content h2 {
	position: relative;
}
.accessCarrefours .accessCarrefours-itemContent .content h2::before {
	content:"";
	display: block;
	width: 141px;
    height: 16px;
	margin-bottom: 16px;
	background-image: url(/wp-content/themes/mediapilote/img/charte/before-title.svg);
}
.accessCarrefours .accessCarrefours-itemContent p {
	margin-bottom: 0;
}
.accessCarrefours .accessCarrefours-itemContent .image img {
	object-fit: cover;
	width: 100%;
	border-radius:375px 0 259px 0!important;
	border-bottom-right-radius: 259px;
	border-top-left-radius: 375px;
}



/* ------------------
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;
	background-repeat: no-repeat;
	background-size: 40px;
}

.infoCarrefours .infoCarrefours-item.color-blue {
	background-color: var(--color-secondary-x-light);
}
.infoCarrefours .infoCarrefours-item.color-blue .infosTitle {
	color: var(--color-primary-dark);
}
.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 - 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-secondary-x-light);
	border: 1px solid var(--color-secondary-light);
    border-radius: 24px;
	margin-bottom: 2rem;
	padding:16px;
}
.glissiere-item.active .glissiere-item--inner{
	background-color: var(--white);
	border: 4px solid var(--color-secondary-light);
}
.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;
	background-color: var(--color-secondary-very-light-grey);
}
.glissiere-item .contenu .text{
	padding: 0 3rem 3rem;
}
.glissiere .arrow-container {
	position: relative;
	background-color: var(--color-secondary-light);
	/* padding:20px; */
	width: 56px;
    height: 56px;
	border-radius: 99px;
	transition: 0.8s all;
}
.glissiere .arrow-container:hover {
	background-color: var(--color-secondary-active);
	transition: 0.8s all;
}
.glissiere .glissiere-item.active .arrow-container {
	background-color: var(--color-secondary);
}
.glissiere .ico-arrow{
	background-image: url(/wp-content/themes/mediapilote/img/charte/icon-select.svg);
    background-repeat: no-repeat;
	background-position: center;
	/* width: 22px;
    height: 22px; */
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	transition:0.8s all;
}
.glissiere .arrow-container:hover .ico-arrow{
	top:10px;
	transition:0.8s all;
}
.glissiere-item.active .ico-arrow{
	background-image: url(/wp-content/themes/mediapilote/img/charte/icon-select-hover.svg);
}
.glissiere-item .titre {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}


/*--------------
09 - BLOC LIENS
----------------*/

.LiensUtilesCarrefour {
	gap:12px;
}

/*--------------
10 - BLOC VIDEO
----------------*/

/* .bloc-video iframe {
	width: 100%;
	height: 630px;
	border-radius: 24px;
} */
 .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 1080 / 1920 = 0.5625 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 24px;
}

/*--------------
11 - BLOC PARTAGE
----------------*/

.share .share-content {
	border-radius: 24px;
	padding: 24px;
}
.share .share-buttons .linkRS {
    display: flex;
    align-items: center; /* Centre verticalement le contenu */
}
.share .share-buttons svg {
    background-color: var(--color-primary-dark);
    border-radius: 50%; /* Pour un cercle parfait */
    width: 40px; /* Taille du fond */
    height: 40px; /* Taille du fond */
    padding: 7.5px; /* Ajustez pour centrer le SVG dans le fond */
	transition:0.8s all;
}
.share .share-buttons .linkRS:hover svg {
	background-color: var(--color-secondary);
	transition:0.8s all;
}
.share .share-buttons .linkRS > span {
	transform: 0.8s all;
}
.share .share-buttons .linkRS:hover > span {
	color: var(--color-secondary);
	transition:0.8s all;
}


/* Galerie image */

.galerie-image {
    margin: 0 -10px 50px -10px !important;
}
	.galerie-image .item {
		margin: 0 10px 20px 10px;
		background-color: #000;
	}
		.galerie-image .item img {
			-webkit-transition: opacity .3s, -webkit-transform .3s;
			transition: opacity .3s, -webkit-transform .3s;
			-o-transition: transform .3s, opacity .3s;
			transition: transform .3s, opacity .3s;
			transition: transform .3s, opacity .3s, -webkit-transform .3s;
		}
		.galerie-image .item:hover img {
			opacity: 0.5;
			-webkit-transform: scale(1.05);
			    -ms-transform: scale(1.05);
			        transform: scale(1.05);
		}

/* Diaporama */

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

/* Téléchargement fichier */

.fileDownload-item .title {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    font-family: "rb", sans-serif;
    font-size: 1.6rem;
    color: var(--color02);
    margin: 0;
}
.fileDownload-item .vignette {
    width: 180px;
    margin: 0 10px 0 0;
}
.fileDownload-item .link a {
    margin: 0 0 0 5px;
}

/* 14 - SLICK */
button.slick-arrow,
.realisationPopup button.arrow-slide{
	background-color:var(--neutral-100);
    border: transparent;
    position: absolute;
    /* top: calc(50% - 20px); */
	/* top: -60px; */
	top: 50%; /* Centrer verticalement par rapport au conteneur */
    transform: translateY(-50%);
    right: 0;
    text-indent: -5000px;
    overflow: hidden;
    width: 44px;
    height: 44px;
	border-radius: 99px;
	background-image: url('/wp-content/themes/mediapilote/img/charte/arrow-slider-next.svg');
    background-repeat: no-repeat;
    background-size: 14px;
	background-position: center;
    outline: transparent;
    cursor: pointer;
}
button.slick-arrow.slick-prev,
.realisationPopup button.arrow-slide.prev {
    /* right: 40px; */
	background-image: url('/wp-content/themes/mediapilote/img/charte/arrow-slider-prev.svg');
    z-index: 1;
	position: absolute;
    left:0;
}
.slick-arrow.slick-prev.slick-disabled {
    background-image: url('/wp-content/themes/mediapilote/img/charte/arrow-slider-prev-disable.svg');
}
.slick-arrow.slick-next.slick-disabled {
    background-image: url('/wp-content/themes/mediapilote/img/charte/arrow-slider-disable.png');
}
/**/
.realisationPopup button.arrow-slide.prev {
	left:-55px;
}
.realisationPopup button.arrow-slide.next {
	right:-55px;
}

/*CARDS*/

.cards .card-item {
	border-radius: 24px;
	padding: 24px 24px 28px 24px;
	border: 4px solid var(--color-secondary-light);
	transition: 0.8s all;
}
.cards .card-item:hover .card-item-link::after {
	background-color: transparent;
    background-image: url(/wp-content/themes/mediapilote/img/charte/icon-plus-hover.svg);
	border: 2px solid #00A5DF;
	color: #00A5DF;
}
.cards .card-item:hover {
	background-color: var(--color-secondary-x-light)!important;
}
.cards .card-item .card-item-text {
	color: var(--neutral-500);
}
.cards .card-item .card-item-link {
	left:0;
	bottom: 28px;
	padding-left: 0!important;
}



/*------------------
---- RESPONSIVE ----
-------------------*/

@media screen and (max-width:999px) {
	.accrocheImg .accrocheCarrefours-itemContent {
		background-image: none!important;
		background-color: var(--color-primary);
	}
	.bloc-texte-image .item img {
		height: auto;
		object-fit: inherit;
	}
	/* .bloc-video iframe {
		height: 500px;
	} */

	.infoCarrefours .infoCarrefours-item .infosTitle::before {
		background-size: 36px;
	}
}

@media screen and (max-width:767px) {
	.accessCarrefours {
		padding:35px;
	}
	.chiffresClesCarrefour {
		gap:24px;
	}
	.accrocheCarrefours .blocAccroche-item.accroche-medium .blocAccroche-itemContent{
		flex-direction: column;
	}
	.accrocheCarrefours .blocAccroche-itemContent .img-medium {
		width: 100%;
	}
}

@media screen and (max-width:694px) {
	.accroche .accrocheCarrefours-itemContent a:first-child {
		margin-bottom: 15px;
	}
}

@media screen and (max-width:580px) {
	.accrocheCarrefours .blocAccroche-item.accroche-small .blocAccroche-itemContent{
		flex-direction: column;
	}
	.accrocheCarrefours .blocAccroche-itemContent .img-small {
		width: 100%;
	}
}