/* ---------------------- CSS GENERAL (TOUTES PAGES CONFONDUES) ---------------------- */

/* ----- STRUCTURE ----- */

html {
  height: 100%; /* Définit que le site fait 100% de la hauteur de la page dans le navigateur */
  width: 100%; /* Définit que le site fait 100% de la largeur de la page dans le navigateur */
}

body {
  height: 100%; /* La hauteur du 'body' équivaut à 100% de la hauteur de son parent (html) */
  width: 100%; /* La largeur du 'body' équivaut à 100% de la largeur de son parent (html) */
  margin: 0;   /* Permet de reset la marge au chargement de Google Chrome car le navigateur en met une par défaut */
}

#main {
  width: 100%; /* La largeur du 'main' fait 100% de la largeur de son parent (html) */
  display: flex; /* Son contenu est structuré en mode flexbox */
  flex-direction: column; /* Mode flexbox : le contenu est structuré en colonne (axe vertical) */
  align-items: center; /* Mode flexbox : le contenu est centré le long de l'axe principal (défini en axe vertical); */
  justify-content: space-around; /* Mode flexbox : le contenu est justifié dans la boîte (espaces identiques entre chaque élément); */
  min-height: calc(100% - 200px); /* La hauteur du 'main' mesure 100% de la hauteur de son parent (html), moins la hauteur du header (100px), moins la hauteur du footer (100%) */
}

/* ----- IMAGE DE FOND ----- */

.fond {
  position: fixed; /* Position fixe pour que l'image de fond ne bouge pas malgré les scrolls */
  height: 100%; /* L'image de fond mesure 100% de la hauteur de son parent (html < navigateur) */
  width: 100%; /* L'image de fond mesure 100% de la largeur de son parent (html < navigateur) */
  background-image: url("../images/fond-accueil.jpg"); /* Image de fond */
  background-repeat: no-repeat; /* L'image de fond ne se répète pas */
  background-attachment: fixed; /* L'image de fond reste attachée */
  background-size: cover; /* L'image de fond couvre toute la page */
  background-position: center; /* L'image de fond se positionne à partir du centre */
  z-index: -1; /* Sur la 3ème dimension (profondeur de la page), l'image de fond doit se situer derrière l'ensemble du contenu du site */
}

/* ----- LIENS ----- */

a {
  text-decoration: none; /* Définit que les liens dans le site n'ont pas de décoration (notamment pas de soulignage) */
  color: inherit; /* Définit que les liens dans le site prennent la couleur héritée de leur parent */
}

/* ----- PARAGRAPHES ----- */

p {
  margin: 0; /* Permet de reset la marge au chargement de Google Chrome car le navigateur en met une par défaut */
}

/* ----- PHOTOS ----- */

.portrait {
  width: 100%; /* Les photos sur le site qui sont définies en mode portrait ont une largeur correspondant à 100% de celle de leur parent */
  height: auto; /* Leur hauteur est calculée automatiquement à partir de la largeur */
}

.paysage {
  height: 100%; /* Les photos sur le site qui sont définies en mode paysage ont une hauteur correspondant à 100% de celle de leur parent */
  width: auto; /* Leur largeur est calculée automatiquement à partir de la hauteur */
}