/* 1. IMPORT GOOGLE FONTS (À mettre tout en haut du CSS) */

@import url('https://fonts.googleapis.com/css2?family=Dongle&family=Figtree:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&family=Paytone+One&family=Rammetto+One&display=swap');


/* ==========================================================================
   PERSONNALISATION DU MENU MOBILE & TABLETTE (RESPONSIVE)
   ========================================================================== */

@media screen and (max-width: 1000px) {

    /* 1. FOND BLANC POUR LE MENU DÉROULANT
       On remplace le gris/noir sombre par un blanc pur (ou un crème/saumon si tu préfères) */
    .mobile-menu,
    .mobile-navigation,
    .navigation-inner {
        background-color: #FFFFFF !important;
        border-bottom: 1px solid #EAEAEA !important;
    }

    /* 2. TEXTE EN BLEU INDIGO SUR LE MENU MOBILE
       On applique le même bleu profond (#24316A) et la même graisse que sur ordinateur */
    .mobile-menu a,
    .mobile-navigation a,
    .mobile-menu ul li a {
        color: #24316A !important;
				font-size: 15px !important;
        font-family: 'Outfit', Helvetica, Arial, sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    /* Couleur au survol ou au toucher sur écran tactile */
    .mobile-menu a:hover,
    .mobile-menu a:active {
        color: #D9534F !important;
    }

 /* ==========================================================================
       FORÇAGE DE LA TAILLE DU LOGO SUR MOBILE
       ========================================================================== */
    
    /* 1. On donne du volume au lien qui contient l'image */
    .sidebar .blog-logo a,
    .sidebar .logo a,
    .sidebar .header-logo a {
        display: block !important;
        width: 100% !important;
        max-width: 260px !important; /* Augmente cette valeur à 280px ou 300px si tu veux encore plus grand */
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* 2. On force l'image elle-même à s'étirer à 100% de ce conteneur agrandi */
    .sidebar .blog-logo img,
    .sidebar .logo img,
    .sidebar .header-logo img {
        display: block !important;
        content: url('https://www.studiobara.fr/wp-content/uploads/2026/07/Alberto-Logo-mobile.png') !important;
        width: 100% !important;
        height: auto !important; /* Conserve ton ratio homothétique parfait */
        max-width: 100% !important;
        min-width: 200px !important; /* Sécurité : force le logo à ne pas descendre en dessous de 200px */
    }
    
    /* 4. OPTIONNEL : Changer aussi le bouton bleu "CLOSE X" en bleu indigo pour être raccord 
    .nav-toggle.active,
    button.nav-toggle {
        background-color: #FFFFFF !important;
        color: #24316A  !important;
    }*/
}
/* ==========================================================================
       RÉDUCTION DE L'ESPACE AU-DESSUS ET EN DESSOUS DU LOGO MOBILE
       ========================================================================== */

    /* 1. On affine le bandeau global (.sidebar) 
       Par défaut, Fukasawa impose un gros padding vertical. On le réduit au minimum ! */
    .sidebar {
        padding-top: 10px !important;    /* Espace au-DESSUS du logo et du bouton MENU */
        padding-bottom: 10px !important; /* Espace en DESSOUS du logo et du bouton MENU */
    }

    /* 2. On supprime les marges parasites autour du bloc logo lui-même */
    .sidebar .blog-logo,
    .sidebar .logo,
    .sidebar .header-logo {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* 3. On ajuste aussi l'alignement vertical du bouton "MENU" à droite 
       pour qu'il reste parfaitement centré par rapport à ta nouvelle hauteur */
    .nav-toggle {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

/* ==========================================================================
   AIGUILLAGE POLYLANG : WIDGET SUR ORDINATEUR / MENU SUR MOBILE
   ========================================================================== */

/* 1. RÈGLE ORDINATEUR (Écrans larges : MacBook Pro, Cintiq, Dell XPS...) 
   au-dessus de 1000 pixels de large */
@media screen and (min-width: 1001px) {
    
    /* On AFFICHE le widget officiel dans la barre latérale */
    .sidebar .widgets .widget_polylang,
    #polylang-7 {
        display: block !important;
    }
    
    /* On CACHE la boîte qui a été injectée dans le menu principal pour éviter le doublon */
    .main-menu .polylang-native-select,
    .sidebar .polylang-native-select {
        display: none !important;
    }
}

/* 2. RÈGLE MOBILE & TABLETTE (Écrans tactiles : iPad Pro, Redmi Note...) 
   en dessous de 1000 pixels de large */
@media screen and (max-width: 1000px) {
    
    /* On CACHE le widget de la barre latérale pour qu'il ne traîne pas tout en bas de la page mobile */
    .widgets .widget_polylang,
    #polylang-7 {
        display: none !important;
    }
    
    /* On AFFICHE fièrement la boîte injectée dans le menu déroulant mobile (sur fond blanc) */
    .mobile-menu .polylang-native-select,
    .mobile-navigation .polylang-native-select,
    .polylang-native-select {
        display: block !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   PERSONNALISATION DU MENU LATÉRAL (TYPO & COULEURS)
   ========================================================================== */

/* 1. Style des liens principaux du menu (ABOUT, SHOP...) */
.main-menu a {
    color: #24316A !important; /* Code couleur bleu indigo assorti à ton logo */
    font-family: 'Outfit', Helvetica, Arial, sans-serif !important; /* Remplace par le nom de ta typo si tu en importes une */
    font-size: 18px !important; /* Taille du texte (à ajuster selon tes goûts) */
    font-weight: 700 !important; /* Graisse : 400 pour normal, 700 pour bold, 900 pour extra-bold */
    letter-spacing: 1px !important; /* Espacement entre les lettres pour un effet plus graphique */
    text-transform: uppercase !important; /* Force les majuscules */
    transition: color 0.2s ease !important; /* Animation fluide au survol */
}

/* 2. Couleur du texte au passage de la souris (Hover) */
.main-menu a:hover {
    color: #D9534F !important; /* Change cette couleur pour la teinte au survol de ton choix (ex: un rouge/orange contrastant) */
}

/* 3. Ajustement de l'espacement entre les éléments du menu */
.main-menu li {
    margin-bottom: 12px !important;
}



/* ==========================================================================
   DÉSACTIVATION  DU SOULIGNEMENT 
   ========================================================================== */

body .page .post-content p a, 
body .page .post-content p a strong,
body .single .post-content p a,
body .single .post-content p a strong {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Optionnel : Remettre le soulignement au survol */
body .page .post-content p a:hover, 
body .page .post-content p a:hover strong,
body .single .post-content p a:hover,
body .single .post-content p a:hover strong {
    text-decoration: underline !important;
}



/* =======================================================
   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(255, 193, 176, 0.8);
    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: #374178 !important;
    font-size: 24px !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: "Rammetto One", sans-serif !important; /* Utilisation de la Google Font */
    font-size: 23px !important; /* Taille réduite (Ajustez ce chiffre) */
    font-weight: 300 !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: #374178 !important;
}

/* 4. TYPOGRAPHIE DU TEXTE (Corps de l'article) */
.post-content p {
    font-family: "Outfit", sans-serif !important;
		color: #374178 !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: #374178!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: "Rammetto One" !important; /* Changez la police ici si besoin */
    font-size: 26px !important; /* Augmentez ce chiffre pour grossir */
    font-weight: 300 !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: #ffc1b0 !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: #374178 !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: #374178 !important; /* Mettez votre code couleur ici */
}

/* 3. Couleur des LIENS dans le texte des pages */
.page .post-content a {
    color: #374178!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;
}



/* =======================================================
   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: #fdf1d5 !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: #374178 !important; 
    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: #374178 !important; /* NOIR */
    text-decoration: underline !important; /* Toujours souligné pour les repérer */
}

/* Couleur au survol pour les pages */
.page .post-content a:hover {
    color: #374178 !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;
    }
}




/* =




















/* =======================================================
   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;
}
/* =======================================================
   FIX : RETIRER LE CADRE BLANC DES IMAGES CENTRÉES
   ======================================================= */

/* On cible les images et les blocs images centrés dans l'article */
.post-content img.aligncenter,
.post-content .aligncenter img,
.post-content figure.aligncenter,
.post-content figure.wp-block-image.aligncenter,
.post-content figure.aligncenter img {
    
    /* 1. On supprime la couleur de fond blanche */
    background: transparent !important; 
    background-color: transparent !important;
    
    /* 2. On supprime l'espace interne (qui crée l'effet de cadre) */
    padding: 0 !important;
    
    /* 3. On supprime toute bordure ou ombre éventuelle */
    border: none !important;
    box-shadow: none !important;
}
/* =======================================================
   FIX : FOND CLAIR SUR LES GALERIES (PAGE D'ACCUEIL)
   ======================================================= */

/* On cible les conteneurs du diaporama pour rendre leur fond transparent */
.featured-media .flexslider,
.featured-media .flexslider .slides,
.featured-media .flexslider .slides > li,
.post-media .flexslider {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important; /* Sécurité : supprime les bordures éventuelles */
    box-shadow: none !important; /* Sécurité : supprime les ombres éventuelles */
}