/* ═══════════════════════════════════════════════════════════════════════════
   Fondation Calixte Munana — corrections d'affichage
   Cette feuille est chargée en dernier : elle corrige ce que les précédentes
   ont laissé passer, sans les modifier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. En-tête d'article : le titre passait en noir sur la photo ────────
   La photo de l'article sert de fond, recouverte d'un voile sombre. Le titre
   doit donc être clair. La refonte l'avait forcé en encre foncée, ce qui le
   rendait illisible. */

.hero-section .page-title,
.hero-section .entry-title,
.hero-section .entry-meta,
.hero-section .entry-meta a,
.hero-section .ct-meta-element,
.hero-section .ct-author-name,
.hero-section time,
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs a,
.hero-section .ct-breadcrumbs span {
    color: #FFFFFF !important;
    --theme-text-color: #FFFFFF;
    --theme-link-initial-color: #FFFFFF;
    --theme-heading-color: #FFFFFF;
    --theme-headings-color: #FFFFFF;
}

/* Une ombre légère garantit la lisibilité même sur une photo très claire */
.hero-section .page-title,
.hero-section .entry-title {
    text-shadow: 0 1px 14px rgba(10, 13, 16, .55);
}
.hero-section .entry-meta,
.hero-section .ct-breadcrumbs {
    text-shadow: 0 1px 8px rgba(10, 13, 16, .6);
}

/* Le voile doit rester assez dense sous le texte */
.hero-section > figure .ct-media-container::after,
.hero-section > figure::after {
    background-color: rgba(14, 18, 22, .68) !important;
}

/* Sans photo de fond, on revient à l'encre foncée sur fond clair */
.hero-section:not(:has(> figure)) .page-title,
.hero-section:not(:has(> figure)) .entry-title {
    color: var(--fcm-encre, #0F141B) !important;
    --theme-heading-color: var(--fcm-encre, #0F141B);
    text-shadow: none;
}
.hero-section:not(:has(> figure)) .entry-meta,
.hero-section:not(:has(> figure)) .entry-meta a,
.hero-section:not(:has(> figure)) .ct-breadcrumbs,
.hero-section:not(:has(> figure)) .ct-breadcrumbs a,
.hero-section:not(:has(> figure)) .ct-breadcrumbs span {
    color: var(--fcm-texte-doux, #5A6570) !important;
    --theme-text-color: var(--fcm-texte-doux, #5A6570);
    text-shadow: none;
}

/* ── 2. Menu du haut : sept entrées sur une ligne ────────────────────────
   L'espacement d'origine (60 px entre entrées) reléguait « Actualités » et
   « Contact » derrière un menu « Plus ». Avec la Galerie en plus, il faut
   resserrer davantage et laisser respirer le conteneur. */

@media (min-width: 1000px) {
    header .ct-container,
    #header .ct-container {
        --container-max-width: 1440px;
        max-width: min(1440px, 96vw);
    }
    #menu-menu-1 > li > a.ct-menu-link,
    #menu-menu-2 > li > a.ct-menu-link {
        padding-inline: 10px;
        font-size: 15.5px;
        white-space: nowrap;
    }
    /* Le repli « Plus » n'a plus lieu d'être : tout tient. */
    #menu-menu-1 > li.ct-hidden-item,
    #menu-menu-2 > li.ct-hidden-item { display: none; }
}

@media (min-width: 1000px) and (max-width: 1280px) {
    #menu-menu-1 > li > a.ct-menu-link,
    #menu-menu-2 > li > a.ct-menu-link {
        padding-inline: 7px;
        font-size: 14.5px;
    }
}

/* ── 3. Mobile : logo trop petit, boutons trop larges ─────────────────── */

@media (max-width: 767px) {
    /* Le logo descendait à 86 px de large : illisible pour une identité. */
    .site-logo-container img,
    .site-branding img,
    img.default-logo,
    img.custom-logo {
        max-height: 54px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Les boutons allaient d'un bord à l'autre de l'écran. On les ramène à
       une largeur lisible, centrés dans leur bloc. */
    .elementor-button,
    .elementor-button-link,
    .ct-button,
    .wp-block-button__link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 0;
        max-width: min(300px, 82vw) !important;
        padding-inline: 26px !important;
        text-align: center;
    }
    .elementor-widget-button .elementor-widget-container,
    .elementor-button-wrapper {
        display: flex;
        justify-content: center;
    }
    /* Deux boutons côte à côte restent côte à côte s'ils tiennent */
    .elementor-widget-button { text-align: center; }
}

/* ── 4. Galeries : grille simple, sans dépendance à un script ────────────
   Les galeries d'origine étaient positionnées en absolu par le constructeur
   de pages. Sans son script, les images se superposaient au pied de page. */

.fcm-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin: 26px 0 8px;
}
.fcm-galerie__element {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--fcm-fond, #F1F3F6);
    aspect-ratio: 3 / 2;
}
.fcm-galerie__element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.fcm-galerie__element:hover img,
.fcm-galerie__element:focus-visible img {
    transform: scale(1.045);
}

/* Deux colonnes sur téléphone : en une seule, seize photos donnent une page
   interminable. */
@media (max-width: 700px) {
    .fcm-galerie {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }
}

/* Neutralise ce qui reste de l'ancienne galerie, au cas où une page en
   contiendrait encore une. */
.elementor-widget-gallery .e-gallery-container {
    position: static !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.elementor-widget-gallery .e-gallery-item {
    position: static !important;
    width: auto !important;
    transform: none !important;
}

/* ── 5. Don : le paiement en ligne n'est pas encore ouvert ───────────── */

.fcm-don-indisponible {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--fcm-bord, #E2E6EC);
    border-radius: 12px;
    background: var(--fcm-fond, #F6F8FA);
    text-align: left;
}
.fcm-don-indisponible h2 {
    margin: 0 0 10px;
    font-size: 1.18rem;
    color: var(--fcm-encre, #0F141B);
}
.fcm-don-indisponible p {
    margin: 0 0 16px;
    color: var(--fcm-texte, #46505C);
}
.fcm-don-indisponible__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.fcm-don-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
}
.fcm-don-bouton--principal {
    background: var(--fcm-rouge, #D0121B);
    color: #fff;
}
.fcm-don-bouton--principal:hover { background: #A80E15; color: #fff; }
.fcm-don-bouton--second {
    background: #fff;
    color: var(--fcm-encre, #0F141B);
    border-color: var(--fcm-bord, #D5DBE2);
}
.fcm-don-bouton--second:hover { border-color: var(--fcm-encre, #0F141B); color: var(--fcm-encre, #0F141B); }

/* ── 6. Page Galerie ─────────────────────────────────────────────────────
   Les photographies de la Fondation, filtrables par année et par secteur. */

.fcm-galerie-entete {
    margin: 0 0 18px;
}
.fcm-galerie-entete h1 {
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fcm-encre, #0F141B);
    margin: 0;
}

.fcm-galerie-entete + .fcm-chapeau {
    font-size: 1.06rem;
    color: var(--fcm-texte, #46505C);
    max-width: 68ch;
    margin: 0 0 26px;
}

.fcm-filtres {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0 4px;
    border-top: 1px solid var(--fcm-bord, #E2E6EC);
}
.fcm-filtres__groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fcm-filtres__etiquette {
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--fcm-texte-doux, #6B7683);
    min-width: 74px;
}
.fcm-filtre {
    padding: 8px 15px;
    border: 1px solid var(--fcm-bord, #D9DEE5);
    border-radius: 999px;
    background: #fff;
    color: var(--fcm-encre, #0F141B);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s;
}
.fcm-filtre:hover { border-color: var(--fcm-encre, #0F141B); }
.fcm-filtre.actif {
    background: var(--fcm-rouge, #D0121B);
    border-color: var(--fcm-rouge, #D0121B);
    color: #fff;
}

.fcm-galerie__compte {
    margin: 20px 0 2px;
    font-size: .88rem;
    color: var(--fcm-texte-doux, #6B7683);
}
.fcm-galerie__compte strong { color: var(--fcm-encre, #0F141B); }

.fcm-galerie--page {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin-bottom: 40px;
}
.fcm-galerie__vide {
    padding: 40px 0;
    color: var(--fcm-texte-doux, #6B7683);
}

@media (max-width: 600px) {
    .fcm-filtres__etiquette { min-width: 100%; }
}

/* ── 7. Largeur des colonnes de l'en-tête ────────────────────────────────
   Le thème découpe l'en-tête en trois colonnes de largeur égale. Le groupe
   de menu de gauche réclamait 625 px et n'en recevait que 506 : le thème
   repliait alors les entrées en trop derrière un bouton « Plus ». On laisse
   les colonnes s'ajuster à leur contenu. */

@media (min-width: 1000px) {
    header .ct-container[class],
    #header .ct-container[class] {
        grid-template-columns: auto minmax(0, auto) auto !important;
        justify-content: space-between;
        column-gap: 18px;
    }
    header .ct-container > div,
    #header .ct-container > div {
        min-width: 0;
    }
    /* les deux groupes de menu prennent la place qu'il leur faut */
    header nav[class*="menu"],
    header .header-menu {
        flex: 0 0 auto;
    }
}

/* ── 8. Largeurs intermédiaires : un seul menu, celui du panneau ─────────
   Entre 1000 et 1300 px, le thème n'a pas la place d'afficher les sept
   entrées et en replie une partie derrière un bouton « Plus » — les
   visiteurs ne trouvaient plus « Actualités » ni « Contact ». À ces
   largeurs, le bouton d'ouverture du panneau est déjà présent : on lui
   laisse la navigation, entière et lisible. */

@media (min-width: 1000px) and (max-width: 1299px) {
    header nav[class*="header-menu"],
    header .header-menu-1,
    header .header-menu-2,
    #menu-menu-1,
    #menu-menu-2 {
        display: none !important;
    }
}

/* Au-delà, le panneau n'a plus lieu d'être : le menu complet est affiché. */
@media (min-width: 1300px) {
    header .ct-header-trigger,
    header [data-toggle-panel] {
        display: none !important;
    }
}

/* ── 9. En-tête : rapprocher les menus du logo ───────────────────────────
   Les trois colonnes étaient poussées vers les bords : 186 px séparaient la
   dernière entrée du logo, sans raison. Les groupes se rangent maintenant
   de part et d'autre du logo, le bouton de don restant à droite. */

@media (min-width: 1300px) {
    header .ct-container[class],
    #header .ct-container[class] {
        grid-template-columns: 1fr auto 1fr !important;
        column-gap: 26px;
        justify-content: initial;
    }
    /* groupe de gauche : collé au logo */
    header .ct-container > div:first-child {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
    }
    /* colonne du logo : sans marge superflue */
    header .ct-container > div:nth-child(2) {
        padding-inline: 0 !important;
    }
    /* groupe de droite : menu près du logo, bouton au bord */
    header .ct-container > div:last-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 26px;
    }
}

/* ── 10. Sous-menus : ne plus se dérober au passage de la souris ─────────
   Le sous-menu s'ouvrait 25 px sous son entrée. En descendant vers lui, le
   pointeur traversait ce vide, le survol se perdait et le menu se refermait.
   Une passerelle transparente relie désormais l'entrée à son sous-menu. */

#menu-menu-1 .sub-menu,
#menu-menu-2 .sub-menu,
.header-menu .sub-menu {
    position: absolute;
}
#menu-menu-1 .sub-menu::before,
#menu-menu-2 .sub-menu::before,
.header-menu .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
}

/* Le sous-menu reste ouvert tant que le pointeur est dessus */
#menu-menu-1 > li:hover > .sub-menu,
#menu-menu-1 > li:focus-within > .sub-menu,
#menu-menu-2 > li:hover > .sub-menu,
#menu-menu-2 > li:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

/* La zone du logo portait 70 px de marge de chaque côté, héritée de la
   maquette d'origine. C'est l'essentiel de l'écart qui restait. */
@media (min-width: 1300px) {
    header .site-branding,
    #header .site-branding {
        margin-inline: 20px !important;
    }
}

/* Le sous-menu rognait tout ce qui dépassait de son cadre : la passerelle
   n'existait donc pas à l'écran. On lui rend son débordement. */
#menu-menu-1 .sub-menu,
#menu-menu-2 .sub-menu,
.header-menu .sub-menu {
    overflow: visible !important;
}

/* Plutôt que de couvrir le vide, on le supprime : le sous-menu commence au
   bas de son entrée et repousse ses liens par une marge intérieure. Le
   pointeur n'a plus d'espace mort à traverser. */
#menu-menu-1 > li.menu-item-has-children > .sub-menu,
#menu-menu-2 > li.menu-item-has-children > .sub-menu,
.header-menu > li.menu-item-has-children > .sub-menu {
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
    background-clip: padding-box;
}
#menu-menu-1 > li.menu-item-has-children > .sub-menu::before,
#menu-menu-2 > li.menu-item-has-children > .sub-menu::before,
.header-menu > li.menu-item-has-children > .sub-menu::before {
    display: none;
}

/* ── 11. Page « Nos projets » ─────────────────────────────────────────────
   Chaque programme occupe un bloc entier : photographie d'un côté, texte de
   l'autre, alternés. Aucun filet coloré, aucune étiquette de mots-clés — la
   palette se limite au rouge et au bleu de la Fondation. */

.fcm-projets {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 88px);
    margin-top: clamp(36px, 4vw, 56px);
}

.fcm-projet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
}
/* Une rangée sur deux, la photo passe à droite. Les proportions sont
   inversées avec elle pour que le texte garde toujours la même largeur. */
.fcm-projet:nth-child(even) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.fcm-projet:nth-child(even) .fcm-projet__media { order: 2; }

.fcm-projet__media {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--fcm-fond, #F1F3F6);
    aspect-ratio: 4 / 3;
}
.fcm-projet__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fcm-projet__rang {
    display: inline-block;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fcm-rouge, #D0121B);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fcm-rouge, #D0121B);
}

.fcm-projet__titre {
    font-size: clamp(1.32rem, 1.05rem + 1vw, 1.75rem) !important;
    line-height: 1.24;
    font-weight: 700;
    color: var(--fcm-encre, #0F141B) !important;
    margin: 0 0 18px !important;
    text-wrap: balance;
}

.fcm-projet__corps p:not(.fcm-projet__rang) {
    margin: 0 0 14px;
    color: var(--fcm-texte, #46505C);
    font-size: 1rem;
    line-height: 1.72;
}
.fcm-projet__corps p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .fcm-projet {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* en une colonne, la photo passe toujours avant le texte */
    .fcm-projet:nth-child(even) .fcm-projet__media { order: 0; }
    .fcm-projet__media { aspect-ratio: 3 / 2; }
}

/* ── 12. Page « Nos actions » : les cinq domaines ────────────────────────
   Les encadrés d'origine affichaient leur titre en noir sur une photographie
   sombre, n'étaient pas cliquables et présentaient quatre domaines sur cinq.
   Chaque carte est maintenant un lien entier vers sa page. */

.fcm-domaines {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: clamp(30px, 4vw, 48px) 0;
}
/* Trois puis deux : cinq cartes réparties sans rangée orpheline. */
@media (min-width: 700px) {
    .fcm-domaines { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .fcm-domaines { grid-template-columns: repeat(6, 1fr); }
    .fcm-domaine { grid-column: span 2; }
    .fcm-domaine:nth-child(4),
    .fcm-domaine:nth-child(5) { grid-column: span 3; }
}

.fcm-domaine {
    position: relative;
    display: block;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--fcm-encre, #0F141B);
    isolation: isolate;
}
.fcm-domaine__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* Voile assez dense pour qu'un titre blanc reste lisible sur toute photo */
.fcm-domaine__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 13, 16, .38) 0%,
        rgba(10, 13, 16, .62) 46%,
        rgba(10, 13, 16, .84) 100%);
}
.fcm-domaine__corps {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 300px;
    padding: 26px 24px 24px;
}
.fcm-domaine__titre {
    display: block;
    margin-bottom: 10px;
    color: #FFFFFF;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.28;
    text-wrap: balance;
}
.fcm-domaine__texte {
    display: block;
    color: rgba(255, 255, 255, .9);
    font-size: .92rem;
    line-height: 1.6;
}
.fcm-domaine__lien {
    display: inline-block;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--fcm-rouge, #D0121B);
    color: #FFFFFF;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fcm-domaine:hover .fcm-domaine__image,
.fcm-domaine:focus-visible .fcm-domaine__image { transform: scale(1.05); }
.fcm-domaine:focus-visible { outline: 3px solid var(--fcm-rouge, #D0121B); outline-offset: 3px; }

@media (max-width: 700px) {
    .fcm-domaine,
    .fcm-domaine__corps { min-height: 250px; }
}

/* ── 13. Actualités du domaine, sur les pages d'action ───────────────────
   Chaque page présente les articles qui la concernent, et non les trois
   derniers du site. */

.fcm-lies-domaine {
    max-width: 1140px;
    margin: clamp(40px, 5vw, 68px) auto;
    padding-inline: clamp(16px, 5vw, 40px);
}
.fcm-lies-domaine__titre {
    margin: 0 0 24px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fcm-bord, #E2E6EC);
    font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem) !important;
    font-weight: 700;
    color: var(--fcm-encre, #0F141B) !important;
}
.fcm-lies-domaine__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.fcm-lie {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fcm-bord, #E2E6EC);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
}
.fcm-lie:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(15, 20, 27, .06), 0 16px 34px rgba(15, 20, 27, .1);
}
.fcm-lie__media {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--fcm-fond, #F1F3F6);
    overflow: hidden;
}
.fcm-lie__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fcm-lie__corps { padding: 16px 18px 20px; }
.fcm-lie__date {
    margin: 0 0 6px;
    font-size: .78rem;
    color: var(--fcm-texte-doux, #6B7683);
}
.fcm-lie__titre {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.4;
    font-weight: 700;
}
.fcm-lie__titre a {
    color: var(--fcm-encre, #0F141B);
    text-decoration: none;
}
.fcm-lie__titre a:hover { color: var(--fcm-rouge, #D0121B); }

/* ── 14. Accueil : le chapeau du bandeau était décalé ────────────────────
   Le bloc de texte sous le titre portait un décalage de 185 px vers la
   gauche, hérité de la maquette d'origine : la phrase n'était pas centrée
   par rapport à la page. */

.elementor-element-a3bf5c1 {
    transform: none !important;
}
.elementor-element-a3bf5c1 > .elementor-widget-container > p {
    margin-inline: auto;
}