body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.content {
    margin-top: 70px; /* Ajoute de l'espace pour éviter que le texte ne soit masqué par la barre de menu */
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes pour les écrans larges */
    gap: 20px;
    margin-left: 30px;
}

/* Styles des sections */
.section {
    padding: 20px;
}

.section h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.section p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.section img {
    width: 80%;
    height: auto;
    border-radius: 10px;
}

/* Boutons */
.buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espace entre les boutons */
}

.buttons a {
    text-decoration: none;
    padding: 10px 20px;
    color: white;
    background-color: #6ABBA6;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.buttons a:hover {
    background-color: #87CEEB;
}

/* Mise en page mobile */
@media (max-width: 768px) {
    .content {
        grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
    }

    .content > :nth-child(1) { order: 1; } /* Haut gauche */
    .content > :nth-child(2) { order: 2; } /* Haut droite */
    .content > :nth-child(3) { order: 3; } /* Bas gauche */
    .content > :nth-child(4) { order: 4; } /* Bas droite */
}



/* deuxième partie de la page */
.columns-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Trois colonnes égales */
    gap: 100px; /* Espace entre les colonnes (test avec 70px un peu trop petit */
    margin-top: 20px;
}

@media (max-width: 768px) {
    .columns-container {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 20px;
    }
}

.features {
    padding: 40px;
    text-align: center;
}

.features h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #333;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center; /* Centrer horizontalement */
}

/* Colonnes en mode clair */
.column {
    background-color: #f9f9f9; /* Fond clair */
    color: #333; /* Texte sombre */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 10px;
    transition: background-color 0.3s, color 0.3s; /* Pour une transition fluide */
}

/* Colonnes en mode sombre */
body.sombre .column {
    background-color: #2b2b2b; /* Fond sombre */
    color: #ffffff; /* Texte clair */
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); /* Ombre adaptée */
}


.columns-container img {
    max-width: 100%; /* L'image ne dépassera pas 100% de la largeur de son conteneur */
    max-height: 250px; /* Limite la hauteur de l'image */
    height: auto; /* Maintient l'aspect ratio de l'image */
    border-radius: 10px; /* Si vous souhaitez conserver des bords arrondis */
}


.column h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.column p {
    font-size: 1em;
    line-height: 1.6;
    text-align: center; /* Assurez-vous que le texte est centré */
}


/* Style général des titres */
h2 {
    color: #333; /* Couleur sombre par défaut (mode clair) */
    transition: color 0.3s; /* Transition fluide lors du changement de thème */
}

/* Mode sombre pour les titres */
body.sombre h2 {
    color: #ffffff; /* Texte blanc en mode sombre */
}