/* CSS Document */

@media (min-width: 0px){

	.forfait, .pictoSavoirFaire {
		list-style: none;
		padding: 0px;
		margin: 0px;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.forfait li {
		border: 4px dashed #999999;
		padding: 1rem;
		width: 90%;
		margin: auto;
		margin-bottom: 2rem;
		border-radius: 1.5rem;
	}

	.pictoSavoirFaire {
		display: none;
	}
	.forfait li img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	.forfait li .boutonLien {
		background-color: #E4007D;
		color: #FFFFFF;
		font-family: 'Lobster Two', cursive;
		font-size: 1.8rem;
		border: 4px dashed #E4007D;
	}
	.forfait li:first-child .boutonLien {
		background-color: #009EE3;
		border: 4px dashed #009EE3;
	}
	.forfait li:nth-child(2) .boutonLien {
		background-color: #CCFF00;
		border: 4px dashed #CCFF00;
		color: #313131;
	}
	.forfait li .boutonLien:hover {
		background-color: #FFFFFF;
		color: #000000;
	}
	.boutonLecture {
		background-image: url(../images/icone_lecture.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		display: block;
		width: 100px;
		margin: auto;
		padding-top: 105px;
		color: #CCFF00;
		margin-bottom: 3rem;
		margin-top: 1rem;
		
	}


	
}
@media (min-width: 720px){

	.forfait h2 {
		font-size: 2rem;
		text-align: center;
		display: block;
		background-image: none;
	}
	.pictoSavoirFaire {
		display: block;
		display: flex;
		flex-wrap: wrap;
	}
	.pictoSavoirFaire li {
		width: calc(90% / 3);
		margin: auto;
	}
}
@media (min-width: 1024px){
	
	.forfait {
		display: flex;
		
	}

	.forfait h2 {
		margin: 0px;
		margin-bottom: 0.5rem;
		padding: 0px;
		text-align: center;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		font-size: 1rem;
		color: #313131;	
		background-color: #CCFF00;
		border-radius: 1rem;
	}
	.forfait li:first-child h2 {
		background-color: #009EE3;		
	}
	.forfait li:nth-child(3) h2 {
		background-color: #E4007D;		
	}
	.forfait li:first-child {
		border: 4px dashed #009EE3;
	}
	.forfait li:nth-child(2) {
		border: 4px dashed #CCFF00;
	}
	.forfait li {
		border: 4px dashed #E4007D;
		display: flex;
		flex-direction: column;
		width: calc(85% / 3);
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: auto;
		margin-right: auto;
		
	}
	.forfait li p:first-of-type {
		padding: 0px;
	}
	.forfait .bouton {
		margin-bottom: 0px;
		margin-top: auto;
	}


	
}