/* Général */
h1,h2,h3
{
font-family:'Ailerons';
text-align:center;
} 
body
{
font-size:1.2em;
font-family:'Inter';
background-color:#FAF0E6;
text-align:justify;
}

@font-face
{
font-family:'Inter';
src :url('../font/Inter-Regular.ttf');
}

@font-face
{
font-family:'Ailerons';
src :url('../font/Noir_medium.otf');
}

fieldset
{
border:none;
}

legend
{
margin-left:auto;
margin-right:auto;
}

.errors
{
color:#FF0000;
}

/*Index*/

.index_container
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
width:1000px;
margin:auto;
line-height:1.8;
}

/*Navbar */

#Navbar_container
{
list-style:none;
text-transform:uppercase;
display:flex;
flex-direction:row;
flex-wrap:wrap;
background-color:#1E920F;
justify-content:space-evenly;
align-items:center;
height:70px;
margin:auto;
} 

.Navbar_items:nth-child(3)
{
order:2;
}

.Navbar_items:nth-child(1)
{
order:2;
}

.Navbar_items:nth-child(4)
{
order:2;
}

.Navbar_items:nth-child(2)
{
order:1;
}

.Navbar_items:nth-child(5)
{
order:3;
}

img
{
width:120px;
height:75px;
}

.User_logo
{
margin-left:auto;
margin-right:auto;
display:block;
}

.Journal
{
border-collapse:collapse;
page-break-inside: avoid;
}

td,th
{
border:2px solid green;
text-align:center;
}

.Compteur
{
border:1px solid black;
width:240px;
}

/*Meta*/
.Meta_container
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
width:1000px;
margin:auto;
line-height:1.8;
}

.gestion_container
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:center;
align-items:center;
margin:auto;
}

.form_container
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:center;
align-items:center;
margin:auto;
background-color:#FACFA5;
border:3px solid #E3C28A;
border-radius:10%;
}

.Macro_item, .form_item
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
align-items:center;
line-height:1.8;
border:3px solid #FACFA5;
border-radius:10%;
background-color:#FAF0E6;
width:105%;
margin-top:5%;
}

.obj_item
{
background-color:#FAF0E6;
border-radius:10%;
border:3px solid #FACFA5;
padding:10px;
}

/* Macro*/

.Macro_container
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
width:1000px;
margin:auto;
line-height:1.8;
}

.Liens_menu
{
text-decoration:none;
color:white;
}

.Liens_menu:visited
{
color:white;
}

.connexion:visited
{
color:black;
}

.connexion
{
color:black;
text-align:center;
}

.Liens_menu:hover, .connexion:hover
{
color:red;
}

footer a
{
color:white;
}

footer a:visited
{
color:white;
}

.ici
{
color:black;
}

.ici:visited
{
color:black;
}

footer a:hover,.ici:hover
{
color:red;
}

.hr 
{
    align-items: center;
    display: flex;
    text-align: center;
}

.hr::before,.hr::after 
{
    border-top: .0625em solid;
    content: "";
    flex: 1;
    margin: 0 .5em;
}

/* Calcul */

.Calcul_container
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
width:1000px;
margin:auto;
line-height:1.8;
}

/* Input */

input[type=number]:focus 
{
border: 2px solid #555;
outline:none;
}

.User_submit
{
cursor:pointer;
margin-left:20px;
width:83%;
margin-left:10%;
}

input[type=submit]:focus
{
opacity:0.5;
}

input[type=submit]
{
margin-top:15px;
background-color:#FAECDE;
border-color:#FDDDD4;
padding:10px;
}

.mobil,input[type=password]
{
height:35px;
font-size: 1.2em;
width:80%;
margin-left:10%;
margin-top:10px;
}

.User_label, .connexion
{
margin-left:10%;
}

.cat
{
width:100px;
margin:auto;
}

.choisir
{
margin-top:10px;
padding:50px;
}

/*Footer*/

.footer
{
padding:15px;
margin:auto;
background-image:url("../images/footer_bg.jpg");
background-attachment:fixed;
color:white;
line-height:1.5;
}

.dfooter
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}

.cookie
{
width:250px;
border:1px solid #696969;
border-radius:10%;
padding:10px;
background-color:#696969;
color:white;
position: fixed;
bottom:10px;
right:10px;
}

.cookie a:hover
{
background-color:#C0C0C0;
}


.cookie a
{
text-decoration:none;
text-align:center;
color:#708090;
background-color:#A9A9A9;
border:1px solid #708090;
border-radius:35%;
padding:5px;
float:right;
}

.User_box
{
display:flex;
flex-direction:column;
border:3px solid #FAF0E6;
border-radius:10%;
width:700px;
margin:40px auto 15px auto;
padding-bottom:20px;
background-color:#FACFA5;
}

.User_container
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
align-items:center;
line-height:2.2em;
}

.User_item
{
margin:auto 50px auto auto;
width:350px;
border:2px solid #FACFA5;
border-radius:14%;
padding:10%;
background-color:#FAF0E6;
}

.table
{
border-collapse: collapse;
width:20%;
table-layout:fixed;
}

.email_box
{
display:flex;
flex-direction:column;
flex-wrap:wrap;
margin-left:35%;
margin-top:5%;
margin-bottom:5%;
border:1px solid #FACFA5;
width:19%;
height:100px;
padding:100px;
background-color:#FACFA5;
border-radius:10%;
}

.recup_box
{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
flex-wrap:wrap;
margin-left:35%;
border:1px solid #FACFA5;
width:19%;
height:100px;
padding:100px;
background-color:#FACFA5;
border-radius:10%;
}

.email_sub
{
margin-left:38%;
margin-top:30px;
}

/* Media Queries */ 
@media screen and (max-width:1024px)

{

.mobil,input[type=password]
{
height:35px;
font-size: 1.9em;
width:80%;
line-height:1.2em;
}

.Meta_container, .index_container,.Macro_item, .Physical_item, .Data_item, .Sex_item, .form_item
{
text-align:justify;
width:auto;
}

.Macro_container
{
display:block;
width:auto;
text-align:justify;
}

footer a:visited
{
color:black;
}


footer a:hover
{
color:red;
}

.footer
{
color:black;
font-weight:bold;
}

footer a
{
color:black;
}


.connexion:visited
{
color:gray;
}

.connexion
{
color:gray;
}

.connexion:hover
{
color:red;
}

.Journal {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.table
{
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 35%;
  table-layout: fixed;
}

.Journal tr {
  border: 2px solid green;
  padding: .35em;
}

.Journal th, .table th,
table td {
  padding: .625em;
  text-align: center;
}

.Journal th{
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.User_box
{
margin-top:50%;
padding:50px;
}

.User_container
{
margin-left:5%;
line-height:2.2em;
padding:15px;
}

.User_item
{
margin-left:-8%;
}

.recup_box
{
line-height:2.2em;
width:30%;
margin-left:25%;
margin-top:10%;
}

select
{
width:250px;
}

.email_box
{
margin-left:20%;
margin-top:38%;
width:38%;
}

input[type=text],input[type=password],input[type=email]
{
height:35px;
font-size: 1.5em;
width:80%;
line-height:1.2em;
}

.User_submit
{
width:83%;
}

@media screen and (max-width: 600px) {
  .Journal {
    border: 0;
  }

  .Journal thead {
    border: none;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .Journal tr {
    display: block;
    margin-bottom: .625em;
  }
  
  .Journal td {
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  .table td
  {
	display: block;
    font-size: .8em;
    }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  

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

#Navbar_container
{
flex-direction:column;
flex-wrap:wrap;
height:auto;
width:auto;
}


}