/* ---------------------- GENERALITES SUR L'EN-TÊTE ---------------------- */

#header-wrapper {
  width: 100%; /* Le header mesure 100% de la largeur du parent (body) */
  height: 100px; /* Le header mesure 100px de hauteur */
  padding: 10px; /* Pour mettre un espace entre le bord de la page et les contenus de navigation */
  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 (logos, boutons de nav, icones) */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%); /* Effet de dégradé de l'en-tête, qui va de haut en bas (to bottom), d'un noir 65% d'opacité à un transparent */
}

/* ---------------------- GENERALITES SUR LE CONTENEUR DES ELEMENTS D'EN-TÊTE ---------------------- */

#header-wrapper .header-conteneur {
  width: 100%; /* Ce conteneur prend toute la largeur de son parent (header-wrapper) */
  height: 100%; /* Il prend aussi toute sa hauteur */
  display: flex; /* Le display flex permet de définir le positionnement en mode flex-box / URL du cours : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox */
  align-items: center; /* Mode flex-box : propriété permettant de centrer les éléments sur l'axe secondaire (l'axe vertical par défaut) */
  justify-content: space-between; /* Mode flex-box : les éléments d'en-tête seront justifiés dans le bloc header-conteneur (comme un texte "justifié") */
}

/* ---------------------- LOGO ---------------------- */

#header-wrapper .header-conteneur .header-logo {
  height: 100%; /* Le bloc contenant le logo occupe 100% de la hauteur de son parent (header-conteneur) */
  flex-basis: 30%; /* Mode flexbos : le bloc occupe 30% de la largeur du header */
}

#header-wrapper .header-conteneur .header-logo a { /* Comportement du logo */
  transform-style: preserve-3d; /* Permet de définir qu'un élément est en trois dimensions */
  -webkit-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Webkit dont Google Chrome, Safari, Opera (depuis la version 15) */
  -ms-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Trident dont Internet Explorer */
  -moz-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Gecko (Fondation Mozilla) dont Firefox */
  -o-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Presto dont les anciennes versions d'Opera */
  transition: transform 0.5s ease-in-out 0s; /* Si la propriété 'transform' change de valeur, le conteneur du logo effectue une transition (une animation) : celle-ci dure 0.5s ; est lente au début, puis accélère et enfin ralentit (ease-in-out) ; se déclenche immédiatement (0s de délai) */
  -webkit-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
  -ms-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
  -moz-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
  -o-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
  height: 100%; /* La hauteur du lien fait 100% de la hauteur de son parent (header-logo) */
  display: block; /* Par défaut, un lien est inline mais un display:inline ne permet pas de jouer sur les hauteurs ou largeurs ; or nous venons de définir une hauteur de 100% donc nous mettons un display:block */
}
#header-wrapper .header-conteneur .header-logo:hover a { /* Comportement du lien lors du survol de la souris */
  transform: rotateX(360deg); /* transform applique une transformation : rotation de l'élément, définie à 360 degrés par l'axe horizontal (X) */
  -webkit-transform: rotateX(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -ms-transform: rotateX(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -moz-transform: rotateX(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -o-transform: rotateX(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
}
#header-wrapper .header-conteneur .header-logo a img {
  height: 100%; /* La hauteur de l'image fait 100% de la hauteur de son parent (header-logo) */
  width: auto; /* Demande à l'image de respecter ses proportions lors des redimensions */
}

/* ---------------------- ELEMENTS DE NAVIGATION ---------------------- */

#header-wrapper .header-conteneur .header-navigation { 
  height: 100%; /* Le conteneur de la navigation mesure 100% de la hauteur du conteneur d'en-tête */
  flex-basis: 40%; /* Mode flexbox : le bloc occupe 40% de la largeur de son parent (header-conteneur) */
}
#header-wrapper .header-conteneur .header-navigation ul {
  height: 100%; /* La hauteur de l'élément liste mesure 100% de la hauteur de son parent (conteneur de navigation) */
  list-style: none; /* Retire le style par défaut (les points) */
  display: flex; /* Le contenu est en mode flex-box (cf. display:flex dans #header-wrapper .header-conteneur) */
  justify-content: space-around; /* Alignement de la liste sur l'axe principal (par défaut horizontal) ; space-around signifie que l'espace vide autour de chaque élément est identique */
  padding-left: 0; /* Retire le padding que les navigateurs donnent par défaut aux listes (positionné à gauche) */
  margin: 0; /* Retire le margin que les navigateurs donnent par défaut aux listes */
}
#header-wrapper .header-conteneur .header-navigation ul li.header-navigation-item {
  height: 100%; /* Hauteur de chaque élément de la liste : ils prennent 100% de la hauteur de leur parent (la liste); */
  transition: background-color 0.2s ease 0s; /* Définit la règle de transition de background-color (cf. transition dans #header-wrapper .header-conteneur .header-logo a) */
  -webkit-transition: background-color 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -ms-transition: background-color 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -moz-transition: background-color 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -o-transition: background-color 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
}
#header-wrapper .header-conteneur .header-navigation ul li.header-navigation-item:hover { /* Comportement lors du survol de la souris sur chaque élément de la liste */
  background-color: rgba(0, 0, 0, 0.1); /* Une couleur de fond, noire, d'une opacité de 10%, s'appliquera */
}
#header-wrapper .header-conteneur .header-navigation ul li.header-navigation-item a {
  height: 100%; /* Hauteur des liens à l'intérieur de chaque élément de la liste : mesure 100% de la hauteur du parent (la liste) */
  display: block; /* Même raison que dans #header-wrapper .header-conteneur .header-logo a */
}
#header-wrapper .header-conteneur .header-navigation ul li.header-navigation-item a .header-navigation-button { /* Définit les boutons de navigation */
  height: 100%; /* Ils ont la même hauteur que leur parent (les liens de navigation) */
  padding: 0 20px; /* Ils ont un espacement gauche et droite (horizontal) de 20px */
  display: flex; /* Ce conteneur est en mode flex-box (cf. display:flex dans #header-wrapper .header-conteneur) */
  align-items: center; /* Le texte est aligné au centre sur l'axe secondaire (par défaut vertical) */
  color: white; /* Le texte est de couleur blanche */
  font-weight: bolder; /* Le texte est en gras */
  font-family: arial; /* Police d'écriture */
}

/* ---------------------- RESEAUX SOCIAUX ---------------------- */

#header-wrapper .header-conteneur .header-social { /* Définit le conteneur des réseaux sociaux */
  height: 100%; /* La hauteur du conteneur mesure 100% de celle de son parent (conteneur d'en-tête) */
  flex-basis: 30%; /* Equivalent de width pour flex-bloc (cf. display:flex dans #header-wrapper .header-conteneur) : le bloc occupe 30% de la largeur du conteneur d'en-tête */
}
#header-wrapper .header-conteneur .header-social ul {
  height: 100%; /* La hauteur de l'élément liste mesure 100% de celle de son parent (conteneur des réseaux sociaux) */
  list-style: none; /* Retire le style par défaut (les points) */
  display: flex;  /* Le contenu est en mode flex-box (cf. display:flex dans #header-wrapper .header-conteneur) */
  justify-content: flex-end; /* Alignement de la liste sur l'axe principal (par défaut horizontal) ; flex-end aligne le contenu à droite (à la fin du conteneur) */ 
  padding-left: 0; /* Retire le padding que les navigateurs donnent par défaut aux listes (positionné à gauche) */
  margin: 0; /* Retire le margin que les navigateurs donnent par défaut aux listes */
}
#header-wrapper .header-conteneur .header-social ul li.header-social-item {
  height: 100%; /* Hauteur de chaque élément de la liste mesure 100% de celle de son parent (la liste) */
}
#header-wrapper .header-conteneur .header-social ul li.header-social-item:hover a { /* Comportement du lien au survol de la souris */
  transform: rotateY(360deg); /* transform applique une transformation : rotation de l'élément, définie à 360 degrés par l'axe vertical (Y) */
  -webkit-transform: rotateY(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -ms-transform: rotateY(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -moz-transform: rotateY(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -o-transform: rotateY(360deg); /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
}
#header-wrapper .header-conteneur .header-social ul li.header-social-item a {
  height: 100%; /* Hauteur des liens qui mesurent 100% de la hauteur du parent (élément de liste) */
  display: block; /* Même raison que dans #header-wrapper .header-conteneur .header-logo a */
  transition: transform 0.3s ease-in-out 0s; /* Définit la règle de transition de transform (cf. transition dans #header-wrapper .header-conteneur .header-logo a) */
  -webkit-transition: transform 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -ms-transition: transform 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -moz-transition: transform 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -o-transition: transform 0.2s ease 0s; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  transform-style: preserve-3d; /* Permet de définir qu'un élément est en trois dimensions */
  -webkit-transform-style: preserve-3d; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -ms-transform-style: preserve-3d; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -moz-transform-style: preserve-3d; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
  -o-transform-style: preserve-3d; /* Compatibilité (cf. #header-wrapper .header-conteneur .header-logo a) */
}
#header-wrapper .header-conteneur .header-social ul li.header-social-item a .header-social-button {
  height: 100%; /* Chaque bouton a une hauteur qui mesure 100% de la hauteur du parent (le lien) */
  display: flex; /* Le contenu est en mode flex-box (cf. display:flex dans #header-wrapper .header-conteneur) */
  align-items: center; /* Le texte est aligné au centre sur l'axe secondaire (par défaut vertical) */
  justify-content: space-around; /* Alignement de la liste sur l'axe principal (par défaut horizontal) ; space-around signifie que l'espace vide autour de chaque élément est identique */
  margin: 0 10px; /* Espacement horizontal de 10px de chaque côté des boutons */
}
#header-wrapper .header-conteneur .header-social ul li.header-social-item a .header-social-button img {
  height: 50%; /* Les images mesurent 50% de la hauteur du parent (les boutons) */
  width: auto; /* Les images respectent leurs proporsions lors des redimensions */
}