/* ligne de commentaire, ignorée par CSS*/
body
{
background-image : url('imagesP/1540016.jpg'); 
background-attachment : fixed ;
background-size: cover ;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;


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



header
{
position : fixed ;
position : top;
margin-top : -20px;
width : 100.5% ;
height : 70px ;
background: linear-gradient(135deg, rgb(44, 44, 44), #000000) ;
opacity : 0.8;
color: #fff;
padding: 10px;
box-shadow : 0 6px 18px rgba(0,0,0,0.5); 
border-radius : 20px ;

display : flex ;
flex-direction : row ;
justify-content: center;
}

nav ul
{
list-style-type : none ;
width : 100% ;
text-align: center;

display : flex ;
flex-direction : row ;
justify-content : space-between;
align-items : center;
} 

nav a
{
color :rgb(198,215,223) ;
text-decoration: none;
}


nav a:hover
{
color :rgb(255, 255, 255) ;
}


.btn-hover {
    display: inline-block;       
    padding: 14px 30px;          
    background: #2c2c2c;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;       
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow : 0 6px 18px rgba(26, 26, 26, 0.5); 
}

.btn-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn-hover:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}


.mode
{
left: 20%;
top: 20%;
box-shadow : 0 6px 18px rgba(0,0,0,0.0); 
}

.effect {
border-radius : 10px ;
box-shadow : 0 10px 18px rgba(0,0,0,0.5); 
}



h1
{
color : white;
font-style : italic ;
font-family : "Arial", serif ;
text-align : center ;
background: linear-gradient(20deg, grey, #000000) ;
padding: 10px 0;
border-radius : 20px ; 
width : 20% ;
opacity : 0.8;
font-size : 1.4em ;
margin-top : 10% ;
box-shadow : 0 6px 18px rgba(0,0,0,0.5); 

display : flex ;
justify-content : center ;
align-items: center;
}



section
{
width : 100% ;
margin-bottom : 10% ;
font-size : 1.5em;
margin-top : 10% ;

display : flex ;
flex-direction : row ;
justify-content : space-around ;
}

article
{
margin-left: 10px;
background : linear-gradient(135deg, rgba(255,255,255,0.4), rgba(0, 0, 0, 0.3));
border-radius : 20px;	
width : 50% ;
font-family : "Arial", serif ;
color : rgb(0,0,0) ;
box-shadow : 0 6px 18px rgba(0,0,0,0.4); 
text-align: center;

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

article a:hover
{
text-decoration: none;

}

aside
{
width : 45%;

display : flex ;
flex-direction : row ;
justify-content: center;
}

footer
{
position : bottom ;
margin-bottom : -2% ;
position : static;
background: linear-gradient(135deg, rgb(138, 138, 138), #000000) ; 
color : rgb(255,255,255) ; 
width : 100.8%;
border-radius : 3px;
opacity : 0.8;

display : flex ;
flex-direction : row ;
align-items : flex-end;
justify-content : space-around;
}

footer h3
{
font-size : 1.2em ; 
}