#actions{
	background-color: var(--violet-blanc);
}

.action-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: flex-start;
	grid-gap: 20px;
	article{
		padding: 30px;
		background-color: #FFFFFF;
		border: 2px solid var(--violet-trans);
		border-radius: 15px;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 15px;
		i{
			grid-area: icon;
			color: var(--violet);
			font-size: 2em;
			transition: all 0.3s ease-in-out;
		}
		h4{
			grid-area: tit4;
		}
		p{
			grid-area: desc;
		}
		a{
			grid-area: lien;
		}
		*{
			margin: 0 !important;
			width: fit-content;
		}
		&:hover i{
			transform: rotate(90deg);
		}
	}
}

div#compte-insta{
	margin-top: 2em;
}

@media screen and (max-width: 1200px){
	.action-grid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 700px){
	.action-grid{
		grid-template-columns: repeat(1, 1fr);
		article{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: flex-start;
			justify-content: flex-start;
			grid-template-areas: 
				"icon tit4"
				"icon desc"
				"icon lien"
			;
		}
	}
}


ul.actions-contact {
	display: flex;
	padding: 0;
	list-style: none;
	gap: 10px;
	a{
		display: block;
		padding: 3px 5px 5px 5px;
		border-radius: 5px;
		color: var(--blanc);
		background-color: var(--violet);
		transition: all 0.3s ease;
		i, i::before{
			vertical-align: middle;
			text-align: center;
		}
		&:hover{
			color: var(--violet);
			background-color: var(--blanc);
		}
	}
}