/* Styles généraux */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #333;
    text-align: center;
}

header {
    background: #1e1e1e;
    color: 222;
    text-align: center;
    padding: 20px 20px;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #00468b;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

main {
    padding: 40px 20px;
    max-width: 850px;
    margin: auto;
}

/* Styles des catégories */
.categories {
    background: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.categories h2 {
    color: #007491;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories li {
    background: #00468b;
    margin: 10px 0;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s, transform 0.2s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.categories li:hover {
    background: #3579bdba;
    transform: scale(1.05);
}

.categories a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
}

/* Styles orange */

.orange {
    background: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.orange h2 {
    color: #007491;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.orange ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.orange li {
    background: #ff7b00;
    margin: 10px 0;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s, transform 0.2s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.orange li:hover {
    background: #ff7b009a;
    transform: scale(1.05);
}

.orange a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
}

/* Styles red */

.red {
    background: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.red h2 {
    color: #007491;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.red ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.red li {
    background: #a50000;
    margin: 10px 0;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s, transform 0.2s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.red li:hover {
    background: #a500008a;
    transform: scale(1.05);
}

.red a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
}

/* Styles purple */

.purple {
    background: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.purple h2 {
    color: #007491;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.purple ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.purple li {
    background: #500091;
    margin: 10px 0;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s, transform 0.2s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.purple li:hover {
    background: #5000918a;
    transform: scale(1.05);
}

.purple a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
}