/* Styles globaux */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f8ff; /* Bleu clair pour thème marin */
color: #333;
line-height: 1.6;
}
/* En-tête */
header {
background-color: #007bff; /* Bleu primaire */
color: white;
text-align: center;
padding: 20px;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
header p {
margin: 5px 0 0;
}
/* Navigation */
nav {
background-color: #0056b3; /* Bleu foncé */
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 15px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
/* Contenu principal */
main {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
section {
margin-bottom: 40px;
}
h2 {
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
/* Formulaire */
form {
display: flex;
flex-direction: column;
max-width: 400px;
}
label {
margin-bottom: 5px;
}
input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #0056b3;
}
/* Pied de page */
footer {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
/* Lien skip pour accessibilité */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #007bff;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* Responsive design */
@media (max-width: 768px) {
header h1 {
font-size: 2em;
}
nav ul {
flex-direction: column;
}
nav li {
margin: 10px 0;
}
main {
padding: 0 10px;
}
}