/*========GLOBAL========*/

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Playfair+Display:wght@400;700&display=swap');

* {
    box-sizing:border-box;
}

body {
    line-height:1.8;
    font-family:"Playfair Display", serif;
    color:#34495e;
    text-align:center;
    background-color:#fff;
}

h2, h3 {
    font-weight:normal;
}

.clear {
    clear:both;
}


/*========HEADER========*/

header {
    background-image:url("../img/fond.jpg");
    background-position:center;
    background-size:cover;
    height:500px;
    color:#fff;
}

nav {
    padding:10px;
    background-color:rgba(255, 255, 255, 0.3);
}


nav i {
    width:100%;
}

nav a {
    margin: 10px 30px;
    display:inline-block;
    font-family:"Kaushan Script", fantasy;
    font-size:1.5em;
    text-decoration:none;
    color:#fff;
}

header p {
    padding:10px;
    margin:0;
    font-size:1.2em;
    background-color:rgba(255, 255, 255, 0.15);
}

header h1 {
    margin-top:70px;
    font-family:"Kaushan Script", fantasy;
    font-size:2em;
    text-shadow:0 0 10px rgba(0,0,0, 0.5);
}

/*========SECTION 1========*/

.nous {
    padding:20px 40px;
}

.nous article {
    margin:40px 0;
}

.nous p {
    text-align:left;
    font-size:0.9em;
}

.nous article img {
    float:left;
    width:300px;
    margin: 0 20px 0 0;
}

.nous article .img_right {
    float:right;
    margin:0 0 0 20px;
}

.nous hr {
    height:1px;
    border:none;
    background-color:#eacee4;
}




/*========SECTION 2========*/

.nos_cours {
    background: linear-gradient(210deg, #CDB8E8, #675FC6);
    color:#fff;
    padding:10px 0 30px;
    line-height:2;
}

.nos_cours article {
    display:inline-block;
    width:27%;
    margin:0 3%;
}

.nos_cours img {
    width:150px;
}



/*========MAP========*/

iframe {
    width:100%;
    display:block;
    height:450px;
    border:0;
}


/*========HORAIRES PAGES AGENDA========*/


#horaires table {
    display:inline-block;
    background-color:#EEEEEE;
    margin-bottom:20px;
    padding:2px;
    color:#fff;
}

#horaires table thead th {
    color:#8B76D2;
}

#horaires table tbody td {
    padding:5px 20px;
    border:solid 2px #EEEEEE;
}

#horaires table tbody .td_rose {
    background-color:#D98FD4;
}


#horaires table tbody .td_violet_c {
    background-color:#BEA4D9;
}

#horaires table tbody .td_violet_f {
    background-color:#8B76D2;
}

/*========PAGE CONTACT========*/

/*Tableau reservation */

#reservation-table table {
    width: 90%;
    margin:0 auto 20px;
    border-collapse: collapse;
}

#reservation-table th {
    text-align: left;
    font-family: "Kaushan Script", fantasy;
    background-color: #C4A9DE;
    color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    padding: 10px;
}

#reservation-table td {
    border: 1px solid #CCC;
    padding: 10px;
}

#reservation-table td:first-child {
    text-align: left;
}

#reservation-table td a {
    text-decoration: none;
    color: #A486C1;
}

#reservation-table tr:nth-child(even) {
    background-color: #FAFAFA;
} 


/*Formulaire reservation */

#reservation-form fieldset {
    margin: 15px auto;
    width: 90%;
    border: solid 1px #dedede;
}

#reservation-form fieldset legend {
    text-align: left;
}


#reservation-form form div {
    display: inline-block;
    margin: 10px;
}

#reservation-form form input[type="text"], 
#reservation-form form input[type="email"]  {
    border: none;
    border-bottom: solid 1px #dedede;
}

#reservation-form form select {
    width: 96%;
    height: 40px;
    border: solid 1px #dedede;
    border-radius: 2px;
    background-color: #fff;
}

#reservation-form form input[type="submit"] {
    color: #fff;
    background-color: #8A62C2;
    padding: 10px 15px;
    margin: 20px;
    border: none;
}



/*========FOOTER========*/

footer {
    padding:20px 50px;
    background-color:#8b76d2;
    color:#fff;
    font-size:0.9em;
}

footer img {
    width:50px;
}

footer a {
    color:#fff;
}


/*## CSS
Mettre icone au dessus sans le <br> dans la nav