.TitreUn{
    color: #4D4D4D;
    font-family: Poppins;
    font-size: 49px;
    font-style: normal;
    font-weight: 900;
    line-height: 58px;
    margin-left: 150px;
    margin-bottom: 50px;
}

.ImgBg{
    border-radius: 10px;
}

.BlockUnCamion{
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    display: block;
    margin-left: 150px;
    margin-right: 32px;
    color: #4D4D4D;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.BlockDeuxEuro{
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    display: block;
    color: #4D4D4D;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
}

.BlockTroisAide{
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    display: block;
    margin-left: 150px;
    margin-right: 32px;
    color: #4D4D4D;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.BlockQuatreCasque{
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--vert, linear-gradient(66deg, #74EF7B 15.7%, #42C38F 85.06%));
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    display: block;
    color: #4D4D4D;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.PremièreLigne{
    display: flex;
    margin-top: 20px;
}

.DeuxiemeLigne{
    display: flex;
    margin-top: 25px;
}

.ImgBlockUnCamion{
    margin-top: 40px;
    margin-bottom:38px;
}

.ImgBlockDeuxEuro{
    margin-top: 30px;
    margin-bottom:42px;
}

.ImgBlockTroisAide{
    margin-top: 31px;
    margin-bottom: 12px;
}

.ImgBlockQuatreCasque{
    margin-top: 32px;
    margin-bottom: 34px;
}

.BoutonContactezNous{
    border-radius: 20px;
    background: rgba(31, 31, 31, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.20) inset;
    width: 152px;
    height: 27px;
    flex-shrink: 0;
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    line-height: 20px; 
    text-transform: uppercase;
    border: none;
    margin-top: 7px;
}


.BlockunTexte{
    width: 956px;
    height: 490px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 46px;
    padding-left: 40px;
    padding-top: 37px;
}

.BlockDeuxTexte{
    width: 956px;
    height: 371px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    margin: auto;
    margin-bottom: 46px;
    padding-left: 40px;
    padding-top: 37px;
}

.BlockTroisTexte{
    width: 956px;
    height: 371px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.15), 0px 4px 4px 0px rgba(255, 255, 255, 0.50) inset;
    margin: auto;
    margin-bottom: 46px;
    padding-left: 40px;
    padding-top: 37px;
}

.TexteUnBlockunTexte{
    color: #42C38F;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; 
    width: 340px;
    height: 21px;
    flex-shrink: 0;
}

.TitreUnDeuxBlockunTexte{
    color: #4D4D4D;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    height: 10px;
    flex-shrink: 0;
    margin-bottom: 20px;
    margin-top: 30px;
}

.PUnBlockunTexte{
    color: #000;
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    width: 875px;
    height: 70px;
    flex-shrink: 0; 
    text-align: justify;
}

@media screen and (max-width : 1399px){
    .TitreUn{
        margin-left: 79px;
    }

    .BlockUnCamion{
        margin-left: 80px;
    }

    .BlockDeuxEuro{

    }

    .BlockTroisAide{
        margin-left: 80px;

    }

    .BlockQuatreCasque{

    }

    .ImgBg{
        margin-left: 30px;
    }
}

@media screen and (max-width : 1199px){
    .TitreUn{
        margin-left: 0px;
    }

    .BlockUnCamion{
        margin-left: 0px;
    }

    .BlockDeuxEuro{

    }

    .BlockTroisAide{
        margin-left: 0px;

    }

    .BlockQuatreCasque{

    }

    .ImgBg{
        margin-left: 20px;
        margin-top: 13px;
    }
}

@media screen and (max-width : 991px){

    .BlockunTexte{margin-top: 70px;}
    
    .TitreUn{
        text-align: center;
    }
    
    /* Assurez-vous que .container a la propriété `flex-wrap: wrap;` pour permettre le passage  à la ligne des éléments */
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centre les blocs horizontalement */
        width: 100%;
    }

    /* Les deux lignes sont des conteneurs flex qui prennent toute la largeur */
    .PremièreLigne, .DeuxiemeLigne {
        display: flex;
        justify-content: space-around; /* Répartit les blocs uniformément avec de l'espace autour d'eux */
        width: 100%; /* Prend toute la largeur du conteneur */
        flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si nécessaire */
    }

    /* Styles pour chaque bloc */
    .BlockUnCamion,
    .BlockDeuxEuro,
    .BlockTroisAide,
    .BlockQuatreCasque {
        margin: 0; /* Réinitialise les marges */
        /* Prend la moitié de la largeur moins la moitié du gap */
        box-sizing: border-box; /* Inclut padding et border dans la largeur */
    }

    .BlockUnCamion{
        margin-left: 30px;
    }
    .BlockDeuxEuro{
        margin-left: 40px;
    }

    .BlockTroisAide{
        margin-left: 25px;
    }

    .BlockQuatreCasque {
        margin-left: 25px;
    }
    
    .ImgBg{
        display: none;
    }

    .BlockunTexte,
    .BlockDeuxTexte,
    .BlockTroisTexte{
        width: 100%;
        height: auto;
        padding-bottom: 20px;
        

    }

    .PUnBlockunTexte{
        width: 90vw;
        height: auto
        ;
        padding-right: 4%;
    }

}

        @media screen and (max-width : 600px){

            .BlockunTexte,
            .BlockDeuxTexte,
            .BlockTroisTexte{
        
                margin-left: 0%;
                padding-right: 5%;
        
            }

            .BlockUnCamion{
                position: relative;
                left: 0px;
                margin-left: 0px;
                margin-right: 10px;
            }
            .BlockDeuxEuro{
                margin-left: 0px;
                position: relative;
                left: 15px;
            }
        
            .BlockTroisAide{
                margin-left: 0px;
                position: relative;
                left: 0px;
                margin-right: 10px;
            }
        
            .BlockQuatreCasque {
                margin-left: 0px;
                position: relative;
                left: 9px;
            }
    
            .TitreUn{
                margin-left: 0px;
            }

}
@media screen and (max-width: 433px) {
    /* Centre le titre et ajuste la taille de la police */
    .TitreUn {
        text-align: center;
        margin-left: 0;
        font-size: 30px; /* Ajustez la taille de la police comme nécessaire */
        margin-bottom: 20px;
        line-height: 40px;
    }

    /* Centrer les blocs et les empiler verticalement */
    .PremièreLigne, .DeuxiemeLigne {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -26px;
    }

    /* Styles pour chaque bloc pour occuper pleinement l'espace disponible */
    .BlockUnCamion,
    .BlockDeuxEuro,
    .BlockTroisAide,
    .BlockQuatreCasque {

        margin: 10px 0; /* Ajoute une marge en haut et en bas pour chaque bloc */

    }
    .TexteUnBlockunTexte{
        max-width: 300px;
        width: 100%;
    }

    .BlockDeuxEuro{
        left: 0px;
    }

    .BlockQuatreCasque{
        left: 0px;
    }

    .PremièreLigne{
        display: flex;
        margin-top: 0px;
    }

    .BlockunTexte{margin-top: 50px; }

    .PUnBlockunTexte{
        padding-right: 10%;
    }

    
    .BlockunTexte,
    .BlockDeuxTexte,
    .BlockTroisTexte{

        border-radius: 30px;
    }
}

@media screen and (max-width:400px) {
    .BoutonContactezNous{
        font-size: 11px;
        width: 139px;
        height: 25px;
    }
}