/* General body styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

header p {
    margin-top: 10px;
    font-size: 1.2rem;
}

nav a.nav-link {
    color: #ff5722;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav a.nav-link:hover {
    background-color: #ff5722;
    color: #fff;
}

.breadcrumb-sec {
    background-color: #ff5722;
    padding: 30px;
    text-align: left;
    color: white;
    margin-bottom: 20px;
    border-radius: 10px;
}

.breadcrumb-sec h2 {
    margin: 0;
    font-size: 2.2rem;
}

.breadcrumb-sec span {
    font-size: 1.1rem;
}

.section-form {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-weight: bold;
    color: #333;
}

.form-group input, .form-group textarea, .form-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #ff5722;
    outline: none;
    box-shadow: 0 0 5px rgba(255, 87, 34, 0.5);
}

.input-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form-group .required {
    color: red;
}

#map_canvas {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    margin-top: 10px;
    border-radius: 5px;
}

.contact-us {
    text-align: center;
    margin-top: 20px;
}

.px-pageinfo {
    color: black;
}

.contact-us button {
    background-color: #ff5722;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-us button:hover {
    background-color: #ff9800;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
    }

    .input-group {
        flex-direction: column;
    }
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}



header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

h1, h2 {
    margin: 0;
    padding: 1rem 0;
}

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

li {
    background-color: white;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

a.btn {
    display: inline-block;
    background-color: #ff5722;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

a.btn:hover {
    background-color: #e64a19;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
/* Style pour la section des régions et départements */
#regions {
    padding: 20px;                /* Espace interne */
    margin: 20px 0;               /* Espace externe pour séparer des autres éléments */
    background-color: #f4f4f4;    /* Couleur de fond similaire */
    border-radius: 5px;           /* Bordures arrondies */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Ombre légère comme pour les événements */
}

/* Titres des régions */
.region h3 {
    font-size: 1.5rem;
    color: #333;
}

/* Liste des départements avec bordures */
.region ul {
    list-style-type: none;
    padding: 0;
}

.region ul li {
    display: inline-block;
    margin-right: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: background-color 0.2s ease-in-out;
}

/* Liens pour les départements */
.region ul li a {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
}

.region ul li:hover {
    background-color: #ff5722;
}

.region ul li:hover a {
    color: white;
}


/* Bordure sur la liste des vide-greniers par département */
main h2 {
    margin-top: 20px;
    padding: 10px;
    border-left: 4px solid #ff5722;  /* Bordure à gauche */
    border-right: 4px solid #ff5722; /* Bordure à droite */
    background-color: #fff;
    color: #333;
}

/* Bordure sur les items de vide-greniers */
li {
    padding: 15px;
    margin: 10px 0;
    border-left: 4px solid #ff5722;  /* Bordure à gauche */
    border-right: 4px solid #ff5722; /* Bordure à droite */
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Ombre légère */
}

li h3 {
    margin: 0;
    padding-bottom: 5px;
    font-size: 1.2rem;
}

/* Style pour le formulaire de recherche */
.recherche-form {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.recherche-form input[type="text"] {
    padding: 10px;
    width: 300px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.recherche-form button {
    padding: 10px 20px;
    margin-left: 10px;
    background-color: #ff5722;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.recherche-form button:hover {
    background-color: #e64a19;
}


/* Style pour la section des événements à venir */
#evenements {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#evenements h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #333;
}

/* Conteneur des cartes avec scroll horizontal */
.cards-container {
    display: flex;
    overflow-x: auto;  /* Scroll horizontal */
    gap: 20px;  /* Espace entre les cartes */
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;  /* Alignement des cartes lors du scroll */
}

.cards-container::-webkit-scrollbar {
    height: 8px;
}

.cards-container::-webkit-scrollbar-thumb {
    background-color: #ff5722;
    border-radius: 4px;
}

/* Style des cartes cliquables */
.card {
    position: relative;
    min-width: 220px;  /* Taille minimale de chaque carte */
    flex: 0 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* Légère élévation au hover */
}

/* Positionnement de la flèche en bas à droite */
.arrow-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #ff5722;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    color: #333;
}

.card p {
    margin: 5px 0;
    color: #666;
}

.card strong {
    color: #333;
}

/* Section CTA plus subtile et épurée */
#cta-organiser {
    background-color: #f9f9f9;  /* Fond clair et discret */
    color: #333;
    text-align: center;
    padding: 40px 20px;
    border-radius: 10px;  /* Bords plus arrondis pour un effet moderne */
    margin: 40px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Légère ombre pour ajouter de la profondeur */
}

#cta-organiser h2 {
    font-size: 1.8rem;  /* Taille légèrement plus petite et subtile */
    margin-bottom: 15px;
    color: #333;        /* Couleur sobre */
}

#cta-organiser p {
    font-size: 1.1rem;  /* Texte plus raffiné */
    margin-bottom: 25px;
    color: #555;        /* Couleur un peu plus douce pour le texte */
}

/* Nouveau style pour le bouton CTA */
.btn-cta {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff5722;  /* Toujours une couleur vive pour attirer l'attention */
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 30px;        /* Bords arrondis pour un effet plus doux et moderne */
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: #e64a19;  /* Effet d'hover subtile avec une légère variation de couleur */
}


/* Section des articles (blog ou actualités) */
#blog-actualites {
    padding: 40px 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin: 40px 0;
}

#blog-actualites h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Conteneur pour les articles */
.articles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Style individuel pour chaque article */
.article-item {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    padding: 15px;
    transition: transform 0.3s ease-in-out;
}

.article-item:hover {
    transform: translateY(-5px);
}

/* Image de l'article */
.article-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 15px;
}

/* Titre de l'article */
.article-item h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #333;
}

/* Date de l'article */
.article-date {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}

/* Lien pour lire la suite */
.btn-article {
    display: inline-block;
    padding: 10px 15px;
    background-color: #ff5722;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

/* Style du bouton Contact dans le footer */
footer .btn-contact {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff5722;  /* Couleur orange de ta charte */
    color: white;               /* Texte en blanc */
    font-weight: bold;
    text-decoration: none;       /* Supprime la décoration (soulignement) */
    border-radius: 30px;         /* Bords arrondis pour un look moderne */
    transition: background-color 0.3s ease; /* Animation au survol */
    margin-top: 20px;            /* Un peu d'espace au-dessus du bouton */
}

footer .btn-contact:hover {
    background-color: #e64a19;   /* Changement de couleur au survol */
}
/* Style du lien dans le footer */
footer .footer-link {
    color: white;               /* Texte en blanc */
    text-decoration: none;       /* Pas de soulignement */
    font-size: 0.9rem;           /* Taille de texte légèrement réduite */
    display: block;              /* Le lien est en bloc pour être sur une ligne séparée */
    margin-bottom: 10px;         /* Espacement en bas du lien pour séparer du bouton Contact */
}

footer .footer-link:hover {
    text-decoration: underline;  /* Ajoute un soulignement au survol */
}

/* Style du bouton Contact */
footer .btn-contact {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff5722;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

footer .btn-contact:hover {
    background-color: #e64a19;
}


/* Style général pour la section des régions */
#regions {
    padding: 40px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

/* Titre de la section */
#regions h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
}

/* Conteneur de toutes les régions */
.regions-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Style pour chaque région */
.region-item {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Titre de chaque région */
.region-item h3 {
    margin-bottom: 10px;
    color: #333;
}

/* Liste des départements en ligne */
.departements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* Style pour chaque département */
.departement-item {
    padding: 8px 12px;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.departement-item a {
    text-decoration: none;
    color: #555;
}

.departement-item a:hover {
    color: #ff5722;
}


/* Section générale de présentation de l'application */
#app-presentation {
    padding: 40px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

/* Conteneur principal */
.app-info-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Texte d'information */
.app-text {
    max-width: 600px;
    color: #333;
}

.app-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

.app-text h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #ff5722;
}

.app-text p {
    margin-bottom: 15px;
    color: #555;
    line-height: 1.6;
}

/* Boutons pour télécharger l'application */
.app-buttons {
    display: flex;
    gap: 15px;
}

.app-buttons a {
    text-decoration: none;
}

/* Conteneur principal */
.app-info-container {
    display: flex;
    gap: 10px; /* Réduit l'espace entre les deux blocs */
    align-items: center;
    justify-content: center; /* Centre les éléments horizontalement */
    flex-wrap: nowrap; /* Empêche les blocs de passer à la ligne */
}

/* Ajustement des images pour éviter trop d'espacement */
.app-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0; /* Supprime les marges qui pourraient causer un espacement supplémentaire */
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    text-align: center; /* Centre le texte */
    padding: 15px; /* Ajoute du padding pour ne pas toucher les bords */
    z-index: 9999;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
}

/* Ajout de règles spécifiques pour les petits écrans */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 20px; /* Un peu plus de padding pour mobile */
        font-size: 0.9rem; /* Réduire légèrement la taille du texte sur mobile */
        line-height: 1.4; /* Meilleure lisibilité sur mobile */
    }
}


.cookie-banner button {
    margin: 0 10px;
    padding: 10px 20px;
    background-color: #ff5722;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-banner a {
    color: #ff5722;
    text-decoration: none;
}
/* Styles pour la section Protection des Données */
#protection-donnees {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Hébergement */
#hebergement {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Responsabilité */
#responsabilite {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Responsabilité */
#details-article {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Abonnement iOS */
#abonnement-ios {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Politique de Confidentialité */
#politique-confidentialite {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section Politique de Confidentialité */
#recherche-evenements {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



/* Styles pour la section Nous Contacter */
#contact {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Conteneur principal des cartes */
.recherche-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;  /* Espace entre les groupes */
    padding: 20px;
}

/* Styles pour chaque groupe d'événements par date */
.evenements-par-date {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* Espace entre les événements du même jour */
    margin-bottom: 30px; /* Espace en bas de chaque groupe de date */
}

/* Styles pour les cartes des événements */
.recherche-card {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    margin-bottom: 10px;
}

/* Légère animation au survol */
.recherche-card:hover {
    transform: translateY(-5px);
}

/* Flèche pour les détails */
.recherche-card .arrow-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #ff5722;
}

/* Style spécifique pour l'en-tête de date dans la page recherche */
.date-header {
    font-size: 1.8rem;  /* Taille de texte plus grande */
    color: #fff;  /* Texte en blanc */
    background-color: #ff5722;  /* Fond orange */
    padding: 10px 20px;  /* Padding pour espacer le texte */
    margin-bottom: 20px;  /* Espacement en bas de la date */
    border-radius: 5px;  /* Arrondir les coins */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Ombre légère */
    display: inline-block;
}

/* Optionnel : Ajouter une bordure fine en bas */
.date-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #e64a19;  /* Bordure d'une couleur légèrement plus foncée */
    margin-top: 5px;
}


/* Centrer le formulaire */
.recherche-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 400px;  /* Limite la largeur du formulaire */
    margin: 0 auto; /* Centre le formulaire horizontalement */
}

/* Champ de texte pour la ville ou le code postal */
.form-control {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease-in-out;
}

/* Champ de la date, légèrement plus étroit */
.form-control-date {
    width: 100%;  /* Occupe toute la largeur disponible */
    max-width: 200px;  /* Limite la largeur pour la date */
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Ajuster l'effet du focus */
.form-control:focus, .form-control-date:focus {
    border-color: #ff5722;
    outline: none;
    box-shadow: 0 0 5px rgba(255, 87, 34, 0.5);
}

/* Style du bouton de recherche */
.btn-submit {
    padding: 12px 20px;
    background-color: #ff5722;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    width: 100%;  /* Le bouton occupe toute la largeur */
}

.btn-submit:hover {
    background-color: #e64a19;
}
/* Style du lien de navigation */
.nav-link {
    text-decoration: none;
    color: #ff5722;
    font-weight: bold;
    margin-top: 10px;
}

.nav-link:hover {
    text-decoration: underline;
    color: #e64a19;
}

/* Styles pour la section Politique de Confidentialité */
#details-vg {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Style du bouton pour la demande de modification */
.btn-modification {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff5722; /* Couleur orange */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px; /* Bords arrondis */
    transition: background-color 0.3s ease;
}

.btn-modification:hover {
    background-color: #e64a19; /* Couleur plus foncée au hover */
}

/* Style du bouton Itinéraire */
.btn-itineraire {
    display: inline-block;
    padding: 12px 30px;
    background-color: #4CAF50; /* Vert pour un bouton itinéraire */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-itineraire:hover {
    background-color: #45a049;
}
/* Bouton retour au blog */
.btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff5722;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn-back:hover {
    background-color: #e64a19;
}
/* Style du bouton "Consulter le blog" */
.btn-blog-container {
    text-align: center;
    margin-top: 20px;
}

.btn-blog {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff5722;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

.btn-blog:hover {
    background-color: #e64a19;
}
/* Styles pour la section Politique de Confidentialité */
#articles-list {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Section styling for the blog article list */
#articles-list-blog {
    padding: 20px;
    margin: 20px 0;
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* List styling for the blog article items */
.article-item-blog {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.article-item-blog:hover {
    transform: translateY(-5px); /* Add a hover effect for elevation */
}

/* Image container styling */
.article-image-container-blog {
    width: 120px;
    height: 80px;
    margin-right: 20px; /* Space between the image and text */
}

.article-image-container-blog img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image maintains aspect ratio */
    border-radius: 5px;
}

/* Text container styling */
.article-details-blog {
    flex-grow: 1; /* Allow the text to fill the remaining space */
}

/* Title styling, with orange text */
.article-title-blog {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.article-title-blog a {
    color: #ff5722;
    text-decoration: none;
    font-weight: bold;
}

.article-title-blog a:hover {
    color: #e64a19;
    text-decoration: underline;
}

/* Date styling */
.article-date-blog {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 10px;
}

/* Summary (entete) styling */
.article-details-blog p {
    font-size: 1rem;
    color: #333;
}
/* Add space between each form group */
.form-group {
    margin-bottom: 20px; /* Add margin between fields */
}

/* You can also add padding to enhance spacing inside the inputs */
.form-control {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box; /* Ensures padding does not affect the width */
}