/***** REF

saumon		: rgb(226,177,118); a 0.75
bleu		: rgb(129,153,175);
vert		: rgb(208,202,139);
bleu foncé 	: rgb(94,111,128);
texte 		: rgb(56,51,45);

****************/ 

body{
  min-height: 100vh;
  background: url(../img/bg.jpg) rgb(226,177,118) top center/cover fixed no-repeat;
  /*background-size: cover;  EN ATTENTE DE TEST SUR IPAD */
}


h1, h2, h3{
  font-family: didot;
}
p, ul, ol{
  font-family: calendas_plus;
  font-size: 1.25em;
  line-height: 1.5em;
  margin-bottom: 25px;
  color: rgb(56,51,45);
}

a{
  text-decoration: none;
  color: rgb(129,153,175);
  -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

a:hover{
  color: rgb(94,111,128);
}


/****************
 MENU PRINCIPAL
****************/ 
header.menu_principal{
  position: fixed;
  height: 100vh;
  background: rgb(255,255,255) url(../img/bgmenu.png);
  border-right: 5px solid rgb(226,177,118);
}

.logo{
  font-size: 2em;
  text-align: center;
  color:rgb(226,177,118);
  line-height:0.85em;
}

h1.logo{
  margin-top: 5vw;
}

.logo span{
  font-size: 0.75em;
  font-style: italic;
  font-weight: normal;
  color:rgb(208,202,139);
}

.logo:after{
  content: url(../img/menu.png);
  display: inline-block;
  margin-top: 25px;
}


ul.menu_principal{
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.menu_principal a{
  display: block;
  margin: 5vh 0;
  padding: 25px 0;
  font-size:1.4em;
  background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll right center / 0px 100% transparent;
}

.menu_principal a.active{
  color: rgb(255,255,255);
  background: linear-gradient(rgba(226,177,118,1), rgba(226,177,118,1)) no-repeat scroll right center / 100% 100%;
}

/****************
SOUS MENU
****************/ 
ul.menu_secondaire{
  padding-left: 0;
  list-style: none;
  float:right;
}

.imgmenu_secondaire{
  width:22px;
}

.menu_secondaire a{
	  display: block;
	  font-size:1.4em;
	  margin:0;
	  padding:18px 10px;
	  background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll bottom center / 100% 0% transparent;
	}

  .menu_secondaire a:hover{
  color: rgb(255,255,255);
  background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll bottom center / 100% 100%;
}

.menu_secondaire a.active{
  color: rgb(255,255,255);
  background: linear-gradient(rgba(226,177,118,1), rgba(226,177,118,1)) no-repeat scroll right center / 100% 100%;
}

/****************
  FORMULAIRE
****************/ 
label {
  display:block;
  font-family: calendas_plus;
  font-size: 1.25em;
}
 
 label:after {
  content: " (obligatoire)";
  font-style:italic; 
  color:rgb(129,153,175);
  font-size:0.7em;
}
 
textarea {
  margin-top:0;
  min-height:130px;
}
input, textarea {
  font-family: calendas_plus;
  font-size:1.2em;
  padding:8px 8px 8px 10px; 
  width:100%;
  border:1px solid rgb(94,111,128);
  -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
input#form_mail, textarea  {width:100%;}

input:focus, textarea:focus { 
  box-shadow: inset 5px 0 0 rgb(94,111,128);
	outline: 0;
}

input[type=submit]{ 
  margin-top:40px;
  width:150px;
  padding: 12px;
  font-family: calendas_plus;
  font-size: 1.25em;
  color: rgb(255,255,255);
  background:rgb(226,177,118);
  border:none;
  -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}


input[type=submit]:hover{
  background: rgb(129,164,88);
  border-color: rgb(129,164,88);
  -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
          transform: scale(1.25);
}




/****************
 CONTENU
****************/ 
.contenu{
  width: -webkit-calc(100% - 400px);
  width: calc(100% - 400px);
  margin-left: 400px;
  padding: 5vw 50px;
}

.contenu article{
  background: rgba(255,255,255,0.85);
  box-shadow: inset 0 5px 0 rgb(129,153,175);
  padding: 50px 70px;
}

.texte {
  padding-left:40px;
  padding-top:10px;
}

ul.chansons{
  list-style-image: url('../img/puce.png');
	font-size:1.2em;
	color:rgb(129,153,175);
	margin-left:40px;
	padding-top:30px;
}

div.nouveau{
  background: rgba(226,177,118,0.15);
  padding-bottom: 1px;
  margin-bottom: 0px;
  border-top: 2px solid rgba(226,177,118,1);
  border-bottom: 1px solid rgba(226,177,118,1);
}

ul.chansons li{
padding-left:10px;
 margin-bottom:30px;
 }

  
ul.chansons li a {
  background: linear-gradient(rgb(94,111,128), rgb(94,111,128)) no-repeat scroll left bottom / 0% 1px transparent;
  padding-bottom:3px;
}

ul.chansons li a:hover{
  background: linear-gradient(rgb(94,111,128), rgb(94,111,128)) no-repeat scroll left bottom / 100% 1px transparent;
 }


article header p{
  font-weight:bold;
  font-size:1.2em;
  margin-top:0;
}

article h2{
  font-weight:normal;
  color:rgb(129,153,175);
  font-size:2.9em;
}

article h2.titresecondaire {
  padding-left: 40px;
  margin-bottom:0;
}

article h3{
  color:rgb(129,153,175);
  margin-bottom: -25px;
  padding-top: 1em;
  padding-left: 1em;
}

header h2{
  font-weight:normal;
  color:rgb(129,153,175);
  font-size:2.2em;
}

article header time{
  font-weight:normal; font-style:italic;
}

article header img{margin-bottom:60px;}

footer{text-align:center;}

footer p{margin-bottom:10px;}


/* "Précédent / Suivant" */
nav a{
  margin-left:10px;
  margin-right:10px;
}

nav a.back:before {
  content: url(../img/accolade.png);
  margin-right:5px;
  padding-top:3px;
  display:inline-block;
  vertical-align:middle;
 -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
}

nav a.back:after {
  content: url(../img/accolade.png);
  margin-left:5px;
  display:inline-block;
  -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}


nav a.back:hover:after {
  -webkit-transform: translateX(15px) rotate(180deg);
      -ms-transform: translateX(15px) rotate(180deg);
          transform: translateX(15px) rotate(180deg);
}
nav a.back:hover:before {
  -webkit-transform: translateX(-15px);
      -ms-transform: translateX(-15px);
          transform: translateX(-15px);
}

.copyright{
  font-size: 0.8em;
  text-align: right;
  margin-top: 50px;
}

.copyright a{
  color: rgba(0,0,0,0.50);
  background: rgba(255,255,255,0.5);
  padding: 3px 10px;
}

.contenu img{
    display: block;
    margin: 15px auto;
    margin-bottom: 50px;
  }


@media screen and (max-width: 1280px) {
  .w400p{ width: 300px;}

  h1.logo{
    margin-top: 2vw;
  }

  .contenu{
    width: -webkit-calc(100% - 300px); 
    width: calc(100% - 300px);
    margin-left: 300px;
    padding: 2vw 25px;
  }

  .menu_principal a{
    margin: 4vh 0;
    padding: 15px 0;
  }

}


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

  .w400p{ width: 250px;}

  .w30, .w70{ width: 100%; display:block;}
  .left, .right{ float: none; }
  
  ul.menu_secondaire li{display:inline-block;}
  .imgmenu_secondaire {display:none;}
  ul.menu_secondaire {float:none; text-align:center;}

  .logo{
    font-size: 1.6em;
  }

  .contenu{ 
    width: -webkit-calc(100% - 250px);
    width: calc(100% - 250px);
    margin-left: 250px;
  }

  .contenu article{
     padding: 50px 30px;
  }

  header h2{
    margin-bottom: 0;
  }

  .texte{
    padding: 0;
  }

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

  .w400p, .w600p{ width: 100%; }

  h1.logo{
    margin: 0;
    padding: 35px;
    font-size: 2em;
  }
  
  .logo:after{
    content: "";
    display: none;
  }

  header.menu_principal{
    height: auto;
    border-right: none;
    border-bottom: 5px solid rgb(226,177,118);
  }

  .menu_principal nav{
    position: fixed;
    top: 0;
    width: 100%;
    background: rgb(255,255,255);
    border-bottom: 5px solid rgb(226,177,118);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-transition: all 0.75s ease-in-out;
        -ms-transition: all 0.75s ease-in-out;
            transition: all 0.75s ease-in-out;
  }

  .menu_principal nav a{
    text-align: left;
    padding-left: 40px;
  }

  .contenu{ 
    width: 100%;
    padding-top: 150px;
    margin-left: 0;
  }

  a.fermer, p.ouvrir, p.ouvrir a{
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 15px;
    margin: 0;
    font-size: 1em;
    color:rgb(226,177,118);
    font-weight: normal;
  }

  a.fermer:hover, .ouvrir a:hover{
    background: none;
    color: rgb(226,177,118);
  }

  .off{
    transform: translateY(-100%);
  }
  
}
@media screen and (max-width: 480px) {

  .contenu{
    padding: 0;
    padding-top: 125px;
  }

  .contenu article{
    padding: 25px 10px;
  }
  
  .menu_secondaire a{
	  font-size:1em;
	  padding:10px 5px;
	}
	
	article h2.titresecondaire {
	padding-left:0px;
	text-align:center;
	font-size:2em;
	margin-bottom:10px;
	}

  ul.chansons{margin-left:0;
  padding-top:15px;}

  header h2{
    line-height: 1.2em;
    margin-bottom: 10px;
  }

  h1.logo{
    text-align: left;
    padding: 25px;
    font-size: 1.75em;
  }

  a.fermer, p.ouvrir, p.ouvrir a{ top: 0; right: 0;}
 
}

@media screen and (min-width: 1024px) {
  nav a.last:after {
    content: " | ";
    display: inline-block;
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px);
  }

  nav a.last:before {
    content: url(../img/fleche.png);
    margin-right:15px;
    display:inline-block;
    -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
  }

  nav a.next:after {
    content: url(../img/fleche.png);
    display:inline-block;
    vertical-align:middle;
    margin-left:15px;
    padding-bottom:4px;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
  }

  nav a.next:hover:after {
    -webkit-transform: translateX(15px) rotate(180deg);
        -ms-transform: translateX(15px) rotate(180deg);
            transform: translateX(15px) rotate(180deg);
  }

  nav a.last:hover:before {
    -webkit-transform: translateX(-15px);
        -ms-transform: translateX(-15px);
            transform: translateX(-15px);
  }
}

@media screen and (min-width: 1280px) {
 article header{
    text-align:right;
    overflow:hidden;
  }
  
  .col h2.titresecondaire {
  margin-left:30%;
  margin-bottom:30px;
  }
  

  
  .menu_secondaire a{
	  display: block;
	  font-size:1.4em;
	  margin:0;
	  padding:18px 10px;
	  background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll right center / 0px 100% transparent;
	}

  .menu_secondaire a:hover{
  color: rgb(255,255,255);
  background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll right center / 100% 100%;
}
  
}

@media screen and (min-width: 769px) {
  a.fermer, .ouvrir a{display: none;}
  
  .menu_principal a:hover{
    color: rgb(255,255,255);
    background: linear-gradient(rgba(226,177,118,0.75), rgba(226,177,118,0.75)) no-repeat scroll right center / 100% 100%;
  }

}