/*format ordinateur*/
@media screen and (min-width: 576px){
	* {
		box-sizing: border-box;
		margin: 0%;
	
	}


    header{
        display: flex;
        background-color: black;
        font-family: "Bangers", system-ui;
        font-style: normal;
        color: white;
        justify-content: center;

    }

    ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        list-style: none;
        padding: 30px;
        width: 500px;
    }
    li{
        display: flex;
    }
    nav a{
        color: #0476f2;
        font-size: 40px;
        
    }

    nav a:hover{
        color: white;
    }

    h1 {
        display: flex;
        align-items: center;
        font-size: 80px;
        
    }

    header img {
        height: 190px;
        margin-right: 10px;
    }

    nav{
        display: flex;
        padding: 20px;
        width: 600px;
        
    }

    footer{
        background-color: black;
        padding: 20px;
    }

    footer p{
        color: white;
    }

    #dc{
        display: flex;
        justify-content: center;
    }
    #dc img{
        display: flex;
        margin: 20px;
        width:1000px;
        
    }

    p{
        padding: 10px;
        font-size: large;
    }
    
    .button{
        display: flex;
        justify-content: center;
        justify-content: space-around;
        width: 200px;
        padding: 10px;

    }

    .button a{
        color: white;
        
    }

    /*#hero{
        display:flex;
        justify-content: center;
        
        
    }
    #titre{
        display: flex;
        justify-content: center;
        background-color: black;
        color: white;
        margin: 10px;
    }



    #hero img{
        display: flex;
        height: 500px;
    }
    .phero{
        padding: 10px;
        height: 300px;
    }*/

    .heroimg{
        display: flex;
        justify-content: center;
        padding: 10px;
        height: 500px;
    }
    .titre{
        display: flex;
        justify-content: center;
        margin: 10px;
    }
    .herop{
        background-color: rgb(0, 0, 0);
        padding: 30px;
        margin: 20px;
        border-radius: 10px;
        color: white;
    }

    table {
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
      }

    table thead tr td{
        font-size: 30px;
    }

    tr:nth-child(even) {
        background-color: #c4d9f8;
    }
    
    img, svg {
        vertical-align: middle;
        width: 168px;
        margin: 10px;
    }
}

/*format telephone*/

@media screen and (max-width: 576px){
	* {
		box-sizing: border-box;
		margin: 0%;

	
	}

    header{
        display: flex;
        background-color: black;
        
    }
    nav{
        display:flex;
        padding: 20px;
    }
    
    header img{
        height: 90px;
    }
    
    header{
        display: flex;
        background-color: black;
        font-family: "Bangers", system-ui;
        font-style: normal;
        color: white;
        justify-content: center;

    }

    ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        list-style: none;
        padding: 10px;
        width: 250px;
    }
    li{
        display: flex;
    }
    a{
        color: #0476f2;
        font-size: 20px;
        
        
    }

    a:hover{
        color: white;
    }

    h1 {
        display: flex;
        align-items: center;
        font-size: 50px;
        
    }
    footer{
        background-color: black;
        padding: 20px;
    }

    footer p{
        color: white;
    }

    #dc {
        display: flex;
        justify-content: center;
    }

    #dc img{
        display: flex;
        width:370px;
        margin: 10px;
    }

    p{
        padding: 10px;
        
    }

    .button{
        display: flex;
        justify-content: center;
        justify-content: space-around;
        width: 200px;

    }

    .button a{
        color: white;
        
    }
}