*{
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua&family=Yeseva+One&display=swap');
/*------------------------------------*\
    $Base / Version mobile
\*------------------------------------*/

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

    body{
        background-color: #FFF4DE;
        margin: 0;
        
    
    
    }
    
    #title{
        width: 6%;
  

    }
    header{
        display: flex;
        justify-content: space-between;
        padding: 2%;
    }

    #separateur{
        background-color: #B36B6C;
        width: 50% ;
        
    }
    
    #navigation-principale {
        display: flex;
        flex-direction: row;
        text-transform: uppercase;
        text-decoration: none;
        justify-content: space-around;
        padding-bottom: 15px;
     
        
        
    }
    
    #navigation-principale a {
        margin-top: 5px;
        padding: 5px;
        text-decoration: none;
        font-family: "Inknut Antiqua", serif;
        color: #B36B6C;
        font-size: 13px;
    }

    .active  {
        color: #dfe708;}
    
aside{
    display: flex;
    flex-direction: column;
}


    #logo{
        width:70%;
        display: flex;
        justify-content: center;
        margin: 0 auto ;
    
       
    
    }
    #champs{
        width: 100%;
        z-index: -100;
        overflow: hidden;
        position: absolute;
      
      

    
    }


/*accueil*/

#main_accueil{
    display: flex;
    margin-top: 172px;
    flex-direction: column;


}

.img1{
   width: 50%; 
   
}
.img2{
    width: 117px;
    margin: 0 auto;
}



#img2{
    width: 250%;
    height: 250%;
}

#img3{
    width: 226px;
    margin: 0 auto;
}

.boite1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
   
}

.fond_boite{
    background-image: url("images/feuille.png");
    width: 300px;
    height: 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#grosse_boite2{
    display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
    
}


.titre{
    font-size:25px;
    text-align: center;
    color: #8e4f50;
   

}












 




/*Page recherche*/

#main_recherche{
    
    margin-top: 35%;

}

#h1{
    font-family:"Yeseva One", serif;
       color: #B36B6C;
}

#h2{
    font-family:Arial, Helvetica, sans-serif;
    color: #B36B6C;

 }

#recherche{
    background-color: #B36B6C;
    border: solid  #B36B6C;
    border-radius: 15px;
    font-size: 17px;
    color:#FFF4DE;
    

 }

#formu{
    display: flex;
    justify-content: center;
    border: dashed 3px #B36B6C;
    padding: 20px;
    border-radius: 50px; 
   
    
}

#recherche{
 height: 50px;
}




 /*footer*/
 hr{
    border-color: #B36B6C;
    width: 70%;
    
 }

p{
   font-size: 10px;
   display: flex;
   justify-content: center;
   color: #B36B6C;
   font-family:Verdana, Geneva, Tahoma, sans-serif;
   
 }


.retour1{
    text-decoration: none;
    border: dashed 3px #B36B6C;
    padding: 5px;
    border-radius: 50px ;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: #B36B6C;
    justify-content: center;
    display:flex ;
    margin: 6px;
 }
    

 /*listing*/
#main_listing{
    margin-top: 150px;
}



.boite{
    background-image: url("images/feuille.png");
    padding-bottom: 20px;
    flex-direction: column;
    display: flex;
}

 
.liste{
    margin-top: 100px;
}



.classearticle{

    display: flex;
    flex-direction: column;
    align-items: center;
}


/*admin*/

.gestion{
    border-radius: 10px ;
    border: solid 3px #B36B6C;
    text-decoration: none;
    color: #8e4f50;
    font-size: 20px;
    margin: 19px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
}

.div_gestion{
    justify-content: space-between;
    display: flex;
    width: 100%;
}


/*table2gestion*/

.ajouter2{
    color:  #479506;
    border: dashed 3px #8ac40d ;
    text-decoration: none;
    font-size: 15px;
    margin: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    margin-bottom: 10px;
}

#main_tab3{
    margin-top: 200px;
   

}
/* Style de base pour le tableau */
.table_romans table {
    width: 100%;
    border-collapse: collapse;
  }
  
  /* Style des cellules du tableau */
  .table_romans td, .table_romans th {
    border: 3px solid  #f5ddac;
    padding: 8px;
    text-align: left;
  }
  
  

  
  /* Style des lignes impaires */
  .table_romans tr:nth-child(odd) {
    background-color: #d79596;
  }
  

  .tbl_rm{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
  }




/*table2_newforme*/
/* Style de base pour le formulaire */
#main_tab1 {
    margin-top: 200px;
    max-width: 400px;

    padding: 20px;
    background-image: url("images/feuille.png");
    border-radius: 5px;
  }


  #main_tab1 form{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   
  }
  
#main_tab1 form input[type="submit"]{
    border-radius: 10px ;
    border: solid 3px #B36B6C;
    text-decoration: none;
    color: #8e4f50;
    font-size: 20px;
    margin: 19px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    background-color: white;
}





/*GESTION_TAB1*/

#main_tab12{
    margin-top: 200px;
}
/* Style général du tableau */
.table_1 table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Permet le défilement horizontal sur les petits écrans */
    display: flex;
    
}





.imagedonnees2{
width: 50px;

}
}

 
  


    /*------------------------------------*\
        $Version Desktop
    \*------------------------------------*/

    @media screen and (min-width: 481px) {
   
        body{
            background-color: #FFF4DE;
            margin: 0;
            
        
        
        }
        #main_tab12{
            margin-top:800px;
        }
        
        #title{
            width: 6%;
      
    
        }
      
    header{
        display: flex;
        justify-content: center;
    }
        
        #navigation-principale {
            display: flex;
            flex-direction: row;
            text-transform: uppercase;
            text-decoration: none;
            justify-content: space-around;
            padding-bottom: 15px;
            align-items: center; 
        }
        
        #navigation-principale a {
            margin-top: 5px;
            padding: 5px;
            text-decoration: none;
            font-family: "Inknut Antiqua", serif;
            color: #B36B6C;
            font-size: 30px;
           
        }
        
        .active  {
            color: #dfe708;}
    aside{
        display: flex;
        flex-direction: column;
    }
    
    
        #logo{
            width:700px;
            display: flex;
            justify-content: center;
            margin: 0 auto ;
            padding: 15px;
        
           
        
        }
        #champs{
            width: 100%;
            z-index: -100;
            overflow: hidden;
            position: absolute;
          
          
    
        
        }
    
    
    /*accueil*/
    
    #main_accueil{
       
        display: flex;
        margin-top: 580px;
        flex-direction: column;

    
    
    }
    
    .img1{
       width: 500px; 
       
    }
    .img2{
        width: 400px;
        margin: 0 auto;
    }
    .img3{
        width: 400px;
        margin: 0 auto;
    }
    
    
    
    #img2{
        width: 250%;
        height: 250%;
    }
    #img3{
        width: 90%;
        
        
      
    }
    
    .boite1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-top:200px ;
        padding-bottom: 100px;
       
    }
    
    .fond_boite{
        background-image: url("images/feuille.jpg");
        width: 700px;
        height: 450px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
     
    #grosse_boite2{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        
    }
    
    
    .titre{
        font-size:35px;
        text-align: center;
        display: flex;
        justify-content: center;

       
    
    }
    
    
    
    
    
    
    
    
    
    

     
    /*Page listing*/

#h1livre{
   color:black ; 
   margin-top: 200px;

   
}
 
    /* Style pour la boîte principale */
div.boite {
    width: 80%; /* Largeur de la boîte */
    margin: 0 auto; /* Centrer horizontalement */
    padding: 20px; /* Espacement intérieur */
}

/* Style pour chaque article de roman */
article.classearticle {
    margin-bottom: 20px; /* Espacement entre chaque article */
    border: 1px solid #ccc; /* Bordure pour chaque article */
    padding: 10px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
}

/* Style pour le titre du roman */
h2.titredonnee {
    margin: 0; /* Supprimer la marge par défaut */
    font-size: 1.5em; /* Taille de police */
    color: #333; /* Couleur du texte */
}

/* Style pour les autres informations du roman */
p.donnees {
    margin: 5px 0; /* Espacement des paragraphes */
    color: #666; /* Couleur du texte */
    font-size: 20px;
}

/* Style pour l'image du roman */
img.imagedonnees {
    max-width: 100%; /* Image s'ajuste à la largeur du conteneur */
    height: auto; /* Hauteur automatique pour conserver les proportions */
    display: block; /* Pour éviter les marges indésirables */
    margin-top: 10px; /* Espacement par rapport aux autres éléments */
}


 

    
    /*Page recherche*/
    
    #main_recherche{
        
        margin-top: 55%;
        padding-bottom: 500px;
    
    }
    
    #h1{
        font-family:"Yeseva One", serif;
           color: #B36B6C;
    }
    
    #h2{
        font-family:Arial, Helvetica, sans-serif;
        color: #B36B6C;
    
     }
    
    #recherche{
        background-color: #B36B6C;
        border: solid  #B36B6C;
        border-radius: 15px;
        font-size: 17px;
        color:#FFF4DE;
        
    
     }
    
    #formu{
        display: flex;
        justify-content: center;
        border: dashed 3px #B36B6C;
        padding: 20px;
        border-radius: 50px; 
       
        
    }
   
    #recherche{
     height: 50px;
    }
    
    
   
     /*footer*/
     hr{
        border-color: #B36B6C;
        width: 70%;
        
        
     }
    
    p{
       font-size: 30px;
       display: flex;
       justify-content: center;
       color: #B36B6C;
       font-family:Verdana, Geneva, Tahoma, sans-serif;
       
     }
    
    
    .retour1{
        text-decoration: none;
        border: dashed 3px #B36B6C;
        padding: 5px;
        border-radius: 50px ;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 20px;
        color: #B36B6C;
        justify-content: center;
        display:flex ;
        margin: 6px;
     }
        
     
    /*table1_gestion*/
    #main_tab1{
     margin-top: 819px;

        
    }
       
    



    
    
   /*admin*/

#main_listing{
    margin-top: 760px;
}

.gestion{
    border-radius: 10px ;
    border: solid 3px #B36B6C;
    text-decoration: none;
    color: #8e4f50;
    font-size: 20px;
    margin: 19px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
}

.div_gestion{
    justify-content: space-between;
    display: flex;
    width: 100%;
}



/*table2gestion*/

.ajouter2{
    color:  #479506;
    border: dashed 3px #8ac40d ;
    text-decoration: none;
    font-size: 15px;
    margin: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    margin-bottom: 10px;
}

#main_tab2{
    margin-top: 200px;
   

}
/* Style de base pour le tableau */

#main_tab3{
margin-top: 811px;
}
.table_romans table {
    width: 100%;
    border-collapse: collapse;
  }
  
  /* Style des cellules du tableau */
  .table_romans td, .table_romans th {
    border: 3px solid  #f5ddac;
    padding: 8px;
    text-align: left;
  }
  
  

  
  /* Style des lignes impaires */
  .table_romans tr:nth-child(odd) {
    background-color: #d79596;
  }
  

  .tbl_rm{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
  }


   
  /*table2_newforme*/
/* Style de base pour le formulaire */
#main_tab1 {
    margin-top: 800px;
    max-width: 400px;

    padding: 20px;
    background-image: url("images/feuille.png");
    border-radius: 5px;
  }


  #main_tab1 form{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   
  }
  
#main_tab1 form input[type="submit"]{
    border-radius: 10px ;
    border: solid 3px #B36B6C;
    text-decoration: none;
    color: #8e4f50;
    font-size: 20px;
    margin: 19px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    background-color: white;
}




}