body
{
    --reso:1;
}

@media (-webkit-device-pixel-ratio:1.1)
{
    body
    {
        --reso:0.9090;
    }   
}

@media (-webkit-device-pixel-ratio:1.25)
{
    body
    {
        --reso:0.8;
    }   
}

@media (-webkit-device-pixel-ratio:1.5)
{
    body
    {
        --reso:0.66;
    }   
}

@media (-webkit-device-pixel-ratio:1.75)
{
    body
    {
        --reso:0.5714;
    }   
}

@media (-webkit-device-pixel-ratio:2)
{
    body
    {
        --reso:0.5;
    }   
}

@media (-webkit-device-pixel-ratio:2.5)
{
    body
    {
        --reso:0.4;
    }   
}

@media (-webkit-device-pixel-ratio:3)
{
    body
    {
        --reso:0.333;
    }   
}

@media (-webkit-device-pixel-ratio:0.5)
{
    body
    {
        --reso:2;
    }   
}


body
{
    background: url("Brown.jpg");
    background-size: cover;
        
    background-attachment: fixed;
    width: 100%;
    color: #FFFDD0;

}

html {

    width: 100%;

}


@font-face {
    font-family:'Daniels';
    src: url('Daniels.ttf') format('truetype'),
         url('Daniels.eot') format('eot'),
         url('Daniels.woff') format('woff'),
         url('Daniels.svg') format('svg');

}

header
{
    background: url("Back_head.jpg");
    background-size: cover;

    font-size: calc(var(--reso)*1.5em);
    font-family: "Trebuchet MS ";
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid black;
}



#Bloc-titre
{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-top: 10px;

}

#Logo
{
    display: flex;
    flex-direction: row;

}

#logo img
{
    width: calc(var(--reso)*220px);
    height: calc(var(--reso)*160px);
}

#signature img
{
    width: calc(var(--reso)*530px);
    height: calc(var(--reso)*150px);
}

#bdp img
{
    width: calc(var(--reso)*530px);
    height: calc(var(--reso)*150px);
}

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: calc(var(--reso)*40px);
    margin-bottom: calc(var(--reso)*40px);
}

nav a
{
    font-size: 1.5em;
    color: #181818;
    padding-bottom: calc(var(--reso)*3px);
    border-bottom: 2px solid #181818;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 2px solid #760001;
}




footer
{
    background: url("Back_foot.jpg");
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
}

#bas
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#bdp
{
    font-size: 1.5em;
    font-family: "Trebuchet MS ";
    margin-left: calc(var(--reso)*20px);
    margin-top: calc(var(--reso)*30px);
    margin-bottom: calc(var(--reso)*50px);

}

#contact
{
    margin-left: calc(var(--reso)*300px);
    margin-right: calc(var(--reso)*300px);
    margin-top: calc(var(--reso)*70px);
    margin-bottom: calc(var(--reso)*70px);
    display: flex;
    justify-content: center;
    align-items: center;
}

#bdp2
{  
    display: flex;
    flex-direction: column;
    color: #FFFDD0;
    font-family: Dayrom, serif;
    font-size:  1.5em;
    font-weight: normal;
}

#bdp2 img
{  
    max-width: calc(var(--reso)*20%);  
    height: auto;  
}

#pack1
{  
    display: flex;
    flex-direction: row;
    align-items: center;
    gap : calc(var(--reso)*10px);

}  

#pack2
{  
    display: flex;
    flex-direction: row;
    align-items: center;
    gap : calc(var(--reso)*10px);

}  

#pack3
{  
    display: flex;
    flex-direction: row;
    align-items: center;
    gap : calc(var(--reso)*10px);

}  





footer p
{
    color: #FFFDD0;
    font-family: Dayrom, serif;
    font-size: calc(var(--reso)*0.8em);
    font-weight: normal;
}





section
{
    font-size: calc(var(--reso)*1.5em);
    font-family: "Trebuchet MS";
    /*background: url('divider3.png') repeat-x bottom;*/
    border-bottom: calc(var(--reso)*3px) solid black;

}

.page
{
    margin-top: calc(var(--reso)*100px);
    margin-left: calc(var(--reso)*800px);
    margin-bottom: calc(var(--reso)*100px);
}

.pagination a 
{
    display: inline-block;
    font-size: 1.5em;
    margin: 0 calc(var(--reso)*4px);
    color: #FFFDD0;
    text-decoration: none;

}

.pagination a:hover:not(.active)

form 
{
    display: flex;    
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    justify-content: space-around;
    align-items: left;


}

#form1
{

    margin-bottom: calc(var(--reso)*70px);
    margin-left: calc(var(--reso)*250px);
    margin-right: calc(var(--reso)*1200px);
    margin-top: calc(var(--reso)*50px);
}



label
{       
    display: flex;    
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    /*border: 3px solid black;*/
    margin-bottom: calc(var(--reso)*20px);
    margin-top: calc(var(--reso)*50px);
}

textarea
{
    font-size: calc(var(--reso)*22px);    
}

input 
{
    font-size: calc(var(--reso)*22px);
}

.button
{
  /*background-color: #4CAF50;*/
    display:flex;
    justify-content: center;
    align-items: center;

    margin-right: calc(var(--reso)*220px);
    color: Black;
    padding: calc(var(--reso)*15px) calc(var(--reso)*32px);
    text-align: center;
    font-size: calc(var(--reso)*20px);
}

section h1
{
    margin-bottom: calc(var(--reso)*40px);
    margin-top: calc(var(--reso)*40px);


}


#Description
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--reso)*200px);
    margin-bottom: calc(var(--reso)*70px);
    margin-left: calc(var(--reso)*200px);
    margin-right: calc(var(--reso)*200px);
    margin-top: calc(var(--reso)*50px);

    font-size: calc(var(--reso)*40px);

}

#Description_Info
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--reso)*200px);
    margin-bottom: calc(var(--reso)*70px);
    margin-left: calc(var(--reso)*250px);
    margin-right: calc(var(--reso)*250px);
    margin-top: calc(var(--reso)*50px);

}

#Description_Pres
{
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--reso)*70px);
    margin-left: calc(var(--reso)*200px);
    margin-right: calc(var(--reso)*200px);
    margin-top: calc(var(--reso)*50px);

}

#p1
{
    margin-bottom: calc(var(--reso)*50px);
    margin-top: calc(var(--reso)*10px);
}
#p2
{
    margin-bottom: 10px;
    margin-top: 10px;
}
#p3
{
    margin-bottom: 10px;
    margin-top: 10px;
}
#p4
{
    margin-bottom: 10px;
    margin-top: 10px;
}
#p4bis
{
    margin-bottom: 10px;
    margin-top: 10px;
}
#p5
{
    margin-bottom: 10px;
    margin-top: 10px;
}
#p6
{
    margin-bottom: 10px;
    margin-top: 10px;
}


#p7
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    grid-row-gap:calc(var(--reso)*20px) ;
    margin-bottom: calc(var(--reso)*70px);
    margin-top: calc(var(--reso)*10px);
}

#p8
{
    display: flex;
    flex-direction: row;
    column-gap:calc(var(--reso)*50px) ;
    margin-bottom: 0px;
    margin-top: calc(var(--reso)*70px);
}



#Concours
{
    display: flex;
    flex-direction: column;

    margin-bottom: calc(var(--reso)*70px);
    margin-left: calc(var(--reso)*200px);
    margin-right: calc(var(--reso)*200px);
    margin-top: calc(var(--reso)*50px);
}

/*section li
{
    margin-right: 20px;
    margin-bottom: 20px;
}*/


#Main
{

    margin-bottom: calc(var(--reso)*60px);
    margin-left: calc(var(--reso)*200px);
    margin-right: calc(var(--reso)*200px);
    margin-top: calc(var(--reso)*40px);
}


.column
{
    display: flex;
    flex-wrap: wrap ;
    justify-content: center;
    align-content: center;
    /*border: 3px solid black;*/
    margin : auto;
}


.center 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}



#Description_Pres
{
    margin-left: calc(var(--reso)*220px);
    margin-right: calc(var(--reso)*220px);
}

#img_pres img
{
  width: auto;
  max-width: calc(var(--reso)*400px);
  height: auto;
  max-height: calc(var(--reso)*400px);
}

#img_pres2 img
{
  width: auto;
  max-width: calc(var(--reso)*800px);
  height: auto;
  max-height: calc(var(--reso)*600px);
}

#Sous_paragraphe1
{
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--reso)*30px);
    margin-top: calc(var(--reso)*10px);

}
#Sous_paragraphe2
{
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--reso)*30px);
    margin-top: calc(var(--reso)*50px);

}

#Paragraphe1
{
    display: flex;
    flex-direction: row;
    column-gap: calc(var(--reso)*50px);
    /*border: 3px solid black;*/
}
#Paragraphe2
{
    display: flex;
    flex-direction: row;
    column-gap: calc(var(--reso)*50px);
    /*border: 3px solid black;*/
    margin-bottom: calc(var(--reso)*50px);
}


 /*
#Main img
{  
    max-width: 25%;  
    height: auto;  
}

#Photo
{

    display: flex;
    flex-wrap: wrap ;
    justify-content: space-around;
    align-content: space-between;

    row-gap: 50px;
    column-gap: 80px;
    margin-bottom: 80px;
    margin-left: 0px;
    margin-top: 80px;
}

*/