/* Infos bulles */
.info-bulle{
	position : relative;
	color: var(--primary);
}


/* Generic */

.info-bulle .thumbtack>svg{
	transform :rotate(45deg);
}

.info-bulle-icon{
	position : relative;
	display : inline-block;
	font-weight : 600;
	font-size : .8em;
	line-height : 1.2;
	border-radius : .5em;
	z-index: 100;
}

.info-bulle p,
.info-bulle ul,
.info-bulle ol,
.info-bulle div{
	margin-top : .5rem!important;
	margin-bottom : 0!important;
}

/*.info-bulle-a-lire-aussi>div>a:before{
	content: '\f054';
    display: inline-block;
    margin-right: 0.5em;
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    font-size: .6rem!important;
    vertical-align: 0.1em;
}*/

/*  
*	Info Bulle1 : double border left 
*/

.info-bulle1{
	padding : 10px 15px 1rem 25px;
	margin-left : 15px;
	background-color: var(--light);
	border-left : thick double;
	overflow : hidden;
	z-index : 0;
}

.info-bulle1 .info-bulle-icon{
	text-transform : uppercase;
	margin-bottom : 5px;
	background-color: var(--light);
}

.info-bulle1>i + .info-bulle-icon{
	padding-left : 5px;
}

.info-bulle1>i{
	position: absolute;
	display : inline-block;
	content: '';
	width: 30px;
	height: 30px;
	left: 8px;
	top: 8px;
	z-index :-1;
}

.info-bulle1>div{
	color : var(--body);
}

/* Info Bulle 2 : icon left Rounded */

.info-bulle2{
	padding : 10px;
	border-left : 50px solid;
	border-radius : .75em;
	box-shadow: var(--shadow);
}

.info-bulle2 .info-bulle-icon{
	text-transform : uppercase;
}

.info-bulle2>i{
	content: "";
    position: absolute;
	top: 50%;
    left: -25px;
    font-size: 1.5em;
	z-index : 100;
	transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 3px;
    border-radius: 50%;
}

.info-bulle2>div{
	color : var(--body);
}

.info-bulle2 p:first-of-type,
.info-bulle2 ul:first-of-type,
.info-bulle2 ol:first-of-type{
	margin-top : 0rem!important;
}

@media(min-width:768px){
	.info-bulle2{
		padding : 10px 20px;
		border-left-width: 80px;
	}
	
	.info-bulle2>i{
		left: -40px;
		font-size: 2em;
		padding: 6px;
	}

}

/* Info Bulle3 : Rounded icon + text as title */

.info-bulle3{
	color: #fff;
	background-color: var(--primary);
	padding: 20px;
	border-radius: .5rem;
}

.info-bulle3>.info-bulle-icon,
.info-bulle3>.Icon{
	font-size: 1.6rem;
	line-height:1;
}

.info-bulle3>.Icon{
	margin-right: .8rem;
	margin-left: -.15em;
}

.info-bulle3>div{
	margin-top:  1rem!important;
}

.info-bulle3 a{
	color: #fff!important;
	font-weight: 400!important
}

.info-bulle3 li:before{
	color:#fff!important;
}

@media(min-width:768px){
	.info-bulle3{
		padding: 40px;
	}
}