:root {

    --primary-color: #007bff; /* Bleu pour les éléments interactifs */

    --secondary-color: #6c757d; /* Gris secondaire */

    --accent-color: #28a745; /* Vert pour succès/validation */

    --danger-color: #dc3545; /* Rouge pour alerte/danger */

    --text-color: #343a40; /* Texte sombre */

    --background-color: #f8f9fa; /* Fond clair */

    --card-background: #ffffff; /* Fond des cartes/sections */

    --border-color: #dee2e6; /* Couleur des bordures */

}



body {

    font-family: 'Arial', sans-serif;

    line-height: 1.6;

    margin: 0;

    padding: 0;

    background-color: var(--background-color);

    color: var(--text-color);

}



.container {

    max-width: 960px;

    margin: 20px auto;

    background: var(--card-background);

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



header {

    background-color: var(--primary-color);

    color: white;

    padding: 20px 0;

    text-align: center;

    border-top-left-radius: 8px;

    border-top-right-radius: 8px;

    margin-bottom: 20px;

}



header h1 {

    margin: 0;

    font-size: 2.5em;

}



header p {

    font-size: 1.1em;

    margin-top: 5px;

}



h2 {

    color: var(--primary-color);

    border-bottom: 2px solid var(--border-color);

    padding-bottom: 10px;

    margin-top: 30px;

}



h3 {

    color: var(--secondary-color);

    margin-top: 20px;

}



ul {

    list-style-type: disc;

    margin-left: 20px;

}



li {

    margin-bottom: 8px;

}



a {

    color: var(--primary-color);

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



.back-button, .main-button {

    display: inline-block;

    background-color: var(--primary-color);

    color: white;

    padding: 10px 20px;

    border-radius: 5px;

    text-decoration: none;

    transition: background-color 0.3s ease, transform 0.2s ease;

    margin-top: 20px;

    text-align: center;

}



.back-button:hover, .main-button:hover {

    background-color: #0056b3; /* Darker blue on hover */

    transform: translateY(-2px);

    text-decoration: none;

}



.table-link {

    display: block;

    background-color: var(--secondary-color);

    color: white;

    padding: 8px 12px;

    border-radius: 4px;

    margin-bottom: 5px;

    text-align: left;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



.table-link:hover {

    background-color: #5a6268; /* Darker grey on hover */

    transform: translateX(5px);

    text-decoration: none;

}



footer {

    text-align: center;

    padding: 20px;

    margin-top: 30px;

    color: var(--secondary-color);

    font-size: 0.9em;

    border-top: 1px solid var(--border-color);

}