/*
Theme Name: meilleur-logiciel-2026
Theme URI: https://meilleur-logiciel.com/
Author: Alexandre JONAS
Author URI: https://meilleur-logiciel.com/
Description: Thème sur-mesure léger, rapide et optimisé pour la monétisation.
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meilleur-logiciel-2026
*/

/* --- 1. CONFIGURATION ET TYPOGRAPHIE GLOBALE --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #334155; /* Bleu-ardoise foncé très doux pour les yeux */
    background-color: #f8fafc; /* Un fond de page ultra-doux (slate-50) */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

#page {
    margin: 0 auto;
    max-width: 1029px;
    background-color: #FFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Ombre douce et moderne sous le site */
}

/* --- 2. STRUCTURE ET LAYOUT FLEXBOX (CONTENU & SIDEBAR) --- */
.site-main-layout {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

#primary {
    width: 684px;
    padding: 25px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#gauche {
    width: 336px;
    background-color: #fafafa;
    border-left: 1px solid #f1f5f9;
    padding: 25px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* --- 3. EN-TÊTE ET LOGO --- */
/* On décolle le header avec un fond blanc légèrement transparent, une bordure douce et une ombre portée */
#masthead {
    background-color: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid #e6ecf4; /* Bordure fine bleutée */
    box-shadow: 0 3px 14px rgba(20, 45, 80, 0.06); /* Ombre portée très douce */
    position: relative;
    z-index: 100; /* Force l'ombre à passer au-dessus du contenu */
}

/* Conteneur principal unifié sur une seule ligne (Logo + Menu + Recherche) */
.header-main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* Structure interne du logo */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-text {
    font-size: 21px;
    font-weight: 800;
    color: #1e293b; /* Couleur sombre ardoise */
    letter-spacing: -0.5px;
}

.logo-com {
     color: #1d4ed8;  /* Bleu plus clair pour le .com */
    font-weight: 600;
}

.logo-icon {
    flex-shrink: 0;
}

/* --- 4. NAVIGATION, MENU ET RECHERCHE HAUT DE GAMME --- */
#site-navigation {
    display: flex;
    align-items: center;
    gap: 30px; /* Espace entre le menu de liens et la barre de recherche */
    background-color: transparent;
    padding: 0;
}

.menu-primary-container ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px; /* Espace entre Accueil et Catégories */
}

.menu-primary-container li {
    position: relative; /* Indispensable pour positionner le menu déroulant */
}

.menu-primary-container a {
    color: #475569; /* Gris foncé doux de ta maquette */
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.15s ease-in-out;
}

.menu-primary-container a:hover,
.categories-trigger:hover {
    color: #224284;
}

/* Le soulignement de l'élément actif "Accueil" de ta maquette */
.menu-primary-container .menu-item:first-child a {
    color: #224284;
    border-bottom: 2px solid #224284;
    padding-bottom: 6px;
}

/* Style de l'onglet catégories avec chevron */
.categories-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.categories-trigger .chevron::after {
    content: '▼';
    font-size: 8px;
    color: #64748b;
    vertical-align: middle;
}
/* --- LE MENU DÉROULANT DES CATÉGORIES (DESKTOP) --- */
.desktop-categories-dropdown {
    display: none; /* Géré au clic par le JS */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Belle ombre portée SaaS */
    padding: 25px;
    width: 700px; 
    z-index: 999;
    margin-top: 15px;
    box-sizing: border-box;
}

/* Flèche décorative au-dessus du menu déroulant */
.desktop-categories-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

/* CORRECTION CLÉ : On applique la grille directement sur le conteneur du dropdown déplié */
.menu-item-has-children.toggled .desktop-categories-dropdown {
    display: grid !important; /* Devient une grille au clic */
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colonnes de largeur égale */
    gap: 10px 20px !important; /* Espacement vertical et horizontal */
}

/* Style des liens de catégories dans le menu déroulant */
.desktop-categories-dropdown a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    color: #475569 !important;
    text-decoration: none;
    font-size: 13px !important;
    font-weight: 500;
    box-sizing: border-box;
    border-radius: 6px;
    border-left: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important; /* SÉPARATEUR : Fine ligne horizontale douce sous chaque catégorie */
    transition: all 0.2s ease-in-out;
}

/* Effet d'interaction au survol */
.desktop-categories-dropdown a:hover {
    background-color: #f1f5f9 !important; /* Fond gris très doux */
    color: #224284 !important; /* Texte bleu de ta charte */
    padding-left: 18px !important; /* Décalage vers la droite fluide au survol */
    border-bottom-color: #cbdcff !important; /* La ligne de séparation s'éclaire en bleu clair */
}

/* La barre de recherche intégrée dans la navigation */
.search-navigation {
    padding: 0;
    background-color: transparent;
    border-bottom: none;
}

.search-navigation .search-form {
    margin: 0;
    padding: 0;
}

/* On applique une bordure bleue claire et un fond bleuté doux pour détacher le champ du header */
.search-form-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #cbdcff; /* Bordure bleue claire et douce */
    border-radius: 30px; /* Forme pilule parfaite */
    padding: 3px 3px 3px 15px; /* Espace pour l'icône loupe à gauche */
    background-color: #f8faff; /* Fond légèrement bleuté très doux */
    max-width: 420px; /* Largeur allongée très moderne */
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.search-form-wrapper:focus-within {
    border-color: #224284;
    background-color: #ffffff; /* Le champ redevient blanc pur lorsqu'on l'active */
    box-shadow: 0 0 0 4px rgba(34, 66, 132, 0.08);
}

.search-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-field {
    border: none !important; /* On supprime la bordure grise interne */
    outline: none !important;
    padding: 8px 0;
    font-size: 14px;
    color: #334155;
    width: 100%;
    min-width: 0;
    background-color: transparent;
}

.search-submit {
    background-color: #224284; /* Le bleu vif de ton bouton */
    color: #fff;
    border: 1px solid #224284; /* Même bordure pour un alignement au pixel près */
    padding: 8px 24px;
    border-radius: 20px; /* Bouton arrondi */
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
}

.search-submit:hover {
    background-color: #152b57;
    border-color: #152b57;
}

/* --- 5. CARTES D'ARTICLES (L'ACCUEIL) --- */

/* S'applique uniquement sur l'accueil (dans les cartes .principal) */
.principal .entry-content {
    color: #475569; /* Gris texturé élégant pour la lecture */
    font-size: 14px;
    display: flex; /* Aligne l'image et l'extrait côte à côte */
    gap: 20px;
    align-items: flex-start;
}

/* S'applique uniquement sur l'article seul (dans .article-unique) */
.article-unique .entry-content {
    color: #334155;
    font-size: 15px; /* Un peu plus grand pour l'article seul */
    line-height: 1.7;
    display: block; /* Force l'affichage vertical classique */
}

/* On s'assure que les images insérées au milieu de tes articles ne dépassent pas */
.article-unique .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.principal {
    padding: 25px 15px; /* Un peu de marge interne pour créer la "carte" */
    border-bottom: 1px solid #f1f5f9;
    border-radius: 8px; /* Légers arrondis pour accompagner le fond au survol */
    transition: background-color 0.2s ease-in-out; /* Transition fluide */
}

/* Effet interactif moderne au survol de l'article */
.principal:hover {
    background-color: #f4f9fd; /* Fond très doux au survol */
}

.principal:last-child {
    border-bottom: none;
}

h1.entry-title {
    font-size: 24px; /* Titre élégant sur ordinateur pour l'article seul */
    line-height: 1.3;
    font-weight: 700;
    color: #1e293b; /* Couleur très sombre mais adoucie */
    margin: 0 0 12px 0;
}

h2.entry-title {
    font-size: 19px; /* Titre adapté pour les cartes de la page d'accueil */
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.entry-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Force la première lettre des titres à être toujours en majuscule (look pro) */
.entry-title a::first-letter {
    text-transform: uppercase;
}

.entry-title a:hover {
    color: #224284;
}

.entry-meta {
    font-size: 12px;
    color: #64748b; /* Gris bleuté moderne */
    margin-bottom: 15px;
    font-weight: 500;
}

.entry-meta a {
    color: #224284;
    text-decoration: none;
    font-weight: 600;
}

.entry-meta a:hover {
    text-decoration: underline;
}

/* Le texte de l'extrait prend tout l'espace restant */
.entry-excerpt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px; /* Aligné sur la hauteur de la miniature */
    box-sizing: border-box;
}

/* Boîte de l'image de présentation */
.post-thumbnail-wrapper {
    width: 180px; /* Largeur fixe de la vignette sur ordinateur */
    height: 120px; /* Hauteur fixe */
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px; /* Coins légèrement arrondis très élégants */
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.post-loop-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-thumbnail-wrapper:hover .post-loop-thumbnail {
    transform: scale(1.06);
}

/* Bouton "Lire la suite" */
.lien_lire {
    margin-top: 15px;
}

.lien_lire a {
    display: inline-flex;
    align-items: center;
    color: #224284;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background-color: transparent; /* On supprime le fond de couleur lourd */
    padding: 0;
    box-shadow: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.lien_lire a:hover {
    color: #152b57;
    background-color: transparent;
    box-shadow: none;
    transform: translateX(4px); /* Petit effet de glissement de la flèche vers la droite */
}

/* --- 6. NUAGE DE TAGS (LA SIDEBAR EN MENU) --- */
#gauche .widget-title {
    font-size: 15px;
    color: #1e293b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #224284;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 18px;
}

#gauche .wp-block-tag-cloud,
#gauche .cadre ul {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    gap: 8px; /* Espace entre les lignes */
    padding: 0;
    margin: 0;
    list-style: none;
}

#gauche .wp-block-tag-cloud a,
#gauche .cadre a {
    display: block;
    padding: 10px 15px;
    background-color: #fff; /* Fond blanc pur pour détacher chaque élément */
    color: #475569;
    text-decoration: none;
    font-size: 13px !important;
    border-left: 4px solid #e2e8f0;
    border-radius: 0 6px 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    transition: all 0.2s ease-in-out;
}

#gauche .wp-block-tag-cloud a:hover,
#gauche .cadre a:hover {
    background-color: #f8fafc;
    padding-left: 20px;
    color: #224284;
    border-left-color: #224284;
}

/* --- 7. ZONE DES COMMENTAIRES --- */
.comments-area {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f1f5f9;
}

.comments-title {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.comment-list li {
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.comment-reply-title {
    font-size: 18px;
    color: #1e293b;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* --- 8. ALIGNEMENT ET STYLE DU FORMULAIRE DE COMMENTAIRES --- */
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.comment-respond label {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
.comment-form-comment textarea {
    width: 100%;
    max-width: 450px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.comment-form-comment textarea {
    max-width: 100%;
    height: 150px;
    resize: vertical;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
    border-color: #224284;
    box-shadow: 0 0 0 3px rgba(34, 66, 132, 0.1);
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 25px;
}

.comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 4px;
    width: auto;
}

.comment-form-cookies-consent label {
    font-weight: normal;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    margin-bottom: 0;
}

/* --- 9. LE PIED DE PAGE (FOOTER) --- */
.site-footer {
    background-color: #111;
    color: #aaa;
    padding: 35px 20px;
    font-size: 13px;
    text-align: center;
    border-top: 3px solid #224284;
    clear: both;
}

.site-footer strong {
    color: #fff;
}

.site-footer p {
    margin: 5px 0;
}

.site-footer .site-description {
    max-width: 600px;
    margin: 10px auto 0 auto;
    font-size: 12px;
    color: #777;
    line-height: 1.7;
}

.footer-links {
    margin-top: 20px;
    font-size: 12px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-sep {
    color: #444;
    margin: 0 8px;
}
/* --- 10. ARTICLES SIMILAIRES (RELATED POSTS) --- */
/* --- 12. ARTICLES SIMILAIRES (RELATED POSTS) --- */
.related-posts-section {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid #e6ecf4; /* Fine ligne de séparation bleutée */
}

.related-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* Grille verticale unifiée (de base pour mobile) */
.related-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

/* Chaque carte d'article similaire s'aligne horizontalement */
.related-post-card {
    display: flex;
    flex-direction: row; /* Image à gauche, titre à droite */
    align-items: center;
    gap: 15px;
    width: 100%;
}

/* Conteneur de la vignette (Taille par défaut pour mobile) */
.related-thumbnail-wrapper {
    width: 200px;
    height: 130px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.related-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Zoom fluide sur la vignette au survol */
.related-post-card:hover .related-thumbnail {
    transform: scale(1.05);
}

.related-post-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-weight: 600;
}

.related-post-title a {
    color: #334155;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.related-post-title a:hover {
    color: #224284;
}

/* --- 11. RESPONSIVE ET MENU HAMBURGER MODERNE (SaaS WHITE) --- */

/* Par défaut sur mobile (écrans de moins de 768px) */

@media (min-width: 768px) and (max-width: 1024px) {
    .logo-text {
    font-size: 19px !important;
    }
    .header-main-container {
        padding: 15px 10px;
    }
    /* On resserre la grille double colonne pour qu'elle tienne sans déborder */
    #primary {
        width: 67%; /* Réduit pour laisser de la place à la sidebar */
        padding: 20px 15px;
    }

    #gauche {
        width: 30%; /* Réduit pour s'insérer sur tablette */
        padding: 20px 15px;
    }
        #site-navigation {
        gap: 15px; /* On resserre l'espace avec la recherche */
    }

    .menu-primary-container ul {
        gap: 15px; /* On resserre l'espace entre Accueil et Catégories */
    }
    /* Agrandissement des articles similaires pour la tablette */
    .related-thumbnail-wrapper {
        width: 130px !important;
        height: 85px !important;
    }
    .related-post-title {
        font-size: 14px !important;
    }

 }

@media (max-width: 767px) {
    .site-main-layout {
        flex-direction: column;
    }

    #primary, #gauche {
        width: 100%;
        border-left: none;
        padding: 20px 15px;
    }

    /* Le logo se centre sur son fond blanc sur mobile et s'aligne à gauche de la ligne 1 */
    .header-main-container {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* CORRECTION CLÉ : Permet à la recherche de glisser sur la ligne 2 */
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background-color: #ffffff; /* Fond entièrement blanc */
        box-sizing: border-box;
    }

    .logo-wrapper {
        gap: 10px;
    }

    .logo-text {
        font-size: 18px !important; /* Logo compact */
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }

    /* La barre de navigation sur mobile devient invisible/transparente */
    #site-navigation {
        background-color: transparent; 
        width: 100%;
        margin-top: 2px; /* Crée l'espace sous la ligne 1 (Logo + Hamburger) */
        padding: 0; /* On nettoie les paddings internes */
        flex-wrap: wrap;
        gap: 0;
        box-sizing: border-box;
    }

    /* On cache le menu de liens horizontaux et le dropdown desktop */
    .menu-primary-container,
    .desktop-categories-dropdown {
        display: none !important;
    }

    /* Style du bouton Hamburger (Ajusté : placé à droite du logo) */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Style des 3 barres horizontales (couleur bleue pour ressortir sur le blanc) */
    .menu-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 3px;
        background-color: #224284 !important; /* Bleu sur fond blanc */
        margin: 4px 0;
        transition: 0.3s;
    }
    
   /* Animation du hamburger au clic (effet croix) */
    .menu-toggle.toggled .icon-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-toggle.toggled .icon-bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.toggled .icon-bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* La recherche compacte prend 100% de la largeur sur la ligne 2 */
    .search-navigation {
        width: 100%;
        order: 2; /* Force la recherche à se positionner sous le logo/hamburger */
        box-sizing: border-box;
    }

    /* Barre de recherche sur mobile : pleine largeur et bien proportionnée */
    .search-form-wrapper {
        max-width: 100% !important; /* Pleine largeur */
        width: 100%;
        border: 2px solid #cbdcff !important; /* On réactive la bordure bleue claire */
        padding: 3.5px 3px 3.5px 12px;
        background-color: #f8faff !important; /* Fond bleuté doux */
        box-sizing: border-box;
    }

    .search-icon {
        margin-right: 8px;
    }

    .search-field {
        padding: 4px 0;
        font-size: 13px !important;
        width: 100%;
        min-width: 0; /* Permet le rétrécissement */
        flex: 1 1 auto;
        background-color: transparent;
    }

    .search-submit {
        padding: 5px 15px;
        font-size: 12px;
        border-radius: 15px;
        background-color: #224284;
        border: 1px solid #224284;
        flex-shrink: 0;
    }

    /* Les éléments dépliables prennent 100% de largeur pour glisser en dessous */
    .mobile-categories-menu {
        width: 100%;
        order: 3; /* Se positionne sous la recherche */
    }

    /* On cache la sidebar de droite sur mobile */
    #gauche {
        display: none !important;
    }

    /* On cache les catégories mobiles tant que le menu est fermé */
    .mobile-categories-menu {
        display: none;
    }

    /* On affiche les catégories mobiles quand le menu est ouvert (.toggled) */
    .main-navigation.toggled .mobile-categories-menu {
        display: block;
        background-color: #1a1a1a;
        padding: 15px 20px;
        border-top: 1px solid #333;
        margin-top: 10px;
    }

    .mobile-menu-title {
        display: block;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .mobile-categories-menu a {
        display: block;
        padding: 10px 0;
        color: #ccc;
        text-decoration: none;
        font-size: 14px !important;
        border-bottom: 1px solid #2a2a2a;
    }

    .mobile-categories-menu a:last-child {
        border-bottom: none;
    }

    .mobile-categories-menu a:hover {
        color: #fff;
        padding-left: 5px;
    }

    /* Empilement des images sur mobile (accueil uniquement) */
    .principal .entry-content {
        flex-direction: column;
        gap: 15px;
    }

    .post-thumbnail-wrapper {
        width: 100%;
        height: 180px;
    }

    /* Typographie mobile */
    h1.entry-title {
        font-size: 20px !important;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    h2.entry-title {
        font-size: 17px !important;
        line-height: 1.3;
    }
    /* Agrandissement des articles similaires pour l'ordinateur de bureau */
    .related-thumbnail-wrapper {
        width: 130px ;
        height: 86px ;
    }
    .related-post-title {
        font-size: 12px !important;
    }
 
}

/* Sur grand écran (ordinateur) */
@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }

    .menu-primary-container {
        display: block;
    }

    .mobile-categories-menu {
        display: none !important;
    }
}