/* 
  Auteur      : Benoît
  Date        : 19.12.2019
  Description : projet Orgues, feuille de styles
*/


/*La police de base du site*/
*
{
  font-family:"Candara", "Arial";
}
/*Suppression des bords de la page*/
body
{
  margin:0px;
}
/*L'entête du site*/
header
{
  text-align:center;
  background-color: Sienna;
  padding-top:20px;
  padding-bottom:20px;
}
/*La partie centrale du site*/
article
{
  padding-bottom:50px;
  padding-top:25px;
  background-image:url('../images/background2.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
/*Une section est un couple image-texte*/
section
{
  width:85%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:20px;
  background-color: BurlyWood; 
}
/*Le flex pour les articles*/
.container
{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-around;
}
/*Le fond du site*/
footer
{
  background-color: Sienna;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-top:20px;
  padding-left:20px;
  padding-right:20px;
  color:white;
}
/*Les lecteurs audio*/
audio
{
  height:5vw;
  width:30vw;
}





/*Le titre du site*/
h1
{
  font-size:4.5em;
  color:white;
  margin-top:auto;
  margin-bottom:auto;
  margin-left:auto;
  margin-right:auto;
}
/*Le titre de la page*/
h2
{
  text-align:center;
  text-decoration:underline;
  font-size:3.5em;
  color:black;
}
/*Le texte du site*/
.txt
{
  font-size:1.1em;
}



/*Les différents éléments dans les flex*/


/*Les vidéos d'intégrations youtube*/
.youtube-flex
{
  width:35vw;
  height:22vw;
  margin:10px;
  border:0px;
}
/*Les images dans les articles*/
.img-flex
{
  padding:20px;
  height:25vw;
}
/*Une version pour les images plus hautes*/
.img-flex-longue
{
  padding:20px;
  height:50vw;
}
/*Les paragraphes de texte*/
.txt-flex
{
  width:50%;
  margin-left:10px;
}



/*La vidéo d'exemple*/

/*Les vidéos d'exemple*/
.vid-exemple
{
  width:35vw;
  margin:10px
}
/*Icônes pour changer de vidéos*/
.playbutton
{
  cursor:pointer;
}





/*Personnalisation des listes à puces*/
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 0em;
  text-indent: 0rem;
}
li::before
{
  content:"🎹  ";
}



/* Le menu de navigation*/

/*L'image du menu*/
#menu
{
  position:absolute;
  width:4.5em;
  z-index:1;
  margin-left:12px;
  margin-top:7.5px;
  cursor:pointer;
}
/*Le carré blanc autour de l'icône du menu*/
#menu:hover
{
  border-color:white;
  border-style:solid;
  border-width:2px;
}
/*Le div qui contient l'îcone du menu*/
.menu
{
  text-align:left;
}
/*Le menu de navigation*/
nav
{
  background-color:Peru;
  width:15em;
  z-index:2;
  position:absolute;
  padding:10px;
  border-style:solid;
  border-color:white;
  border-width:3px;
  opacity:0;
  display:none;
}
/*Les lignes entre les liens du menu*/
.nav
{
  border-style:solid;
  border-width:2px;
  border-color:white;
}
/*Les liens du menu*/
a
{
  color:white;
  text-decoration:none;
  font-size:1.3em;
}
/*Le lien de la page courante*/
.actif
{
  color:Maroon;
  font-size:1.8em;
}




/*La page des sources */


/*Pour les éléments de la pa*/
.sources
{
  text-align:center;
}
/*Pour le trait de la page de source*/
.source_trait
{
  width:75%;
}
/*Pour les liens de la page de source*/
a.source
{
  color:black;
  font-size:1.5em;
  text-decoration:underline;
}
/*Pour la liste de la page de source*/
ul.source
{
  text-align:left;
}
/*Pour les éléments de la page de source*/
ul.source li
{
  padding-left:20px;
  padding-bottom:0.5em;
}
/*Pour le corps de la page de source*/
section.sources p
{
  margin:0px;
  padding:5px;
}


/* Système responsive pour le plein écran*/
@media all and (min-width:1280px) {
  /*Agrandissement des bords blancs*/
  section
  {
    width:75%;
  }
  
  
  /*Redimensionnement des images*/
  .img-flex
  {
    height:20vw;
  }
  .vid-exemple
  {
    width:33vw;
  }
  .img-flex-longue
  {
    height:45vw;
  }
  .youtube-flex
  {
    width:25vw;
    height:20em;
  }
}



/* Système responsive pour les smartphones*/
@media all and (max-width:900px) {
  
  /*Suppression des bords blancs*/
  section
  {
    width:100%;
    text-align:center;
  }
  .txt-flex
  {
    width:100%;
    text-align:justify;
    margin-left: 10px;
    margin-right:10px;
  }
  
  /*Réarrangement du footer*/ 
  footer
  {
    display:block;
    text-align:center;
    padding-bottom:20px;
  }



  /*Réarrangement du header*/
  header
  {
    text-align:right;
  }
  h1
  {
    font-size:3em;
    margin-right:30px;
  }
  #menu
  {
    width:3.5em;
    margin-top:auto;
  }



  /*Redimensionnement du titre de la page*/
  h2
  {
    font-size:2em;
  }
  
  
  /*Redimensionnement du menu de navigation*/
  nav
  {
    width:100%;
    text-align:center;
    box-sizing:border-box;
  }
  
  
  /*Redimensionnement des images*/
  .img-flex
  {
    height:22vw;
  }
  .vid-exemple
  {
    width:65%;
  }
  .img-flex-longue
  {
    display:none;
  }
  .youtube-flex
  {
    width:95%;
    height:15em;
  }

  
  /*Redimensionnement du texte*/
  .txt-flex
  {
    padding-left:20px;
    padding-right:20px;
  }
}