html {
margin: 0;
}
/* Image de fond */
body {
background-image: url(../images/general/image_fond.png);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
}
/* Barre de menu */
/* Fond noir */
header {
background-color: rgba(0,0,0,0.90);
margin: 0px;
margin-top: 15px;
position: fixed;
min-width: 100%;
height: 111.078px;
}
/* Liens */
nav {
/* margin-top: 15.9925px; */
height: 111.078px;
}
/* Liste de base */
nav > ol {
margin: 0;
height: 111.078px;
padding-left: 20px;
list-style: none;
padding: 0;
text-align: center;
}
/* Enlever le fond bleu entre les liens quand ils sont sélectionnés */
nav > ol::selection {
background: rgba(255, 255, 255, 0);
}
nav > ol > li {
padding: 5px;
display: inline-block;
width: 10%;
box-sizing: border-box;
font-family: Maiandra GD;
text-align: center;
vertical-align: middle;
}
/* Logo */
nav > ol > li:nth-of-type(5) > a {
padding: 0;
}
nav > ol > li > a > img {
max-width: 100%;
}
/* Enlever le fond bleu quand le logo est sélectionné */
nav > ol >li > a > img::selection {
background: rgba(255, 255, 255, 0);
}
/* Liste dans la liste */
/* "Avis et partenaires" */
#dropdown > p {
color: white;
display: inline-block;
box-sizing: border-box;
padding-top: 30.539px;
padding-bottom: 30.539px;
margin: 0;
font-family: Maiandra GD;
font-size: 16px;
text-align: center;
vertical-align: middle;
line-height: 20px;
}
#dropdown > p:hover {
color: orange;
}
/* Liste */
li > ol {
background-color: rgba(0,0,0,0.90);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: none;
margin-top: 5px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
list-style: none;
text-align: left;
}
li:hover {
cursor: pointer;
}
li:hover > ol {
display: block;
position: absolute;
}
li > ol > li {
box-sizing: border-box;
line-height: 25px;
}
li > ol > li > a {
font-size: 15px;
padding: 0;
}
/* Liens de la barre de menu */
a {
font-size: 16px;
text-decoration: none;
padding-top: 30.539px;
padding-bottom: 30.539px;
}
/* Enlever le fond bleu quand les liens sont sélectionnés */
a::selection {
background: rgba(255, 255, 255, 0);
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: orange;
}
/* Fin barre de menu */
/* Section */
main > section {
display: grid;
grid-template-areas: none;
}
/* Fin section */
/* Blocs noirs transparents/fond de texte */
article {
background-color: rgba(0,0,0,0.70);
font-family: Maiandra GD;
margin-top: 150px;
margin-left: 200px;
margin-right: 200px;
border-radius:25px;
}
/* Fin blocs noirs transparents/fond de texte */
/* Titre de la page */
h1 {
color: white;
font-family: Maiandra GD;
font-size: 30px;
font-weight: bold;
text-align: center;
}
/* Enlever le fond bleu du titre quand il est sélectionné */
h1::selection {
background: rgba(255, 255, 255, 0);
}
/* Tableaux pour le formulaire et le bouton (pour envoyer) */
/* Tableau */
table {
margin: auto;
border-collapse: separate;
border-spacing: 40px 30px;
}
/* Dans le tableau avec le formulaire */
/* Taille et réglages des th */
th {
width: 30%;
color: orange;
font-size: 18px;
text-align: left;
vertical-align: text-top;
}
/* Enlever le fond bleu des th quand ils sont sélectionnés */
th > label::selection {
background: rgba(255, 255, 255, 0);
}
/* Zones de texte à remplir pour le nom, mail et sujet */
input {
background-color: rgba(0, 0, 0, 0.493);
width: 410px;
height: 25px;
border-width: thin;
border-radius: 15px;
border-color: white;
color: white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15;
vertical-align: middle;
}
/* Zones de texte pour le message */
textarea {
background-color: rgba(0, 0, 0, 0.493);
width: 410px;
height: 125px;
border-width: thin;
border-radius: 15px;
border-color: white;
color: white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15;
vertical-align: middle;
}
/* Fin tableau avec le formulaire */
/* Dans le tableau avec le bouton (pour envoyer) */
/* Bouton */
.envoyer {
background-color: rgba(255, 166, 0, 0);
border-color: orange;
border-radius: 15px;
width: 150px;
height: 50px;
text-align: center;
color: orange;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px;
font-weight: bold;
}
.envoyer:hover {
background-color: orange;
border-color: rgba(255, 166, 0, 0);
color: white;
}
/* Enlever le fond bleu du bouton quand il est sélectionné */
.envoyer::selection {
background: rgba(255, 255, 255, 0);
}
/* Fin tableau avec le bouton (pour envoyer) */
/* Fin tableaux pour le formulaire et le bouton (pour envoyer) */
/* Footer */
/* Fond noir */
footer {
background-color: rgba(0,0,0,0.90);
margin-top: 150px;
padding-top: 10px;
padding-bottom: 10px;
display: grid;
grid-template-columns: 28% 44% 28%;
grid-template-rows: 0% 70% 30%;
}
/* Image 1 (Avantages jeunes) */
#avantages {
color: white;
max-width: 30%;
min-width: 30%;
display: block;
grid-column: 1;
grid-row-start: 2;
grid-row-end: span 2;
justify-self: left;
align-self: center;
margin-left: 15%;
}
/* Image 2 (Logo) */
#logo {
color: white;
max-width: 40%;
min-width: 40%;
display: block;
grid-column: 1;
grid-row-start: 2;
grid-row-end: span 2;
justify-self: right;
align-self: center;
margin-right: 5%;
}
/* Tél. et adresse mail */
footer > p {
color: orange;
text-align: center;
font-size: 21px;
margin: 0;
line-height: 42px;
grid-column: 2;
grid-row: 2;
justify-self: center;
align-self: center;
}
/* Enlever le fond bleu des paragraphes quand ils sont sélectionnés */
p::selection {
background: rgba(255, 255, 255, 0);
}
/* Copyright / lien conditions générales de vente */
footer > p:nth-of-type(2) {
color: white;
text-align: center;
font-size: 18px;
margin: 0;
line-height: 35px;
grid-column: 2;
grid-row: 3;
justify-self: center;
align-self: center;
}
/* "39" écrit en orange */
footer > p span {
color: orange;
font-size: 18px;
}
/* Enlever le fond bleu quand "39" est sélectionné */
footer > p span::selection {
background: rgba(255, 255, 255, 0);
}
/* Logo facebook */
/* Lien */
footer > a {
cursor: auto;
height: 50px;
width: 50px;
grid-column: 3;
grid-row-start: 2;
grid-row-end: span 2;
justify-self: center;
align-self: center;
}
/* Image logo */
footer > a > img {
color: white;
display: block;
margin: auto;
cursor: pointer;
}
/* Fin footer */