/* COULEURS */
:root {
--rouge: #C8001D;
--blanc: #FFFFFF;
--gris: #F5F5F5;
--texte: #1A1A1A;
}


body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--gris);
color: var(--texte);
}


header {
background: var(--rouge);
color: var(--blanc);
padding: 20px;
text-align: center;
}


nav a {
color: var(--blanc);
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}
nav a.active {
text-decoration: underline;
}


.hero {
background: var(--blanc);
padding: 30px;
text-align: center;
border-bottom: 3px solid var(--rouge);
}


.content {
max-width: 900px;
margin: auto;
padding: 20px;
background: var(--blanc);
}


.categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}


.cat {
background: var(--rouge);
color: var(--blanc);
padding: 15px;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
}


footer {
text-align: center;
padding: 15px;
background: var(--rouge);
color: var(--blanc);
margin-top: 20px;
}