/* Le code CSS de la démo */
/* *****************************************************************
TOOLS
***************************************************************** */

* {
	box-sizing: border-box; /* On spécifie que la largeur (width) de chaque boîte comprend le padding et la bordure (par défaut, c'est seulement la largeur du contenu) */
}

html {
	font-size: 62.5%; /* 1rem = 10px (la formule est 10/16*100) la taille par défaut étant 16px */
    
    
}

body {
	font-size: 1.6rem; /* on remets la taille du texte par défaut pour le body à 16px en utilisant les rem comme unité) */
    font-family: 'Lato', sans-serif;    
    margin: 0;
	line-height:1.6rem;
	color:#333;
	background-color:#fff;
	
	
    
}

.container{
    width:90%;
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
    
}

/* *****************************************************************
TITRES
***************************************************************** */
h1{
    color : #7e4a7c;
    font-size:5rem;
    text-align:center;
    padding:5%;
}

h2{
    font-size:4rem;
    color:#b878b5;
    padding : 2% 0;
}
h3{
    font-size:3rem;
    color:#b878b5;
    margin:0;
}

/* *****************************************************************
HEADER
***************************************************************** */
.header{
    padding-top:5rem;
    text-align:center;
    border-top:8px solid #7e4a7c;
}
nav{
      font-size:2.4rem;
      background-color:#7e4a7c;
      
  
}
nav ul{
    display:flex;
      justify-content:space-around;
      flex-wrap:nowrap;
      padding :  0;
      list-style:none;
}



nav li a {
    text-decoration:none;
    color:#fff;
    text-transform:uppercase;
    display: inline-block;
          padding : 1rem 2.5rem;

    
}
nav li a:hover{
    background-color:#fff;
    color:#7e4a7c;
}

/* *****************************************************************
ABOUT
***************************************************************** */
.about{
    display:flex
    
}
.about article{
    width :65%;
}

.about img{
    float:left;
    margin-right:2%;
}
.about aside{
    width:25%;
    line-height:3rem;
}
.about li{
    list-style:url("../instructions/images/puce-fleche.png");
}
/* *****************************************************************
STAFF
***************************************************************** */


.flex{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.teach{
    width : 50%;
    display:flex;
    justify-content:space-between;
    flex-wrap:nowrap;
    margin:0 0 4% 0;
}
.teach img{
    float:left;
    margin-right:2%;
    /*height:100%;*/
    /*width : 100%;*/
}



figcaption {
      flex-direction: column;
    
}

figcaption a{
    align-self: flex-end;
}


/* *****************************************************************
tableau
***************************************************************** */

.classes table{
    width : 90%;
    margin-left:auto;
    margin-right:auto;
    border-collapse: collapse;

    /*line-height: 2.5;*/
}

.classes th{
    background-color:#7e4a7c;
    color:#fff;
        padding : 1% 0;

}

.classes tr td{
    border-bottom: 1px solid #b878b5;
    border-collapse: collapse;
    text-align:center;
    padding : 1% 0;
   
}

.classes tr td:first-child{
    font-weight:bold;
}

td:empty{
    background-color: #ffeefe;
}


/* *****************************************************************
formulaire
******************************************************************/


.booking form{
    border:solid 1px #b878b5;
    margin:1%;
}
.booking fieldset{
    background-color:#ffeefe;
    border:none;
    margin:2%;
    display:flex;
    justify-content:space-around;

}
.info div{
    width : 50%;
    padding:2%;
}
.cours div{
    width : 30%;
    padding:2%;
}
.booking fieldset input{
    width : 70%;
    padding:2%;
    margin-left:2%;
}
.booking fieldset select{
    width : 60%;
    padding:2%;
        margin-left:2%;

}
label[for=name]
{ color : #7e4a7c ;
    font-weight: bold;
    font-size:2.4rem;
    font-family: 'Economica', sans-serif;
}
label[for=email]
{ color : #7e4a7c ;
    font-weight: bold;
    font-size:2.4rem;
    font-family: 'Economica', sans-serif;
}
label[for=Teacher]
{ color : #7e4a7c ;
    font-weight: bold;
    font-size:2.4rem;
    font-family: 'Economica', sans-serif;
}
label[for=Day]
{ color : #7e4a7c ;
    font-weight: bold;
    font-size:2.4rem;
    font-family: 'Economica', sans-serif;
}
label[for=Session]
{ color : #7e4a7c ;
    font-weight: bold;
    font-size:2.4rem;
    font-family: 'Economica', sans-serif;
}

input[name=name]{
    border : 1px solid #7e4a7c;
}
input[name=email]{
    border : 1px solid #7e4a7c;
}
select[name=teacher]{
    border : 1px solid #7e4a7c;
}
select[name=Days]{
    border : 1px solid #7e4a7c;
}
select[name=Session]{
    border : 1px solid #7e4a7c;
}


.ButtonForm{
    
    text-align:center;
   
}
.ButtonForm button{
    background-color:#7e4a7c;
    font-size:2.5rem;
    color:#fff;
    padding:0.5% 1%;
    margin : 1%;
    cursor: pointer;
}
.rs{
    width:100%;
    text-align:center;
    background-color:#7e4a7c;
    padding : 1%;
}
i{
    font-size:4rem;
    color:#fff;
    margin:1%
    
}


h1, h2, h3, nav, button{
    font-family: 'Economica', sans-serif;
}
.violet{
    color : #b878b5;
    font-style:italic;
}


.footer {
    width : 100%;
	padding: 2em;
	text-align: center;
	color: #fff;
	background-color: #444;
}





.more{
    font-size:2rem;
    background-color:#7e4a7c;
    color:#fff;
    text-decoration:none;
    padding : 1% 2%;
    text-transform:uppercase;
    display:inline-block;

}