/* -------------------- GENERALITES SUR LE PIED DE PAGE -------------------- */

footer {
	width: 100%; /* Le footer mesure 100% de la largeur du parent (body) */
	height: 100px; /* Le footer mesure 100px de hauteur */
	box-sizing: border-box; /* Définit que les dimensions de l'élément (100px) contiendront la bordure (0px) + le padding (10px de chaque côté) + le contenu du footer */
	padding: 10px; /* Pour mettre un espace entre le bord de la page et le contenu du footer */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%); /* Effet de dégradé, qui va de bas en haut (to top), d'un noir 65% d'opacité à un transparent */
	color: white; /* Le texte est blanc */
}
footer a:hover {
	text-decoration: underline;
}

/* -------------------- GENERALITES SUR LE CONTENEUR -------------------- */

footer .footer-conteneur {
	display: flex; /* Mode flexbox */
	justify-content: space-around; /* Mode flexbox : le contenu est justifué dans la boîte : espaces identiques de part et d'autre */
	align-items: center; /* Mode flexbox : les items sont alignés au centre le long de l'axe principal (horizontal par défaut) */
	height: 100%; /* Le conteneur mesure 100% de la hauteur du parent (footer) */
	width: 100%; /* Le conteneur mesure 100% de la largeur du parent (footer) */
}

footer .footer-conteneur div {
	flex-grow: 1; /* Mode flexbox : ce contenu a l'espacement le plus faible dans son parent (footer-conteneur) */
	height: 100%; /* L'élément mesure 100% de la hauteur de son parent */
	display: flex; /* Le contenu sera structuré selon le mode flexbox */
	align-items: center; /* Les items du contenu seront structurés au centre selon l'axe principal (horizontal par défaut) */
}

/* -------------------- ESPACE DE COPYRIGHT -------------------- */

footer .footer-conteneur .copyright {
	flex-grow: 2; /* Mode flexbox : ce contenu a l'espacement le plus élevé dans son parent (footer-conteneur) */
}

/* -------------------- ESPACE DE CONTACT -------------------- */

footer .footer-conteneur .contact {
	flex-direction: column; /* Le mode flexbox est activé dans le sens vertical (colonne) */
	justify-content: center; /* Le contenu sera en position centrée sur l'axe principal (défini en vertical) */
}
footer .footer-conteneur .contact address {
	text-align: center; /* Le texte est centré */
}

/* -------------------- ESPACE DES MENTIONS -------------------- */

footer .footer-conteneur .mentions {
	flex-direction: column; /* Le mode flexbox est activé dans le sens vertical (colonne) */
	justify-content: center; /* Le contenu sera en position centrée sur l'axe principal (défini en vertical) */
}

/* -------------------- ESPACE DE L'AFFICHAGE DATE/HEURE -------------------- */

footer .footer-conteneur .heure #heure {
	justify-content: center; /* Le contenu sera en position centrée sur l'axe principal (horizontal par défaut) */
}