120 lines
2.2 KiB
CSS
120 lines
2.2 KiB
CSS
@charset "UTF-8";
|
|
/* Import des polices textuelles */
|
|
@font-face {
|
|
font-family: 'roboto_slabregular';
|
|
src: url('/fonts/RobotoSlab-Regular.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'roboto_slabbold';
|
|
src: url('/fonts/RobotoSlab-Bold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: bold;
|
|
}
|
|
/* Polices utilisées pour le texte normal et les titres */
|
|
* {
|
|
font-family: 'roboto_slabregular', serif;
|
|
}
|
|
h1,h2,h3,h4 {
|
|
font-family: "roboto_slabbold", serif;
|
|
}
|
|
/* Réglages de la page */
|
|
body {
|
|
text-align: center;
|
|
font-size: medium;
|
|
color: #fff;
|
|
margin: 0;
|
|
background: url('/pictures/fond.jpg') no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
/* Réglages des liens dans les pages */
|
|
a {
|
|
text-decoration: underline dotted;
|
|
}
|
|
.service a {
|
|
text-decoration: none;
|
|
}
|
|
a:link,
|
|
a:visited {
|
|
color: #ebfffc;
|
|
}
|
|
a:hover {
|
|
color: #9ee883;
|
|
}
|
|
/* Focus pour la navigation au clavier */
|
|
a:focus {
|
|
outline: 3px solid white;
|
|
outline-offset: 4px;
|
|
}
|
|
/* Réglages pour le corps de page */
|
|
header, footer {
|
|
background: #3e748f;
|
|
}
|
|
main {
|
|
display: block;
|
|
margin: auto;
|
|
background: rgba(20, 85, 118, 0.78);
|
|
}
|
|
.formel {
|
|
text-align: left;
|
|
margin: 0 15%;
|
|
padding: 0.5% 5%;
|
|
font-size: 1.25em;
|
|
}
|
|
/* Réglages pour les blocs du menu de navigation */
|
|
.service {
|
|
padding: 15px;
|
|
margin: 10px 10px;
|
|
background-color: #457a91;
|
|
width: 200px;
|
|
display: inline-block;
|
|
}
|
|
.bouton {
|
|
padding: 5px;
|
|
background-color: #083c5c;
|
|
display: block;
|
|
margin: 11px 0;
|
|
}
|
|
.boutoff {
|
|
background: none;
|
|
}
|
|
/* Réglage pour cacher du texte utilisé uniquement par les navigateurs textes dans Firefox et consorts */
|
|
.textmode {
|
|
display: none;
|
|
}
|
|
/* Réglages pour les images */
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
svg {
|
|
margin: 10% 30%;
|
|
}
|
|
/* Réglages pour les listes */
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
/* Réglages pour le pied de page */
|
|
footer {
|
|
padding: 20px 0;
|
|
font-weight: bold;
|
|
margin: auto 0;
|
|
}
|
|
/* Amélioration de l'expérience mobile */
|
|
@media (max-width: 1060px) {
|
|
body {
|
|
font-size: small;
|
|
}
|
|
.formel {
|
|
font-size: medium;
|
|
}
|
|
}
|
|
/* Désactivation du masquage des éléments pour les navigateurs textes (si prise en charge du CSS) */
|
|
@media (grid) and (monochrome) {
|
|
.textmode {
|
|
display: inherit;
|
|
}
|
|
}
|