/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F4C2C2; /* Rose clair */
    color: #333;
}

header {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre le contenu horizontalement */
    padding: 15px 20px;
    background-color: #A689E1;
    color: white;
    position: relative;
}

.logo {
    height: 50px;
    position: absolute;
    left: 20px; /* Positionne le logo à gauche */
}

nav {
    position: absolute;
    right: 20px; /* Positionne le menu à droite */
}

header h2 {
    margin: 0;
    font-size: 24px;
    text-align: center;
}


nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Barre latérale */
.sidebar {
    width: 25%;
    background-color: #febd59; /* Orange */
    padding: 20px;
}

.sidebar h3 {
    color: #6A1B9A; /* Violet */
}

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

.sidebar ul li {
    margin: 5px 0;
}

/* Contenu principal */
.main-content {
    width: 75%;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
}

/* Sections */
.section {
    margin-bottom: 30px;
}

.section h2 {
    color: #6A1B9A;
    border-bottom: 2px solid #D85C8A;
    padding-bottom: 5px;
}

h3{
    margin: 2em auto;
}

.image-placeholder img {
    max-width: 80%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 10px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}

.image-placeholder2 img {
    max-width: 50%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 10px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}
.image-placeholder3 img {
    max-width: 50%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 10px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}
.image-placeholder4 img {
    max-width: 50%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 10px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}

.image-placeholder5 img {
    max-width: 95%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 30px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}

/* pour mettre l'image de la bonne taille il suffit d'enlever les commentaire
.image-placeholder6 img {
    max-width: 95%; 
    height: auto; 
    display: block;
    margin: 30px auto; / 
    border-radius: 8px;  
}
*/


.qrcode-placeholder1{
    max-width: 100%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 20px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}

.qrcode-placeholder2{
    max-width: 100%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 20px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}

.qrcode-placeholder3{
    max-width: 100%; /* Réduit la taille de l'image */
    height: auto; /* Garde les proportions */
    display: block;
    margin: 20px auto; /* Centre l'image et ajoute un peu d'espace */
    border-radius: 8px; /* Ajoute un léger arrondi */
}
/* Pied de page */
footer {
    background-color: #A689E1;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}