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

/************** 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 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; }
}

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

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

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

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

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


/***********************************************************/
/* Bootstrap : ajout d'un style 'm-6' pour de grande marge */
.m-6 {
  margin: 6rem !important;
}

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

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

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

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