@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);
@import url(https://fonts.googleapis.com/css?family=Squada+One);
/* Définition des polices personnalisées */
@font-face {
    font-family: 'punkrockshowregular';
    src: url('src/fonts/cf_punkrockshow-webfont.woff2') format('woff2'),
         url('src/fonts/cf_punkrockshow-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ALL AGES';
    src: url('src/fonts/all_ages/ALLAGESDEMO.eot');
    src: url('src/fonts/all_ages/ALLAGESDEMO.eot?#iefix') format('embedded-opentype'),
        url('src/fonts/all_ages/ALLAGESDEMO.woff2') format('woff2'),
        url('src/fonts/all_ages/ALLAGESDEMO.woff') format('woff'),
        url('src/fonts/all_ages/ALLAGESDEMO.ttf') format('truetype'),
        url('src/fonts/all_ages/ALLAGESDEMO.svg#ALLAGESDEMO') format('svg');
    font-weight: normal;
    font-style: normal;
}


{
	border: 1px black solid; 
}
body, html
{
	padding: 0px;
	margin: 0px;
  overflow-x: hidden;
}
#pageAccueil
{
	height: 100vh;
}
#sectionApropos *, #sectionArticles *, #sectionContact * {
  font-family: 'Verdana';
}
#sectionApropos p, #sectionArticles p, #sectionContact p {  
  font-size: 1em; 
}
.punkrock {
  font-family: 'punkrockshowregular' !important;
  font-size: 3em;
}
.fontbasic        /*la police Punk Rock ne prend pas en compte les tirets, points etc ...*/
{
  font-family: 'Open Sans' !important;
  font-weight: 800;
  padding: 0px 3px 0px 3px;
}





/*------------------HEADER-------------------*/
header
{
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 125px;
  background-color: rgba(200, 200, 200, 0.25);
  transition: 0.5s;       /*pour animation scroll en js*/
}
#divLogo
{
  height: 100%;           /*sans hauteur définie, son img fils ne pourra pas utiliser l'unitée en %*/
  z-index: 110;
}
img#logo
{
	height: 100%;
  max-width: 75vw; 
}
#menu {
  width: 100%;
  height: 100%;
  list-style: none;
  border-top: 4px double black;
  border-bottom: 4px double black;

  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}
.divrouleaux {
  flex-shrink: 1;
}
.rouleaux {
  display: inline-block;		/*afficher en ligne, non en liste ul*/
  width: 150px;
  margin: 0 10px;
  position: relative;
  -webkit-transform: skewy(-3deg);
  -webkit-backface-visibility: hidden;
  -webkit-transition: 200ms all;
}
.rouleaux a {
  text-transform: uppercase;
  font-family: 'Squada One', cursive !important;
  font-weight: 800;
  display: block;
  background: #FFF;
  padding: 2px 10px;
  color: #333;
  font-size: 35px;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  z-index: 1;
  text-shadow: 
		1px 1px 0px #FFF, 
		2px 2px 0px #999,
		3px 3px 0px #FFF;
	background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.05) 100%);
	-webkit-transition: 0.5s all;
  transition: 0.5s all;
	background-image: -webkit-linear-gradient(left top, 
		transparent 0%, transparent 25%, 
		rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 50%, 
		transparent 50%, transparent 75%, 
		rgba(0,0,0,.15) 75%);
  background-size: 4px 4px;
	box-shadow: 
		0 0 0 1px rgba(0,0,0,.4) inset, 
		0 0 20px -5px rgba(0,0,0,.4),
		0 0 0px 3px #FFF inset;
}
.rouleaux:hover {
	width: 203px;
	margin: 0 -5px;
}
#menu a:hover {
  color: red;
}
.rouleaux:after, .rouleaux:before  			/*plis derrière bandeau*/ 
{
  content: '';
  position: absolute;
  width: 50px;
  height: 100%;
  background: #BBB;
  -webkit-transform: skewY(8deg);
  x-index: -3;
	border-radius: 4px;
}
.rouleaux:after {
	background-image: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,.4) 100%);
  right: 0;
  top: -4px; 
}
.rouleaux:before {
  left: 0;
  bottom: -4px;
	background-image: -webkit-linear-gradient(right, transparent 0%, rgba(0,0,0,.4) 100%);
}
#popupMenu {
  z-index: 109;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  top: 0vh;
  transition: 0.30s ease-out;
  transform: skewY(15deg) translateY(-150vh);
  height: 80vh;
  width: 100vw;
  background-color: rgba(230, 230, 230, 0.95);
}
#menuListe {
  background-color: rgba(0, 0, 0, 0);
  transform: skewY(-15deg);
}
#menuListe ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  margin: 0px;
  padding: 0px;
}
#menuListe li {
  margin-top: 20px;
}





/*-------------------Carousel-------------------*/
#sectionCarousel
{
	position: relative;
	height: 100%;
}
#sectionCarousel img
{
  height: 100vh;
}





/*-------------------A propos-------------------*/
#sectionApropos
{
  height: 100vh;
  width: 100vw;
  padding: 5% 6vw 10% 4vw;
  overflow: hidden;
  background: linear-gradient(40deg, silver 10%, white 70%);
}
#apropos
{
  text-align: justify;
  height: 100%;
  width: 100%;
}
#apropos h1
{
  margin-bottom: 50px;
}
#imgApropos {
  position: absolute;
  right: 2vw;
  bottom: -95vh;
  width: 40vw;
  height: 18vw;         /*proportion de l'image qui est de 1/2*/
  background: url('src/img/fondateurs.png') no-repeat;
  background-size: 100% 100%;

  transform: rotate(2deg);
  -webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari 6.0 - 9.0 */
  filter: drop-shadow(8px 8px 10px gray);
}
.paragrapheReduit {
  text-align: left;
  width: 50%;
}





/*-----------------PARTITION----------------*/
#sectionPartition, #backpagePartition
{
  margin: 0px;
  padding: 0px;
}
#sectionPartition
{
  height: 100vh;
  width: 100vw;
}
#backpagePartition
{
  position: absolute;
  margin-top: 1px;
  height: 100%;
  width: 100%;
}
#titrePartition
{
  position: absolute;
  font-style: italic;
  bottom: 5vh;
  right: 10vw;
}
#partition
{
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

/*Lignes de partition*/
#lignesPartition
{
  position: absolute;
  height: 100%;
  width: 100%;
  padding-top: 22vh;
}
.interlignes
{
  width: 0%;            /*90% a la fin de l'animation*/
  height: 0.5vh;
  margin-top: 10vh;
  margin-bottom: 0vh; 
  border: none;
  background-color: black;
}

/*Clé de sol*/
#cle2sol
{ 
  margin-left: 6%;
}
#cle2sol svg, #cle2sol div#backgroundCle2sol img
{
  position: absolute;
  left: 7vw;
  height: 90%;
  width: auto;
  margin-top: 2.3%;
}
#backgroundCle2sol
{
	left: 0px;
	z-index: -1;
}
#pathCle2sol
{
  z-index: 1;
  top: -100%;
	left: 0px;
    stroke-dasharray: 3746;         /*longueur du segment a afficher (contour du svg)*/
    stroke-dashoffset: 3746;        /*Cache une longueur du path selon le pathLenght total en partant de la fin*/
   	stroke-width: 5px;    
   	stroke: black;
    stroke-linecap: round;         	/*arrondir les bouts des paths*/
   	fill: none;
    fill-opacity: 1;
}
.animerCle2sol
{
    -webkit-animation: draw 5.00s ease-in 0s;
    animation: draw 4s cubic-bezier(.35,.57,.53,.35) 0.5s;
    animation-fill-mode: forwards;                 /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}
.animerBackCle2sol
{
  animation: opac 4.5s ease-in-out 0s;
  animation-fill-mode: forwards;                 /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/

}
.animerLigne
{
  animation: ligne 4.5s linear 0s;
  animation-fill-mode: forwards;                 /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}


/* @-webkit-keyframes TOUT
{
} */
@keyframes draw
{
  0%    {   stroke-dashoffset: 3746;  
				    fill-opacity: 0;		}
	50%		{	  fill-opacity: 0;
				    stroke-width: 5px;
            stroke: black;			}
	85%		{	  stroke: rgb(200,200,200);			}
	95%		{	  fill-opacity: 1;
				    stroke-width: 3px;					}
  100%  {  	fill-opacity: 1; 
    			  stroke-width: 2px;   			  		
    			  stroke: rgb(200,200,200);
    			  stroke-dashoffset: 700; 			}
}
@keyframes opac
{
	0%{opacity: 0;}
	70%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes ligne
{
  0%{width: 0%;}
  25%{width: 80%;}
  60%{background-color: black;}
  85%{background-color: rgb(200, 200, 200);}
  100%{   width: 80%;
          background-color: rgb(200, 200, 200);}
}
/*Noires avec photos des membres*/
#tetesNoires
{
  position: relative;
}
.noiresOverflow
{
  overflow: hidden;
  border-radius: 75%;
}
.membres
{
  position: absolute;
  opacity: 0;

  overflow: visible;
  border: 0.6vh black solid;
  border-radius: 75%;
  height: 25vh;          /*158 pour les 2 bordures de 4px (4px APRES animation)*/
  width: 25vh;
}
.membres img
{ 
  height: 24vh;
  width: 24vh;
}
#membre1
{
  top: 52vh;
  right: 60vw;
}
#membre2
{
  top: 31vh;
  right: 45vw;
}
#membre3
{
  top: 52vh;
  right: 30vw;
}
#membre4
{
  top: 31vh;             
  right: 15vw;
}
.membresBarre
{
  position: absolute;
  background-color: black;
  border: none;

  height: 4px; 
  width: 0vh;         /*fin animation : 40vh*/
  right: -4px;
  top: 40%;
  transform-origin: 100% 0%;
  transform: rotate(90deg);
}
.membresDesc
{
  text-align: center;
  color: black;

  font-family: 'Squada One'!important; /*Si plus classique, opte alors pour 'Open Sans'*/
  font-size: 1.75em;
}
.nomMbr { text-transform: uppercase; margin-bottom: -10px; padding-bottom: 0px;}
.prenomMbr { margin-bottom: 0px; padding-bottom: 0px; }
.roles {
  margin: 0px; padding: 0px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.sprite {
  margin: 0px; padding: 0px;
  height: 50px;
  width: 50px;
}
/*Sprites*/
.guitare {
  background: url("src/img/music-instruments-icon-sprite-petit.png") -250px 0 no-repeat;
}
.basse {
  background: url("src/img/music-instruments-icon-sprite-petit.png") 0 0 no-repeat;
}
.batterie {
  background: url("src/img/music-instruments-icon-sprite-petit.png") -100px 0 no-repeat;
}
.micro {
  background: url("src/img/music-instruments-icon-sprite-petit.png") -50px -87px no-repeat;
  transform: translateY(-4px);      /*le sprite n'est pas parfait ;)*/
}


.animerMembresBarres
{
  animation: alongement 2s ease-in 5s;
  animation-fill-mode: forwards;
}
.animerNoires
{
  animation: roulades 5s ease-out 0s;
  animation-fill-mode: forwards;
}

@keyframes roulades {
  0%{   opacity: 1;
        transform: translateX(100vw) rotate(560deg); }
  50%{  transform: translateX(100vw) rotate(560deg); }
  75%{  }
  95%{  transform: translateX(-3vw) rotate(-25deg);
        border: 0.5vh black solid; }
  100%{ opacity: 1;
        transform: translateX(0vw) rotate(0deg);
        border: 0.5vh rgb(200, 200, 200) solid; }
}
@keyframes alongement {
  0%{     width: 0vh;
          background-color: black; }
  40%{    width: 40vh; }
  50%{    background-color: black; }
  100%{   width: 40vh;
          background-color: rgb(200, 200, 200); }
}





/*-------------------Articles-------------------*/
#sectionArticles
{
  height: 100vh;
  width: 100vw;
  padding: 6% 12% 6% 12%;
  overflow: hidden;
  background-image: radial-gradient(circle, #be1433, #a0112c, #830e24, #680b1c, #4d0814);
}
#articleTexte
{
  margin-top: 0px;
  text-align: justify;
}
#articles
{
  overflow-y: auto;
  padding: 25px 25px 25px 25px; 
  height: 100%;
  width: 100%;
  background-color: white;
  box-shadow: 8px 8px 20px black;
}
#articleImage  {
  float: right;
  max-width: 50%;
  margin: 0% 0% 2vw 2vw;
}
#articleImage img {
  width: 100%;
}





/*----------------Contact----------------*/
input:focus, textarea:focus {
  outline: none;
}
#sectionContact {
  width: 100vw;
  height: 100vh;
  padding: 5vh 3vw 5vh 3vw;
  color: white;
  background-color: #31333D;

  display: flex;
  justify-content: center;
  align-items: center;
}
#titreContact {
  margin-bottom: 1em;
}
#contact {
  width: 80vw;
  height: 50vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
#infosContact {
  width:  100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
#formContact {
  width: 100%;
  height: 100%;

  margin-top: 0.75em;
  margin-left: 5vw;
}
.contactLabels {
  position: absolute;
  left: 0px;
  top: -0.75em;
  font-size: 1em;
  transform-origin: 0% 0%;
  transition: 0.5s;
}
#formLvl1, #formLvl2, #formLvl3 {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.champs:first-child {
  margin-right: 3px;
}
.champs {
  width: 50%;
  position: relative;
}
.inputContact {
  width: 100%;
  background: linear-gradient(to top, rgba(200, 200, 200, 0.25), rgba(0,0,0,0));
  margin-bottom: 30px;
  border: none;
  border-bottom: 1.5px solid silver;
}
#champ5 {
  margin-right: 0px;    /*annuler l'écart/margin-rigt donné aux .champs:first-child car il n'a pas de second frère lui :(*/
  width: 100%;
}
#textAreaContact {
  width: 100%;
  height: 18em;
}
#formBtnSubmit {
  width: 100%;
  display: flex;
  justify-content: center;
}
#formBtnSubmit input {
  padding: 8px 13px 8px 13px;
  color: white;
  background-color: rgba(153, 16, 41, 1);
  font-size: 1.5em;
  border: 1px white solid;
  border-radius: 10px;
}
#socialIconsDiv {
  display: flex;
  justify-content: space-around;
}
.socialIcon {
  color: white;
}
.fa-facebook-square:hover {  color: #4267B2;}
.fa-twitter-square:hover {  color: #1DA1F3;}
.fa-youtube-square:hover {  color: #FF0000;}
.fa-instagram:hover {  color: #B82AE1;}






/*----------------Media Query------------------*/
@media screen and (max-width: 1250px) {
  /*------------------HEADER-------------------*/
  /*Menu petits appareils*/
  header
  {
    height: 75px;       /*déf en js*/
  }
  #menu
  {
    justify-content: space-between;
  }
  .rouleauxHead
  {
    display: none;
  }
  .croixBarres
  {
    height: 0.65em;
    width: 75px;
    border: 2px rgba(153, 16, 41, 1) outset;
    border-radius: 5px;
  }
  #headSandwichIcone
  {
    z-index: 110;
    display: block;
    margin: 0px;
    padding: 0px 3% 0px 1%;
  }
  .croixBarres
  {
    margin-bottom: 1em;
    background-color: rgba(153, 16, 41, 1);
    transition: 0.35s;
  }
  #croixBarre3 { margin: 0px !important; }
  #headSandwichIcone
  {
    order: 2;
  }
  /*----------Carousel-----------*/
  #sectionCarousel
  {
    padding-top: 75px;
  }
  #sectionCarousel img
  {
    height: auto;
  }

  /*------------propos---------------*/
  #sectionApropos
  {
    height: 100%;
  }
  .paragrapheReduit
  {
    width: 100%;
  }
  #imgApropos {
    position: relative;
    margin: 0px;
    margin-top: 4vh;
    bottom: 0px;
    right: 0px;
    width: 90vw;
    height: 40vw;         /*proportion de l'image qui est de 1/2*/
  }
}





/*pour animation ' and (orientation: portrait)'*/
@media screen and (max-width: 1000px) {
  /*------------HEADER------------*/
  header {
    height: 55px;       /*déf en js*/
  }
  .croixBarres
  {
    height: 0.50em;
    width: 50px;
  }
  .croixBarres:nth-child(1), .croixBarres:nth-child(2) 
  {
    margin-bottom: 20%;
  }
  /*-----------Carousel-----------*/
  .carousel-caption
  {
    visibility: hidden;
  }
  #sectionCarousel
  {
    padding-top: 55px;
  }

  /*-----------partition------------*/
  #sectionPartition {
    height: 100%;
    padding-bottom: 2vh;
  }
  #backpagePartition {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    height: auto;
  }
  #partition {
    height: auto;
  }
  #cle2sol {
    visibility: collapse;
  }
  #lignesPartition {
    visibility: collapse;
  }
  .membresBarre {
    visibility: collapse;
  }
  #tetesNoires {
    padding: 0px 0px 0px 5px;
    width: 97vw;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .membres:nth-child(2n+1) {
    align-self: flex-end;
  }
  .membres {
    opacity: 1;
    position: relative;

    top: 0px !important;
    right: 0px !important;
    border: 0.5vh rgb(200, 200, 200) solid;
  }
  /*traits de séparations entre les profils dans les noires*/
  .membres:after {
    display: inline-block;
    margin: 2vh 0vw 2vh 0vw;
    height: 1.5px;
    left: 0px;
    content: " ";
    text-shadow: none;
    background-color: rgba(153, 16, 41, 1);
    width: 60vw;
  }
  .membres:nth-of-type(2n+1)::after {
    margin-left: 100%;
    transform-origin: 0% 0%;
    transform: rotate(180deg);    /*syst D pour inverse la direction (vers la droite) pour éviter le trait de sortir de l'écran*/
  }

  .membresDesc
  {
    position: absolute;
    right: -25vh;
    top: 10%;
    width: inherit;
  }
  .membres:nth-child(2n+1) .membresDesc
  {
    right: 25vh;
  }
  #titrePartition {
    position: relative;
    order: -1;

    margin: 25px 0px 30px 5px;
    bottom: 0px;
    right: 0px;
  }
  /*-------------------Articles-------------------*/
  #sectionArticles
  {
    height: 100%;
    padding: 6% 2% 6% 2%;
  }
  #articleTexte
  {
  }
  #articles
  {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-shadow: none;
  }
  #articleImage  {
    float: none;
    max-width: 100%;
    margin: 0% 0% 2vw 0vw;
  }
  #articleImage img {
    width: 100%;
  }
  /*-----------------Contact-----------------*/
  #sectionContact {
    height: 100%;
  }
  #contact {
    width: 90vw;
    height: 100%;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  #infosContact {
    width:  100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #formContact {
    width: 100%;
    height: 100%;

    margin-top: 5em;
    margin-left: 0vw;
  }
}