/* Réinitialisation des styles de base */
body {
	margin: 0; /* Aucune marge */
	padding: 0; /* Aucun rembourrage */
	font-family: Arial, sans-serif; /* Police de caractère par défaut */
}


/* ################################## */
/*          NAVIGATION BAR */
/* ################################## */

/* Styles pour la barre de navigation */

header {
    position: fixed; /* La barre de navigation reste fixe en haut de la page lors du défilement */
    top: 0; /* La barre de navigation est fixée en haut de la fenêtre du navigateur */
    left: 0; /* La barre de navigation est placée tout à gauche */
    width: 100%; /* La largeur de la barre de navigation est égale à 100% de la largeur de la fenêtre du navigateur */
    z-index: 9999; /* La barre de navigation est au-dessus de tous les autres éléments */
}

.navbar {
    display: flex; /* Affichage en flexbox pour aligner les éléments horizontalement */
    justify-content: space-between; /* Espacement égal entre les éléments de navigation pour les aligner à gauche et à droite */
    align-items: center; /* Alignement vertical des éléments de navigation au centre */
    background-color: rgba(0, 0, 0, 0); /* Couleur de fond transparente */
    padding: 20px; /* Espace autour des éléments de navigation */
}

.navbar-brand {
    color: #b71414; /* Couleur du texte du nom du site */
    font-weight: bold; /* Texte en gras */
    font-size: 24px; /* Taille de la police */
    margin-right: auto; /* Positionner le nom du site à gauche */
}

.navbar ul {
    list-style: none; /* Supprimer les puces de liste */
    margin: 0; /* Aucune marge */
    padding: 0; /* Aucun rembourrage */
    display: flex; /* Affichage en flexbox pour les éléments de navigation */
}

.navbar li {
    margin: 0 10px; /* Marge entre les éléments de navigation */
}

.navbar li:first-child {
    margin-left: 0; /* Aucune marge à gauche pour le premier élément de navigation */
}

.navbar li:last-child {
    margin-right: 0; /* Aucune marge à droite pour le dernier élément de navigation */
}

.navbar a {
    text-decoration: none; /* Aucun soulignement des liens */
    color: #fff; /* Couleur du texte des liens */
    font-weight: lighter; /* Texte plus léger */
    font-size: 20px; /* Taille de la police */
}

/* ################################## */
/*         NAVIGATION BAR END */
/* ################################## */


/* Styles pour la bannière d'image */
.banner {
	position: relative; /* Position relative pour positionner les éléments à l'intérieur */
	height: 100vh; /* Hauteur de la bannière pour qu'elle couvre tout l'écran */
	background-color: #000; /* Couleur de fond pour la bannière */
}

.banner img {
	position: absolute; /* Position absolue pour positionner l'image en arrière-plan */
	top: 0; /* Aligner l'image en haut de la bannière */
	left: 0; /* Aligner l'image tout à gauche de la bannière */
	width: 100%; /* La largeur de l'image est égale à 100% de la bannière */
	height: 100%; /* La hauteur de l'image est égale à 100% de la bannière */
	object-fit: cover; /* Redimensionnement de l'image pour qu'elle couvre toute la bannière */
}

.banner-text {
    position: absolute; /* Position absolue pour positionner le texte sur l'image */
    top: 50%; /* Positionner le texte à 50% du haut de la bannière */
    left: 50%; /* Positionner le texte à 50% de la gauche de la bannière */
    transform: translate(-50%, -50%); /* Déplacer le texte de moitié de sa propre taille */
    text-align: center; /* Alignement du texte au centre */
    color: #f3ecec; /* Couleur du texte */
    font-size: 48px; /* Taille de la police */
    font-family: 'Roboto', sans-serif; /* Police de caractère */
}

.section-heading {
    font-size: 36px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    text-align: center; /* Alignement du texte au centre */
    margin-top: 70px; /* Marge en haut */
    margin-bottom: 30px; /* Marge en bas */
}

.banner-text h1 {
	font-size: 80px; /* Taille de la police */
	margin: 0; /* Aucune marge */
}

.banner-text p {
	font-size: 35px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
	margin: 20px 0 0; /* Marge en haut */
}

/* ################################## */
/*          Main menu */
/* ################################## */

main {
  margin-top: 2vh; /* Marge en haut pour que le contenu principal ne soit pas caché sous la bannière */
  margin: 0px; /* Aucune marge */
    padding: 20px; /* Rembourrage autour du contenu principal */
  display: flex; /* Affichage en flexbox pour aligner les éléments horizontalement */
  justify-content: space-between; /* Espacement égal entre les éléments pour les aligner à gauche et à droite */
  background-color: #fcfcfc; /* Couleur de fond du contenu principal */
}

.article-section, .project-section {
  display: flex; /* Affichage en flexbox pour aligner les éléments horizontalement */
  flex-direction: column; /* Aligner les éléments en colonne */
  align-items: center; /* Alignement vertical des éléments au centre */
  margin: 20px; /* Marge autour des sections */
}

.article-section h2, .project-section h2 {
  font-size: 1.5rem; /* Taille de la police pour les titres de section */
  margin-bottom: 10px; /* Marge en bas des titres de section */
}

.article-section img, .project-section img {
  max-width: 100%; /* Largeur maximale de l'image à 100% */
  height: auto; /* Hauteur automatique de l'image */
  margin-bottom: 10px; /* Marge en bas des images */
}

.btn-article, .btn-project {
  display: inline-block; /* Affichage en ligne pour les boutons */
  background-color: #670d3f; /* Couleur de fond du bouton */
  color: white; /* Couleur du texte du bouton */
  text-align: center; /* Alignement du texte au centre */
  font-size: 1rem; /* Taille de la police */
  font-weight: bold; /* Texte en gras */
  padding: 10px 20px; /* Rembourrage du bouton */
  border-radius: 5px; /* Bordures arrondies */
  text-decoration: none; /* Aucun soulignement pour les liens */
  margin-top: 10px; /* Marge en haut du bouton */
}

.btn-article:hover, .btn-project:hover {
  background-color: #1010a7; /* Couleur de fond du bouton au survol */
}

.btn-article:active, .btn-project:active {
  background-color: #3e8e41; /* Couleur de fond du bouton lorsqu'il est cliqué */
  transform: translateY(1px); /* Décalage vers le bas lorsqu'il est cliqué */
}

.latest-project .project-img .btn {
  background-color: #6c757d; /* Couleur de fond du bouton */
  color: #fff; /* Couleur du texte du bouton */
}

/* ################################## */
/*         main menu end */
/* ################################## */


/* Styles pour le pied de page */
footer {
    background-color: #333; /* Couleur de fond du pied de page */
    color: #fff; /* Couleur du texte du pied de page */
    padding: 20px; /* Rembourrage autour du contenu du pied de page */
    text-align: center; /* Alignement du texte au centre */
}