/* 1. IMPORT GOOGLE FONTS (À mettre tout en haut du CSS) */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Belanosima:wght@400;600;700&family=Caprasimo&family=Pacifico&family=Work+Sans:wght@300;400;600&family=Young+Serif&family=Roboto:wght@400;700&display=swap');

/* =======================================================
   1. PAGE D'ACCUEIL : EFFET MASONRY ET SURVOL CLIQUABLE
   ======================================================= */

/* Préparation du bloc article */
.blog .post, .archive .post, .search .post {
    position: relative !important;
    overflow: hidden;
    padding: 0 !important;
    border: none !important;
}

/* Correction de l'image (suppression des espaces blancs) */
.blog .post .entry-media img,
.archive .post .entry-media img {
    vertical-align: bottom !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}




/* =======================================================
   28. TITRES : ANIMATION ALLER-RETOUR (FADE IN / FADE OUT)
   ======================================================= */

/* 1. Le fond noir (Overlay) */
.blog .post-header, 
.archive .post-header, 
.search .post-header {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Positionnement Absolu pour couvrir l'image */
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important;
    
    /* Style visuel */
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0; /* Invisible au départ */
    transition: opacity 0.3s ease;
    z-index: 100;
}

/* 2. Apparition au survol */
.blog .post:hover .post-header,
.archive .post:hover .post-header {
    opacity: 1;
}

/* 3. Style du Titre */
.post-title {
    padding: 20px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    position: static; /* Important pour l'extension du lien */
}

.post-title a {
    color: #ffffff !important;
    font-size: 18px !important;
    text-decoration: none !important;
    background: none !important;
}

/* 4. LE SECRET DU CLIC */
/* On crée un lien invisible qui couvre tout le carré noir */
.post-title a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200; /* Doit être au-dessus de tout */
}
/* Cacher les métadonnées inutiles sur l'accueil */
.posts-meta, .post-excerpt, .post-meta {
    display: none !important;
}


/* =======================================================
   2. PAGE ARTICLE (SINGLE) : MASQUER L'IMAGE EN DOUBLON
   ======================================================= */

/* Masquer l'image à la une en haut de l'article seul */
.single .featured-media {
    display: none !important;
}

/* Ajouter un peu d'espace en haut pour que le titre ne colle pas au menu */
.single .post-container {
    padding-top: 50px !important;
}
/* 2. SUPPRIMER LES BORDURES BLANCHES */
.blog .post,
.archive .post,
.search .post {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. AJUSTEMENTS ESPACES */
.blog .post-container,
.archive .post-container {
    padding-bottom: 0 !important;
    margin-bottom: 20px !important; /* Petit espace entre les images */
}
/* --- BARRE LATÉRALE FIXE (Uniquement sur Ordinateur) --- */

@media (min-width: 1000px) {
    .sidebar {
        position: fixed !important; /* Force la fixation */
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important; /* Prend toute la hauteur de l'écran */
        overflow-y: auto !important; /* Permet de scroller DANS le menu s'il est trop long */
        z-index: 1000; /* S'assure qu'elle reste au-dessus */
        
        /* On remet le fond noir pour ne pas voir le contenu passer dessous */
        background-color: #111111 !important; 
    }
}
/* Masque la galerie classique uniquement sur la page de l'article seul */
.single-post .gallery {
    display: none !important;
}
/* 1. Suppression radicale de la date, catégorie, hashtags et lien 'Edit' */
.single .post-meta, 
.single .post-meta-bottom,
.single .post-date,
.single .post-categories,
.single .post-tags,
.single .edit-link,
.single .post-content + p, /* Cible parfois les hashtags s'ils sont dans un paragraphe */
.single footer.entry-footer {
    display: none !important;
}


/* 4. Fond transparent et mise en page large */
.single .post, 
.single .post-container,
.single .wrapper #site-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* 1. DISPARITION TOTALE DU BLOC META (DATE, TAGS, CATEGORIES) */
.single .post-meta, 
.single .post-meta-bottom, 
.single footer.entry-footer,
.single .post-content + p,
.single .edit-link {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* 2. DISPARITION RADICALE DES COMMENTAIRES */
#comments, 
.comments-area, 
.comments-title, 
#respond, 
.comments-container {
    display: none !important;
}
/* 1. Masquer le bandeau complet (Texte étiquette + Pagination haute) */
.archive .page-title, 
.archive .archive-nav.top {
    display: none !important;
}

/* 2. Supprimer la bordure et l'espace vide restant en haut de la grille */
.archive .posts {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 20px !important;
}

/* 3. Sécurité supplémentaire si le texte persiste */
.archive .archive-title, 
.archive .page-title h1 {
    display: none !important;
}
CSS

/* --- NAVIGATION BAS DE PAGE FINALE --- */

/* 1. CONTENEUR : On neutralise le conflit Flexbox / Clearfix */
.post-navigation {
    max-width: 800px !important; /* Largeur exacte de votre texte */
    width: 100% !important;
    margin: 60px auto !important; /* Centrage horizontal */
    
    display: flex !important;
    justify-content: space-between !important; /* Flèches aux extrémités */
    align-items: center !important;
    
   
    
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 2. LA CORRECTION CRUCIALE : On supprime l'élément fantôme du thème */
.post-navigation::before,
.post-navigation::after {
    content: none !important;
    display: none !important;
}

/* 3. LES BOUTONS : Zone de clic propre et centrée */
.post-navigation a {
    display: flex !important; /* Permet de centrer la flèche DANS le bouton */
    justify-content: center !important;
    align-items: center !important;
    
    width: 60px !important; /* Zone carrée pour l'équilibre */
    height: 60px !important;
    
    background: transparent !important;
    border: none !important;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.post-navigation a:hover {
    opacity: 1;
}

/* 4. NETTOYAGE TEXTE : Suppression radicale */
.post-navigation a p, 
.post-navigation a span {
    display: none !important;
}

/* 5. LES FLÈCHES */
.post-navigation a::before {
    font-family: "Genericons" !important;
    font-size: 50px !important;
    color: #000 !important;
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important; /* Sécurité pour éviter les décalages */
}

/* --- ATTRIBUTION & ORDRE --- */
/* Rappel : Avec flex-direction: row-reverse plus haut, l'ordre visuel est inversé */

/* Le bouton 'Previous' (qui se retrouve à droite visuellement ou vice versa) */
.post-nav-prev::before {
    content: "\f430" !important; /* Code Flèche Gauche */
}

/* Le bouton 'Next' */
.post-nav-next::before {
    content: "\f429" !important; /* Code Flèche Droite */
	
}
/* --- MISE EN PAGE DU TITRE ARTICLE --- */

.single .post-header {
    text-align: center !important; /* Centre le texte du titre */
    max-width: 800px !important; /* Même largeur que le corps du texte */
    width: 100% !important;
    
    /* GESTION DES ESPACES (Haut, Droite, Bas, Gauche) */
    /* 80px en haut (espace avant le titre) */
    /* auto (centrage horizontal) */
    /* 100px en bas (espace entre titre et contenu/image) */
    margin: 5px auto 70px auto !important; 
    
    padding: 0 !important;
}

.single .post-title {
    margin: 0 !important; /* Nettoie les marges par défaut */
    line-height: 1.0 !important; /* Espacement entre les lignes du titre si long */
}



/* --- TYPOGRAPHIE --- */
/* 3. MODIFICATION DU TITRE */
.single .post-title {
    font-family: "Belanosima", sans-serif !important; /* Utilisation de la Google Font */
    font-size: 23px !important; /* Taille réduite (Ajustez ce chiffre) */
    font-weight: 400 !important; /* 300 = fin, 600 = gras */
    text-transform: uppercase !important; /* Optionnel : en majuscules */
    letter-spacing: 2px !important;
    margin-bottom: 0px !important;
		text-align: center !important; /* Centre le texte du titre */
		line-height: 1.0 !important;
		color: #FFFFFF !important;
}

/* 4. TYPOGRAPHIE DU TEXTE (Corps de l'article) */
.post-content p {
    font-family: "Roboto", sans-serif !important;
		color: #FFFFFF !important
				
    /* font-size: 18px !important;
		font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #222 !important;
		color: #FFFFFF !important;*/
}

/* 2. TITRE DU SITE (Force le changement) */
.sidebar .site-title a,
.sidebar .blog-title a,
h1.blog-title a {
    font-family: "Alfa Slab One", sans-serif !important;
    font-size: 40px !important;
    font-weight: 300 !important;
    text-transform: none !important;
    letter-spacing: 1px !important;
    color: #0000000!important;
		line-height: 1.0 !important;
}


/* 2. SUPPRIMER LE CADRE DU TITRE DU SITE */
.blog-title a,
.site-title a {
    border: none !important; /* Enlève la ligne autour */
    padding: 0 !important; /* Enlève l'espace interne */
    background: transparent !important; /* Enlève le fond gris éventuel */
}
/* --- 1. TITRES DES APERÇUS (Page d'accueil / Grille) --- */
.posts .post-title,
.posts .post-title a {
    /* Typographie */
    font-family: "Belanosima" !important; /* Changez la police ici si besoin */
    font-size: 20px !important; /* Augmentez ce chiffre pour grossir */
    font-weight: 400 !important; /* Gras */
    
    /* Mise en forme */
    text-transform: uppercase !important; /* Mettre en majuscules (supprimez la ligne si non) */
    line-height: 1.2 !important; /* Espace entre les lignes si le titre est long */
    letter-spacing: 1px !important;
		text-align: center !important;
}
	/* =======================================================
   8. COULEUR DE FOND DE LA PAGE
   ======================================================= */

body, 
html, 
.wrapper, 
#site-content {
    /* Remplacez #ffffff par le code couleur de votre choix */
    background-color: #000000 !important; 
}
/* 1. La ligne horizontale au-dessus des flèches de navigation (Bas de page) */
.post-navigation {
    border-top: none !important;
    border: none !important;
    padding-top: 0 !important; /* Remonte un peu les flèches */
}

/* 2. La ligne verticale à droite du menu (Sidebar) */
.sidebar {
    border-right: none !important;
    border: none !important;
}

/* 3. Sécurité : Supprime les bordures résiduelles sur les articles */
.post, .post-container {
    border: none !important;
    border-bottom: none !important;
}

/* 4. Si vous préférez colorier la ligne en NOIR plutôt que l'effacer, 
   utilisez ce code ci-dessous (supprimez les blocs 1, 2, 3 si vous utilisez celui-ci) : */
/*
.post-navigation, .sidebar, .post {
    border-color: #000000 !important;
}
*/
/* =======================================================
   10. COULEURS SPÉCIFIQUES POUR LES PAGES (Pas les articles)
   ======================================================= */

/* 1. Couleur du TITRE des pages (Ex: About, Shop...) */
.page .post-title,
.page .entry-title {
    color: #000000 !important; /* Mettez votre code couleur ici */
}

/* 2. Couleur du TEXTE (Corps) des pages */
.page .post-content,
.page .post-content p,
.page .post-content li,
.page .post-content h2,
.page .post-content h3 {
    color: #000000 !important; /* Mettez votre code couleur ici */
}

/* 3. Couleur des LIENS dans le texte des pages */
.page .post-content a {
    color: #000000 !important; /* Couleur des liens */
    text-decoration: underline; /* Souligner pour bien les voir */

}

/* =======================================================
   26. POINT NOIR ALIGNÉ (CORRECTION POSITION)
   ======================================================= */

/* 1. RESET (On efface les anciens symboles partout) */
ul.main-menu li.current-menu-ancestor::before,
.mobile-navigation li.current-menu-ancestor::before,
ul.main-menu li.current-menu-item > a::before,
.mobile-navigation li.current-menu-item > a::before {
    content: none !important;
}
/* 2. PRÉPARATION DU TEXTE (On fait de la place) */
/* On décale le texte vers la droite pour laisser la place au point */
ul.main-menu li.current-menu-item a,
.mobile-navigation li.current-menu-item a {
    padding-left: 0px !important; /* VARIABLE C : Espace entre le bord et le texte */
    position: relative !important;
}
/* 3. CRÉATION ET POSITION DU POINT */
ul.main-menu li.current-menu-item::before,
.mobile-navigation li.current-menu-item::before {
    content: "•" !important;
    font-family: Arial, sans-serif !important;
    color: transparent !important;
    
    /* C'est ici que la magie opère pour le placement */
    position: absolute !important; 
    
    /* --- VARIABLES À MODIFIER SI BESOIN --- */
    font-size: 22px !important;   /* Taille du point */
    left: 0px !important;         /* VARIABLE A : Position Horizontale (Gauche/Droite) */
    top: -2px !important;          /* VARIABLE B : Position Verticale (Haut/Bas) */
    
    /* On s'assure qu'il ne prend pas de place en hauteur */
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    z-index: 10 !important;
}


/* =======================================================
   13. INSTAGRAM & BLUESKY (CÔTE À CÔTE + NUAGE)
   ======================================================= */

/* --- 1. MISE EN PAGE : CÔTE À CÔTE --- */
/* Cible les éléments qui ont la classe "social-inline" */
li.social-inline {
    display: inline-block !important; /* Force l'affichage en ligne */
    margin-right: 10px !important; /* Espace entre les deux */
    width: auto !important; 
    border: none !important;
    vertical-align: middle !important;
}

/* --- 2. STYLE COMMUN DES LIENS --- */
li.social-inline a {
    font-size: 0 !important; /* Cache le texte */
    display: block !important;
    position: relative !important;
    width: 30px !important; 
    height: 30px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* --- 3. DÉFINITION DES ICÔNES --- */

/* Style de base pour les deux icônes */
li.social-inline a::before {
    font-family: "Genericons" !important;
    font-size: 32px !important;
    color: #666666 !important; /* GRIS par défaut */
    opacity: 0.7;
		background-color: #ffffff !important; /* Fond Blanc Opaque */
    
    /* Centrage absolu */
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    
    transition: all 0.2s ease;
}


/* --- ICÔNE mail --- */
li.social-inline a[href*="antoinemaillard.fr/contact/"]::before {
    content: '\f410' !important; /* CORRIGÉ : Ajout du 'f' manquant */
		font-size: 44px !important;
		left: -5px !important;
}

/* --- ICÔNE INSTAGRAM --- */
li.social-inline a[href*="instagram.com"]::before {
    content: '\f215' !important;
		font-size: 28px !important;
		left: 4px !important;
}

/* --- ICÔNE BLUESKY --- */
li.social-inline a[href*="bsky.app"]::before {
    content: '\f202' !important; /* Code du Nuage */
}

/* --- ICÔNE PIXELFED --- */
li.social-inline a[href*="pixelfed.social"]::before {
    content: '\f101' !important; /* Code Image/Appareil photo */
		left: -4px !important;
} 




/* =======================================================
   14. MENU MOBILE : CIBLE .MOBILE-MENU (VERSION FINALE)
   ======================================================= */

@media (max-width: 1000px) {

    /* 1. ON CIBLE LA CLASSE MOBILE-MENU DÉCOUVERTE DANS L'INSPECTEUR */
    .mobile-menu,
    .mobile-menu-container,
    .navigation-container,
    #site-navigation {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* 2. ON FORCE LES LIENS EN GRIS DANS CETTE ZONE */
    .mobile-menu a,
    .mobile-menu li a,
    #site-navigation a {
        color: #666666 !important;
    }

    /* 3. LE TITRE ET LE BOUTON DE FERMETURE */
    .site-title a,
    .blog-title a,
    .mobile-menu-toggle {
        color: #000000 !important;
    }

    /* Le bouton CLOSE que l'on voit à droite */
    .nav-toggle.active, 
    .mobile-menu-toggle.active {
        background-color: #f5f5f5 !important;
        color: #000000 !important;
    }

    /* 4. LES ICÔNES SOCIALES DANS LE MENU MOBILE */
    .mobile-menu .social-inline a::before {
        color: #666666 !important;
    }

    /* 5. SÉCURITÉ : Supprime tout voile noir persistant */
    .nav-overlay, 
    .mobile-menu-overlay {
        display: none !important;
    }

}
/* =======================================================
   15. FIX FINAL : SUPPRESSION DE LA CROIX PARASITE (MAIL)
   ======================================================= */

/* 1. On cible spécifiquement le lien qui contient ton adresse de contact */
.mobile-menu li.social-inline a[href*="contact"],
.main-navigation li.social-inline a[href*="contact"] {
    font-size: 0 !important;      /* Écrase toute taille de texte */
    text-indent: -9999px !important; /* Expulse le texte hors de l'écran */
    color: transparent !important;   /* Rend le texte invisible au cas où */
    display: inline-block !important;
}

/* 2. On supprime tout caractère qui s'afficherait AVANT l'icône */
.mobile-menu li.social-inline a[href*="contact"]::after,
.mobile-menu li.social-inline::before {
    content: none !important;
    display: none !important;
}

/* 3. On force l'icône à rester visible malgré le texte expulsé */
.mobile-menu li.social-inline a[href*="contact"]::before {
    content: '\f410' !important; /* L'enveloppe */
    font-family: "Genericons" !important;
    font-size: 45px !important;
    color: #666666 !important;
    text-indent: 0 !important;   /* L'icône, elle, reste à sa place */
    position: absolute !important;
    left: -5px !important;
    top: 41% !important;
    transform: translateY(-50%) !important;
    visibility: visible !important;
}
/* =======================================================
   16. CONTENEUR : GRIS ET ARRONDIS (UNIQUEMENT PAGES)
   ======================================================= */

/* 1. On ajoute ".page" devant pour ne cibler que les pages réelles */
.page .post-container, 
.page .post-inner, 
.page .section-inner,
.page article.post {
    background-color: #ede3dd !important; /* Gris clair */
    border-radius: 30px !important;      /* Arrondi sur ordinateur */
    overflow: hidden !important;
    border: none !important;
}

/* 2. On s'assure que sur l'ACCUEIL (archive), tout redevient normal */
.archive .post-container,
.blog .post-container,
.archive article,
.blog article {
    background-color: transparent !important; /* Pas de fond gris sur la grille */
    border-radius: 0 !important;             /* Pas d'arrondi sur la grille */
}

/* 3. RÉGLAGES MOBILE (Uniquement pour les Pages) */
@media (max-width: 1000px) {
    .page .post-container, 
    .page .post-inner, 
    .page article.post {
        border-radius: 0 !important; /* Pas d'arrondi sur mobile pour les pages */
        
    }
}
/* =======================================================
   17. SUPPRESSION DE LA BARRE BLANCHE SOUS LES ARTICLES
   ======================================================= */

/* Cache la zone de navigation entre les articles */
.post-navigation, 
.post-nav-wrapper, 
.post-navigation.clear {
    display: none !important;
}

/* Optionnel : Supprime aussi les bordures ou marges résiduelles en bas */
.post-inner {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
/* =======================================================
   18. COULEUR DES LIENS DANS LES ARTICLES (FOND NOIR)
   ======================================================= */

/* Force les liens en blanc uniquement dans le corps des articles */
.single .post-content a,
.single .entry-content a {
    color: #ffffff !important; /* Blanc */
    text-decoration: underline; /* Garde le soulignement pour l'accessibilité */
}

/* Couleur au survol des liens dans les articles */
.single .post-content a:hover,
.single .entry-content a:hover {
    color: #cccccc !important; /* Gris clair au survol */
}
/* =======================================================
   19. ÉLARGIR LES TITRES ET LE CONTENU (PAGES & ARTICLES)
   ======================================================= */

/* 1. Élargir le conteneur principal du texte */
.post-inner,
.section-inner,
.entry-content,
.post-header {
    max-width: 850px !important; /* Augmenté (était à ~600px) */
    width: 90% !important;        /* Pour garder de la marge sur les côtés */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Forcer les titres à utiliser tout l'espace disponible */
.post-title,
.entry-title,
.post-header h1 {
    max-width: 100% !important;
    text-align: left; /* Ou center si tu préfères */
}

/* 3. Ajustement pour que les images s'adaptent aussi à cette largeur */
.post-content img,
.entry-content img {
    max-width: 100% !important;
    height: auto !important;
}
/* =======================================================
   20. TAILLE DES TITRES (VERSION FORCEE - ORDI)
   ======================================================= */

@media (min-width: 1000px) {
    /* On cible le titre avec le chemin complet pour plus de puissance */
    html body .post-header h1.post-title,
    html body .post-header h1.entry-title,
    html body h1.post-title {
        font-size: 45px !important; /* On monte à 65px pour bien voir la différence */
        line-height: 1.1 !important;
        font-weight: 400 !important; /* On force un peu le gras */
        display: block !important;
        margin-bottom: 0px !important;
    }
}
/*21. COULEUR DES LIENS : PAGES VS ARTICLES
   ======================================================= */

/* 1. FORCE LE NOIR SUR LES PAGES (About, Contact, etc.) */
/* On utilise .page pour isoler ces réglages */
.page .post-content a, 
.page .entry-content a,
.page .section-inner a {
    color: #000000 !important; /* NOIR */
    text-decoration: underline !important; /* Toujours souligné pour les repérer */
}

/* Couleur au survol pour les pages */
.page .post-content a:hover {
    color: #666666 !important; /* Gris foncé au survol */
}

ul.main-menu li.current-menu-item > .sub-menu,
ul.main-menu li.current-menu-ancestor > .sub-menu,
ul.main-menu li.current-menu-parent > .sub-menu {
    display: block !important;
}


/* --- RÈGLE SPÉCIALE MOBILE (Pour écraser le thème) --- */

@media only screen and (max-width: 1024px) {
    
    /* On répète l'ordre de masquage avec plus de force */
    .mobile-navigation ul .sub-menu,
    .main-navigation ul .sub-menu,
    ul.main-menu .sub-menu {
        display: none !important;
    }

    /* On répète l'ordre d'affichage pour la page active */
    .mobile-navigation li.current-menu-item > .sub-menu,
    .mobile-navigation li.current-menu-ancestor > .sub-menu,
    ul.main-menu li.current-menu-item > .sub-menu,
    ul.main-menu li.current-menu-ancestor > .sub-menu {
        display: block !important;
    }
}
/* =======================================================
   25. MENU HYBRIDE : ACCORDÉON ORDI / SIMPLE SUR MOBILE
   ======================================================= */

/* --- CAS 1 : ORDINATEUR (Écran supérieur à 1000px) --- */
/* Ici, on remet le comportement "Accordéon" qui fonctionnait */
@media (min-width: 1000px) {
    /* 1. On cache les sous-menus par défaut */
    ul.main-menu .sub-menu {
        display: none !important;
    }

    /* 2. On affiche UNIQUEMENT si on est dans la rubrique */
    ul.main-menu li.current-menu-item > .sub-menu,
    ul.main-menu li.current-menu-ancestor > .sub-menu,
    ul.main-menu li.current-menu-parent > .sub-menu {
        display: block !important;
    }
}

/* --- CAS 2 : MOBILE & TABLETTE (Écran inférieur à 1000px) --- */
/* Ici, on masque totalement les sous-menus comme demandé */
@media (max-width: 999px) {
    .main-navigation .sub-menu,
    .mobile-navigation .sub-menu,
    ul.main-menu .sub-menu {
        display: none !important;
    }
}




/* =======================================================

   29. TRADUCTION : DRAPEAUX ET ALIGNEMENT

   ======================================================= */



/* 1. SUPPRIMER LA CROIX / LE POINT SUR LES LANGUES */
/* On évite que le style du menu actif ne s'applique aux drapeaux */
.main-menu li.lang-item::before,
.main-menu li.lang-item > a::before {
    content: none !important;
    display: none !important;

}

/* 2. ALIGNER LES DRAPEAUX CÔTE À CÔTE */
/* On force les éléments de langue à se comporter comme tes icônes sociales */
.main-menu li.lang-item {
    display: inline-block !important;
    margin-right: 15px !important; /* Espace entre les deux drapeaux */
    border: none !important;

}


/* 3. TAILLE ET STYLE DES DRAPEAUX */
.main-menu li.lang-item img {
    width: 30px !important;  /* Augmente la taille (défaut est 16px) */
    height: auto !important;
    border-radius: 2px;      /* Un tout petit arrondi pour le style */
    transition: transform 0.2s ease;

}


/* Effet au survol du drapeau */

.main-menu li.lang-item img:hover {
    transform: scale(1.2);   /* Le drapeau grossit légèrement au survol */

}

/* =======================================================
   29. TRADUCTION : REMPLACEMENT DES DRAPEAUX
   ======================================================= */

/* 1. On cache l'image d'origine de Polylang */

.main-menu li.lang-item img {
    display: none !important;

}

/* 2. On crée l'espace pour la nouvelle icône */

.main-menu li.lang-item a {
    display: inline-block;
    width: 50px;  /* Largeur de ton icône */
    height:35px; /* Hauteur de ton icône */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    transition: transform 0.2s ease;
		opacity: 0.7;

}



/* 3. Icône FRANÇAIS */
.main-menu li.lang-item-fr a {
    background-image: url('http://antoinemaillard.fr/wp-content/uploads/2026/02/fr.png') !important;

}


/* 4. Icône ANGLAIS */
.main-menu li.lang-item-en a {
    background-image: url('http://antoinemaillard.fr/wp-content/uploads/2026/02/us.png') !important;

}


/* Effet au survol */

.main-menu li.lang-item a:hover {
    transform: scale(1.15);
}
.main-menu li.lang-item {
    display: inline-block !important;
    padding: 0 !important;  /* Reset des paddings du thème */
    margin: 50px -5px 0 0 !important; /* Espace entre les deux drapeaux */
  }



@media (max-width: 1200px) {

    /* 1. SUPPRESSION  DE LA CROIX ET DES PUCES */
    /* Cible tous les indicateurs "page active" du thème sur mobile */
    .mobile-navigation li.lang-item::before,
    .mobile-navigation li.lang-item > a::before,
    .mobile-navigation li.lang-item::after,
    .mobile-navigation li.lang-item.current-menu-item > a::after {
        content: none !important;
        display: none !important;
        
    }

    /* 2. ALIGNEMENT CÔTE À CÔTE */
    .mobile-navigation li.lang-item {
        display: inline-block !important; /* Les met sur la même ligne */
        width: 100% !important;           /* Empêche de prendre toute la largeur */
      
        padding: 0px !important;
        margin-top: 15px !important;      /* Espace pour les détacher du texte "About" */
				margin-left: 0px !important; /* Pousse vers la droite */

    }

    /* 3. APPLICATION DES IMAGES PERSO */
    
    /* On cache l'image par défaut de Polylang */
    .mobile-navigation li.lang-item img {
        display: none !important;
    }

    /* On configure le lien pour afficher ton image en arrière-plan */
    .mobile-navigation li.lang-item a {
        display: block !important;
        width: 75px !important;       /* Taille confortable pour le tactile */
        height: 50px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        color: transparent !important; /* Rend le texte invisible */
        font-size: 0 !important;       /* Sécurité supplémentaire pour cacher le texte */
				opacity: 0.7;
				 
    }

    /* L'image FR */
    .mobile-navigation li.lang-item-fr a {
        background-image: url('http://antoinemaillard.fr/wp-content/uploads/2026/02/fr.png') !important;
				margin-left: 70px !important; /* Pousse vers la droite */
				margin-top: -70px !important;
    }

    /* L'image US */
    .mobile-navigation li.lang-item-en a {
        background-image: url('http://antoinemaillard.fr/wp-content/uploads/2026/02/us.png') !important;
				margin-bottom: -5px !important;
    }

   }
/* =======================================================
   FIX : EMPÊCHER LE POINT (GENERICON) SUR PAGE CONTACT ACTIVE
   ======================================================= */

/* On cible l'élément "menu personnalisé" quand il est actif */
.main-menu li.menu-item-type-custom.current-menu-item > a::before {
    
    /* 1. ON TUE LE POINT (On annule le dessin du cercle) */
    background: transparent !important;   /* Enlève la couleur de fond du point */
    width: auto !important;               /* Enlève la largeur fixe du point */
    height: auto !important;              /* Enlève la hauteur fixe du point */
    border-radius: 0 !important;          /* Enlève l'arrondi */
    position: static !important;          /* Annule le positionnement absolu du point */
    
    /* 2. ON RESTAURE L'ICÔNE GENERICON */
    font-family: "Genericons" !important; /* Force la police Genericon */
    content: '\f410' !important;          /* Code de l'enveloppe Genericon */
		/* 2. LA SOLUTION FOND BLANC (Masque le point) */
    
    
    /* 3. STYLE DE L'ICÔNE ACTIVE */
    font-size: 44px !important;           /* Ajuste la taille */
    color: #666666 !important;            /* Couleur de l'icône active (Noir) */
    display: inline-block !important;
    vertical-align: middle !important;
    opacity: 0.7 !important;
    margin-left: -5px !important;
		margin-top: 15px !important
				}
				/* Si jamais le point est généré par un ::after, on le tue */
.main-menu li.menu-item-type-custom.current-menu-item > a::after,
.mobile-navigation li.menu-item-type-custom.current-menu-item > a::after {
    content: none !important;
    display: none !important;

				  }
/* =======================================================
   FIX : BORDURES SUR LES PARAGRAPHES (Gutenberg)
   ======================================================= */

/* On cible les paragraphes qui ont un style de bordure défini */
.post-content p[style*="border"],
.entry-content p[style*="border"] {
    border-style: solid !important; /* Force le trait plein */
    box-sizing: border-box !important; /* Évite que le texte déborde */
}

/* Si tu utilises les classes de couleur de WordPress */
.post-content p.has-border-color {
    border-style: solid !important;
   
}
CSS
/* =======================================================
   FIX : SUPPRESSION TOTALE ESPACE TITRE / CONTENU
   ======================================================= */

/* 1. On remonte le bas du bloc Titre global */
.post-header {
    margin-bottom: 0 !important;     /* Supprime la marge externe */
    padding-bottom: 10px !important; /* Garde un tout petit peu d'air (ou met 0) */
    border: none !important;
}

/* 2. On colle le haut du contenu (L'image) */
.post-content, 
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. LE COUPABLE CACHÉ : La ligne décorative */
/* Le thème ajoute souvent un trait sous le titre via "::after" qui prend de la place */
.post-title::after {
    display: none !important;        /* Supprime la ligne décorative sous le titre */
    margin: 0 !important;            /* Supprime son espace */
    content: none !important;
}

/* 4. On s'assure que le titre H1 lui-même ne pousse pas vers le bas */
.post-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}