/**********************************************************/
/***************	 STARTER / COMPOSANTS		***********/

/****** SOMMAIRE *******
 • Images et textes
 • Cartes
 • Bloc "partenaires" : liste images en une ligne responsive
 • Bloc filtres
 • Tableaux
 • Popup
 • Spacing "p-6 et m-6" (complément Bootstrap)
*/


/********************************************************/
/******************* Images et textes *******************/

/*  Rollover images et textes : modifier opacité  */
a.hover_opacity:hover,
a.hover_opacity:focus {
	opacity: .6;
}

.text--over_img {
	text-shadow:0 1px 10px #555;
}

.img-blanchir {
	filter: brightness(0) invert(1) !important;
}

/* après avoir blanchi une image avec la classe "img_blanchir", on peut facilement la griser */
.img-griser {
	filter: grayscale(100%);
	opacity: .65;
	transition: all 0.3s;
}

.img-griser:hover {
  opacity: 1;
}


/* filtre couleur SVG
https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element */

.svg-white {
	filter: invert(100%) sepia(93%) saturate(6%) hue-rotate(194deg) brightness(108%) contrast(100%);
}
.svg-bleu {
	filter: invert(18%) sepia(100%) saturate(930%) hue-rotate(186deg) brightness(93%) contrast(90%);
}

/************** CARTES ***************/
/*  (appelé 'CARDS' dans Boostrap)   */

/* Mobile first */

.carte {
	position: relative;
	padding: 1rem;
}

.carte a {
	text-decoration: none;
}

.carte__titre {
	margin:.5rem 0;
}

.carte__description {
	margin:.5rem 0;
}

.carte__texte {
	margin:.5rem 0 0 0;
}

/*
	Modifier de .carte : carte blanche avec ombre portée
	<div class="carte carte__blanche-ombree">…</div>
*/
.carte__blanche-ombree {
	background-color: white;
	padding: 1rem;
	box-shadow: 2px 2px 12px -1px rgba(0,0,0,0.2);
	transition: all .2s;
}

.carte__blanche-ombree:hover {
	box-shadow: 2px 3px 12px 2px rgba(0,0,0,0.2);
	transition: all .2s;
}

/* 
	Modifier de .carte : Toute la carte devient un lien hypertexte
	<div class="carte carte--total-hover">…</div>
*/
.carte--total-hover a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.carte--total-hover a:hover {
	color:#999;
}

/* 
	Modifier de .carte : hover avec petit effet loupe
	<div class="carte carte--effect-io">…</div>
*/

.carte--effect-io img {
	transition: all .2s ease-out;
}

.carte--effect-io:hover  img{
	transform: scale(1.02);
	transition: all .2s ease-out;
	overflow: hidden;
}

/************** Bloc Partenaires ***************
<div class='container partenaires justify-content-around'>
	<img>
	<img>
	<img>
</div>

OPTION partenaires-child : cas d'une intégration HTML via un CMS qui ajoute un <p> autour du bloc
*******************************************/
.partenaires,
.partenaires--child > p {
  display: flex;
  place-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
	.partenaires,
	.partenaires--child > p {
		 gap: 3rem;
	}
}

.partenaires img,
.partenaires--child > p img {
  filter: grayscale(100%);
  transition: all .5s;
}

.partenaires img:hover,
.partenaires--child > p img:hover {
	filter: grayscale(0%);
	transition: all .5s;
}

/************** Bloc FILTRES ***************/
/*******************************************/
.liste_categories {
	display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  column-gap: 1rem;
  border: solid 2px #333;
  padding: 1rem;
}

.liste_categories .categorie {
	text-transform: uppercase;
}

/************** Popup ***************/
/* Le click est géré pas un JS 			*/

#popup {
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	color: #0F3E5E;
	visibility: visible;
	overflow: auto;
	padding-top: 50px;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	transition: all 1s cubic-bezier(0.53, 0.03, 0.6, 1.01);
}

#popup.open {
	visibility: visible;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	transition: transform 0.4s cubic-bezier(0.53, 0.03, 0.6, 1.01);
}

#popup * {
	color: #0F3E5E;
}
#popup .cont {
	position: relative;
}
#popup .revue-de-presse {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 1.5em;
}
#popup .title-quote i {
	border-color: #0F3E5E;
}

.icon-cross:before {
	content: "\e90b";
}

@media screen and (max-width: 48em) {
#popup {
	padding-top: 75px; }
}


/* Plan du site */

.plan .secteur__titre {
  font-size: calc(1rem + 1vw);
  font-weight: 900;
}


/***********************************************************/
/* Bootstrap : ajout d'un style 'm-6' pour de grande marge */

.p-6 {
  padding: 5rem !important;
}

.pt-6,
.py-6 {
  padding-top: 5rem !important;
}

.pb-6,
.py-6 {
	padding-bottom: 5rem !important;
}

.pr-6,
.px-6 {
  padding-right: 5rem !important;
}

.pl-6,
.px-6 {
  padding-left: 5rem !important;
}

.m-6 {
  margin: 5rem !important;
}

.mt-6,
.my-6 {
  margin-top: 5rem !important;
}

.mb-6,
.my-6 {
	margin-bottom: 5rem !important;
}

.mr-6,
.mx-6 {
  margin-right: 5rem !important;
}

.ml-6,
.mx-6 {
  margin-left: 5rem !important;
}


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

	.p-lg-6 {
	  padding: 5rem !important;
	}

	.pt-lg-6,
	.py-lg-6 {
	  padding-top: 5rem !important;
	}

	.pb-lg-6,
	.py-lg-6 {
		padding-bottom: 5rem !important;
	}

	.pr-lg-6,
	.px-lg-6 {
	  padding-right: 5rem !important;
	}

	.pl-lg-6,
	.px-lg-6 {
	  padding-left: 5rem !important;
	}
	.m-lg-6 {
		margin: 5rem !important;
	}

	.mt-lg-6,
	.my-lg-6 {
		margin-top: 5rem !important;
	}

	.mb-lg-6,
	.my-lg-6 {
		margin-bottom: 5rem !important;
	}

	.mr-lg-6,
	.mx-lg-6 {
		margin-right: 5rem !important;
	}

	.ml-lg-6,
	.mx-lg-6 {
		margin-left: 5rem !important;
	}

  .mt-12{
		margin-top:5rem;
  }

  .mb-n6, .my-n6 {
		margin-bottom: -5rem !important;
  }
}