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

    body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        
    
    #option{
            display: none;
        }
    
        /* Style du header */
     #header {
            background-color: #331038;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            
            top: 0px;
            box-shadow: 0px 1px 2px 0px #404040;
            z-index: 1;
        }
        
        #header figure {
            margin: 0;
        }
         
        input[type="text"]{
            display: none;
        }
        
        
        input [type="text"]:hover{
            display: none;
        }
        
        
        .lien{
            display: none;
        }

        #header p {
            color: #ffffff;
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
            margin-left: 5px;
            font-family: 'Dosis';
        } 
        
        .logo {
            display: flex;
            align-items: center;
            height: 100%;
        }
        
        #logo {
            width: 50px;
            height: auto;
        }
        
        button {
            background-color: #ffffff;
            height: 38px;
            border: none;
            border-radius: 3px;
            box-shadow: 0px 1px 2px 0px #404040;
        }

        #div2{
            position: relative;
            top: 116px;
        }
        
        /* Style des filtres */
        #filters {
            width: 100%;
            top: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0px 1px 3px -1px #404040;
            z-index: 1;
            background-color: #ffffff;
        }
         
        #filters p {
            font-size: 0.9rem;
            font-style: italic;
            font-weight: 600;
            font-family: Arial, Helvetica, sans-serif;
            color: #404040;
            line-height: 1;
        }
        
        #filters figure {
            margin: 0;
            height: 25px;
        }
        
        #filters img {
            max-height: 100%;
        }
        
        #main-container {
            position: relative;
            top: 100px;
        }
        
        /* Count */
        #count {
            position: relative;
            width: 90%;
            margin: auto;
            font-size: 0.9rem;
            font-family: Arial, Helvetica, sans-serif;
            top: 107px;
        }
        
        #count > h3 {
            margin-top: 4%;
            margin-bottom: 4%;
            color:#404040;
        }
         
        a {
            text-decoration: none;
        } 
        
        /* results */
        #results {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 90%;
            margin: 4% auto 0 auto;
        }
        
        .article {
            height: 272px;
            box-shadow: 0px 3px 4px 0px #827672;
            margin-bottom: 16%;
        }
        
        .preview-planet {
            margin: 0;
            height: 63%;
        } 
        
        .preview-planet > img {
            width: 200%;
            max-height: 100px;
        } 

        .taille{
            height: 100%;
            width: 100%;
        }
         
        .sphere {
            margin-top: -17px;
        }
        
        .sphere > img {
            width: 50px;
        }
        
        /* style de l'article */ 

        .info {
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
        }

        .info p{
            padding-bottom: 3px;
        }
        
        .info > div:nth-of-type(1) {
            display: flex;
            padding-top: 2%;
            margin-bottom: 2%;
        } 
        
        .info > div:nth-of-type(1), .info > div:nth-of-type(2) {
            padding-left: 2%;
        }
        
        .info > div:nth-of-type(1) > :nth-child(2) {
            margin-left: 2%;
        } 
        
        .info h4, .info p {
            margin: 0;
        }  
    
    }