@media all and (min-width: 600px) and (max-width: 720px){ 

    body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
    }
            /* Style du header */
    #header {
        background-color: #331038;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        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;
    }
    
    
    /* style des filtres */

    #filters{
        display: none;
    }
    
    #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%;
    }

    /* count */

    #count {
        background-color: white;
        grid-area: header;
        
        display: block ruby;
        background-color: rgb(222, 125, 231);
        width: 100%;
        margin: auto;
        font-size: 0.9rem;
        font-family: Arial, Helvetica, sans-serif;
        top: 60px;
    }
    
    #count h3{
        margin-left: 5%;
    }
    
    
    a{
        margin-left: 20px;
    }

           /* style de l'article */ 
    
    .article {
        height: 150px;
        box-shadow: 0px 3px 4px 0px #827672;
        margin-bottom: 5%;
        background-color: white;
        border-radius: 2px;
    }
    
    .preview-planet{
        flex-direction: row;
        height: 150px;
        width: 50%;
    }
    
    
    .preview-planet > img {
        width: 154%;
        max-height: 303px;
        border-radius: 2px;
    }

    .info{
        background-color: #ffffff;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 60%;
        width: 100%;
        border-radius: 5px;
    }
    
    
    .info > div:nth-of-type(1), .info > div:nth-of-type(2) {
        padding-left: 2%;
        width: 100%;
        background-color: white;
        margin-bottom: -60px;
    }
    
    .info > div:nth-of-type(1) > :nth-child(2) {
        margin-left: 2%;
        margin-top: 7%;
    }

    .info p{
        padding-top: 12%;
    }
    
    .info > div:nth-of-type(1) {
        display: flex;
        padding-top: 2%;
        margin-left: -10%;
        margin-bottom: -60px;
    }

    .info > div:nth-of-type(2){
        border-left: 2px solid rgb(139, 139, 139);
        padding-left: 20px;
        }    
    
    form{
        flex-direction: column;
        margin-left: 5%;
        flex-wrap: wrap;
        align-content: space-around;
        display: flex;
    }
    
    label{
        margin-top: 7px;
    }
    
    /* structure et style de la page */
    #conteneur{
        display: grid;
        grid-template-areas: 'header header'
                             'sidebar mainContent';
        grid-template-columns: 25% 75%;
        grid-template-rows: auto 1fr;
    }
    
    #div1 {
        background-color: white;
        grid-area: sidebar;
      }
      
    #div2 {
        background-color: white;
        grid-area: mainContent;
        top: 60px;
        position: relative;
      }
      
    
    #option{
      padding: 6%;
      position: relative;
      top: 58px;
    }
    
    #option p{
        color: #404040;
    }
    
    #option p{
        color: #404040;
    }
    
    
    #ligne{
        display: flex ;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    .blanc{
        background-color: white;
    }
    
    }