/* Parcours d'achat de la carte cadeau */

.carte-etapes {
	margin: 40px 0;
	padding: 30px 24px;
	background-color: #F9F7F2;
	border-radius: 8px;
}

.carte-etapes h2 {
    margin-top: 0;
    text-align: center;
}

.carte-etapes-intro {
    text-align: center;
    margin-bottom: 30px;
}

.carte-etapes-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.carte-etape {
	text-align: center;
	padding: 10px;
}

.carte-etape-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #795b43;
	color: #ffffff;
	font-size: 21px;
	font-weight: bold;
}

.carte-etape h3 {
	font-size: 17px;
	line-height: 1.4;
	margin: 0 0 12px;
	text-align: center;
}

.carte-etape p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	text-align: center;
}

/* Tablettes */
@media screen and (max-width: 900px) {
    .carte-etapes-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 18px;
    }
}

/* Mobiles */
@media screen and (max-width: 500px) {
    .carte-etapes {
        padding: 24px 14px;
    }

    .carte-etapes-grille {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .carte-etape {
        padding: 0 8px;
    }
}