body {
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
}

header {
    background-color: #dbb15d;
    padding: 20px 30px;

    background-image: linear-gradient(305deg, rgb(182,113,39) 0%, rgb(182,113,39) 45%,rgba(31, 31, 31, 0.04) 45%, rgba(31, 31, 31, 0.04) 100%),linear-gradient(173deg, rgba(190, 190, 190, 0.04) 0%, rgba(190, 190, 190, 0.04) 59%,rgba(10, 10, 10, 0.04) 59%, rgba(10, 10, 10, 0.04) 100%),linear-gradient(229deg, rgba(168, 168, 168, 0.04) 0%, rgba(168, 168, 168, 0.04) 29%,rgba(86, 86, 86, 0.04) 29%, rgba(86, 86, 86, 0.04) 100%),linear-gradient(306deg, rgba(51, 51, 51, 0.04) 0%, rgba(51, 51, 51, 0.04) 17%,rgba(64, 64, 64, 0.04) 17%, rgba(64, 64, 64, 0.04) 100%),linear-gradient(90deg, rgb(182,113,39),rgb(97, 30, 1));



}
.header_contents
    {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    #menu {
        background-color: #134f3b;
    }
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }
    nav li {
        margin: 0 15px;
    }
    nav a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    nav a:hover {
        text-decoration: underline;
    }
    .menu-icon {
        display: none;
        cursor: pointer;
    }
    .menu-icon div {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
    }
    


main {
    padding: 20px 50px 40px 40px;
    background: #fef8ec;
}

main h1 {
    padding: 0;
    margin: 0;
}

.post_card_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 10px;
    width: 100%;
    margin-top: 20px;
}
.post_card_sub_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 10px;
    width: 100%;
    margin-top: 20px;
}


.post_card {
    border-radius: 8px;
    box-shadow: 0px 0px 8px #3366994A;
    width: 410px;
    height: 350px;
    cursor: pointer;
    transition: transform 0.3s ease; 
    border: solid 1px #fdf1d7;
    text-align: center;
    position: relative;
    background: #fef8ec;
    }

.post_card:hover {
    transform: scale(1.05); /* Agrandit l'élément de 10% */
    cursor: pointer;
    }
.post_card span{
	display: block;
	font-weight: 700;
    font-size: 1.2em;
    min-height: 100px;
	margin-top: 0px;
	background: #0a2f1c;
	color: #ffffff;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 15px 0;
    line-height: 1.5em;
	position: absolute;
	top: 0;
    width: 100%;
}
.post_card_other {


    border-radius: 8px;
    box-shadow: 0px 0px 8px #3366994A;
    width: 410px;
    height: 105px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: solid 1px #fdf1d7;
    position: relative;
    display: flex;
    background: #fef8ec


    }

    .post_card_other_img

    {
        width: 200px;
    }

.post_other_resume
{
    padding: 10px;
    font-size: 1em;
    width: 100%;
    
}

.post_card_other:hover {
    transform: scale(1.05); /* Agrandit l'élément de 10% */
    cursor: pointer;
    }
.post_card_other span{
	display: block;
	font-weight: 700;
    font-size: 1.2em;
    min-height: 75px;
	margin-top: 0px;
	color: #ffffff;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	padding: 15px 0;
    line-height: 1.5em;
	top: 0;
}

.post_resume{
	display: block;
    font-size: 1em;
    min-height: 40%;
	margin-top: 10px;
	padding: 10px;
    line-height: 1.5em;
	position: absolute;
	bottom: 45px;
    width: 94%;
    text-align: left;

}
.post_resume a, .post_resume a:visited
{
    text-decoration: none;
    color : #613603;
}
.post_resume a:hover
{
    text-decoration: underline;
}


.post_date{
	display: flex;
    justify-content: space-between;
	margin-top: 0px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 10px;
    line-height: 1.5em;
	position: absolute;
	top: 300px;
    width: 90%;
    text-align: left;

}

.single_post_date {
    margin: 0px;
    padding: 0px;
}


.post_other_date{
	display: flex;
    gap: 1px;
    align-items: center;
    min-height: 40%;
	margin-top: 5px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
    line-height: 1.5em;
    text-align: left;

}

/* Pousser le bouton "Lire" à droite */
.post_other_date .post_other_read_more {
  margin-left: auto;  /* ✅ Force le bouton à droite */
}

.post_other_date span {
  font-size: 0.85em;
  color: #666;
  white-space: nowrap;  /* Évite le retour à la ligne */
}

/* Icônes plus petites */
.post_other_date img {
  width: 20px;
  height: 20px;
}

/* Mode sombre */
body.dark-mode .post_other_date span {
  color: #a0a0a0;
}

.post_read_more {

    display: inline-block;
    border-radius: 4px;
    background: #d0781a;
    color: #ffffff;
    white-space: nowrap;
    padding: 0 10px;
}

.post_other_read_more {

    border-radius: 4px;
    background: #d0781a;
    color: #ffffff;
    white-space: nowrap;
    padding: 0 10px;
    float: right;
}

.galery_container {

    width: 100%;
    /*height: 100vh;*/
    border: none;
}


.titre_site
    {
        color: #000000;
    }
    
    .flexspacebetween
	{
	display: flex;
	justify-content: space-between;
	padding: 0.5rem;
	}
    .flexsstart
	{
	display: flex;
    flex-direction: row;

	}
    .separation  {
        border: 3px solid transparent;
        padding: 10px;
        clear: both;
    }
    .newsletter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
        column-gap: 10px;
        padding: 30px;
    }
    .newletter_form {
        background: #ffffff;
        border-radius: 8px;
        color: #ffffff;
        padding: 30px;
        
    }
    .search_form {
        background: #ffffff;
        border-radius: 8px;
        color: #ffffff;
        padding: 0px;
        margin: 0;
        height: 25px;
              
    }   
    .search_form input[type=text] {
        background: #ffffff;
        border-radius: 8px;
        color: #333;
        padding: 10px;
        margin: 0;
        height: 25px;
              
    }   

    #Search_blog {
        background-image: url('/images/blog/recherche.svg'); /* Chemin vers votre image */
        background-repeat: no-repeat;
        background-position: 10px center; /* Positionne l'image à gauche (ajustez 10px selon vos besoins) */
        padding-left: 40px; /* Ajoute du padding pour que le texte ne chevauche pas l'image (ajustez 40px selon vos besoins) */
        background-size: 20px; /* Ajustez la taille de l'image (ajustez 20px selon vos besoins) */
        height: 20px; /* Ajustez la hauteur selon vos besoins */
        border: 1px solid #ffffff; /* Style de bordure selon vos besoins */
        border-radius: 8px; /* Ajoutez une bordure arrondie si nécessaire */
        width: 250px;
    }
    .search_result_container {
        padding: 20px;
    }

    .newsletter_title {
        font-size: 2em;
        color:#fcebc9;
    }

    .newsletter_title p{
        font-size: 0.7em;
        color:#fcebc9;
        text-align: center;
    }


    footer {
        
        padding: 20px;
        background: #000000;
        color: #cccccc;
    }

    .footer_contents {
        
        padding: 0;
    }


/* FORMULAIRES */
    .Formcontainer {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin: auto;
        padding: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #333;
    }
    .form-group input,
    .form-group textarea {
        width: 95%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    .form-group textarea {
        resize: vertical;
        height: 100px;
    }
    .form-group .error {
        color: red;
        font-size: 14px;
    }
    .btn {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #218838;
    }


    .form-group .submit_newsletter_btn {
        display: block;
        width: 100%;
        padding: 20px;
        background-color: #17260d;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
    }
    .submit_newsletter_btn:hover {
        background-color: #314720;
    }



/* FORMULAIRES */

.contact_form
{
    flex-basis: 40%; 
    width: inherit; 
    padding: inherit; 
    background: #f4cc7a; 
    border-radius: 8px;
}

.post_comments_title
{
    width: inherit; 
    padding: 20px; 
    background: #f4cc7a; 
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 700;
}

.post_comments_author
{
    padding: 20px 0 5px 20px; 
    background: #fef8ec; 
    border-radius: 8px;
    font-weight: 700;
}

.post_comments_content
{
    padding: 0px 0 5px 60px; 
    background: #fef8ec; 
    border-radius: 8px;
}
.post_tools
{
    padding: 0px 0 5px 60px; 
    /*
    background: #fef8ec; 
    border-radius: 8px;
    */
}



.copyright
{
    Text-align: center;
    padding: 20px; 
    
}
.label
{
    Text-align: center;
    padding: 20px; 
    
}

/***************** FLECHE DE DEFILEMENT VERS LE HAUT**********************/
.scroll-arrow {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #b67127;
	color: #FFFFFF;
	padding: 15px;
	border-radius: 10%;
	cursor: pointer;
	display: none; 
    font-size: 1.5em;
}
/***************** FIN FLECHE DE DEFILEMENT VERS LE HAUT**********************/


/**********GALERIES*******************/
.galerythumbnailtemplate {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 30px;
    column-gap: 10px;
    }

.galerythumbnail {
    border-radius: 8px;
    box-shadow: 0px 0px 8px #3366994A;
    width: 180px;
    height: 180px;
    cursor: pointer;
    transition: transform 0.3s ease; 
    border: solid 1px #57ea62;
    text-align: center;
    position: relative;
    display: block;
    }

.galerythumbnail:hover {
    transform: scale(1.05); /* Agrandit l'élément de 10% */
    cursor: pointer;
    }
.galerythumbnail span{
	font-size: 14px;
	display: block;
	font-weight: 700;
	margin-top: 0px;
	color: #ffffff;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: 5px 0;
	position: absolute;
	bottom: 0;
    width: 100%;
    height: 100%;
}




/*************FIN GALERIES********************/
/*************PANNEAU LATERAL********************/
.onglet {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #84481F;
color: #FFF;
padding: 10px;
cursor: pointer;
z-index: 10;
border-top-left-radius: 8px; 
border-bottom-left-radius: 8px; 
height: 25px;
}

/* Styles pour le DIV d'informations */
.infos {
position: fixed;
top: 0;
right: -120%; /* Décalage initial pour cacher le DIV */
width: 300px;
height: 70%;
background-color: #F0F0F0;
transition: right 0.5s ease; /* Effet de glissement */
overflow: auto;
padding: 20px;
z-index: 9;
margin-top: 11vh;
border-radius: 8px;
}

/* Styles pour l'overlay */
.superposition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Couleur semi-transparente */
display: none; /* Caché par défaut */
}

/* Styles pour le bouton de fermeture */
.close-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: none; /* Caché par défaut */

}

/* Afficher le bouton de fermeture lorsque le DIV est ouvert */
.infos.open .close-button {
display: block;
background: red;
}

.reseaux
	{

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 10px;
        column-gap: 10px;
        margin-top: 20px;


        /*display: flex;
		
        flex-direction: column;
        padding: 5px;
        text-align: center;
        */
        width: 99%;
        justify-content: center;

	}
    .items_partages
	{
		font-size : 0.7em;
		text-align: center;
	}
.items_partages img
	{
		width:44px;
		height: 32px;
	}

/************* FIN PANNEAU LATERAL********************/
/***************  LIGHTBOX POUR GALERIES **************************/
.thumnailcontainer
    {
       /* padding: 20px;
        margin: auto;
        width: 95%;*/




        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: 30px;
        column-gap: 10px;
        margin-top: 20px;
    

    }

.imagethumbnail {
    width: 180px;
    height: 180px;
    display: inline-block;
    margin: 10px 10px 10px 0;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0px 0px 8px #3366994A;
    cursor: pointer;
    transition: transform 0.3s ease; 
    border: solid 1px #b67127

}
.imagethumbnail:hover {
    transform: scale(1.05); /* Agrandit l'élément de 10% */
    cursor: pointer;
    }
    .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;
    }
    .lightbox img, .lightbox video, .lightbox audio {
        max-width: 80%;
        max-height: 80%;
        border: solid 8px #352f2f;
        border-radius: 8px;
    }
    .lightbox .filename {
        color: white;
        margin-top: 10px;
        text-align: center;
    }
    .lightbox .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 4rem;
        cursor: pointer;
    }
    .lightbox .prev {
        left: 20px;
        padding: 20px;
    }
    .lightbox .next {
        right: 20px;
        padding: 20px;
    }

    .pagination {
        font-weight: 700;
        text-align: center;
        padding: 10px;
    }
    .pagination a {
        display: inline-block;
        background: #e1ba42;
        color: black;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
    }

/***************  LIGHTBOX POUR GALERIES **************************/

/************************ LECTEURS AUDIO ET VIDEO **********************************/
audio {
    width: 300px; /* Largeur souhaitée */
    height: 40px; /* Hauteur souhaitée */
  }
  /* Personnalisation des boutons du lecteur audio */
  audio::-webkit-media-controls-play-button,
  audio::-webkit-media-controls-pause-button {
    background-color: #ff0000; /* Couleur du bouton de lecture/pause */
    /* Autres styles (police, bordures, etc.) */
  }
/************************ FIN LECTEURS AUDIO ET VIDEO **********************************/

/************************ LIGHT BOX POUR LIKES **********************************/

#iconelike
  {
    cursor: pointer;
  }
  .NbrLikes
  {
    font-size: 0.5em;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    padding: 10px;
    width: 20%;
    margin: auto;
}
.NbrLikes span
{
  margin-left: 10px;
  color: #0074d9;
}
.NbrLikes img
{
  width: 24px;
}
.Like_lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.Like_lightbox-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 50%;
}
.Like_lightbox-content iframe {
    width: 100%;
    height: 80vh;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
/************************ .LIGHT BOX POUR LIKES **********************************/

/************** form unsuscribe ****************************/

.unsuscribe_form {
    width: 50%
}

.unsuscribe_btn {
    display: inline-block;
    padding: 5px 20px;
    background-color: #17260d;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;    
}
.unsuscribe_form input[type=text] {
    display: inline-block;
    padding: 5px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    border: solid 1px rgb(56, 89, 79);
}


/************** .form unsuscribe ****************************/

.flexstart
	{
	display: flex;
    justify-content: flex-start;
	align-items: center;
    padding: 0.5rem;

	}
    .flexstart div
	{
    padding: 0.5rem;

	}

    .search_result_item
	{
    color:#333;
    width: 100%;
    padding: 10px; 
	}

    .search_result_item:nth-child(even) {
        background-color: #ffedc9;
    }    
    .search_result_item a, .search_result_item a:visited
	{
    text-decoration: none; 
    color: #000000;
	}
    .search_result_item a:hover
	{
    text-decoration: underline; 
	}


/**********************************************************************************************************
***********************************************************************************************************
****************************** MEDIA QUERIES **************************************************************/


    @media (max-width: 768px) {

        main img
            {
                width: 100%;
            }

        nav {
            align-items: initial;
        }
        nav li {
            margin: 10px;
        }

        nav ul {
            display: none;
            flex-direction: column;
            width: 100%;
            margin-left: 2%;
        }
        nav ul.active {
            display: flex;
        }
        .menu-icon {
            display: block;
        }
    .thumnailcontainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        }
        .header_contents
        {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
        }
        .flexspacebetween, .post_card_container, .post_card_sub_container
        {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            }

        .flexsstart
        {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            }

        .galery_container {
            padding-bottom: 75.25%; /* Aspect ratio 4:3 pour Horde, ajustez selon vos besoins */

        }
        
        .newsletter
        {
        display: flex;
        flex-direction: column;
        align-items: center;    
        }
        .newletter_form {
            width: 80%
        }

        .contact_form
        {
            width: 97%
        }

        #Search_blog {
            width: 150px;
        }


    }
/**
 * ========================================
 * DARK MODE - Template Demo PlaneteAfrique
 * Proposition concrète basée sur la capture d'écran
 * ========================================
 * 
 * À ajouter dans : /blog/templates/demo/demo.css
 * 
 * INSTRUCTIONS :
 * Copiez tout ce contenu à la fin de votre fichier demo.css
 */

/* ========================================
   DARK MODE - STYLES GLOBAUX
   ======================================== */

/* Fond général de la page */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* ========================================
   HEADER - Partie supérieure
   ======================================== */

/* Header principal (fond brun/doré) */
body.dark-mode header {
    background-color: #2d2416;
    background-image: linear-gradient(305deg, 
        #3d3426 0%, 
        #3d3426 45%,
        rgba(31, 31, 31, 0.04) 45%, 
        rgba(31, 31, 31, 0.04) 100%),
        linear-gradient(173deg, 
            rgba(100, 100, 100, 0.04) 0%, 
            rgba(100, 100, 100, 0.04) 59%,
            rgba(10, 10, 10, 0.04) 59%, 
            rgba(10, 10, 10, 0.04) 100%),
        linear-gradient(90deg, 
            #3d3426, 
            #1d1410);
}

/* Titre "Template de dem PlaneteAfrique" (bleu dans l'image) */
body.dark-mode .titre_site,
body.dark-mode .titre_site h1 {
    color: #64b5f6; /* Bleu clair pour contraste */
}

/* Logo "Mon Blog & Site" - Fond bleu/gris */
body.dark-mode .div_logo {
    background-color: #37474f; /* Gris-bleu foncé */
}

/* ========================================
   MENU NAVIGATION
   ======================================== */

/* Menu vert foncé */
body.dark-mode #menu {
    background-color: #0a2f1c; /* Vert très foncé */
}

body.dark-mode nav a {
    color: #e0e0e0; /* Liens en clair */
}

body.dark-mode nav a:hover {
    color: #90ee90; /* Vert clair au survol */
}

/* Icône hamburger menu */
body.dark-mode .menu-icon div {
    background-color: #e0e0e0;
}

/* ========================================
   RECHERCHE
   ======================================== */

/* Champ de recherche */
body.dark-mode .search_form,
body.dark-mode .search_form input[type=text],
body.dark-mode #Search_blog {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #404040;
}

body.dark-mode #Search_blog::placeholder {
    color: #999999;
}

/* ========================================
   ZONE PRINCIPALE (MAIN)
   ======================================== */

/* Fond beige → Gris foncé */
body.dark-mode main {
    background: #1a1a1a;
}

/* Titres H1 (ex: "Accueil") */
body.dark-mode main h1 {
    color: #f5f5f5;
}

/* Titres H2 (ex: "Bienvenue sur mon Site & Blog !") */
body.dark-mode main h2 {
    color: #e0e0e0;
}

/* Paragraphes de texte */
body.dark-mode main p {
    color: #c0c0c0;
}

/* ========================================
   CARTES DE POSTS (si présentes)
   ======================================== */

body.dark-mode .post_card,
body.dark-mode .post_card_other {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .post_card:hover,
body.dark-mode .post_card_other:hover {
    background: #353535;
}

/* Titres des cartes */
body.dark-mode .post_card span {
    background: #1a3d2e;
    color: #ffffff;
}

/* Contenu des cartes */
body.dark-mode .post_resume {
    color: #d0d0d0;
}

body.dark-mode .post_resume a,
body.dark-mode .post_resume a:visited {
    color: #90caf9;
}

body.dark-mode .post_resume a:hover {
    color: #bbdefb;
}

/* Dates */
body.dark-mode .post_date {
    color: #a0a0a0;
}

/* Boutons "Lire la suite" */
body.dark-mode .post_read_more,
body.dark-mode .post_other_read_more {
    background: #e89850;
    color: #1a1a1a;
}

body.dark-mode .post_read_more:hover,
body.dark-mode .post_other_read_more:hover {
    background: #f0b070;
}

/* ========================================
   BOUTON PANNEAU LATÉRAL (violet/bleu à droite)
   ======================================== */

body.dark-mode .onglet {
    background: linear-gradient(135deg, #5e35b1 0%, #7e57c2 100%);
}

/* ========================================
   FOOTER - Pied de page
   ======================================== */

/* Footer reste noir mais plus profond */
body.dark-mode footer {
    background: #0d0d0d;
    color: #a0a0a0;
}

/* Titre "Notre lettre d'information" */
body.dark-mode .newsletter_title {
    color: #e0e0e0;
}

body.dark-mode .newsletter_title p {
    color: #c0c0c0;
}

/* ========================================
   FORMULAIRE NEWSLETTER
   ======================================== */

/* Conteneur formulaire (fond blanc → gris foncé) */
body.dark-mode .newletter_form {
    background: #2d2d2d;
}

/* Champ email */
body.dark-mode .newletter_form input[type=text],
body.dark-mode .newletter_form input[type=email] {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555555;
}

body.dark-mode .newletter_form input[type=text]::placeholder,
body.dark-mode .newletter_form input[type=email]::placeholder {
    color: #999999;
}

/* Checkbox "Je ne suis pas un robot" */
body.dark-mode .newletter_form label {
    color: #e0e0e0;
}

/* Bouton "S'abonner" (vert foncé → vert moyen) */
body.dark-mode .submit_newsletter_btn {
    background-color: #2d6b4f;
    color: #ffffff;
}

body.dark-mode .submit_newsletter_btn:hover {
    background-color: #3d8b6f;
}

/* Lien "me désabonner" */
body.dark-mode .newletter_form a,
body.dark-mode .newletter_form a:visited {
    color: #90caf9;
}

body.dark-mode .newletter_form a:hover {
    color: #bbdefb;
}

/* ========================================
   COPYRIGHT - Texte en bas
   ======================================== */

body.dark-mode .copyright {
    color: #a0a0a0;
}

/* Logo "My Site!" */
body.dark-mode .label {
    color: #c0c0c0;
}

/* ========================================
   SÉPARATIONS
   ======================================== */


/* ========================================
   GALERIES (si présentes)
   ======================================== */

body.dark-mode .galerythumbnail,
body.dark-mode .imagethumbnail {
    border-color: #2d8f6b;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .galerythumbnail span {
    color: #ffffff;
}

/* ========================================
   FORMULAIRES DE CONTACT (si présents)
   ======================================== */

body.dark-mode .Formcontainer {
    background-color: #2d2d2d;
}

body.dark-mode .form-group label {
    color: #e0e0e0;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555555;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: #999999;
}

body.dark-mode .btn {
    background-color: #2d6b3f;
}

body.dark-mode .btn:hover {
    background-color: #3d8b5f;
}

/* ========================================
   COMMENTAIRES (si présents)
   ======================================== */

body.dark-mode .post_comments_title {
    background: #3d3426;
    color: #e0e0e0;
}

body.dark-mode .post_comments_author {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .post_comments_content {
    background: #1a1a1a;
    color: #c0c0c0;
}

/* ========================================
   RÉSULTATS DE RECHERCHE
   ======================================== */

body.dark-mode .search_result_container {
    background: #1a1a1a;
}

body.dark-mode .search_result_item {
    color: #e0e0e0;
}

body.dark-mode .search_result_item:nth-child(even) {
    background-color: #2d2d2d;
}

body.dark-mode .search_result_item a,
body.dark-mode .search_result_item a:visited {
    color: #90caf9;
}

body.dark-mode .search_result_item a:hover {
    text-decoration: underline;
}

/* ========================================
   SCROLL ARROW (flèche retour en haut)
   ======================================== */

body.dark-mode .scroll-arrow {
    background-color: #d4a574;
    color: #1a1a1a;
}

body.dark-mode .scroll-arrow:hover {
    background-color: #e8c9a0;
}

/* ========================================
   TRANSITIONS POUR ANIMATION DOUCE
   ======================================== */

body,
header,
main,
footer,
.post_card,
.newletter_form,
.submit_newsletter_btn,
#Search_blog {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}


body.dark-mode .section-header.section-header strong {
    color: #333333;
}

body.dark-mode .contact_form {
    background-color: #1a1a1a;
}


/* ========================================
   FIN DU DARK MODE
   ======================================== */