@charset "UTF-8";

@font-face {
    font-family: 'Inconsolata';
    src: url('font-face/Inconsolata-Regular.woff2') format('woff2'),
        url('font-face/Inconsolata-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #415A77;
    font: 1em Inconsolata, Quicksand, verdana, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
}

/*CLASSES PERSONNALISÉES*/

.bouton {
    cursor: pointer;
    position: absolute;
    top: 170px;
}

.photo {
    background-position: center;
    background-size: cover;
    display: inline-block;
    height: 400px;
    margin: 0;
    width: 1140px;
}

.club {
    font-size: 5em;
    margin: 0;
    padding: 0;
}

.planeteGauche {
    display: flex;
}

.planeteDroite {
    display: flex;
}

.imgContact {
    display: flex;
}

div.retourHaut img {
    bottom: 20px;
    opacity: calc(0.66);
    position: fixed;
    right: 10px;
}

div.retourHaut img:hover {
    opacity: calc(1);
}

/*IMAGE COMÈTE*/

div.imageComete {
    align-items: center;
    background-image: url('img/photos-planetes/comete.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    height: 224px;
    justify-content: center;
    transition: 0.5s;
    width: 255px;
}

div.imageComete p {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    opacity: 0;
    transform: scale(1);
    transition: 0.8s;
}

div.imageComete:hover {
    box-shadow: 0 0 0 120px rgb(0, 0, 0, 0.75) inset;
}

div.imageComete p:hover {
    opacity: 1;
    transform: scale(2);
}

/*IMAGE OBSERVATION*/

div.imageObservation {
    align-items: center;
    background-image: url('img/photos-planetes/observation.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    height: 224px;
    justify-content: center;
    transition: 0.5s;
    width: 255px;
}

div.imageObservation p {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    opacity: 0;
    transform: scale(1);
    transition: 0.8s;
}

div.imageObservation:hover {
    box-shadow: 0 0 0 120px rgb(0, 0, 0, 0.75) inset;
}

div.imageObservation p:hover {
    opacity: 1;
    transform: scale(2);
}

/*IMAGE LUNE*/

div.imageLune {
    align-items: center;
    background-image: url('img/photos-planetes/moon-g10b47cf16_1920.jpg.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    height: 224px;
    justify-content: center;
    transition: 0.5s;
    width: 255px;
}

div.imageLune p {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    opacity: 0;
    transform: scale(1);
    transition: 0.8s;
}

div.imageLune:hover {
    box-shadow: 0 0 0 120px rgb(0, 0, 0, 0.75) inset;
}

div.imageLune p:hover {
    opacity: 1;
    transform: scale(2);
}

/*IMAGE PLANÈTE*/

div.imagePlanete {
    align-items: center;
    background-image: url('img/photos-planetes/image\ planete-formation.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    height: 224px;
    justify-content: center;
    margin: 0 auto;
    transition: 0.5s;
    width: 255px;
}

div.imagePlanete p {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    opacity: 0;
    transform: scale(1);
    transition: 0.8s;
}

div.imagePlanete:hover {
    box-shadow: 0 0 0 120px rgb(0, 0, 0, 0.75) inset;
}

div.imagePlanete p:hover {
    opacity: 1;
    transform: scale(2);
}

/*IMAGE ÉTOILES*/

div.imageEtoiles {
    align-items: center;
    background-image: url('img/photos-planetes/constellation.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    height: 224px;
    justify-content: center;
    margin: 0 auto;
    transition: 0.5s;
    width: 255px;
}

div.imageEtoiles p {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    opacity: 0;
    transform: scale(1);
    transition: 0.8s;
}

div.imageEtoiles:hover {
    box-shadow: 0 0 0 120px rgb(0, 0, 0, 0.75) inset;
}

div.imageEtoiles p:hover {
    opacity: 1;
    transform: scale(1.5);
}

/*FIN CLASSES PERSONNALISÉES*/

/*NAVIGATION*/
div#containerNav {
    background-color: #e0e1dd;
    border: 1px solid #000;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 999;
}

nav#menuPrincipal {
    margin: 0 auto;
    padding: 0;
    width: 1140px;
}

nav#menuPrincipal ul {
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#menuPrincipal ul li {
    display: inline-block;
    position: relative;
}

nav#menuPrincipal>ul {
    text-align: center;
}

nav#menuPrincipal li a {
    display: block;
    padding: 20px;
    text-align: left;
    text-decoration: none;
}

nav#menuPrincipal li:hover>a,
nav#menuPrincipal li a:hover {
    background-color: #778da9;
    color: #fff;
}

nav#menuPrincipal ul li:hover>ul {
    display: block;
}

nav#menuPrincipal ul ul {
    background-color: #778da9;
    border-top: solid 1px #000;
    display: none;
    position: absolute;
    z-index: 999;
}

nav#menuPrincipal ul ul a {
    color: #000;
    width: 225px;
}

nav#menuPrincipal ul ul a:hover {
    background-color: #475a77;
}

nav#menuPrincipal ul ul li {
    border-bottom: 1px solid #000;
    list-style-type: none;
    list-style: none;
}

nav#menuPrincipal ul ul li:last-child {
    border-bottom: 0;
}

nav#menuPrincipal a:link {
    color: #000;
}

nav#menuPrincipal a:visited {
    color: #000;
}

/*FIN NAVIGATION*/

/*HEADER*/

div#containerHeader {
    background-image: url('img/photos-planetes/galaxie champs.jpg');
    background-position: center;
    background-size: cover;
}

header {
    display: flex;
    height: 400px;
    margin: 0 auto;
    width: 1140px;
}

header h1 {
    color: white;
    font-family: Quicksand;
    font-size: 3em;
    margin: 20px 15px 0 15px;
}

header button {
    border: none;
    font-family: quicksand;
    font-size: 1em;
    height: 162px;
    line-height: 50px;
    margin: 38px 0 0 90px;
    padding-left: 10px;
    text-align: left;
    width: 300px;
}

header button img {
    float: right;
    margin-top: -50px;
}

header button:hover {
    background-color: #415A77;
    cursor: pointer;
}

header>p {
    margin: 0 75px 30px 175px;
}

/*FIN HEADER*/

/*SLIDER*/

div#sectionSlider {
    border: solid 4px #fff;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    height: 400px;
    margin: 30px auto 15px auto;
    overflow: hidden;
    position: relative;
    width: 1140px;
}

img#gauche {
    filter: invert(100);
    left: 30px;
    opacity: 0.6;
    scale: 1.5;
    transition: all 0.3s ease;
}

img#droite {
    filter: invert(100);
    opacity: 0.6;
    right: 30px;
    scale: 1.5;
    transition: all 0.3s ease;
}

img#gauche:hover {
    opacity: 1;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

img#droite:hover {
    opacity: 1;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

div#container {
    height: 400px;
    width: 1140px;
}

div#sectionSlider p {
    color: white;
    font-family: quicksand;
    font-size: 2em;
    margin: 0;
    position: absolute;
    right: 230px;
    top: 170px;
    transition: all 0.5s ease;
    z-index: 1;
}

div#sectionSlider p:hover {
    cursor: default;
    transform: scale(1.3);
    transition: all 0.5s ease;
}

div#sectionSlider p#compteurSlider {
    color: white;
    font-family: quicksand;
    font-size: 1.5em;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 1;
}

div#sectionSlider p#compteurSlider:hover {
    transform: none;
}

div#sectionNouvelles a,
div#sectionFormations a {
    text-decoration: none;
}

/*FIN SLIDER*/

/*SECTION CITATION*/

div#sectionCitation {
    margin: 0 auto;
    padding-top: 30px;
    width: 1140px;
}


div#sectionCitation h1,
section#planetes h1 {
    color: white;
    font-family: quicksand;
    font-size: 5em;
    margin: 10px 0 0 0;
    text-align: center;
}

div#sectionCitation blockquote {
    border-bottom: 10px solid white;
    border-radius: 10px;
    color: white;
    font-size: 3em;
    padding: 40px;
    text-align: center;

}

/*FIN SECTION CITATION*/

/*NOUVELLES*/

div#sectionNouvelles {
    margin: 0 auto;
    width: 1140px;
}

div#sectionNouvelles h1 {
    color: white;
    font-family: quicksand;
    font-size: 5em;
    margin-bottom: 30px;
}

div#sectionNouvelles article {
    display: flex;
    margin-top: 30px;
}

div#sectionNouvelles article:last-child {
    margin-bottom: 45px;
}

div#article {
    margin-left: 30px;
}

div#article h3 {
    color: white;
    font-family: quicksand;
    font-size: 2.9375em;
    margin: 0;
}

div#article p {
    color: white;
    font-size: 1.5625em;
    margin-top: 15px;
    margin: 0;
    padding: 0;
    text-align: justify;
    width: 855px;
}

/*FIN NOUVELLES*/

/*FORMATIONS*/

div#sectionFormations {
    padding: 30px;
}

div#sectionFormations h1 {
    color: white;
    font-family: quicksand;
    font-size: 4em;
    margin: 0 0 15px 0;
    text-align: center;
}

div#sectionFormations {
    background-color: #182838;
}

div#sectionFormations section {
    display: flex;
    margin: 0 auto;
    width: 700px;
}

div#sectionFormations article {
    margin: 0 25px;
    text-align: center;
    width: 300px;
}

div#sectionFormations article p:last-child {
    color: white;
    font-size: 1.5625em;
}

/*FIN FORMATIONS*/

/*SECTION MISSION ENTREPRISE*/

div#sectionMissionEntreprise section {
    color: white;
    font-size: 1.5625em;
    margin: 0 auto;
    padding: 30px 0;
    width: 1140px;
}

div#sectionMissionEntreprise h2 {
    font-family: quicksand;
    font-size: 2.9375em;
    margin: 5px 0 0 0;
    text-align: center;
}

div#sectionMissionEntreprise p {
    text-align: justify;
}

/*FIN SECTION MISSION ENTREPRISE*/

/*FOOTER*/

div#containerFooter {
    background-color: #182638;
}

footer {
    margin: 0 auto;
    width: 1140px;
}

footer h3 {
    color: white;
    font-family: quicksand;
    font-size: 2.9375em;
    margin: 0;
    padding-top: 15px;
    text-align: center;
}

footer p {
    color: white;
    font-family: quicksand;
    font-size: 2em;
    margin: 0;
    padding: 15px;
    text-align: center;
}

footer form {
    display: flex;
}

footer form input {
    border-radius: 50px;
    border: none;
    font-size: 1.2em;
    height: 47px;
    margin-left: 150px;
    margin-right: 15px;
    padding-left: 15px;
    width: 540px;
}

footer form input::placeholder {
    font-family: quicksand;
    font-size: 1.4em;
}

footer button {
    background-color: #e0e1dd;
    border-radius: 50px;
    border: none;
    font-family: quicksand;
    font-size: 1.4em;
    height: 50px;
    margin-left: 15px;
    margin-right: 15px;
    width: 255px;
}

footer button:hover {
    background-color: #475a77;
    color: white;
    cursor: pointer;
}

footer p:nth-child(1) img {
    width: -25%;
}

div#imgReseau {
    display: flex;
    margin: 30px auto;
    width: 168px;
}

div#imgReseau img {
    filter: invert(100);
    margin: 10px 5px 10px 5px;
}

div#imgReseau img:hover {
    cursor: pointer;
    transform: rotate(15deg);
}

footer p:last-child {
    font-size: 0.9375em;
    margin-top: 0;
    padding-top: 0;
}

/*FIN DE FOOTER*/

/*IMAGE RETOUR EN HAUT*/

div.retourHaut img {
    filter: invert(100);
    transform: scale(1.4);
}

/*SECTION PLANETES*/

div#containerPlanetes {
    background-color: #182638;
}

section#planetes {
    height: 2600px;
    margin: 0 auto;
    padding-top: 45px;
    width: 1140px;
}

section#planetes h1 {
    font-family: quicksand;
    margin: 0 0 60px 0;
}

section#planetes h2 {
    color: white;
    margin: 0 0 60px 0;
    text-align: center;
}

section#planetes p {
    color: white;
    font-size: 1.5625em;
    margin: 15px 15px;
    opacity: 0;
}

section#planetes p:hover,
section#planetes img:hover {
    opacity: 100;
    transition: 0.5s;
}

/*FIN SECTION PLANETE*/

/*TARIFS MEMBRES*/

div#tarifsMembres section {
    display: flex;
    margin: 0 auto;
    padding-bottom: 30px;
    width: 1140px;
}

div#tarifsMembres h1 {
    color: white;
    font-family: quicksand;
    font-size: 5em;
    margin: 30px auto 0 auto;
    width: fit-content;
}

div#tarifsMembres section article h2 {
    color: white;
    font-family: quicksand;
    font-size: 2.9375em;
    font-weight: normal;
    margin: 0 auto;
    width: fit-content;
}

div#tarifsMembres section article h1 {
    border-bottom: 8px solid white;
    color: white;
    font-family: quicksand;
    font-size: 15em;
    font-weight: normal;
    margin: 0 auto;
    padding-bottom: 20px;
    width: fit-content;
}

div#tarifsMembres section article {
    background-color: #778da9;
    border-radius: 60px;
    height: 1000px;
    margin: 30px 15px 0 15px;
    padding: 15px;
    width: 510px;
}

div#tarifsMembres section p {
    color: white;
    font-size: 2em;
    margin-left: 30px;
    text-align: left;
}

/*FIN TARIFS MEMBRES*/

/*FORMULAIRE D'ADHÉSION*/

div#sectionFormulaireAdhesion {
    background-color: #e0e1dd;
}

div#sectionFormulaireAdhesion section {
    margin: 0 auto;
    padding: 30px 0;
    width: 1140px;
}

div#sectionFormulaireAdhesion h1 {
    color: #415A77;
    font-family: quicksand;
    font-size: 5em;
    margin: 0 auto 0 auto;
    text-align: center;
    width: fit-content;
}

div#sectionFormulaireAdhesion form {
    text-align: left;
}

div#sectionFormulaireAdhesion form legend {
    font-family: quicksand;
    font-size: 2em;
    margin: 30px 0;
    text-align: center;
}

div#sectionFormulaireAdhesion form label {
    font-family: quicksand;
    font-size: 1.5em;
    margin-left: 200px;
}

div#sectionFormulaireAdhesion form input[type="radio"]+label {
    margin-left: 0;
}

div#sectionFormulaireAdhesion form input[type="checkbox"]+label {
    margin-left: 0;
}

div#sectionFormulaireAdhesion form input {
    border-radius: 45px;
    border: none;
    display: block;
    font-size: 1.5em;
    height: 60px;
    margin: 15px auto;
    padding: 5px 10px;
    width: 750px;
}

div#sectionFormulaireAdhesion form input::placeholder {
    font-size: 1em;
}

div#sectionFormulaireAdhesion form input#txtCodePostal {
    border: none;
    height: 60px;
    margin-right: 650px;
    width: 280px;
}

div#sectionFormulaireAdhesion form select {
    border-radius: 45px;
    border: none;
    display: block;
    font-family: quicksand;
    font-size: 1.5em;
    height: 70px;
    margin: 15px 0;
    padding-left: 20px;
    width: 300px;
}

div#listePays {
    margin-left: 190px;
}

div#sectionFormulaireAdhesion form input[type="radio"] {
    display: inline;
    height: 30px;
    margin-left: 190px;
    width: 30px;
}

div#sectionFormulaireAdhesion form input[type="checkbox"] {
    display: inline;
    height: 30px;
    margin-left: 190px;
    width: 30px;
}

div#sectionFormulaireAdhesion button,
div#sectionApropos section form button {
    background-color: #778da9;
    border-radius: 50px;
    border: none;
    color: white;
    font-family: quicksand;
    font-size: 1.4em;
    height: 50px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 25px;
    width: 255px;
}

div#sectionFormulaireAdhesion button:hover {
    background-color: #182838;
    color: white;
    cursor: pointer;
}

div#sectionFormulaireAdhesion button[type="submit"] {
    background-color: #475a77;
    margin-left: 300px;
}

div#sectionFormulaireAdhesion button[type="submit"]:hover {
    background-color: #182638;
    cursor: pointer;
}

div#sectionFormulaireAdhesion p {
    margin: 15px auto;
    padding-bottom: 15px;
    width: 700px;
}

/*FIN FORMULAIRE*/

/*SECTION AVEC LES BOUTONS DE LA PAGE TARIFS*/

div#boutonsFormations section {
    margin: 0 auto;
    padding-bottom: 30px;
    text-align: center;
    width: 1140px;
}

div#boutonsFormations section h1 {
    color: white;
    font-family: quicksand;
    font-size: 4em;
    text-align: center;
}

div#boutonsFormations button {
    background-color: #e0e1dd;
    border-radius: 50px;
    border: none;
    color: black;
    font-family: quicksand;
    font-size: 1.4em;
    height: 50px;
    width: 255px;
}

div#boutonsFormations button:hover {
    background-color: #182638;
    color: white;
    cursor: pointer;
}

/*FIN SECTION BOUTONS DE LA PAGE TARIFS*/

/*SECTION CALENDRIER*/

div#calendrierEvenements section {
    margin: 0 auto;
    padding-bottom: 15px;
    width: 1140px;
}

div#calendrierEvenements h1:first-child {
    color: white;
    font-family: quicksand;
    font-size: 5em;
    margin: 15px 0 0 0;
    text-align: center;
}

div#calendrierEvenements table {
    margin: 30px auto 0 auto;
    width: 1110px;
}

div#calendrierEvenements table h3 {
    font-family: quicksand;
    font-size: 1.5em;
    margin-top: 0;
}

div#calendrierEvenements tr:nth-child(odd) {
    background-color: #e0e1dd;
}

div#calendrierEvenements tr:nth-child(even) {
    background-color: #182638;
    color: white;
}

div#calendrierEvenements tr:nth-child(even):hover {
    background-color: #778da9;
}

div#calendrierEvenements tr:nth-child(odd):hover {
    background-color: #778da9;
    color: white;
}

div#calendrierEvenements tr:nth-child(even):hover img {
    filter: invert(100);
}

div#calendrierEvenements td {
    padding: 15px;
}

div#calendrierEvenements h1 {
    color: white;
    font-family: quicksand;
    font-size: 3em;
    margin-bottom: 40px;
    text-align: center;
}

div#btonCalendrier {
    margin: 0 auto;
    text-align: center;
    width: 1140px;
}

div#calendrierEvenements div#btonCalendrier button {
    background-color: #e0e1dd;
    border-radius: 50px;
    border: none;
    font-family: quicksand;
    font-size: 1.4em;
    height: 50px;
    width: 255px;
}

div#calendrierEvenements div#btonCalendrier button:hover {
    background-color: #182838;
    color: white;
}

/*FIN SECTION CALENDRIER*/

/*SECTION CONTACT*/

div#listeContacts section {
    color: white;
    margin: 0 auto;
    padding-bottom: 30px;
    width: 1140px;
}

div#listeContacts section h1 {
    font-family: quicksand;
    font-size: 4em;
    text-align: center;
}

div#listeContacts section h2 {
    font-family: quicksand;
    font-size: 2em;
    font-weight: normal;
    margin-bottom: 5px;
}

div#listeContacts section figure {
    margin: 0;
}

div#listeContacts section article p {
    margin: 0 0 0 15px;
}

div#listeContacts section a,
div#listeContacts section a:visited {
    color: #e0e1dd;
    text-decoration: none;
}

div#listeContacts section a:hover {
    color: #778da9;
}

/*FIN SECTION CONTACTS*/

/*SECTION A PROPOS*/

div#sectionApropos {
    background-color: #e0e1dd;
}

div#sectionApropos section {
    color: #415A77;
    margin: 0 auto;
    padding-bottom: 45px;
    width: 1140px;
}

div#sectionApropos section h1 {
    color: #475a77;
    font-family: quicksand;
    font-size: 4em;
    margin: 0 0 15px 0;
    padding-top: 30px;
}

div#sectionApropos section h2 {
    font-size: 2em;
    font-weight: normal;
}

div#sectionApropos img {
    filter: none;
}

div#sectionApropos li {
    background-image: url('img/photos-planetes/fusee.png');
    background-position: left;
    background-repeat: no-repeat;
    list-style-type: none;
    list-style: none;
    padding-left: 30px;
}

/*FORMULAIRE DE LA PAGE A PROPOS*/

div#sectionApropos section form {
    margin-top: 15px;
    text-align: center;
}

div#sectionApropos section form fieldset {
    border-radius: 30px;
}

div#sectionApropos section form legend {
    font-family: quicksand;
}

div#sectionApropos section form label {
    font-family: quicksand;
    font-size: 1.5em;
}

div#sectionApropos section form input {
    border-radius: 45px;
    border: none;
    box-sizing: border-box;
    font-size: 1.5em;
    height: 60px;
    margin: 15px auto;
    padding: 5px 10px;
    width: 750px;
}

div#sectionApropos section form textarea {
    border-radius: 30px;
    border: none;
    box-sizing: border-box;
    font-size: 2em;
    margin: 15px 0;
    padding: 5px 10px;
    width: 750px;
}

div#sectionApropos section form button[type="submit"] {
    background-color: #475a77;
    margin-bottom: 30px;
}

div#sectionApropos section form button:hover {
    background-color: #182638;
    cursor: pointer;
}

/*FIN DE FORMULAIRE A PROPOS*/
/*FIN SECTION A PROPOS*/