/* =============================================
   STYLES COMPLETS ET FINALS POUR LE BLOG
   ============================================= */

   #navbar{
    z-index: 10000;
   }

/* --- Page Principale du Blog (blog.html) --- */
#blog-hero {
    background: linear-gradient(rgba(28, 132, 128, 0.9), rgba(31, 35, 82, 0.9)), url('images-blog/typo-2025/couleur.jpeg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 4rem 2rem;
}

/* Style pour la catégorie active dans la sidebar */
.category-list li a.active {
    color: var(--couleur-secondaire);
    font-weight: bold;
}

#blog-hero h1 { font-size: 2.8rem; }
#blog-hero p { font-size: 1.2rem; opacity: 0.9; }

#blog-layout { display: flex; gap: 2.5rem; max-width: 1200px; margin: 3rem auto; padding: 0 2rem; }
.posts-container { flex: 3; }
.sidebar { flex: 1; position: sticky; top: 100px; align-self: flex-start; }

.post-card { background: #fff; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); margin-bottom: 2.5rem; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.post-card-image { width: 100%; height: 250px; object-fit: cover; }
.featured .post-card-image { height: 350px; }
.post-card-content { padding: 1.5rem; }
.post-card-category { background: #fccf2f; color: var(--couleur-principale); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-bottom: 1rem; }
.post-card-title { font-size: 1.6rem; color: var(--couleur-principale); margin-bottom: 0.5rem; line-height: 2.1rem; }
.post-card-meta { color: #777; font-size: 0.9rem; margin-bottom: 1rem; }
.post-card-excerpt { color: #555; line-height: 1.6; margin-bottom: 1.5rem; }
.post-card-readmore { color: var(--couleur-secondaire); text-decoration: none; font-weight: bold; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

/* --- Page de lecture d'un Article (post.html) --- */
#post-header { height: 50vh; color: #fff; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; }
#post-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(28, 132, 128, 0.6), rgba(31, 35, 82, 0.5)); }
.post-header-content { position: relative; z-index: 2; padding: 2rem; }
.post-header-content h1 { font-size: 3rem; }
.post-header-content .post-meta { font-size: 1.1rem; }

/* LAYOUT EN 2 COLONNES */
.post-layout-container { max-width: 1200px; margin: 3rem auto; padding: 0 2rem; display: flex; align-items: flex-start; gap: 2.5rem; }
.post-content-main { flex: 3; min-width: 0; padding: 0 2rem; margin-top: -2.2rem;}
.post-sidebar { flex: 1; position: sticky; top: 100px; }

.post-body { font-size: 1.1rem; line-height: 1.8; color: #333; margin-top: 2.5rem;}
.post-body h3 { font-size: 1.6rem; color: var(--couleur-principale); margin: 2rem 0 1rem; }
.post-body h4 { font-size: 1.3rem; color: var(--couleur-secondaire); margin: 2rem 0 1rem; }
.post-body h5 { font-size: 1.2rem; color: var(--couleur-principale); margin: 2rem 0 1rem; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 1.5rem; }
.post-body a { color: var(--couleur-secondaire); text-decoration: underline; }
.post-body blockquote { border-left: 4px solid var(--couleur-secondaire); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: #555; }


.post-body h3,
.post-body p,
.post-body ul,
.post-body ol {
  text-align: left;
}


.share-bar { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #eee; }
.share-link { font-size: 1.5rem; margin-right: 1rem; color: #333; transition: color 0.3s; }
.share-link:hover { color: var(--couleur-secondaire); }

/* --- Sidebar (commune aux deux pages) --- */
.widget { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; }
.widget-title, .widget h3 { color: var(--couleur-principale); margin-bottom: 1.5rem; border-bottom: 2px solid var(--couleur-secondaire); padding-bottom: 0.5rem; font-size: 1.5rem; }
.category-list { list-style: none; padding: 0; }
.category-list li a { text-decoration: none; color: #555; padding: 0.5rem 0; display: block; transition: color 0.3s; }
.category-list li a:hover { color: var(--couleur-secondaire); }

.recent-post-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; }
.recent-post-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.recent-post-item-info h4 a { text-decoration: none; color: var(--couleur-principale); font-size: 1rem; line-height: 1.3; transition: color 0.3s; }
.recent-post-item-info h4 a:hover { color: var(--couleur-secondaire); }
.recent-post-item-info p { font-size: 0.85rem; color: #777; margin-top: 0.2rem; }

.post-sidebar .card-bloc { background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
.post-sidebar .card-image { height: 150px; }
.post-sidebar .card-image img { width: 100%; height: 100%; object-fit: cover; }
.post-sidebar .card-content { padding: 1rem; }
.post-sidebar .card-title { font-size: 1rem; margin-bottom: 1rem; }
.post-sidebar .card-button { display: block; padding: 0.5rem; font-size: 0.9rem; border: 1px solid var(--couleur-principale); color: var(--couleur-principale); text-align: center; text-decoration: none; border-radius: 5px; transition: all 0.3s ease-in-out}

.newsletter-form {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

.newsletter-form input[type="email"] {
    padding: 1rem 2rem;
    border-radius: 80px;
    border: var(--couleur-secondaire) 1px solid;
    transition: all 0.3s ease-in-out;
    margin-top: 1rem;
}

.cta-button{
    border-radius: 80px;
    padding: 0.6rem;
    margin-top: 1rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    border: var(--couleur-principale) 1px solid;
    color: var(--couleur-principale);
}

.cta-button:hover{
    transform: scale(1.03);
}


/* ▼▼▼ STYLES DE PAGINATION (AJOUTÉS) ▼▼▼ */

/* =============================================
   DESIGN PAGINATION - CORRIGÉ POUR CORRESPONDRE AU JS
   ============================================= */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* 8px */
    margin-top: 2rem;
    padding-bottom: 2rem;
}


/* Style par défaut (si aucune autre règle ne s'applique) */
.post-card-category {
    background-color: #fccf2f; /* Jaune par défaut */
    color: var(--couleur-principale);
}

/* Style pour la catégorie "Design Graphique" */
.post-card-category.design-graphique {
    background-color: #e8f8f7; /* Un bleu-vert très clair */
    color: #1c8480; /* Votre couleur secondaire */
    border: 1px solid #1c8480; /* Ajout d'une bordure pour le contraste */
}

/* Style pour la catégorie "Freelance" */
.post-card-category.freelance {
    background-color: #eef2f7; /* Un bleu-gris clair */
    color: #1f2352; /* Votre couleur principale */
    border: 1px solid #1f2352;
}

/* Ajoutez d'autres catégories ici au besoin... */
.post-card-category.découverte {
    background-color: #ffbbcd; /* Un bleu-gris clair */
    color: #1f2352; /* Votre couleur principale */
    border: 1px solid #f691c7;
}

.back-blog a{
    font-size: 1rem;
    color: #1c8480;
    text-decoration: none;
    margin-top: 1.6rem;
    
}

.back-blog{
    transition: all 0.3s ease-in-out;
}

.back-blog:hover{
    transform: scale(1.03);
    font-weight: 400;
}

.widget{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.share-bar{
    display: flex;
    justify-content: left;
    align-items: center;
}

/* .post-card-category.nom-de-votre-categorie {
    background-color: #nouvelleCouleur;
    color: #couleurTexte;
} */

/* =============================================
   MISE EN PAGE DU CORPS DE L'ARTICLE (MARKDOWN)
   ============================================= */

/* Cible tous les éléments générés par le Markdown dans le corps de l'article */
#post-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--couleur-principale);
}

/* Style pour les sous-titres (### en Markdown) */
#post-body h3 {
    font-size: 1.6rem;
    color: var(--couleur-secondaire);
    margin: 2.5rem 0 1.5rem 0; /* Espace avant et après le titre */
    line-height: 1.4;
}

/* Style pour les paragraphes */
#post-body p {
    margin-bottom: 1.5rem;
}

/* Style pour les listes à puces (* en Markdown) */
#post-body ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

#post-body li {
    margin-bottom: 0.5rem;
}

/* Style pour les images */
#post-body img {
    max-width: 100%; /* Rend l'image responsive */
    height: auto;
    display: block; /* Évite les espaces étranges sous l'image */
    margin: 2rem auto; /* Centre l'image avec des marges verticales */
    border-radius: 10px; /* Ajoute des coins arrondis */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Ajoute une ombre subtile */
}

/* Style pour les citations (> en Markdown) */
#post-body blockquote {
    border-left: 4px solid var(--couleur-secondaire);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
    background-color: #f8f9fa; /* Ajoute un fond léger */
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
}

#post-body blockquote p {
    margin-bottom: 0; /* Retire la marge du paragraphe dans la citation */
}

/* C'est la classe que votre JavaScript crée ! */
.pagination-button {
    text-decoration: none;
    color: var(--couleur-principale);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    min-width: 40px;
    height: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.pagination-button:hover {
    background-color: #f5f5f5;
    color: var(--couleur-secondaire);
}

/* Style pour la page active */
.pagination-button.active {
    background-color: var(--couleur-secondaire);
    color: #fff;
    border-color: var(--couleur-secondaire);
    cursor: default;
}

 .post-content-share{
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: start;
    }

    .back-blog{
        text-align: left;
    }

   /* Dans le fichier : blog-style.css */

/* =============================================
   SYSTÈME DE NOTATION PAR ÉTOILES (AMÉLIORÉ)
   ============================================= */

.rating-widget {
    margin-top: 2rem;
    padding: 1.5rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.rating-widget h4 {
    color: var(--couleur-principale);
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.rating-stars {
    font-size: 1.8rem;
    color: #fccf2f; /* Jaune étoile */
    cursor: pointer;
    margin-bottom: 1rem;
}

/* Gère le survol SEULEMENT si l'utilisateur n'a pas encore voté */
.rating-widget:not(.rated) .rating-stars:hover i {
    font-weight: 900; /* Devient une étoile pleine (solid) */
}
.rating-widget:not(.rated) .rating-stars i:hover ~ i {
    font-weight: 400; /* Les étoiles après redeviennent vides (regular) */
}

/* Style pour le widget une fois que l'utilisateur a voté */
.rating-widget.rated .rating-stars {
    cursor: default;
    opacity: 0.7;
}

/* Met en évidence les étoiles de la note donnée */
.rating-stars i.user-rated {
    font-weight: 900; /* Assure que l'étoile est pleine */
    color: #fccf2f;   /* Et bien jaune */
}

.rating-feedback {
    display: none;
    margin-top: 1rem;
    color: var(--couleur-secondaire);
    font-weight: bold;
}

.rating-widget.rated .rating-feedback {
    display: block;
}

.average-rating {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
}

.avg-stars {
    font-weight: bold;
    color: var(--couleur-principale);
}


/* Pour la version sur la page d'accueil */
#popular-posts .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
#popular-posts .card-header .card-rating {
    margin-bottom: 0;
}

.card-rating .fa-star {
    color: #fccf2f; /* Jaune étoile */
}

.card-rating {
    margin-bottom: 1rem;
}

/* Style pour les articles non notés */
.card-rating.no-rating {
    color: #999; /* Une couleur grise discrète */
    font-style: italic; /* Met le texte en italique */
}





/* =============================================
   STYLES RESPONSIVE POUR LE BLOG
   ============================================= */

/* Pour les tablettes et écrans plus petits (en dessous de 992px) */
@media (max-width: 992px) {
    /* La mise en page principale du blog passe en une seule colonne */
    #blog-layout {
        flex-direction: column;
    }

    /* La mise en page de l'article passe aussi en une seule colonne */
    .post-layout-container {
        flex-direction: column;
    }

    /* La barre latérale n'est plus "collante" et prend toute la largeur */
    .sidebar, .post-sidebar {
        position: static; /* Annule l'effet collant */
        width: 100%;
        margin-top: 3rem;
    }
}

/* Pour les téléphones mobiles (en dessous de 768px) */
@media (max-width: 768px) {

   
    .post-content-share{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .back-blog{
        margin-top: 1rem;
        text-align: center;
        gap: 1rem;
    }

    #blog-hero h1 {
        font-size: 2.2rem;
    }

    .blog-hero-content h1{
        line-height: 3rem;
        margin-bottom: 0.4rem;
    }
    .post-header-content h1 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }

    .posts-grid {
        /* Affiche une seule carte d'article par ligne */
        grid-template-columns: 1fr;
    }

    header{

        padding: 0;
        
    }
}