/*
 Theme Name: Popoli Fratelli - Thème Enfant
 Theme URI:  https://example.org/
 Description: Thème enfant léger pour Popoli Fratelli, basé sur Twenty Twenty-Four. Contient styles minimaux et surcharge possible des templates.
 Author: Popoli Fratelli
 Template: twentytwentyfour
*/

/*--------------------------------------------------------------
# Design System - Variables et Styles de Base
--------------------------------------------------------------*/

:root {
    /* Palette de Couleurs Sémantique */
    --pf-color-primary: #6BBF44;
    --pf-color-primary-hover: #4CAF50;
    --pf-color-primary-soft: #E6F5E0; /* Une nuance adoucie du vert primaire */
    --pf-color-secondary: #2F4F8F;
    --pf-color-text-dark: #212529;
    --pf-color-text-light: #5a5a5a;
    --pf-color-background-soft: #f8f9fa;
    --pf-color-border: #dee2e6;
    --pf-color-error: #D32F2F;
    --pf-color-success: #2E7D32;
    --pf-color-white: #FFFFFF;

    /* Échelle Typographique */
    --pf-font-family-title: 'Montserrat', sans-serif;
    --pf-font-family-body: 'Roboto', sans-serif;

    /* Grille et Layout */
    --pf-spacing-unit: 8px;
    --pf-container-max-width: 1200px;
    --pf-border-radius: 8px;
}

/*--------------------------------------------------------------
# Styles Globaux
--------------------------------------------------------------*/

body {
    font-family: var(--pf-font-family-body);
    /* color: var(--pf-color-text-dark); */
    line-height: 1.7;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pf-font-family-title);
    font-weight: 700;
    color: var(--pf-color-secondary);
    line-height: 1.3;
    margin-top: calc(var(--pf-spacing-unit) * 3);
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

/* Responsive Typography */
@media (max-width: 767px) { /* Mobile */
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }
    .hero-section h1 { font-size: 36px; }
    .hero-section .hero-subtitle { font-size: 18px; }
    .cta-final-section h2 { font-size: 32px; }
    .cta-final-section p { font-size: 18px; }
}

@media (min-width: 768px) and (max-width: 1023px) { /* Tablette */
    h1 { font-size: 42px; }
    h2 { font-size: 32px; }
    h3 { font-size: 22px; }
    .hero-section h1 { font-size: 48px; }
    .hero-section .hero-subtitle { font-size: 19px; }
    .cta-final-section h2 { font-size: 38px; }
    .cta-final-section p { font-size: 19px; }
}

p {
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

a {
    color: var(--pf-color-primary); /* Couleur par défaut pour les liens */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--pf-color-primary-hover);
    text-decoration: underline;
}

/* Surcharge pour les liens à l'intérieur des boutons */
.btn-primary a {
    color: var(--pf-color-text-dark);
}

.btn-primary a:hover {
    color: var(--pf-color-white);
    text-decoration: none;
}

.btn-secondary a {
    color: var(--pf-color-text-dark);
}

.btn-secondary a:hover {
    color: var(--pf-color-white);
    text-decoration: none;
}

/*--------------------------------------------------------------
# Composants de Base
--------------------------------------------------------------*/

.btn {
    display: inline-block;
    padding: calc(var(--pf-spacing-unit) * 1.5) calc(var(--pf-spacing-unit) * 3);
    border-radius: var(--pf-border-radius);
    font-family: var(--pf-font-family-title);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--pf-color-primary);
    color: var(--pf-color-text-dark); /* Texte en noir par défaut */
    border-color: var(--pf-color-primary); /* Assure que la bordure est de la couleur primaire */
}

.btn-primary:hover {
    background-color: var(--pf-color-primary-hover);
    color: var(--pf-color-white);
    transform: translateY(-2px);
    text-decoration: none;
    border-color: var(--pf-color-primary); /* Change la couleur de la bordure au survol */
}

.btn-secondary {
    background-color: transparent; /* Correction: doit être transparent */
    color: var(--pf-color-text-dark); /* Texte en noir par défaut */
    border-color: var(--pf-color-primary); /* Bordure en vert primaire par défaut */
}

.btn-secondary:hover {
    background-color: var(--pf-color-primary-hover);
    color: var(--pf-color-white);
    text-decoration: none;
    border-color: var(--pf-color-primary-hover); /* Bordure en vert primaire au survol */
}

/*--------------------------------------------------------------
# Helpers
--------------------------------------------------------------*/
.container {
    width: 100%;
    max-width: var(--pf-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--pf-spacing-unit) * 2);
    padding-right: calc(var(--pf-spacing-unit) * 2);
}

.bg-primary-soft {
    background-color: var(--pf-color-primary-soft)
}

/*--------------------------------------------------------------
# Layout - Header & Footer
--------------------------------------------------------------*/
.site-header {
    background-color: var(--pf-color-primary-soft); /* Utilisation de la nouvelle couleur adoucie */
    padding: calc(var(--pf-spacing-unit) * 2) 0; /* Hauteur initiale 80px (4*8 + 2*8 + 2*8) */
    border-bottom: 1px solid var(--pf-color-border);
    position: sticky;
    top: 0;
    z-index: 2000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Réduction de la hauteur du header au scroll (sera géré par JS) */
.site-header.header-scrolled {
    background-color: var(--pf-color-background-soft);
    padding: calc(var(--pf-spacing-unit) * 1) 0; /* Hauteur réduite 60px */
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding img {
    max-height: 50px; /* Hauteur max du logo */
    width: auto;
    transition: max-height 0.3s ease;
}

.site-header.header-scrolled .site-branding img {
    max-height: 30px; /* Hauteur réduite du logo au scroll */
}

/* Masquer le titre du site si un logo est présent */
.site-branding .site-title {
    display: none;
}

.site-branding .custom-logo-link + .site-title {
    display: none; /* S'assurer que le titre est masqué si le logo est là */
}

/* Afficher le titre si pas de logo */
.site-branding:not(:has(.custom-logo-link)) .site-title {
    display: block;
    font-size: 24px; /* Taille par défaut pour le titre si pas de logo */
    margin: 0;
}

.main-navigation {
    /* Masquer le menu de navigation par défaut sur mobile */
    display: block;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Afficher sur desktop */
}

.main-navigation li {
    margin: 0 calc(var(--pf-spacing-unit) * 2);
}

.main-navigation a {
    font-family: var(--pf-font-family-title);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--pf-color-text-dark); /* Couleur des liens */
    padding: calc(var(--pf-spacing-unit) * 1) 0;
    position: relative;
}

.main-navigation a:hover {
    color: var(--pf-color-primary);
    text-decoration: none;
}

/* Indication de la page active */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--pf-color-primary);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--pf-color-primary);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Bouton Hamburger (menu-toggle) */
.menu-toggle {
    display: none; /* Masqué par défaut sur desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--pf-color-text-dark);
    padding: 0;
}

.menu-toggle:focus {
    outline: 2px solid var(--pf-color-primary);
    outline-offset: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--pf-spacing-unit) * 2);
}

.language-switcher {
    /* Styles pour le sélecteur de langue */
    font-size: 14px;
    font-weight: 500;
}

.language-switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: calc(var(--pf-spacing-unit) * 1);
}

.language-switcher li {
    margin: 0;
}

.language-switcher a {
    color: var(--pf-color-text-dark);
    text-decoration: none;
    padding: calc(var(--pf-spacing-unit) * 0.5) calc(var(--pf-spacing-unit) * 1);
    border-radius: var(--pf-border-radius);
    transition: all 0.3s ease;
}

.language-switcher a:hover {
    background-color: var(--pf-color-background-soft);
    color: var(--pf-color-primary);
}

.language-switcher .current-lang a {
    background-color: var(--pf-color-primary);
    color: var(--pf-color-white);
}

.language-switcher .current-lang a:hover {
    background-color: var(--pf-color-primary-hover);
}

/* Responsive pour le header */
@media (max-width: 1023px) { /* Tablette et mobile */
    .main-navigation {
        display: none; /* Masquer le menu principal sur mobile/tablette */
        transition: transform 0.3s ease-out; /* Assurez-vous que la transition est aussi sur l'état masqué */
    }

    .menu-toggle {
        display: block; /* Afficher le bouton hamburger */
    }

    .header-actions .btn-primary {
        padding: calc(var(--pf-spacing-unit) * 1) calc(var(--pf-spacing-unit) * 2); /* Bouton plus petit sur mobile */
        font-size: 14px;
    }
}


/*--------------------------------------------------------------
# Helpers - Scroll Lock
--------------------------------------------------------------*/
/* Classe ajoutée au <body> par le JavaScript quand le menu est ouvert */
body.menu-open {
    overflow: hidden;
}

/* Menu mobile en plein écran (sera géré par JS) */
.main-navigation.toggled {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0; /* Ancrer le menu à droite */
    width: 300px; /* Largeur du menu coulissant (ajustez selon votre besoin) */
    max-width: 100%; /* Pour ne pas dépasser 90% sur les petits écrans */
    height: 100%;
    
    background-color: var(--pf-color-secondary);
    overflow-y: auto;
    padding: calc(var(--pf-spacing-unit) * 4);
    
    /* Animation de coulissement */
    transition: transform 0.3s ease-out; /* Animation douce */
}

.main-navigation.toggled ul {
    flex-direction: column;
    text-align: center;
    margin-top: calc(var(--pf-spacing-unit) * 0);
}

.main-navigation.toggled li {
    margin: calc(var(--pf-spacing-unit) * 2) 0;
}

.main-navigation.toggled a {
    color: var(--pf-color-white);
    font-size: 16px; /* Taille H3 pour les liens du menu mobile */
    padding: calc(var(--pf-spacing-unit) * 1) 0;
    display: block;
    transition: color 0.3s ease;
}

.main-navigation.toggled a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 3. Afficher le sous-menu au survol du LI parent (desktop) */
.main-menu-container .menu-item-has-children:hover > .sub-menu {
    display: block; 
    opacity: 1; 
}


/* --- NOUVELLE LOGIQUE MOBILE : Remplacement des styles desktop --- */
/* Les sous-menus doivent être affichés verticalement sur le menu mobile */

.main-navigation.toggled .sub-menu {
    /* Annule le positionnement absolute du desktop */
    position: static; 
    display: none; /* Masqué par défaut sur mobile */
    opacity: 1; /* Pas de transition d'opacité sur mobile */
    
    /* Styles d'indentation */
    padding-left: calc(var(--pf-spacing-unit) * 4); /* Indentation pour le sous-menu */
    margin-top: calc(var(--pf-spacing-unit) * 1);
    background-color: transparent; /* Pas de fond blanc pour le sous-menu mobile */
    box-shadow: none;
    min-width: auto;
}

/* Classe ajoutée par le JS pour ouvrir le sous-menu sur mobile */
.main-navigation.toggled .menu-item-has-children.submenu-open > .sub-menu {
    display: block; /* Afficher le sous-menu si le LI parent a la classe 'submenu-open' */
}

.main-navigation.toggled .sub-menu li a {
    /* Styles pour les liens du sous-menu mobile */
    font-size: 14px; /* Légèrement plus petit que le parent 14px */
    padding: calc(var(--pf-spacing-unit) * 0.5) 0; /* Moins de padding */
    font-weight: normal; /* Moins gras */
    color: rgba(255, 255, 255, 0.8); /* Couleur des liens du sous-menu */
}

.main-navigation.toggled .sub-menu li a:hover {
    color: var(--pf-color-white);
    background-color: transparent; /* Pas de fond au survol pour les sous-menus */
}

.site-footer {
    background-color: var(--pf-color-secondary);
    color: var(--pf-color-white);
    padding: calc(var(--pf-spacing-unit) * 6) 0;
    /* margin-top: calc(var(--pf-spacing-unit) * 6); */
}

.site-footer a {
    color: var(--pf-color-white); /* Liens du footer en blanc */
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--pf-color-primary); /* Hover en vert primaire */
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--pf-spacing-unit) * 4);
    margin-bottom: calc(var(--pf-spacing-unit) * 4);
}

.footer-widget-area .widget-title {
    color: var(--pf-color-white);
    font-size: 20px;
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.footer-widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget-area ul li {
    margin-bottom: calc(var(--pf-spacing-unit) * 1);
}

.footer-widget-area p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.site-branding-footer img {
    max-height: 100px;
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.site-branding-footer .site-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.social-links {
    margin-top: calc(var(--pf-spacing-unit) * 3);
    display: flex;
    gap: calc(var(--pf-spacing-unit) * 2);
}

.social-links a {
    color: var(--pf-color-white);
    font-size: 24px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--pf-color-primary);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--pf-spacing-unit);
}

.newsletter-form input[type="email"] {
    padding: calc(var(--pf-spacing-unit) * 1.5);
    border-radius: var(--pf-border-radius);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--pf-color-white);
    font-size: 16px;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-form .btn-primary {
    width: 100%;
}

.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: calc(var(--pf-spacing-unit) * 3);
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.site-info a {
    color: rgba(255, 255, 255, 0.7);
}

.site-info a:hover {
    color: var(--pf-color-primary);
}

/* Responsive pour le footer */
@media (max-width: 767px) { /* Mobile */
    .footer-widgets {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }

    .footer-widget-area {
        text-align: center;
    }

    .site-branding-footer, .social-links, .newsletter-form {
        align-items: center;
        justify-content: center;
    }

    .social-links {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
   Styles pour le Menu Principal avec Dropdowns
   (Cible la liste générée par 'menu-1')
   ========================================= */

/* 1. Rendre les LI parents relatifs pour le positionnement absolu */
.main-menu-container .menu-item-has-children {
    position: relative; /* Équivalent à la classe 'relative' de Tailwind */
}

/* 2. Style du sous-menu (UL de niveau 1) */
.main-menu-container .sub-menu {
    /* Positionnement et apparence du dropdown */
    position: absolute; /* Équivalent à la classe 'absolute' de Tailwind */
    left: 0;
    top: 100%; /* Positionne le dropdown juste sous le lien parent */
    
    /* Apparence */
    background-color: white; /* À ajuster (ex: bg-white) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Équivalent à 'shadow-lg' */
    z-index: 100; /* Assurez-vous qu'il est au-dessus (ex: z-10) */
    min-width: 200px; /* Définir une largeur */
    padding: 8px 0; /* padding-y-2 */
    
    /* Cacher par défaut */
    display: none; /* Équivalent à la classe 'hidden' de Tailwind */
    opacity: 0; /* Pour une transition douce */
    transition: opacity 0.3s ease;
}

/* 3. Afficher le sous-menu au survol du LI parent */
.main-menu-container .menu-item-has-children:hover > .sub-menu {
    display: block; /* Équivalent à 'group-hover:block' de Tailwind */
    opacity: 1; /* Révéler */
}

/* 4. Style des LI dans le sous-menu (pour les rendre verticaux) */
.main-menu-container .sub-menu li {
    /* Annule l'effet flex/space-x-8 du menu principal */
    display: block; 
    margin: 0;
    padding: 0;
}

/* 5. Style des liens dans le sous-menu */
.main-menu-container .sub-menu li a {
    /* Styles pour les liens de dropdown */
    display: block;
    padding: 8px 16px; /* padding-y-2 padding-x-4 */
    font-weight: normal; /* Par défaut les liens de dropdown sont moins gras */
    text-transform: none;
    white-space: nowrap; /* Empêche le texte de s'enrouler */
    
    /* Réutilisation de vos couleurs */
    color: #333; /* text-text-dark */
    transition: background-color 0.3s, color 0.3s;
}

.main-menu-container .sub-menu li a:hover {
    color: white; /* Texte blanc au survol */
    background-color: #4CAF50; /* Couleur primaire au survol (à remplacer par votre couleur 'primary') */
}

/* =========================================
   Optionnel : Styles pour le Footer (Liste verticale simple sans sous-mênu)
   ========================================= */

/* Assurez-vous que les sous-menus sont toujours affichés verticalement */
.footer-navigation ul.sub-menu {
    /* Annule toute propriété 'absolute' si elle a été héritée */
    position: static;
    display: block; 
    padding-left: 15px; /* Décalage pour l'imbrication */
    margin-top: 5px;
}

/*--------------------------------------------------------------
# Sections - Page d'accueil
--------------------------------------------------------------*/
.hero-section {
    padding: calc(var(--pf-spacing-unit) * 10) 0;
    background-color: var(--pf-color-background-soft);
    text-align: center;
}

.hero-section h1 {
    font-size: 56px; /* Plus grand pour le héros */
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.hero-section .hero-subtitle {
    font-size: 20px;
    color: var(--pf-color-text-light);
    max-width: 700px;
    margin: 0 auto calc(var(--pf-spacing-unit) * 4) auto;
}

.hero-section .hero-actions .btn {
    margin: 0 var(--pf-spacing-unit);
}

.home-section {
    padding: calc(var(--pf-spacing-unit) * 8) 0;
}

.section-title {
    text-align: center;
    margin-bottom: calc(var(--pf-spacing-unit) * 6);
}

.section-title h2 {
    margin-bottom: var(--pf-spacing-unit);
}

.section-title p {
    font-size: 18px;
    color: var(--pf-color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.partners-carousel {
    position: relative; /* Nécessaire pour positionner les flèches */
    padding: 0 50px; /* Espace pour les flèches */
    min-height: 180px; /* Hauteur minimale pour le carrousel des partenaires */
    display: flex;
    align-items: center;
}

.partners-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Ajuster la hauteur des slides */
}

.partners-carousel .partner-logo-item {
    text-align: center;
}

.partners-carousel .partner-logo-item a {
    display: block;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partners-carousel .partner-logo-item a:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.partners-carousel .partner-logo-item img {
    max-width: 120px;
    height: auto;
    margin: auto; /* Centrer l'image */
}

/* Styles des flèches de navigation Swiper pour les partenaires */
.partners-carousel .swiper-button-next,
.partners-carousel .swiper-button-prev {
    color: var(--pf-color-primary);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.partners-carousel .swiper-button-next:hover,
.partners-carousel .swiper-button-prev:hover {
    background-color: var(--pf-color-primary);
    color: var(--pf-color-white);
}

.partners-carousel .swiper-button-next::after,
.partners-carousel .swiper-button-prev::after {
    font-size: 18px;
}

/* Positionnement des flèches */
.partners-carousel .swiper-button-prev {
    left: 0;
}

.partners-carousel .swiper-button-next {
    right: 0;
}

/* Pagination Swiper pour les partenaires */
.partners-carousel .swiper-pagination-bullet {
    background: var(--pf-color-border);
    opacity: 1;
}

.partners-carousel .swiper-pagination-bullet-active {
    background: var(--pf-color-primary);
}

/* Section Impact en Chiffres */
.impact-numbers-section {
    background-color: var(--pf-color-background-soft);
}

.impact-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--pf-spacing-unit) * 4);
    text-align: center;
}

@media (max-width: 767px) { /* Mobile */
    .impact-numbers-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
}

@media (min-width: 768px) and (max-width: 1023px) { /* Tablette */
    .impact-numbers-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2 ou 3 colonnes sur tablette */
    }
}

.impact-item {
    padding: calc(var(--pf-spacing-unit) * 4);
    background-color: var(--pf-color-white);
    border-radius: var(--pf-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.impact-icon {
    color: var(--pf-color-primary);
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.impact-icon svg {
    width: 48px;
    height: 48px;
}

.impact-number {
    font-family: var(--pf-font-family-title);
    font-size: 36px;
    font-weight: 700;
    color: var(--pf-color-secondary);
    margin-bottom: var(--pf-spacing-unit);
}

.impact-text {
    font-size: 16px;
    color: var(--pf-color-text-light);
}

/*--------------------------------------------------------------
# Composants - Cartes de Projet
--------------------------------------------------------------*/
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(var(--pf-spacing-unit) * 4);
}

@media (max-width: 767px) { /* Mobile */
    .projects-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
}

@media (min-width: 768px) and (max-width: 1023px) { /* Tablette */
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 colonnes sur tablette */
    }
}

.project-card {
    background-color: var(--pf-color-white);
    border-radius: var(--pf-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.project-card-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.project-card-content {
    padding: calc(var(--pf-spacing-unit) * 3);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-card-category {
    font-size: 12px;
    font-weight: 700;
    color: var(--pf-color-primary);
    text-transform: uppercase;
    margin-bottom: var(--pf-spacing-unit);
}

.project-card-title {
    font-size: 20px;
    margin: 0 0 calc(var(--pf-spacing-unit) * 2) 0;
}

.project-card-excerpt {
    color: var(--pf-color-text-light);
    font-size: 15px;
    flex-grow: 1;
    margin-bottom: calc(var(--pf-spacing-unit) * 3);
}

.project-card-footer {
    margin-top: auto;
}

/* Section Témoignage */
.testimonial-section {
    background-color: var(--pf-color-background-soft);
    padding: calc(var(--pf-spacing-unit) * 8) 0;
}

.testimonial-carousel {
    position: relative; /* Nécessaire pour positionner les flèches */
    padding-bottom: calc(var(--pf-spacing-unit) * 6); /* Espace pour la pagination */
    min-height: 350px; /* Hauteur minimale pour le carrousel des témoignages */
    display: flex;
    align-items: center;
}

.testimonial-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--pf-color-white);
    padding: calc(var(--pf-spacing-unit) * 4);
    border-radius: var(--pf-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 800px; /* Limiter la largeur de la carte */
    margin: auto;
}

@media (min-width: 768px) {
    .testimonial-card {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: calc(var(--pf-spacing-unit) * 4);
    }
    .testimonial-card:nth-child(even) {
        flex-direction: row-reverse; /* Asymétrie */
    }
}

.testimonial-profile-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

@media (min-width: 768px) {
    .testimonial-profile-image {
        margin-bottom: 0;
    }
}

.testimonial-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-quote-content {
    flex-grow: 1;
}

.testimonial-quote {
    font-size: 20px;
    font-style: italic;
    color: var(--pf-color-text-dark);
    margin: 0 0 calc(var(--pf-spacing-unit) * 2);
    position: relative;
    padding-left: calc(var(--pf-spacing-unit) * 4);
}

.testimonial-quote::before {
    content: '“';
    font-size: 60px;
    color: var(--pf-color-primary);
    position: absolute;
    left: 0;
    top: -10px;
    line-height: 1;
}

.testimonial-author {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--pf-color-text-light);
}

.testimonial-role {
    font-size: 14px;
    color: var(--pf-color-text-light);
}

/* Styles des flèches de navigation Swiper pour les témoignages */
.testimonial-carousel .swiper-button-next,
.testimonial-carousel .swiper-button-prev {
    color: var(--pf-color-secondary);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    top: 50%; /* Positionner au centre verticalement */
    transform: translateY(-50%); /* Ajuster pour un centrage parfait */
}

.testimonial-carousel .swiper-button-next:hover,
.testimonial-carousel .swiper-button-prev:hover {
    background-color: var(--pf-color-secondary);
    color: var(--pf-color-white);
}

.testimonial-carousel .swiper-button-next::after,
.testimonial-carousel .swiper-button-prev::after {
    font-size: 18px;
}

/* Positionnement des flèches */
.testimonial-carousel .swiper-button-prev {
    left: 0; /* Positionner à gauche */
}

.testimonial-carousel .swiper-button-next {
    right: 0; /* Positionner à droite */
}

@media (max-width: 767px) {
    .testimonial-carousel .swiper-button-prev {
        left: 0;
    }
    .testimonial-carousel .swiper-button-next {
        right: 0;
    }
}

/* Pagination Swiper pour les témoignages */
.testimonial-carousel .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.testimonial-carousel .swiper-pagination-bullet {
    background: var(--pf-color-border);
    opacity: 1;
}

.testimonial-carousel .swiper-pagination-bullet-active {
    background: var(--pf-color-secondary);
}

/* Section Actualités (réutilise projects-grid) */
.latest-news-section .news-grid .post-card {
    background-color: var(--pf-color-white);
    border-radius: var(--pf-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.latest-news-section .news-grid .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.latest-news-section .post-card-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.latest-news-section .post-card-content {
    padding: calc(var(--pf-spacing-unit) * 3);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.latest-news-section .post-card-category {
    font-size: 12px;
    font-weight: 700;
    color: var(--pf-color-primary);
    text-transform: uppercase;
    margin-bottom: var(--pf-spacing-unit);
}

.latest-news-section .post-card-title {
    font-size: 20px;
    margin: 0 0 calc(var(--pf-spacing-unit) * 2) 0;
}

.latest-news-section .post-card-excerpt {
    color: var(--pf-color-text-light);
    font-size: 15px;
    flex-grow: 1;
    margin-bottom: calc(var(--pf-spacing-unit) * 3);
}

.latest-news-section .post-card-meta {
    margin-top: auto;
    font-size: 14px;
    color: var(--pf-color-text-light);
}

/* Section CTA Final */
.cta-final-section {
    background-color: var(--pf-color-secondary);
    color: var(--pf-color-white);
    padding: calc(var(--pf-spacing-unit) * 8) 0;
    text-align: center;
}

.cta-final-section h2 {
    color: var(--pf-color-white);
    font-size: 42px;
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.cta-final-section p {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto calc(var(--pf-spacing-unit) * 4) auto;
    color: rgba(255, 255, 255, 0.8);
}

.cta-final-section .cta-actions .btn {
    margin: 0 var(--pf-spacing-unit);
}

/*--------------------------------------------------------------
# Layout - Pages d'Archive et de Post Unique
--------------------------------------------------------------*/
.page-header {
    padding: calc(var(--pf-spacing-unit) * 6) 0;
    background-color: var(--pf-color-background-soft);
    text-align: center;
    margin-bottom: calc(var(--pf-spacing-unit) * 6);
}

.page-header .page-title {
    font-size: 48px;
    margin: 0;
}

.archive-description {
    font-size: 18px;
    color: var(--pf-color-text-light);
    margin-top: var(--pf-spacing-unit);
}

.project-header {
    text-align: left;
    padding-bottom: calc(var(--pf-spacing-unit) * 3);
    border-bottom: 1px solid var(--pf-color-border);
}

.project-meta {
    display: flex;
    gap: calc(var(--pf-spacing-unit) * 4);
    font-size: 14px;
    color: var(--pf-color-text-light);
    margin-top: var(--pf-spacing-unit);
}

.project-meta strong {
    color: var(--pf-color-text-dark);
}

.project-thumbnail-single {
    margin: calc(var(--pf-spacing-unit) * 4) 0;
}

.project-thumbnail-single img {
    width: 100%;
    height: auto;
    border-radius: var(--pf-border-radius);
}

.project-content-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--pf-spacing-unit) * 6);
    margin-top: calc(var(--pf-spacing-unit) * 4);
}

@media (min-width: 992px) {
    .project-content-layout {
        grid-template-columns: 2.5fr 1fr;
    }
}

.project-sidebar-widget {
    background-color: var(--pf-color-background-soft);
    padding: calc(var(--pf-spacing-unit) * 3);
    border-radius: var(--pf-border-radius);
    margin-bottom: calc(var(--pf-spacing-unit) * 3);
}

.project-sidebar-widget .widget-title {
    font-size: 18px;
    margin-top: 0;
}

.project-beneficiaries-count {
    font-size: 36px;
    font-weight: 700;
    color: var(--pf-color-primary);
}

.project-gallery {
    margin-top: calc(var(--pf-spacing-unit) * 6);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pf-spacing-unit);
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pf-border-radius);
    transition: transform 0.3s ease;
}

.gallery-grid a:hover img {
    transform: scale(1.05);
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog-layout-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--pf-spacing-unit) * 6);
}

@media (min-width: 992px) {
    .blog-layout-container {
        grid-template-columns: 2.5fr 1fr;
    }
}

.blog-post-summary {
    margin-bottom: calc(var(--pf-spacing-unit) * 6);
    border-bottom: 1px solid var(--pf-color-border);
    padding-bottom: calc(var(--pf-spacing-unit) * 3);
}

.blog-post-summary .entry-title a {
    text-decoration: none;
    color: var(--pf-color-text-dark);
}

.blog-post-summary .entry-title a:hover {
    color: var(--pf-color-primary);
}

.entry-meta {
    font-size: 14px;
    color: var(--pf-color-text-light);
    margin-bottom: var(--pf-spacing-unit);
}

.entry-meta a {
    color: var(--pf-color-text-light);
    text-decoration: none;
}

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

.post-thumbnail img {
    border-radius: var(--pf-border-radius);
    margin-bottom: var(--pf-spacing-unit) * 2;
}

.entry-content p {
    margin-bottom: 0;
}

.entry-footer {
    margin-top: var(--pf-spacing-unit) * 2;
    font-size: 14px;
}

/* Single Post */
.single-post .entry-header {
    margin-bottom: calc(var(--pf-spacing-unit) * 3);
}

.single-post .entry-content {
    margin-top: calc(var(--pf-spacing-unit) * 3);
}

/* Sidebar */
.widget {
    margin-bottom: calc(var(--pf-spacing-unit) * 4);
    background-color: var(--pf-color-background-soft);
    padding: calc(var(--pf-spacing-unit) * 3);
    border-radius: var(--pf-border-radius);
}

.widget-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: var(--pf-spacing-unit) * 2;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    margin-bottom: var(--pf-spacing-unit);
}

.widget ul li a {
    text-decoration: none;
    color: var(--pf-color-text-dark);
}

.widget ul li a:hover {
    color: var(--pf-color-primary);
}

/* Comments */
.comments-area {
    margin-top: calc(var(--pf-spacing-unit) * 6);
    border-top: 1px solid var(--pf-color-border);
    padding-top: calc(var(--pf-spacing-unit) * 4);
}

/*--------------------------------------------------------------
# Team Members
--------------------------------------------------------------*/
.team-category-filters {
    text-align: center;
    margin-bottom: calc(var(--pf-spacing-unit) * 4);
}

.team-category-filters a {
    margin: 0 calc(var(--pf-spacing-unit) * 1.5);
    text-decoration: none;
    color: var(--pf-color-text-light);
    font-weight: 500;
    padding: var(--pf-spacing-unit) calc(var(--pf-spacing-unit) * 2);
    border-radius: var(--pf-border-radius);
    transition: all 0.3s ease;
}

.team-category-filters a.active,
.team-category-filters a:hover {
    background-color: var(--pf-color-primary);
    color: #fff;
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: calc(var(--pf-spacing-unit) * 4);
}

.team-member-card {
    background-color: #fff;
    border-radius: var(--pf-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.team-member-card .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.team-member-card-photo img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.team-member-card-content {
    padding: calc(var(--pf-spacing-unit) * 2.5);
    text-align: center;
}

.team-member-name {
    margin: 0 0 calc(var(--pf-spacing-unit) * 0.5);
    font-size: 20px;
    color: var(--pf-color-text-dark);
}

.team-member-role {
    margin: 0;
    color: var(--pf-color-primary);
    font-size: 14px;
}

/* Single Team Member */
.team-member-single .team-member-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--pf-spacing-unit) * 4);
    margin-bottom: calc(var(--pf-spacing-unit) * 4);
    text-align: center;
}

@media (min-width: 768px) {
    .team-member-single .team-member-header {
        flex-direction: row;
        text-align: left;
    }
}

.team-member-single .team-member-photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

.team-member-single .entry-title {
    margin: 0;
}

.team-member-single .team-member-role {
    font-size: 22px;
    font-weight: 400;
    color: var(--pf-color-text-light);
    margin-top: var(--pf-spacing-unit);
}

.team-member-social-links {
    margin-top: var(--pf-spacing-unit) * 2;
}

.team-member-social-links a {
    text-decoration: none;
    color: var(--pf-color-text-light);
    font-size: 24px;
    margin: 0 var(--pf-spacing-unit);
    transition: color 0.3s ease;
}

.team-member-social-links a:hover {
    color: var(--pf-color-primary);
}

.related-projects-section {
    margin-top: calc(var(--pf-spacing-unit) * 6);
    padding-top: calc(var(--pf-spacing-unit) * 4);
    border-top: 1px solid var(--pf-color-border);
}

/*--------------------------------------------------------------
# Job Offers
--------------------------------------------------------------*/
.job-offers-list .job-offer-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--pf-spacing-unit) * 3) 0;
    border-bottom: 1px solid var(--pf-color-border);
}

.job-offer-summary:first-child {
    border-top: 1px solid var(--pf-color-border);
}

.job-offer-title {
    margin: 0 0 calc(var(--pf-spacing-unit) * 0.5);
    font-size: 22px;
}

.job-offer-title a {
    text-decoration: none;
    color: var(--pf-color-text-dark);
}

.job-offer-title a:hover {
    color: var(--pf-color-primary);
}

.job-offer-meta {
    font-size: 16px;
    color: var(--pf-color-text-light);
}

.job-offer-meta .meta-item:not(:last-child)::after {
    content: '•';
    margin: 0 10px;
}

/* Single Job Offer */
.job-offer-single .job-offer-meta {
    display: flex;
    gap: calc(var(--pf-spacing-unit) * 4);
    font-size: 16px;
    color: var(--pf-color-text-light);
    margin-top: var(--pf-spacing-unit);
}

.job-offer-content-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--pf-spacing-unit) * 6);
    margin-top: calc(var(--pf-spacing-unit) * 4);
}

@media (min-width: 992px) {
    .job-offer-content-layout {
        grid-template-columns: 2.5fr 1fr;
    }
}

.apply-widget {
    background-color: var(--pf-color-background-soft);
    padding: calc(var(--pf-spacing-unit) * 3);
    border-radius: var(--pf-border-radius);
}

/*--------------------------------------------------------------
# Partners
--------------------------------------------------------------*/
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: calc(var(--pf-spacing-unit) * 4);
    align-items: center;
}

.partner-logo-item {
    text-align: center;
}

.partner-logo-item a {
    display: block;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo-item a:hover {
    filter: grayscale(0);
    opacity: 1;
}

.partner-logo-item img {
    max-width: 100%;
    height: auto;
}

.partner-name {
    font-weight: 500;
    color: var(--pf-color-text-light);
}

/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
.locations-list .location-summary {
    display: flex;
    gap: calc(var(--pf-spacing-unit) * 4);
    align-items: center;
    padding: calc(var(--pf-spacing-unit) * 3) 0;
    border-bottom: 1px solid var(--pf-color-border);
}

.location-summary:first-child {
    border-top: 1px solid var(--pf-color-border);
}

.location-thumbnail a {
    display: block;
    width: 250px;
    height: 150px;
}

.location-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pf-border-radius);
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--pf-color-background-soft);
    border-radius: var(--pf-border-radius);
    /* Basic map icon */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cccccc"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
}

.location-title {
    margin: 0 0 var(--pf-spacing-unit);
}

.location-title a {
    text-decoration: none;
    color: var(--pf-color-text-dark);
}

.location-address {
    color: var(--pf-color-text-light);
    margin-bottom: var(--pf-spacing-unit) * 2;
}

/* Single Location */
.location-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--pf-spacing-unit) * 4);
    margin-top: calc(var(--pf-spacing-unit) * 4);
}

@media (min-width: 992px) {
    .location-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.acf-map {
    width: 100%;
    height: 400px;
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-border-radius);
}

/*--------------------------------------------------------------
# Contact Form 7 & Leaflet Map Styles
--------------------------------------------------------------*/

/* Formulaire de Contact */
.wpcf7-form p {
    margin-bottom: calc(var(--pf-spacing-unit) * 2);
}

.wpcf7-form label {
    display: block;
    font-family: var(--pf-font-family-body);
    font-weight: 500;
    color: var(--pf-color-text-dark);
    margin-bottom: calc(var(--pf-spacing-unit) * 1);
    font-size: 16px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: calc(var(--pf-spacing-unit) * 1.5);
    border-radius: var(--pf-border-radius);
    border: 1px solid var(--pf-color-border);
    color: var(--pf-color-text-dark);
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--pf-color-primary);
    box-shadow: 0 0 0 4px rgba(var(--pf-color-primary-rgb), 0.2); /* Utilisation d'une variable RGB si définie */
}

.wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    /* Applique les styles du bouton primaire directement */
    background-color: var(--pf-color-primary);
    color: var(--pf-color-white);
    display: inline-block;
    padding: calc(var(--pf-spacing-unit) * 1.5) calc(var(--pf-spacing-unit) * 4);
    border-radius: var(--pf-border-radius);
    font-family: var(--pf-font-family-title);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Garde la bordure transparente pour le primaire */
    width: auto; /* Ajuste la largeur */
    font-size: 16px; /* Ajuste la taille de la police */
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--pf-color-primary-hover);
    color: var(--pf-color-white);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Messages de validation et d'erreur */
.wpcf7-not-valid-tip {
    color: var(--pf-color-error);
    font-size: 14px;
    margin-top: calc(var(--pf-spacing-unit) * 0.5);
    display: block;
}

.wpcf7-response-output {
    margin-top: calc(var(--pf-spacing-unit) * 3);
    padding: calc(var(--pf-spacing-unit) * 2);
    border-radius: var(--pf-border-radius);
    font-size: 16px;
    font-weight: 500;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: rgba(var(--pf-color-success-rgb), 0.1);
    color: var(--pf-color-success);
    border: 1px solid var(--pf-color-success);
}

.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-validation-errors {
    background-color: rgba(var(--pf-color-error-rgb), 0.1);
    color: var(--pf-color-error);
    border: 1px solid var(--pf-color-error);
}

/* Styles pour la carte Leaflet */
#contact-map {
    height: 400px;
    width: 100%;
    border-radius: var(--pf-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Styles pour les popups Leaflet */
.leaflet-popup-content-wrapper {
    border-radius: var(--pf-border-radius);
    padding: calc(var(--pf-spacing-unit) * 2);
    font-family: var(--pf-font-family-body);
    font-size: 15px;
    line-height: 1.6;
}

.leaflet-popup-content h3 {
    font-family: var(--pf-font-family-title);
    font-size: 18px;
    font-weight: 700;
    color: var(--pf-color-secondary);
    margin: 0 0 calc(var(--pf-spacing-unit) * 1);
}

.leaflet-popup-content p {
    margin: 0;
    color: var(--pf-color-text-dark);
}

/*--------------------------------------------------------------
# Custom Scrollbar Styles
--------------------------------------------------------------*/
/* Pour Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Largeur de la barre de défilement */
}

::-webkit-scrollbar-track {
    background: var(--pf-color-background-soft); /* Couleur de fond de la piste */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--pf-color-primary); /* Couleur du "pouce" de la barre de défilement */
    border-radius: 10px;
    border: 2px solid var(--pf-color-background-soft); /* Bordure pour le pouce */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pf-color-primary-hover); /* Couleur au survol */
}

/* Pour Firefox */
html {
    scrollbar-width: thin; /* "auto" ou "thin" */
    scrollbar-color: var(--pf-color-primary) var(--pf-color-background-soft); /* thumb color track color */
}

/*--------------------------------------------------------------
# Galerie
--------------------------------------------------------------*/
.gallery-filters .filter-button {
    margin: 0 calc(var(--pf-spacing-unit) * 1);
    margin-bottom: calc(var(--pf-spacing-unit) * 2); /* Espace sous les boutons */
}

.gallery-filters .filter-button.active {
    background-color: var(--pf-color-primary);
    color: var(--pf-color-white);
    border-color: var(--pf-color-primary);
}

.gallery-item {
    background-color: var(--pf-color-white);
    border-radius: var(--pf-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 250px; /* Hauteur fixe pour les images de la grille */
    object-fit: cover;
}

.gallery-item .absolute {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
}

/* Styles pour le Swiper de la galerie (single-gallery.php) */
.gallery-swiper {
    position: relative;
    padding-bottom: calc(var(--pf-spacing-unit) * 6); /* Espace pour la pagination */
}

.gallery-swiper .swiper-slide img {
    max-height: 600px; /* Hauteur max pour les images du carrousel */
    width: auto;
    margin: auto;
}

.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
    color: var(--pf-color-secondary);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
}

.gallery-swiper .swiper-button-next:hover,
.gallery-swiper .swiper-button-prev:hover {
    background-color: var(--pf-color-secondary);
    color: var(--pf-color-white);
}

.gallery-swiper .swiper-button-next::after,
.gallery-swiper .swiper-button-prev::after {
    font-size: 18px;
}

.gallery-swiper .swiper-button-prev {
    left: 10px;
}

.gallery-swiper .swiper-button-next {
    right: 10px;
}

.gallery-swiper .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.gallery-swiper .swiper-pagination-bullet {
    background: var(--pf-color-border);
    opacity: 1;
}

.gallery-swiper .swiper-pagination-bullet-active {
    background: var(--pf-color-secondary);
}

/* ============================================================== */
/* == AJOUT - Styles pour les sous-menus interactifs (Desktop) == */
/* ============================================================== */

/* Cible le lien parent pour y ajouter la flèche via le Walker PHP */
.main-navigation .has-dropdown > a {
    /* display: flex; */
    align-items: center;
}

/* Style de l'icône de flèche SVG */
.main-navigation .dropdown-arrow {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    transition: transform 0.3s ease-in-out;
    transform-origin: center;
}

/* Rotation de la flèche au survol de l'élément parent sur Desktop */
@media (min-width: 1024px) {
    .main-navigation .has-dropdown:hover > a > .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* ==================================================================== */
/* == AJOUT - Logique d'affichage des sous-menus (Mobile vs Desktop) == */
/* ==================================================================== */

/* --- Pour MOBILE (max-width: 1023px) --- */
@media (max-width: 1023px) {
    /*
     * Les sous-menus sont toujours visibles par défaut
     * lorsqu'ils sont dans un menu mobile ouvert.
    */
    .main-navigation.toggled .sub-menu {
        position: static;       /* Annule le positionnement absolu du desktop. */
        display: block !important;  /* Force l'affichage, c'est la règle clé. */
        background: none;       /* Pas de fond coloré. */
        box-shadow: none;       /* Pas d'ombre. */
        border: none;           /* Pas de bordure. */
        min-width: auto;        /* Largeur automatique. */
        padding-left: 20px;     /* Indentation pour montrer la hiérarchie. */
        margin-top: 10px;
    }

    .main-navigation.toggled .sub-menu a {
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        padding: 8px 0;
    }

    /* La flèche n'est pas nécessaire sur mobile car tout est déplié. */
    .main-navigation.toggled .dropdown-arrow {
        display: none;
    }
}