*{
    box-sizing: border-box;
}
div,body{/*pour intialiser toutes les balises sur toutes les nagivateurs*/
    border:0;
    padding:0;
    margin:0;
}
body{
    font-family: sans-serif;
}
header{
    width: 1250px;
    margin:0 auto;

    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
nav a {
    color:gray;
    text-decoration: none;
    text-transform: uppercase;
    margin-left:15px;
    
}
.ligne1{
    height:100px;
    background:linear-gradient(to bottom,#757575,#2b2929);
}
section img{
    width: 100%;/*pour que les images prenenet 100% du taille der son parent(div qui l'encapsule)*/
}
.container{
    width:1000px;
    margin:0 auto;
    margin-top:25px;
}
.blocA{
    display: flex;
}
.texte{
    text-align: center;
    height: 250px;
    padding:24px;
    background-color: #fff;
}
.blocA p{
    color:gray;
}
.texte span{/*je selectionne les spans qui sont a l'interieur de texte*/
    color:orange;

}
footer{
    height: 100px;
    background:linear-gradient(to bottom,#757575,#2b2929);
    position:relative;
    bottom:50px;
   
}
main{
    z-index: 2;
    position:relative;
}
nav a:hover{/*le style sera appliquer lorsqu'on passe la souris au dessus*/
    color:orange;
}
.blocA img:hover{
    transform:scale(1.4);
    
}
.blocA img{
    transition:0.5s ease-in;/*on deplace la transition sur le bloc directement sans hover pour visualiser leffet de la transition dans les deux sens (lorsque le cursuer passe sur l'image et lrosque'il quitte aussi)*/
}
/*les transitions on les utilises pour raffiner l'animation sur la duree, le rythme ....*/