/* Paramétre global de la page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;	
    font-size: 18px; /* Augmenter la taille de la police */
    width: 100%; /* taille de la page en largeur défaut 100% */
    height: 100vh; /* taille de la page en hauteur défaut 100% */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Container principal */
.container{
    width: 100%; /* taille de la page en largeur défaut 100% */
    height: 100%; /* taille de la page en hauteur défaut 100% */
    overflow: hidden;
    background-color: rgb(255, 255, 255) ;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Permet d'espacer le contenu et le footer */
    flex-grow: 1; /* Permet à .container de prendre toute la hauteur disponible */
    
}

.logo {
    background-color: rgb(255, 255, 255) ;
    height: 50vh; /* taille de la page en hauteur défaut 100% */
    text-align: center;
    align-content: center;
}

.logo img {

}

/* Espace dédié au lien Mail */
.contact {
    background-color: rgb(255, 255, 255) ;
    text-align: center;
    text-decoration: underline;
    font-size: 1rem;
    font-style: italic;
}

.contact a{ 
    margin: 0 15px; /* Paramétre par défaut: margin: 0 15px */
    background-color: rgb(255, 255, 255);
	color: #0b2640; /* difie la taille de police */     
    width: 50px;
    height: 50px;
    display: inline;/* Asure que l'élement soit en ligne et respect les dimentions */
    line-height: 50px; /* Centrage vertical */
    transition: background-color 0.3s;
}
.contact a:hover{
    background-color: #0b2640;
    color: white; /* Couleur de la police */
    border-radius: none;
    display: inline; 
}
/* Section des réseaux sociaux */
.social{
    margin-top: auto;/* Déplace les réseaux sociaux vers le bas */
    color: #0b2640; /* difie la taille de police */
    text-align: center;
    font-size: 1rem;
    font-style: bold;
    text-decoration: none;
    padding: 20px 0;
   
}
/* Icônes des réseaux sociaux */
.social-links {
    background-color: rgb(255, 255, 255) ;
    margin-top: 30px; /* Espace libre au dessus défaut 30px */
	margin-bottom: 40px; /* Espace libre au dessous défaut 40px */
	text-align: center;
    align-content: center;
    display: flex;
    transition: background-color 0.3s;
    justify-content: center;
    gap: 15px;
}

.social-links a {
    margin: 0 15px; /* Paramétre par défaut: margin: 0 15px */
	display: inline-block; /*defaut : inline-block */
	width: 50px;
	height: 50px;
   
}

.social-links a:hover {
    background-color: #0b2640;
    width: 50px; /* Paramétre de l'image défaut 50px */
    height: 50px;/* Paramétre de l'image défaut 50px */
    border-radius: 18%;
}

.social-links img {
    /* Ajuste la taille de l'icône */
    width: 100%;
    height: 100%;
}

/* Pied de page */
footer { 
    position: fixed;
    bottom: 0; /* Espace libre au dessous */
    width: 100%; /* défini largeur à exploiter , espace dédié */
    height: 50px;/* Paramétre de l'image défaut 50px */
    background-color: #0b2640; /* Couleur de fond */
    text-align: center; /* defini l'enplacement dans l'espace dédié */
    color: #fcfcfff3; /* Couleur de la police */
    font-size: 0.8rem; /* modifie la taille de police */
}

/* Optimisation mobile */
@media only screen and (max-width: 600px) {
    body {
            background-color: lightblue;

        .container {
            width: 50%;
            padding: 0 15px;
        }
    
        .social-links a {
            width: 40px;
            height: 40px;
        }
        .contact a {
            width: 40px;
            height: 40px;
        }
    }
}