/*

par défaut, j'essaye de prendre deux niveau de profondeur à chaque fois, cela me permet d'être assez précis sans être trop contraignant, je ne fais qu'exceptionnellement appel aux éléments html comme ça, en cas de changement de la structure html du site ou en cas de maintenance, je n'aurai pas ou que très peu de changements à effectuer

certaines prorpriétés ne sont pas encore entièrement prises en charges par l'ensemble des navigateurs, c'est pour ça que j'utilise des prefixes -webkit- (pour chrome) -O- (pour opéra) -ms- (pour edge et internet explorer) avec des noms de propriétés spécifiques à chacun des navigateurs (j'utilise une extension : auto-prefixer pour cela)

*/

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* pour me permettre de dimensionner et de positionner mes éléments sans trop de calculs complexes, les marges intérieures et extérieurs étant comprises dans la taille indiquée*/
}

body,
html {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: rgb(88, 77, 65);
  background-color: rgb(246, 244, 243);
  /* propriétés globales de la page */
}

@font-face {
  /* j'intègre les polices personnalisées utilisées dans mon design en différentes extensions pour supporter les principaux navigateurs*/
  font-family: 'Aladin';
  src: url('Aladin-Regular.eot');
  src: url('../fonts/Aladin-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Aladin-Regular.woff2') format('woff2'),
    url('../fonts/Aladin-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* l'utilisation ici du swap indique le comportement que j'attends du navigateur en attendant le chargement de la police personnalisée */
}

.banniere {
  height: 360px;
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgb(0, 0, 0)),
      color-stop(116.86%, rgba(196, 196, 196, 0))),
    url('../images/banniereMosquee.jpg');
  background-image: -o-linear-gradient(top,
      rgb(0, 0, 0),
      rgba(196, 196, 196, 0) 116.86%),
    url('../images/banniereMosquee.jpg');
  background-image: linear-gradient(180deg,
      rgb(0, 0, 0),
      rgba(196, 196, 196, 0) 116.86%),
    url('../images/banniereMosquee.jpg');
  /* j'utilise deux arrière plans, un dégradé liéaire et une image*/
  background-attachment: scroll, fixed;
  /* pour un effet parallax, le dégradé scrolle et l'image reste fixe*/
  background-clip: border-box;
  /* pour que le fond occupe 100% de ma div, y compris sa bordure*/
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  /*pour pouvoir prendre cet élément comme références pour positionner le reste des éléments*/
}

.banniere .logo {
  max-width: 960px;
  /* la largeur maximale que pourra prendre mon logo au sein de la div englobante qui elle, prend toute la largeur de la page, la dimension est indiquée par le design de la maquette */
  height: 100%;
  margin: auto;
  /* pour centrer la div horizontalement au sein de la div parente */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /* aligner les éléments sur les bords de la div*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* aligner au centre verticalement */
}

.banniere .banniere-title {
  width: 242px;
  font-family: Aladin, serif;
  /* police personnalisée et une police alternative à afficher en attendant le chargement ou en cas d'impossibilité du chargement de la première*/
  font-size: 63px;
  line-height: 1.2em;
  /* j'utilise le em pour donner la hauteur de ligne relativement à la taille de police utilisée, elle changera en fonction */
  text-align: right;
  padding-right: 3px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 6.6px 5.3px 4.6px rgba(0, 0, 0, 0.4);
  position: relative;
}

.banniere-title::after {
  /* j'utilise un pseudo element pour éviter de polluer mon code HTML pour insérer un élément purement visuel */
  content: '';
  width: 1px;
  height: 290px;
  position: absolute;
  /* Je le positionne relativement à son parrent, soit le h1*/
  top: -68px;
  left: 254px;
  background-color: rgba(255, 255, 255, 0.6);
}

.banniere .banniere-text {
  max-width: 690px;
  font-family: Montserrat, sans-serif;
  color: rgba(255, 255, 255, 0.8);
  padding-left: 3px;
  /*le texte hérite la taille de police et la hauteur de ligne du body*/
}

.social-medya {
  /* je passe à un sélecteur d'un seul niveau car l'objet englobant change de classe en fonction de sa position dans la page (cf ligne 128)*/
  text-align: end;
}

.menu {
  text-align: end;
}

.social-medya a {
  margin-left: 14px;
  font-size: 27px;
  color: inherit;
  /* hériter la couleur de la div englobante pour permettre un changement d'effet au scroll et pour ne pas appliquer le style par défaut des liens (bleu, souligné)*/
  opacity: 0.7;
}

.menu a {
  margin: 0 7px;
  text-decoration: none;
  color: inherit;
  /*Si on ne définit pas une couleur, la couleur par défaut du lien prévaudra sur la couleur du parrent*/
  opacity: 0.7;
}

a:hover,
a[href='#'] {
  /* comportement des liens de la navbar au survol de la souris ET du lien de la page affichée qui aura un attribut href correspondant à #*/
  opacity: 1;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}

.banniere .navbar-links {
  height: 100%;
  color: rgb(255, 255, 255);
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  padding: 15px;
}

.banniere .navbar-links-fixed {
  /*cette classe n'est pas attribuée au départ, elle sera attribuée par le script javascript quand le visiteur aura scrollé suffisament pour que la barre de menu atteigne le bord haut de la page */
  width: 100%;
  /* par défaut les div prennent 100% de l'espace, mais je le précise par mesure de précaution */
  background-color: rgb(241, 239, 232);
  position: fixed;
  top: 0;
  /* elle restera visible en haut de la page (d'ou le top:0)*/
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  /*pour que le passage à/depuis la position fixe soit fluide et donnera l'effet d'une animation naturelle*/
  z-index: 2;
  /*le z-index est affecté pour que la div englobante soit toujours la plus haute et ne soit pas masquée par un autre contenu */
}

.banniere .navbar {
  max-width: 960px;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /*column me sert à superposer les éléments*/
  -ms-flex-line-pack: end;
  align-content: flex-end;
  /*pour aligner le contenu (les menus) sur le bord droit de la div */
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /*et en haut et en bas verticalement en laissant tout l'espace entre (between) eux*/
}

.banniere .navbar-fixed {
  max-width: 960px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  /* quand le menu passera en position fixe, les éléments seront juxtaposés et placés de part et d'autre de la bannière et centrés verticalement*/
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  /*quand la div devient trop étroite pour afficher les deux menus, je demande à ce qu'il y'ait un retour à la ligne (d'ou le wrap) mais le menu vers les autres pages en haut et celui vers les réseaux sociaux en bas (d'ou le reverse)*/
}

.wrapper {
  max-width: 960px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*je n'ai pas d'autre paramètres à spécifier, les paramètres par défaut suffisent*/
}

.wrapper .articles {
  width: calc(100% - 316px);
  /* le calc() est utilisé ici pour que la taille de lélément englobant prenne TOUT l'espace laissé par le aside qui lui, a une largeur fixe de 316px*/
  padding: 15px;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35);
  /*box shadow et pas text shadow comme plus haut pour avoir l'ombre de toute la boite englobante */
  z-index: 1;
  /*le z-index de 1 met la div articles plus haut que la div aside qui vient après elle en html, donc, par défaut doit être plus haute et donc, l'ombre ne pourra pas être visible */
}

.articles .main-title {
  margin-bottom: 28px;
  font-family: Volkhov, serif;
  font-size: 30px;
  font-weight: 700;
}

.articles .article {
  margin: 20px 0;
  position: relative;
  min-height: 180px;
  /* le min-weight est indiqué ici car comme l'image est en position absolute, le CSS ne la prends pas en compte pour dimensionner la balise englobante, si le texte de l'article est trop court, l'image sera tronquée. la définition d'une hauteur minimum de l'article prévient ce risque*/
}

.article .article-title {
  margin: 0;
  margin-left: 190px;
  /*le margin est calculé par rapport au bord de la div et non à celui de l'image qui sort du flow en raison de sa position absolute*/
  font-family: Volkhov, serif;
  font-size: 26px;
}

.article .article-subtitle {
  margin: 10px 0 0 190px;
  font-family: Volkhov, serif;
  font-size: 22px;
  opacity: 0.5;
}

.article .text {
  margin: 15px 0 0 190px;
}

span {
  /* le span me permet de mettre en valeur certains éléments de mon texte, il est indiqué seul car utilisé dans plusieurs éléments de différentes classes*/
  font-weight: 700;
  /* un font-weight de 700 correspond à une police Bold */
}

.article-image img {
  max-width: 175px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.article::after {
  content: '';
  display: block;
  height: 1px;
  margin: 20px 0;
  background-color: rgba(88, 77, 65, 0.3);
}

.article .article-media {
  max-width: 614px;
  margin: auto;
}

.aside {
  width: 316px;
  margin: 0;
  padding: 30px 17px;
  text-align: center;
  background-color: rgb(236, 233, 226);
}

.aside .aside-title {
  font-family: Volkhov, serif;
  font-size: 30px;
  line-height: 1.3em;
  /* l'utilisation de em comme unité de mesure c'es pour prendre la taille de la police de l'élément comme référence, si on change le font-size, le line-height s'adaptera en fonction*/
  font-weight: 400;
}

.aside .aside-article {
  font-family: montserrat, sans-serif;
  font-size: 14px;
  text-align: justify;
}

.aside img {
  width: 140px;
  height: auto;
}

.footer {
  background-color: rgb(88, 77, 65);
  margin: 0;
  padding: 7px;
  font-size: 15px;
  font-family: roboto, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  word-break: keep-all;
  /*Petit détail esthétique afin que, lorseque la largeur de l'écran devient trop petite, il n'y ait pas de césure au mot e-business*/
}

@media screen and (max-width: 960px) {

  /*Les média queries pour affecter des comportements différents en fonction de la taille (max-width) de l'écran (media screen)*/
  .banniere h1::after {
    display: none;
  }
}

@media screen and (max-width: 820px) {

  .wrapper,
  .wrapper .articles,
  .aside {
    width: 100%;
    display: block;
    /*la wrapper qui était en display flex passe en display normal et les éléments qui le composent prennent 100% de l'espace désormais disponible*/
  }
}

@media screen and (max-width: 590px) {
  .banniere {
    height: 280px;
    background-image: url('../images/banniereMosquee.jpg');
    background-size: cover;
  }

  .banniere .banniere-text {
    display: none;
  }

  /*je retire le texte de la bannière*/

  .banniere .logo {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*je mon logo repositionne au centre de la banière*/
  }

  .banniere .banniere-title {
    font-size: 65px;
    text-align: center;
    width: 70%;
    /*plus grande taille de police et qu'il prenne plus de place au sein de la bannière*/
  }

  .banniere .navbar-links-fixed {
    height: auto;
    /*je ne fixe pas la taille, elle sera calculée en fonction des éléments qu'elle englobe*/
  }

  .banniere .navbar-fixed {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    /*pour centrer les éléments quand ils seront superposés*/
  }

  .article-image img {
    position: static;
    /* On retire la position absolute des images pour un affichage "normal" */
    width: 100%;
    max-width: 100%;
    height: auto;
    /* et faire en sorte que l'image prenne tous l'espace disponible */
  }

  .article-image {
    text-align: center;
  }

  .articles .text,
  .articles .article-title,
  .articles .article-subtitle {
    margin: 10px;
  }
}

/* Les medias queries ont été faites sur la bases de break point à partir desquels j'ai remarqué que le design de mon site s'altérait, le principe est le même pour réaliser des designs plus fins pour les principaux appareils du marché  */