/* ═══════════════════════════════════════════════════════════════════════════
   FONDATION CALIXTE MUNANA — refonte visuelle
   Système de design appliqué par-dessus le thème : couleurs maîtrisées,
   échelle typographique unique, rythme vertical régulier, animations sobres.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Couleurs de marque ──
       Le bleu d'origine (#1121F8) est conservé comme accent vif, mais les
       aplats de fond utilisent des bleus profonds : un aplat très saturé sur
       de grandes surfaces fatigue l'œil et écrase les photographies. */
    --fcm-rouge:        #D0121B;
    --fcm-rouge-fonce:  #A50E15;
    --fcm-rouge-clair:  #FCEBEC;

    --fcm-bleu:         #1121F8;
    --fcm-bleu-profond: #101C7A;
    --fcm-bleu-nuit:    #0A1244;
    --fcm-bleu-clair:   #EDEFFE;

    /* ── Neutres (légèrement bleutés, accordés à la marque) ── */
    --fcm-encre:        #0F141B;
    --fcm-texte:        #46505C;
    --fcm-texte-doux:   #6B7683;
    --fcm-bord:         #E2E6EC;
    --fcm-fond:         #F6F8FA;
    --fcm-surface:      #FFFFFF;

    /* ── Échelle typographique ── */
    --t-display: clamp(2.15rem, 1.35rem + 3.4vw, 3.6rem);
    --t-titre:   clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);
    --t-section: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
    --t-corps:   1.0625rem;
    --t-petit:   .9375rem;
    --t-menu:    .8125rem;

    /* ── Rythme ── */
    --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px;
    --e-5: 48px; --e-6: 64px; --e-7: 96px;

    --rayon:   14px;
    --rayon-s: 8px;
    --ombre:   0 1px 2px rgba(15,20,27,.04), 0 8px 24px rgba(15,20,27,.07);
    --ombre-f: 0 2px 6px rgba(15,20,27,.06), 0 18px 44px rgba(15,20,27,.12);
    --transi:  .28s cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════════════
   1. TYPOGRAPHIE — Montserrat sur l'ensemble du site
   ═══════════════════════════════════════════════════════════════ */

html body,
body :where(p, li, span, a, div, td, th, label, input, textarea, select,
            button, figcaption, blockquote, cite, time, small, strong, em) {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body :where(h1, h2, h3, h4, h5, h6),
.elementor-heading-title,
.entry-title, .page-title, .related-entry-title, .ct-module-title {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: -.018em;
    text-wrap: balance;
}

body { font-size: var(--t-corps); line-height: 1.65; color: var(--fcm-texte); }

/* Longueur de ligne confortable : au-delà de 75 caractères, l'œil peine
   à retrouver le début de la ligne suivante. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.elementor-widget-text-editor p,
.elementor-widget-text-editor,
.elementor-icon-box-description,
.entry-excerpt p,
.fcm-pied p {
    max-width: 68ch;
}
.elementor-widget-text-editor:not([class*="align-center"]) { margin-inline: 0; }

/* ═══════════════════════════════════════════════════════════════
   2. CONTRASTES — corrige les textes illisibles
   ═══════════════════════════════════════════════════════════════ */

/* Menu principal : le premier lien était blanc sur blanc.
   Attention : ces règles ne doivent pas atteindre le panneau mobile, dont le
   fond est sombre — d'où l'exclusion explicite ci-dessous. */
.ct-header .ct-menu-link:not(#offcanvas *):not(.ct-panel *),
.header-menu-1 .ct-menu-link:not(#offcanvas *),
nav[data-id] .ct-menu-link:not(#offcanvas *):not(.ct-panel *) {
    color: var(--fcm-encre) !important;
    font-weight: 600;
    font-size: var(--t-corps);
    letter-spacing: -.005em;
}
.ct-header .ct-menu-link:not(#offcanvas *):hover,
.ct-header .current-menu-item > .ct-menu-link:not(#offcanvas *),
.ct-header .current-menu-ancestor > .ct-menu-link:not(#offcanvas *) {
    color: var(--fcm-rouge) !important;
}

/* ── Panneau de navigation mobile (fond sombre) ──
   Règle de base : tout ce que contient le panneau est clair. Les exceptions
   (sous-menu, page courante) sont définies ensuite. */
#offcanvas,
.ct-panel {
    background: #12151A !important;
    color: #FFFFFF !important;
}
#offcanvas :is(a, span, li, p, div, button, strong, time),
.ct-panel :is(a, span, li, p, div, button, strong, time) {
    color: #FFFFFF !important;
}
#offcanvas .ct-menu-link,
#offcanvas .ct-menu-link span,
#offcanvas a,
#offcanvas .menu-item > a,
.ct-panel .ct-menu-link,
.ct-panel .ct-menu-link span,
.ct-panel a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 1.0625rem !important;
}
#offcanvas .sub-menu,
.ct-panel .sub-menu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 14px !important;
    border-left: 2px solid rgba(255, 255, 255, .16) !important;
    margin-left: 4px !important;
}
#offcanvas .sub-menu a,
#offcanvas .sub-menu a span,
.ct-panel .sub-menu a,
.ct-panel .sub-menu a span {
    color: rgba(255, 255, 255, .84) !important;
    font-weight: 500 !important;
    font-size: .96rem !important;
}
#offcanvas .sub-menu a:hover,
#offcanvas .sub-menu a:hover span,
.ct-panel .sub-menu a:hover {
    color: #FFFFFF !important;
    background: transparent !important;
}
/* Page courante : un rouge assez clair pour rester lisible sur fond noir */
#offcanvas .current-menu-item > .ct-menu-link,
#offcanvas .current-menu-item > a,
#offcanvas .current-menu-ancestor > .ct-menu-link,
.ct-panel .current-menu-item > a {
    color: #FF8A82 !important;
}
#offcanvas .ct-toggle-dropdown-mobile,
#offcanvas button,
.ct-panel button { color: #FFFFFF !important; }
#offcanvas .ct-panel-actions a,
#offcanvas .ct-button { color: #FFFFFF !important; }

/* Sous-menu déroulant : entrées blanches sur fond blanc */
.sub-menu,
.ct-header .sub-menu {
    background: var(--fcm-surface) !important;
    border: 1px solid var(--fcm-bord);
    border-radius: var(--rayon-s);
    box-shadow: var(--ombre-f);
    padding: var(--e-1) 0 !important;
    overflow: hidden;
}
.sub-menu .ct-menu-link,
.sub-menu a,
.sub-menu a span {
    color: var(--fcm-encre) !important;
    font-weight: 500 !important;
    font-size: var(--t-petit) !important;
}
.sub-menu li > a:hover,
.sub-menu li > a:hover span {
    background: var(--fcm-bleu-clair) !important;
    color: var(--fcm-bleu-profond) !important;
}

/* Descriptions sous les icônes : gris quasi blanc */
.elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-description {
    color: var(--fcm-texte) !important;
    font-size: var(--t-petit) !important;
    line-height: 1.6;
}

/* Étiquettes de catégorie et boutons hérités du thème */
.ct-term-1, .ct-term-2, .ct-term-3, .ct-term-4,
.entry-meta .meta-categories a,
.wp-element-button.ct-load-more {
    color: #FFFFFF !important;
    background: var(--fcm-rouge) !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}
.entry-meta .meta-categories a:hover,
.wp-element-button.ct-load-more:hover {
    background: var(--fcm-rouge-fonce) !important;
}

/* Métadonnées d'article : blanc translucide sur fond clair */
.hero-section .entry-meta,
.hero-section .entry-meta a,
.hero-section .entry-meta span,
.hero-section .entry-meta time,
.entry-header .entry-meta,
.entry-header .entry-meta a,
.entry-header .entry-meta time {
    color: var(--fcm-texte) !important;
}
.hero-section[data-type="type-2"] .entry-meta,
.hero-section[data-type="type-2"] .entry-meta a,
.hero-section[data-type="type-2"] .entry-meta time,
.hero-section[data-type="type-2"] .entry-meta span {
    color: rgba(255, 255, 255, .96) !important;
}
.hero-section[data-type="type-2"] .ct-breadcrumbs,
.hero-section[data-type="type-2"] .ct-breadcrumbs a,
.hero-section[data-type="type-2"] .ct-breadcrumbs span {
    color: rgba(255, 255, 255, .88) !important;
}

/* Dates des publications similaires sur fond sombre */
.ct-related-posts-items .entry-meta,
.ct-related-posts-items .entry-meta time,
.ct-related-posts .entry-meta time {
    color: rgba(255, 255, 255, .82) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. BANDEAU D'ACCUEIL — laisser respirer la photographie
   ═══════════════════════════════════════════════════════════════ */

/* Les voiles de couleur ne sont pas tous décoratifs : beaucoup portent du
   texte blanc et doivent rester opaques. On n'intervient donc que sur le
   bandeau d'accueil, traité plus bas.
   Là où du texte se superpose à une photo, on renforce au contraire la
   lisibilité par un dégradé sombre en pied d'image. */
.elementor-widget-image-box .elementor-image-box-img,
.elementor-widget-image-box figure { position: relative; }

.elementor-widget-image-box .elementor-image-box-content { position: relative; z-index: 1; }

/* Bandeau d'accueil : le voile couvrait la photographie à 85 %.
   On le remplace par un dégradé plus discret — les visages redeviennent
   visibles — et on assure la lisibilité du texte par une ombre portée
   plutôt que par un aplat. */
.elementor-element-464de44::before {
    opacity: 1 !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg,
            rgba(7, 12, 48, .62) 0%,
            rgba(9, 16, 62, .44) 38%,
            rgba(7, 12, 48, .72) 100%),
        linear-gradient(96deg,
            rgba(13, 24, 104, .38) 0%,
            rgba(17, 33, 248, .12) 100%) !important;
}
.elementor-element-464de44 .elementor-heading-title {
    text-shadow: 0 2px 26px rgba(5, 9, 36, .58), 0 1px 3px rgba(5, 9, 36, .34);
}
.elementor-element-464de44 p,
.elementor-element-464de44 .elementor-widget-text-editor {
    text-shadow: 0 1px 14px rgba(5, 9, 36, .62);
}

/* Le titre du bandeau gagne en assise */
.elementor-section .elementor-heading-title {
    line-height: 1.12;
}

/* ═══════════════════════════════════════════════════════════════
   4. BOUTONS — un seul langage sur tout le site
   ═══════════════════════════════════════════════════════════════ */

.elementor-button,
.ct-button, .ct-button-ghost,
.wp-element-button,
.elementor-button-link {
    border-radius: 999px !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--t-petit) !important;
    letter-spacing: .01em !important;
    padding: 14px 28px !important;
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: transform var(--transi), box-shadow var(--transi),
                background-color var(--transi) !important;
    box-shadow: 0 2px 10px rgba(208, 18, 27, .16);
}
.elementor-button:hover,
.ct-button:hover,
.wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(208, 18, 27, .26);
}
.elementor-button:active { transform: translateY(0); }

/* Bouton secondaire : contour, sur fond sombre comme sur fond clair */
.elementor-element .elementor-button.elementor-button-info,
.elementor-button[class*="secondaire"] {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .85) !important;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   5. CARTES DE SERVICES — alignement et relief
   ═══════════════════════════════════════════════════════════════ */

.elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.elementor-widget-icon-box .elementor-icon-box-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.elementor-widget-icon-box .elementor-icon-box-description { flex: 1; }

/* Les boutons des cartes se posent tous sur la même ligne.
   Elementor emploie ici ses nouveaux conteneurs (.e-con-full en colonne) :
   le bouton est poussé en bas de sa colonne, quelle que soit la longueur
   du texte au-dessus. */
.elementor-inner-column .elementor-widget-wrap.elementor-element-populated {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.elementor-inner-column .elementor-widget-button { margin-top: auto; }

/* Le bouton est poussé en bas de sa colonne. On n'impose pas de hauteur au
   conteneur : certaines colonnes portent une image de fond dont le
   dimensionnement en dépend. */
.e-con-full.e-flex > .elementor-widget-button,
.e-con-full > .elementor-widget-button:last-child {
    margin-top: auto !important;
}

.elementor-icon-box-title,
.elementor-icon-box-title a {
    font-size: var(--t-section) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--fcm-encre) !important;
}

/* Certaines cartes sont posées sur une photographie : leur texte doit rester
   blanc. Ces blocs sont repérés au chargement (voir fcm-refonte.js), car seul
   le style calculé permet de savoir si une image de fond est réellement
   présente — la seule présence d'un voile ne suffit pas. */
.fcm-sur-photo .elementor-icon-box-title,
.fcm-sur-photo .elementor-icon-box-title span,
.fcm-sur-photo .elementor-icon-box-description,
.fcm-sur-photo .elementor-heading-title,
.fcm-sur-photo .elementor-widget-text-editor {
    color: #FFFFFF !important;
    text-shadow: 0 1px 12px rgba(6, 10, 32, .55);
}

/* Voile uniforme : une carte grise au milieu de cartes bleues ne signifiait
   rien. Toutes reçoivent désormais le même traitement, assez dense pour que
   le texte se lise sans effort. */
.fcm-sur-photo > .elementor-background-overlay {
    background-color: transparent !important;
    background-image: linear-gradient(
        180deg,
        rgba(10, 18, 68, .52) 0%,
        rgba(12, 22, 96, .74) 55%,
        rgba(8, 14, 54, .90) 100%
    ) !important;
    opacity: 1 !important;
}
.elementor-widget-icon-box .elementor-icon {
    transition: transform var(--transi);
}
.elementor-widget-icon-box:hover .elementor-icon {
    transform: translateY(-4px) scale(1.06);
}

/* ═══════════════════════════════════════════════════════════════
   6. CARTES D'ACTIONS — voiles cohérents
   ═══════════════════════════════════════════════════════════════ */

/* Une carte grise au milieu de cartes bleues n'a aucune signification :
   toutes reçoivent le même traitement. */
.elementor-section .elementor-column .elementor-widget-wrap[class*="populated"]
    > .elementor-element.elementor-widget-image-box,
.elementor-widget-image-box .elementor-image-box-wrapper {
    border-radius: var(--rayon);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   7. SECTION ÉQUIPE — fiches reconstruites
   ═══════════════════════════════════════════════════════════════ */

.fcm-section-equipe {
    padding: clamp(56px, 7vw, 100px) 0;
    background: var(--fcm-fond);
}
.fcm-conteneur {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}
.fcm-section-equipe .fcm-titre-section h2 {
    font-size: var(--t-titre);
    color: var(--fcm-encre);
    margin: 0;
}
.fcm-section-equipe .fcm-titre-section p {
    max-width: 58ch;
    margin: 12px auto 0;
    color: var(--fcm-texte);
}
.fcm-note {
    text-align: center;
    margin: var(--e-4) 0 0;
    font-size: .875rem;
    color: var(--fcm-texte);
}

/* Chaque niveau de responsabilité occupe sa propre rangée */
.fcm-niveau { margin-bottom: var(--e-5); }
.fcm-niveau:last-of-type { margin-bottom: 0; }
.fcm-niveau__titre {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fcm-texte-doux);
    margin: 0 0 var(--e-3);
    display: flex;
    align-items: center;
    gap: var(--e-2);
    justify-content: center;
}
.fcm-niveau__titre::before,
.fcm-niveau__titre::after {
    content: "";
    height: 1px;
    width: clamp(24px, 8vw, 90px);
    background: var(--fcm-bord);
}

.fcm-equipe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 620px;
}
/* La direction est mise en avant */
.fcm-niveau--principal .fcm-equipe { max-width: 700px; }
.fcm-niveau--principal .fcm-membre { padding: var(--e-5) var(--e-3) var(--e-4); }
.fcm-niveau--principal .fcm-membre__portrait { width: 104px; height: 104px; }
.fcm-niveau--principal .fcm-membre__portrait svg { width: 52px; height: 52px; }
.fcm-niveau--principal .fcm-membre__nom { font-size: 1.15rem; }

@media (max-width: 560px) {
    .fcm-equipe { grid-template-columns: 1fr; max-width: 340px; }
    .fcm-niveau { margin-bottom: var(--e-4); }
}
.fcm-membre {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--fcm-surface);
    border: 1px solid var(--fcm-bord);
    border-radius: var(--rayon);
    padding: var(--e-4) var(--e-3) var(--e-3);
    transition: transform var(--transi), box-shadow var(--transi),
                border-color var(--transi);
}
.fcm-membre:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-f);
    border-color: transparent;
}
.fcm-membre__portrait {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--fcm-bleu-clair), #DDE2FD);
    color: var(--fcm-bleu-profond);
    margin-bottom: var(--e-2);
    flex: none;
}
.fcm-membre__portrait svg { width: 46px; height: 46px; }
.fcm-membre--direction .fcm-membre__portrait {
    background: linear-gradient(145deg, var(--fcm-rouge-clair), #FAD6D8);
    color: var(--fcm-rouge-fonce);
}
.fcm-membre--coordination .fcm-membre__portrait {
    background: linear-gradient(145deg, #EEF1FE, #DCE2FD);
    color: var(--fcm-bleu-profond);
}
.fcm-membre__nom {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fcm-encre);
    margin: 0 0 4px;
    line-height: 1.3;
}
.fcm-membre__role {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fcm-rouge);
    margin: 0;
}
.fcm-membre--conseil .fcm-membre__role,
.fcm-membre--coordination .fcm-membre__role { color: var(--fcm-bleu-profond); }

/* ═══════════════════════════════════════════════════════════════
   8. CHIFFRES CLÉS — le rouge sur bleu était illisible
   ═══════════════════════════════════════════════════════════════ */

.fcm-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); }
.fcm-chiffre__valeur,
.elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number-prefix,
.elementor-counter .elementor-counter-number {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.elementor-counter-title,
.fcm-chiffre__libelle {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 500 !important;
    font-size: var(--t-petit) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. ARTICLES ET LISTES
   ═══════════════════════════════════════════════════════════════ */

.entry-card {
    border-radius: var(--rayon);
    overflow: hidden;
    transition: transform var(--transi), box-shadow var(--transi);
}
.entry-card:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.entry-card .ct-media-container img { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.entry-card:hover .ct-media-container img { transform: scale(1.04); }

.entry-card .entry-title a { color: var(--fcm-encre); }
.entry-card .entry-title a:hover { color: var(--fcm-rouge); }

.ct-related-posts-items article > div {
    border-radius: var(--rayon);
    overflow: hidden;
    transition: transform var(--transi);
}
.ct-related-posts-items article:hover > div { transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════
   10. PIED DE PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Le thème dispose ses propres colonnes dans le pied de page ; on reprend
   la main sur le conteneur pour que nos quatre blocs s'alignent. */
footer [data-row="middle"] > .ct-container {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--e-6) 24px var(--e-5) !important;
    grid-template-columns: none !important;
}

/* Cinq blocs : présentation, navigation, domaines, lettre d'information
   et coordonnées. */
.fcm-pied {
    display: grid;
    grid-template-columns: 1.5fr .9fr 1.1fr 1.1fr 1.2fr;
    gap: var(--e-5) var(--e-4);
    align-items: start;
}
@media (max-width: 1180px) { .fcm-pied { grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; } }
@media (max-width: 1000px) { .fcm-pied { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .fcm-pied { grid-template-columns: 1fr; gap: var(--e-4); } }

/* Dans une colonne de pied de page, le champ et le bouton sont toujours
   empilés : côte à côte, le champ de saisie deviendrait inutilisable. */
.fcm-pied-lettre .fcm-lettre {
    flex-direction: column;
    align-items: stretch;
}
.fcm-pied-lettre .fcm-lettre input[type="email"] {
    min-width: 0;
    width: 100%;
}
.fcm-pied-lettre .fcm-lettre button { width: 100%; }
.fcm-pied h3 {
    font-size: .8125rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    margin: 0 0 var(--e-2) !important;
    padding-bottom: var(--e-1);
    border-bottom: 2px solid var(--fcm-rouge);
    display: inline-block;
}
.fcm-pied ul { list-style: none; margin: 0; padding: 0; }
.fcm-pied li { margin-bottom: 10px; }
.fcm-pied a, .fcm-pied p, .fcm-pied li {
    color: rgba(255, 255, 255, .82) !important;
    font-size: var(--t-petit);
    text-align: left !important;
}
.fcm-pied a { transition: color var(--transi); }
.fcm-pied a:hover { color: #FFFFFF !important; }
.fcm-contact-ligne {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.fcm-contact-ligne svg {
    width: 17px; height: 17px; flex: none; margin-top: 3px;
    color: var(--fcm-rouge);
}
.fcm-reseaux { display: flex; gap: 10px; margin-top: var(--e-2); }
.fcm-reseaux a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    transition: background var(--transi), transform var(--transi);
}
.fcm-reseaux a:hover { background: var(--fcm-rouge); transform: translateY(-2px); }
.fcm-reseaux svg { width: 18px; height: 18px; }

/* Le menu du pied de page était centré alors que le reste est aligné à gauche */
footer .ct-widget ul.menu,
footer .ct-widget .menu { text-align: left !important; }
footer .ct-widget .menu li { text-align: left !important; }

/* ═══════════════════════════════════════════════════════════════
   11. CIBLES TACTILES
   ═══════════════════════════════════════════════════════════════ */

.ct-header .ct-menu-link,
footer a,
.entry-meta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.fcm-pied li a { min-height: 40px; }

/* ═══════════════════════════════════════════════════════════════
   12. ANIMATIONS — révélation au défilement, sobre
   ═══════════════════════════════════════════════════════════════ */

.fcm-apparait {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.fcm-apparait.fcm-visible { opacity: 1; transform: none; }

/* Décalage entre éléments d'une même rangée : volontairement court, pour que
   rien ne paraisse manquant si la page est parcourue rapidement. */
.fcm-apparait[data-retard="1"] { transition-delay: .05s; }
.fcm-apparait[data-retard="2"] { transition-delay: .10s; }
.fcm-apparait[data-retard="3"] { transition-delay: .15s; }
.fcm-apparait[data-retard="4"] { transition-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
    .fcm-apparait,
    .fcm-apparait.fcm-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .entry-card:hover,
    .fcm-membre:hover,
    .elementor-button:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   13. RYTHME VERTICAL ET FINITIONS
   ═══════════════════════════════════════════════════════════════ */

/* Les colonnes sans texte ne sont pas toutes inutiles : certaines portent une
   photographie ou une vidéo de fond. On ne masque donc que celles qui n'ont
   ni contenu, ni image, ni vidéo. */
.elementor-column > .elementor-widget-wrap:empty:not([style*="background"]) {
    min-height: 0;
}
.elementor-column:has(> .elementor-widget-wrap:empty):not(:has(img)):not(:has(video)):not([style*="background"]) {
    display: none !important;
}

/* Titres de section : un seul traitement */
.fcm-titre-section {
    text-align: center;
    margin-bottom: var(--e-5);
}
.fcm-titre-section h2 { margin-bottom: var(--e-1); }
.fcm-titre-section::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--fcm-rouge);
    margin: var(--e-2) auto 0;
    border-radius: 2px;
}

@media (max-width: 767px) {
    :root { --t-corps: 1rem; }
    .fcm-membre { padding: var(--e-3) var(--e-2); }
    .fcm-membre__portrait { width: 74px; height: 74px; }
    .fcm-membre__portrait svg { width: 38px; height: 38px; }

    /* Les titres du thème sont dimensionnés en pixels : sur un téléphone,
       « Fondation » se coupait en plein milieu du mot. On repasse sur une
       taille proportionnelle à la largeur de l'écran. */
    .elementor-heading-title,
    h1.elementor-heading-title,
    .elementor-widget-heading h1,
    .elementor-widget-heading h2 {
        font-size: clamp(1.75rem, 7.6vw, 2.6rem) !important;
        line-height: 1.18 !important;
        word-break: normal !important;
        overflow-wrap: break-word;
        hyphens: none;
    }
    .hero-section .page-title,
    .entry-header .page-title {
        font-size: clamp(1.5rem, 6.4vw, 2.1rem) !important;
    }

    /* Boutons pleine largeur, mais jamais collés */
    .elementor-widget-button .elementor-button,
    .ct-button,
    .wp-element-button {
        width: 100% !important;
        justify-content: center;
    }
    .elementor-widget-button { width: 100%; }

    .fcm-pied h3 { margin-top: var(--e-2) !important; }

    /* ── Rythme vertical ──
       Empilées, les colonnes se touchaient sans respiration, tandis que
       certaines sections laissaient de grands vides. On impose un intervalle
       régulier et on plafonne les marges héritées de la vue bureau. */
    .elementor-container > .elementor-column + .elementor-column,
    .e-con-inner > .e-con + .e-con,
    .e-con-inner > .elementor-widget + .elementor-widget {
        margin-top: 30px;
    }

    /* Séparateur discret entre les cartes de services empilées */
    .elementor-inner-section .elementor-column + .elementor-column {
        border-top: 1px solid var(--fcm-bord);
        padding-top: 30px;
    }

    /* Les sections ne doivent ni s'écraser ni laisser de vide excessif */
    .elementor-top-section > .elementor-container {
        padding-block: clamp(34px, 8vw, 58px) !important;
    }
    .elementor-section.elementor-top-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .fcm-section-equipe { padding: clamp(44px, 10vw, 68px) 0; }

    /* Marges internes des blocs de texte : identiques partout */
    .elementor-widget-text-editor,
    .elementor-widget-heading { margin-bottom: 14px; }
}

/* Aucun titre ne doit jamais être coupé au milieu d'un mot */
.elementor-heading-title,
.page-title,
.entry-title { word-break: normal; overflow-wrap: break-word; }