/* ================================================================
   FACOM — FEUILLE DE STYLE PRINCIPALE
   Fondation Actions Communes
   Version 3.0

   Identité visuelle :
   - Vert  : couleur institutionnelle principale
   - Jaune : couleur d'accent
   - Rouge : couleur d'accent / alerte / engagement

   IMPORTANT :
   Aucun CSS spécifique ne doit être placé dans les templates HTML.
   Tous les styles du site sont centralisés dans ce fichier.
================================================================ */


/* ================================================================
   1. VARIABLES
================================================================ */

:root {

    /* ------------------------------------------------------------
       COULEURS FACOM
    ------------------------------------------------------------ */

    --facom-green: #2d6a4f;
    --facom-green-dark: #1b4332;
    --facom-green-darker: #143d2d;
    --facom-green-light: #52b788;
    --facom-green-lighter: #95d5b2;
    --facom-green-pale: #d8eddf;
    --facom-green-bg: #f1f8f4;

    --facom-yellow: #d4a017;
    --facom-yellow-dark: #b8860b;
    --facom-yellow-light: #f0d060;
    --facom-yellow-pale: #fff8dc;

    --facom-red: #c62828;
    --facom-red-dark: #9b1c1c;
    --facom-red-light: #ef5350;
    --facom-red-pale: #fde8e8;


    /* ------------------------------------------------------------
       COULEURS NEUTRES
    ------------------------------------------------------------ */

    --facom-white: #ffffff;
    --facom-black: #111111;

    --facom-gray-50: #fafafa;
    --facom-gray-100: #f5f5f5;
    --facom-gray-200: #eeeeee;
    --facom-gray-300: #dee2e6;
    --facom-gray-400: #ced4da;
    --facom-gray-500: #adb5bd;
    --facom-gray-600: #6c757d;
    --facom-gray-700: #495057;
    --facom-gray-800: #343a40;
    --facom-gray-900: #212529;

    --facom-dark: #17221c;


    /* ------------------------------------------------------------
       TEXTE
    ------------------------------------------------------------ */

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;

    --text-light: rgba(255, 255, 255, 0.9);
    --text-light-muted: rgba(255, 255, 255, 0.7);


    /* ------------------------------------------------------------
       OMBRES
    ------------------------------------------------------------ */

    --shadow-xs:
        0 1px 3px rgba(0, 0, 0, 0.06);

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.08);

    --shadow-md:
        0 5px 20px rgba(0, 0, 0, 0.10);

    --shadow-lg:
        0 10px 35px rgba(0, 0, 0, 0.14);

    --shadow-xl:
        0 20px 60px rgba(0, 0, 0, 0.18);


    /* ------------------------------------------------------------
       RAYONS
    ------------------------------------------------------------ */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;


    /* ------------------------------------------------------------
       TRANSITIONS
    ------------------------------------------------------------ */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* ------------------------------------------------------------
       TYPOGRAPHIE
    ------------------------------------------------------------ */

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-heading:
        "Montserrat",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* ------------------------------------------------------------
       DIMENSIONS
    ------------------------------------------------------------ */

    --container-max-width: 1320px;

    --section-padding:
        clamp(3rem, 6vw, 6rem);

    --container-padding:
        clamp(1rem, 3vw, 2rem);


    /* ------------------------------------------------------------
       TAILLES TYPOGRAPHIQUES
    ------------------------------------------------------------ */

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.5rem;
    --fs-5xl: 3rem;
    --fs-6xl: 4rem;

}


/* ================================================================
   2. RESET
================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;
    padding: 0;

    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: 1.7;

    color: var(--text-primary);
    background: var(--facom-white);

    overflow-x: hidden;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;
    max-width: 100%;
    height: auto;
}


a {
    color: var(--facom-green);
    text-decoration: none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


a:hover {
    color: var(--facom-green-dark);
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ================================================================
   3. TYPOGRAPHIE
================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;

    color: var(--text-primary);
}


h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}


h2 {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
}


h3 {
    font-size: clamp(1.35rem, 3vw, 2rem);
}


h4 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}


p {
    margin-top: 0;
    margin-bottom: 1rem;
}


.text-green {
    color: var(--facom-green) !important;
}


.text-yellow {
    color: var(--facom-yellow) !important;
}


.text-red {
    color: var(--facom-red) !important;
}


.text-white {
    color: var(--facom-white) !important;
}


.text-muted {
    color: var(--text-muted) !important;
}


.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}


.text-white-50 {
    color: rgba(255, 255, 255, 0.50) !important;
}


.lead {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
}


/* ================================================================
   4. CONTENEUR
================================================================ */

.container {
    width: 100%;
    max-width: var(--container-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}


section {
    position: relative;
}


/* ================================================================
   5. TOPBAR
================================================================ */

.topbar {
    position: relative;

    background: var(--facom-green-dark);
    color: var(--facom-white);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    font-size: var(--fs-sm);
}


.topbar-content {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}


.topbar-contact,
.topbar-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}


.topbar a {
    color: rgba(255, 255, 255, 0.85);

    display: inline-flex;
    align-items: center;

    gap: 0.4rem;
}


.topbar a:hover {
    color: var(--facom-yellow-light);
}


.topbar i {
    color: var(--facom-yellow);
}


/* ================================================================
   6. HEADER INSTITUTIONNEL
================================================================ */

.site-header {
    position: relative;

    background: var(--facom-white);

    border-bottom: 1px solid var(--facom-gray-200);

    z-index: 100;
}


.header-main {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}


.site-brand {
    display: flex;
    align-items: center;

    gap: 1rem;

    min-width: 0;

    color: var(--facom-green-dark);
}


.site-brand:hover {
    color: var(--facom-green);
}


.site-logo {
    width: auto;
    height: 72px;

    object-fit: contain;

    flex-shrink: 0;
}


.brand-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.brand-name {
    font-family: var(--font-heading);

    font-size: clamp(1.35rem, 3vw, 2rem);

    font-weight: 800;

    line-height: 1.1;

    color: var(--facom-green-dark);

    white-space: nowrap;
}


.brand-slogan {
    margin-top: 0.3rem;

    font-size: var(--fs-sm);

    color: var(--facom-gray-600);

    line-height: 1.3;
}


.header-information {
    display: flex;
    align-items: center;

    gap: 2rem;
}


.header-info-item {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}


.header-info-item > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: var(--facom-green-pale);

    color: var(--facom-green);

    font-size: 1rem;
}


.header-info-item div {
    display: flex;
    flex-direction: column;
}


.header-info-item span {
    font-size: var(--fs-xs);

    color: var(--facom-gray-600);

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.header-info-item strong {
    font-size: var(--fs-sm);

    font-weight: 600;

    color: var(--facom-gray-800);
}


/* ================================================================
   7. NAVIGATION PRINCIPALE
================================================================ */

.main-navigation {
    position: relative;
    z-index: 999;

    background: var(--facom-green);

    border-bottom: 4px solid var(--facom-yellow);

    box-shadow: var(--shadow-sm);
}


.navigation-wrapper {
    min-height: 62px;

    display: flex;
    align-items: center;
}


.navigation-menu {
    flex: 1;
}


.main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.1rem;
}


.menu-item {
    position: relative;
}


.menu-item > a {
    min-height: 62px;

    display: flex;
    align-items: center;

    padding: 0 0.85rem;

    color: rgba(255, 255, 255, 0.92);

    font-size: 0.9rem;
    font-weight: 600;

    white-space: nowrap;
}


.menu-item > a:hover,
.menu-item > a.active {
    color: var(--facom-white);

    background: rgba(255, 255, 255, 0.10);
}


.menu-item > a.active {
    box-shadow: inset 0 -4px 0 var(--facom-yellow);
}


.menu-item > a > i {
    margin-right: 0.4rem;
}


.menu-arrow {
    margin-left: 0.45rem;

    font-size: 0.65rem;

    transition:
        transform var(--transition-normal);
}


.menu-item:hover .menu-arrow {
    transform: rotate(180deg);
}


/* ================================================================
   8. MENU DÉROULANT
================================================================ */

.dropdown-menu {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 240px;

    padding: 0.6rem;

    margin: 0;

    background: var(--facom-white);

    border: 1px solid var(--facom-gray-200);
    border-top: 4px solid var(--facom-yellow);

    border-radius:
        0 0
        var(--radius-sm)
        var(--radius-sm);

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);

    z-index: 1000;
}


.menu-item:hover > .dropdown-menu,
.menu-item:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.dropdown-menu li {
    width: 100%;
}


.dropdown-menu a {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    width: 100%;

    padding: 0.7rem 0.85rem;

    border-radius: var(--radius-xs);

    color: var(--facom-gray-800);

    font-size: var(--fs-sm);
    font-weight: 500;
}


.dropdown-menu a i {
    width: 20px;

    color: var(--facom-green);

    text-align: center;
}


.dropdown-menu a:hover {
    background: var(--facom-green-bg);

    color: var(--facom-green-dark);
}


.dropdown-menu a:hover i {
    color: var(--facom-yellow-dark);
}


/* ================================================================
   9. BOUTON DON
================================================================ */

.menu-donate {
    margin-left: auto;
}


.menu-donate > a {
    margin-left: 0.5rem;

    min-height: auto;

    padding:
        0.65rem
        1.15rem;

    border-radius: var(--radius-pill);

    background: var(--facom-yellow);

    color: var(--facom-dark) !important;

    font-weight: 800;

    box-shadow: var(--shadow-sm);
}


.menu-donate > a:hover {
    background: var(--facom-yellow-light);

    color: var(--facom-dark) !important;

    transform: translateY(-1px);
}


.menu-donate > a i {
    color: var(--facom-red);
}


/* ================================================================
   10. RECHERCHE
================================================================ */

.navigation-search {
    width: 44px;
    height: 44px;

    margin-left: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--facom-white);

    border-radius: 50%;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}


.navigation-search:hover {
    background: rgba(255, 255, 255, 0.12);

    color: var(--facom-yellow-light);
}


/* ================================================================
   11. MENU MOBILE
================================================================ */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    margin-right: 0.75rem;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: var(--radius-sm);

    background: transparent;

    color: var(--facom-white);

    font-size: 1.15rem;
}


.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.12);

    color: var(--facom-yellow-light);
}


/* ================================================================
   12. BOUTONS GÉNÉRAUX
================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    border-radius: var(--radius-sm);

    font-weight: 700;

    padding:
        0.7rem
        1.4rem;

    border: 2px solid transparent;

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.btn:hover {
    transform: translateY(-2px);
}


.btn-green {
    background: var(--facom-green);
    border-color: var(--facom-green);

    color: var(--facom-white);
}


.btn-green:hover {
    background: var(--facom-green-dark);
    border-color: var(--facom-green-dark);

    color: var(--facom-white);

    box-shadow: var(--shadow-md);
}


.btn-yellow {
    background: var(--facom-yellow);
    border-color: var(--facom-yellow);

    color: var(--facom-dark);
}


.btn-yellow:hover {
    background: var(--facom-yellow-light);
    border-color: var(--facom-yellow-light);

    color: var(--facom-dark);

    box-shadow: var(--shadow-md);
}


.btn-red {
    background: var(--facom-red);
    border-color: var(--facom-red);

    color: var(--facom-white);
}


.btn-red:hover {
    background: var(--facom-red-dark);
    border-color: var(--facom-red-dark);

    color: var(--facom-white);

    box-shadow: var(--shadow-md);
}


.btn-outline-green {
    background: transparent;

    border-color: var(--facom-green);

    color: var(--facom-green);
}


.btn-outline-green:hover {
    background: var(--facom-green);

    color: var(--facom-white);
}


.btn-outline-light {
    background: transparent;

    border-color: rgba(255, 255, 255, 0.8);

    color: var(--facom-white);
}


.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);

    border-color: var(--facom-white);

    color: var(--facom-white);
}


.btn-lg {
    padding:
        0.85rem
        1.8rem;

    font-size: var(--fs-lg);
}


.btn-sm {
    padding:
        0.45rem
        0.9rem;

    font-size: var(--fs-sm);
}


/* ================================================================
   13. HERO
================================================================ */

.hero-section {
    position: relative;

    width: 100%;

    height: clamp(460px, 72vh, 760px);

    min-height: 460px;

    overflow: hidden;
}


#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
    height: 100%;
}


.slide-background {
    position: absolute;

    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1);

    transition:
        transform 8s ease;

    will-change: transform;
}


.carousel-item.active .slide-background {
    transform: scale(1.04);
}


.slide-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.42) 45%,
            rgba(0, 0, 0, 0.15) 100%
        );
}


#heroCarousel .carousel-caption {
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    transform: translateY(-50%);

    width: 100%;

    margin: 0;

    padding:
        2rem
        var(--container-padding);

    text-align: left;

    z-index: 10;
}


#heroCarousel .carousel-caption > * {
    max-width: 850px;
}


#heroCarousel .carousel-caption h1 {
    margin-bottom: 1.2rem;

    font-size: clamp(2rem, 5vw, 4rem);

    font-family: var(--font-heading);

    font-weight: 800;

    line-height: 1.12;

    color: var(--facom-white);

    text-shadow:
        0 3px 20px
        rgba(0, 0, 0, 0.5);
}


#heroCarousel .carousel-caption .lead {
    max-width: 750px;

    margin-bottom: 1.8rem;

    color: rgba(255, 255, 255, 0.94);

    text-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.5);
}


#heroCarousel .carousel-caption .d-flex {
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;
}


#heroCarousel .carousel-indicators {
    bottom: 22px;

    z-index: 20;
}


#heroCarousel .carousel-indicators button {
    width: 32px;
    height: 4px;

    margin: 0 4px;

    border: 0;

    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.5);

    opacity: 1;
}


#heroCarousel .carousel-indicators button.active {
    background: var(--facom-yellow);
}


#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 52px;
    height: 52px;

    top: 50%;

    transform: translateY(-50%);

    margin:
        0 1rem;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.25);

    opacity: 0;

    transition:
        opacity var(--transition-normal),
        background-color var(--transition-normal);
}


.hero-section:hover
#heroCarousel .carousel-control-prev,
.hero-section:hover
#heroCarousel .carousel-control-next {
    opacity: 1;
}


#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover {
    background: var(--facom-green);
}


/* ================================================================
   14. EN-TÊTE DE PAGE
================================================================ */

.page-header {
    position: relative;

    padding:
        clamp(3rem, 6vw, 5rem)
        0;

    background:
        linear-gradient(
            135deg,
            var(--facom-green-dark),
            var(--facom-green)
        );

    color: var(--facom-white);

    overflow: hidden;
}


.page-header::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -150px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);
}


.page-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--facom-green) 0 55%,
            var(--facom-yellow) 55% 78%,
            var(--facom-red) 78% 100%
        );
}


.page-header h1 {
    position: relative;

    margin-bottom: 0.75rem;

    color: var(--facom-white);

    font-size: clamp(2rem, 5vw, 3.2rem);

    z-index: 2;
}


.page-header .lead {
    position: relative;

    margin-bottom: 0;

    max-width: 850px;

    color: rgba(255, 255, 255, 0.88);

    z-index: 2;
}


/* ================================================================
   15. FIL D'ARIANE
================================================================ */

.breadcrumb-section {
    background: var(--facom-gray-50);

    border-bottom: 1px solid var(--facom-gray-200);
}


.breadcrumb {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.4rem;

    padding:
        0.9rem
        0;

    margin: 0;

    font-size: var(--fs-sm);
}


.breadcrumb a {
    color: var(--facom-green);
}


.breadcrumb a:hover {
    color: var(--facom-green-dark);
}


/* ================================================================
   16. SECTIONS
================================================================ */

.section-padding {
    padding:
        var(--section-padding)
        0;
}


.section-light {
    background: var(--facom-gray-50);
}


.section-green {
    background: var(--facom-green);

    color: var(--facom-white);
}


.section-dark {
    background: var(--facom-dark);

    color: var(--facom-white);
}


.section-title {
    margin-bottom: 3rem;

    text-align: center;
}


.section-title .eyebrow {
    display: inline-block;

    margin-bottom: 0.6rem;

    color: var(--facom-green);

    font-size: var(--fs-sm);

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}


.section-title h2 {
    margin-bottom: 0.8rem;
}


.section-title p {
    max-width: 760px;

    margin:
        0
        auto;

    color: var(--text-muted);
}


/* ================================================================
   17. CARTES
================================================================ */

.card {
    border: 1px solid var(--facom-gray-200);

    border-radius: var(--radius-md);

    background: var(--facom-white);

    box-shadow: var(--shadow-xs);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.card:hover {
    transform: translateY(-5px);

    border-color: rgba(45, 106, 79, 0.18);

    box-shadow: var(--shadow-lg);
}


.card-img-top {
    width: 100%;

    height: 230px;

    object-fit: cover;
}


.card-body {
    padding: 1.5rem;
}


.card-title {
    margin-bottom: 0.6rem;

    color: var(--facom-green-dark);

    font-size: 1.2rem;

    font-weight: 700;
}


.card-text {
    color: var(--text-secondary);

    line-height: 1.7;
}


/* ================================================================
   18. MISSIONS
================================================================ */

.mission-card {
    position: relative;

    height: 100%;

    padding: 2rem 1.5rem;

    text-align: center;

    background: var(--facom-white);

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-xs);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.mission-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--facom-green),
            var(--facom-yellow)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform var(--transition-normal);
}


.mission-card:hover {
    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);
}


.mission-card:hover::before {
    transform: scaleX(1);
}


.mission-icon {
    width: 72px;
    height: 72px;

    margin:
        0
        auto
        1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--facom-green-pale);

    color: var(--facom-green);

    font-size: 1.8rem;

    transition:
        transform var(--transition-normal),
        background-color var(--transition-normal);
}


.mission-card:hover .mission-icon {
    transform: scale(1.08);

    background: var(--facom-yellow-pale);

    color: var(--facom-yellow-dark);
}


.mission-card h4 {
    color: var(--facom-green-dark);
}


.mission-card p {
    color: var(--text-muted);
}


/* ================================================================
   19. PROJETS
================================================================ */

.project-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    background: var(--facom-white);

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-xs);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.project-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);
}


.project-image {
    position: relative;

    overflow: hidden;
}


.project-image img {
    width: 100%;
    height: 240px;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


.project-card:hover .project-image img {
    transform: scale(1.04);
}


.project-content {
    flex: 1;

    padding: 1.5rem;
}


.project-status {
    display: inline-flex;

    padding:
        0.35rem
        0.7rem;

    margin-bottom: 0.8rem;

    border-radius: var(--radius-pill);

    background: var(--facom-green-pale);

    color: var(--facom-green-dark);

    font-size: var(--fs-xs);

    font-weight: 700;
}


.project-status.ongoing {
    background: var(--facom-yellow-pale);

    color: var(--facom-yellow-dark);
}


.project-status.completed {
    background: var(--facom-green-pale);

    color: var(--facom-green-dark);
}


.project-status.suspended {
    background: var(--facom-red-pale);

    color: var(--facom-red-dark);
}


/* ================================================================
   20. BLOG / ACTUALITÉS
================================================================ */

.blog-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    background: var(--facom-white);

    box-shadow: var(--shadow-xs);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.blog-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);
}


.blog-card-image {
    position: relative;

    overflow: hidden;
}


.blog-card-image img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}


.blog-category {
    display: inline-flex;

    padding:
        0.3rem
        0.65rem;

    border-radius: var(--radius-pill);

    background: var(--facom-green);

    color: var(--facom-white);

    font-size: var(--fs-xs);

    font-weight: 700;
}


.blog-date {
    color: var(--text-muted);

    font-size: var(--fs-sm);
}


.blog-content {
    color: var(--text-primary);

    font-size: var(--fs-base);

    line-height: 1.9;
}


.blog-content h2,
.blog-content h3,
.blog-content h4 {
    margin-top: 2rem;

    color: var(--facom-green-dark);
}


.blog-content img {
    max-width: 100%;

    height: auto;

    margin:
        1.5rem
        auto;

    border-radius: var(--radius-sm);
}


.blog-content blockquote {
    margin:
        2rem
        0;

    padding:
        1.2rem
        1.5rem;

    border-left:
        4px solid
        var(--facom-yellow);

    background: var(--facom-yellow-pale);

    color: var(--text-secondary);

    font-style: italic;
}


.blog-content ul,
.blog-content ol {
    margin-bottom: 1.25rem;

    padding-left: 1.5rem;

    list-style: revert;
}


/* ================================================================
   21. ÉVÉNEMENTS
================================================================ */

.event-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    overflow: hidden;

    background: var(--facom-white);

    box-shadow: var(--shadow-xs);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.event-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);
}


.event-image img {
    width: 100%;
    height: 220px;

    object-fit: cover;
}


.event-date {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    color: var(--facom-red);

    font-size: var(--fs-sm);

    font-weight: 700;
}


.event-location {
    color: var(--text-muted);

    font-size: var(--fs-sm);
}


/* ================================================================
   22. GALERIE
================================================================ */

.gallery-item {
    position: relative;

    overflow: hidden;

    border-radius: var(--radius-md);

    background: var(--facom-gray-100);

    box-shadow: var(--shadow-sm);
}


.gallery-item img {
    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


.gallery-item:hover img {
    transform: scale(1.06);
}


.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 1.2rem;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0, 0, 0, 0.75)
        );

    opacity: 0;

    transition:
        opacity var(--transition-normal);
}


.gallery-item:hover .gallery-overlay {
    opacity: 1;
}


.gallery-overlay h3,
.gallery-overlay p {
    color: var(--facom-white);

    margin: 0;
}


/* ================================================================
   23. FAQ
================================================================ */

.faq-item {
    margin-bottom: 0.75rem;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-sm);

    background: var(--facom-white);

    overflow: hidden;
}


.faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.1rem 1.25rem;

    border: 0;

    background: transparent;

    color: var(--facom-green-dark);

    text-align: left;

    font-weight: 700;
}


.faq-question:hover {
    background: var(--facom-green-bg);
}


.faq-answer {
    padding:
        0
        1.25rem
        1.25rem;

    color: var(--text-secondary);
}


/* ================================================================
   24. FORMULAIRES
================================================================ */

.form-label {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--facom-gray-800);

    font-weight: 600;
}


.form-control,
.form-select {
    width: 100%;

    min-height: 46px;

    padding:
        0.65rem
        0.9rem;

    border:
        2px solid
        var(--facom-gray-300);

    border-radius: var(--radius-sm);

    background: var(--facom-white);

    color: var(--text-primary);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.form-control:focus,
.form-select:focus {
    border-color: var(--facom-green);

    outline: none;

    box-shadow:
        0 0 0 0.2rem
        rgba(45, 106, 79, 0.15);
}


.form-control::placeholder {
    color: var(--facom-gray-500);
}


textarea.form-control {
    min-height: 130px;

    resize: vertical;
}


.form-text {
    color: var(--text-muted);

    font-size: var(--fs-sm);
}


.invalid-feedback {
    display: block;

    margin-top: 0.35rem;

    color: var(--facom-red);

    font-size: var(--fs-sm);
}


.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--facom-red);
}


/* ================================================================
   25. DOCUMENTS
================================================================ */

.document-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 1.5rem;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    background: var(--facom-white);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.document-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}


.document-icon {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: var(--radius-sm);

    background: var(--facom-red-pale);

    color: var(--facom-red);

    font-size: 1.5rem;
}


/* ================================================================
   26. PARTENAIRES
================================================================ */

.partner-card {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 1.5rem;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    background: var(--facom-white);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.partner-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}


.partner-card img {
    max-width: 160px;
    max-height: 90px;

    object-fit: contain;
}


/* ================================================================
   27. ÉQUIPE
================================================================ */

.team-card {
    height: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--facom-gray-200);

    border-radius: var(--radius-md);

    background: var(--facom-white);

    box-shadow: var(--shadow-xs);

    text-align: center;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.team-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);
}


.team-card img {
    width: 100%;
    height: 280px;

    object-fit: cover;
}


.team-card-body {
    padding: 1.25rem;
}


.team-card .position {
    color: var(--facom-green);

    font-size: var(--fs-sm);

    font-weight: 700;
}


/* ================================================================
   28. NEWSLETTER
================================================================ */

.newsletter-box {
    padding: 2rem;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--facom-green-dark),
            var(--facom-green)
        );

    color: var(--facom-white);

    box-shadow: var(--shadow-lg);
}


.newsletter-box h2,
.newsletter-box h3 {
    color: var(--facom-white);
}


.newsletter-input-group {
    display: flex;

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.08);
}


.newsletter-input-group input {
    flex: 1;

    min-width: 0;

    padding:
        0.75rem
        1.1rem;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--facom-white);
}


.newsletter-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}


.newsletter-input-group button {
    width: 50px;

    border: 0;

    background: var(--facom-yellow);

    color: var(--facom-dark);

    transition:
        background-color var(--transition-fast);
}


.newsletter-input-group button:hover {
    background: var(--facom-yellow-light);
}


.newsletter-message {
    min-height: 22px;

    margin-top: 0.5rem;

    font-size: var(--fs-sm);
}


/* ================================================================
   29. FOOTER CTA
================================================================ */

.footer-cta {
    position: relative;

    padding:
        3rem
        0;

    background:
        linear-gradient(
            135deg,
            var(--facom-green-dark),
            var(--facom-green)
        );

    color: var(--facom-white);

    overflow: hidden;
}


.footer-cta::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--facom-green) 0 50%,
            var(--facom-yellow) 50% 75%,
            var(--facom-red) 75% 100%
        );
}


.footer-cta-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    z-index: 2;
}


.footer-cta-label {
    display: block;

    margin-bottom: 0.5rem;

    color: var(--facom-yellow-light);

    font-size: var(--fs-sm);

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.footer-cta h2 {
    margin: 0;

    color: var(--facom-white);

    font-size: clamp(1.5rem, 3vw, 2.3rem);
}


.footer-cta-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    flex-shrink: 0;
}


/* ================================================================
   30. FOOTER
================================================================ */

.site-footer {
    position: relative;

    padding:
        4rem
        0
        1.5rem;

    background: var(--facom-dark);

    color: rgba(255, 255, 255, 0.75);
}


.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--facom-green) 0 55%,
            var(--facom-yellow) 55% 78%,
            var(--facom-red) 78% 100%
        );
}


.footer-main {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1.5fr;

    gap: 2.5rem;
}


.footer-column h3 {
    margin-bottom: 1.25rem;

    color: var(--facom-white);

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.footer-about {
    padding-right: 1rem;
}


.footer-brand {
    display: inline-block;

    margin-bottom: 1.25rem;
}


.footer-brand img {
    width: auto;
    height: 55px;

    object-fit: contain;
}


.footer-description {
    margin-bottom: 1.25rem;

    color: rgba(255, 255, 255, 0.65);

    font-size: var(--fs-sm);

    line-height: 1.7;
}


.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 0.65rem;

    margin-bottom: 0.7rem;

    color: rgba(255, 255, 255, 0.68);

    font-size: var(--fs-sm);
}


.footer-contact-item i {
    width: 18px;

    margin-top: 0.25rem;

    color: var(--facom-yellow);

    flex-shrink: 0;
}


.footer-contact-item a {
    color: rgba(255, 255, 255, 0.68);
}


.footer-contact-item a:hover {
    color: var(--facom-yellow-light);
}


.footer-column ul li {
    margin-bottom: 0.65rem;
}


.footer-column ul a {
    color: rgba(255, 255, 255, 0.65);

    font-size: var(--fs-sm);
}


.footer-column ul a:hover {
    color: var(--facom-yellow-light);

    padding-left: 3px;
}


.footer-newsletter p {
    color: rgba(255, 255, 255, 0.65);

    font-size: var(--fs-sm);
}


.footer-social {
    display: flex;

    align-items: center;

    gap: 0.55rem;

    margin-top: 1.25rem;
}


.footer-social a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    color: rgba(255, 255, 255, 0.75);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-social a:hover {
    background: var(--facom-green);

    border-color: var(--facom-green);

    color: var(--facom-white);

    transform: translateY(-3px);
}


.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 3rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.footer-copyright p {
    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: var(--fs-sm);
}


.footer-legal {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 0.6rem;

    font-size: var(--fs-sm);
}


.footer-legal a {
    color: rgba(255, 255, 255, 0.55);
}


.footer-legal a:hover {
    color: var(--facom-yellow-light);
}

.powered-by {
    padding: 12px 20px 16px;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.powered-by a {
    color: var(--facom-yellow);
    font-weight: 600;
    text-decoration: none;
}

.powered-by a:hover {
    color: #fff;
}

/* ================================================================
   31. MESSAGES DJANGO
================================================================ */

.messages-section {
    padding:
        1rem
        0;
}


.messages-section .alert {
    display: flex;

    align-items: center;

    gap: 0.7rem;

    margin-bottom: 0.75rem;

    border: 0;

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-sm);
}


.alert-success {
    background: var(--facom-green-pale);

    color: var(--facom-green-dark);
}


.alert-danger,
.alert-error {
    background: var(--facom-red-pale);

    color: var(--facom-red-dark);
}


.alert-warning {
    background: var(--facom-yellow-pale);

    color: var(--facom-yellow-dark);
}


.alert-info {
    background: #e6f3fa;

    color: #155d7a;
}


/* ================================================================
   32. PAGINATION
================================================================ */

.pagination {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.3rem;

    margin-top: 2.5rem;
}


.pagination .page-link {
    min-width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0.5rem
        0.75rem;

    border:
        1px solid
        var(--facom-gray-300);

    border-radius: var(--radius-sm);

    color: var(--facom-green);

    background: var(--facom-white);
}


.pagination .page-link:hover {
    background: var(--facom-green);

    border-color: var(--facom-green);

    color: var(--facom-white);
}


.pagination .page-item.active .page-link {
    background: var(--facom-green);

    border-color: var(--facom-green);

    color: var(--facom-white);
}


/* ================================================================
   33. BADGES
================================================================ */

.badge {
    display: inline-flex;

    align-items: center;

    padding:
        0.35rem
        0.7rem;

    border-radius: var(--radius-pill);

    font-size: var(--fs-xs);

    font-weight: 700;
}


.badge-green {
    background: var(--facom-green-pale);

    color: var(--facom-green-dark);
}


.badge-yellow {
    background: var(--facom-yellow-pale);

    color: var(--facom-yellow-dark);
}


.badge-red {
    background: var(--facom-red-pale);

    color: var(--facom-red-dark);
}


/* ================================================================
   34. ANIMATIONS
================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}


@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


.animate-fade-in {
    animation:
        fadeIn
        0.7s
        ease
        both;
}


.animate-fade-up {
    animation:
        fadeInUp
        0.7s
        ease
        both;
}


.animate-delay-1 {
    animation-delay: 0.1s;
}


.animate-delay-2 {
    animation-delay: 0.2s;
}


.animate-delay-3 {
    animation-delay: 0.3s;
}


.animate-delay-4 {
    animation-delay: 0.4s;
}


/* ================================================================
   35. UTILITAIRES
================================================================ */

.bg-green {
    background: var(--facom-green) !important;
}


.bg-green-dark {
    background: var(--facom-green-dark) !important;
}


.bg-green-pale {
    background: var(--facom-green-pale) !important;
}


.bg-yellow {
    background: var(--facom-yellow) !important;
}


.bg-red {
    background: var(--facom-red) !important;
}


.bg-light-green {
    background: var(--facom-green-bg) !important;
}


.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}


.shadow-md {
    box-shadow: var(--shadow-md) !important;
}


.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}


.rounded-facom {
    border-radius: var(--radius-md) !important;
}


.rounded-pill {
    border-radius: var(--radius-pill) !important;
}


.hover-lift {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.hover-lift:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);
}


/* ================================================================
   36. BOUTON RETOUR EN HAUT
================================================================ */

.back-to-top {
    position: fixed;

    right: 1.5rem;
    bottom: 1.5rem;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: var(--facom-green);

    color: var(--facom-white);

    box-shadow: var(--shadow-md);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal),
        background-color var(--transition-normal);

    z-index: 900;
}


.back-to-top.visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.back-to-top:hover {
    background: var(--facom-green-dark);

    color: var(--facom-yellow-light);

    transform: translateY(-3px);
}


/* ================================================================
   37. RESPONSIVE — TABLETTES
================================================================ */

@media (max-width: 1199.98px) {

    .main-menu {
        gap: 0;
    }


    .menu-item > a {
        padding:
            0
            0.65rem;

        font-size: 0.84rem;
    }


    .header-information {
        gap: 1rem;
    }


    .header-info-item strong {
        font-size: 0.8rem;
    }


    .footer-main {
        grid-template-columns:
            1.5fr
            1fr
            1fr
            1.5fr;
    }


    .footer-newsletter {
        grid-column: span 2;
    }

}


/* ================================================================
   38. RESPONSIVE — TABLETTES PETITES
================================================================ */

@media (max-width: 991.98px) {

    .topbar-contact {
        display: none;
    }


    .topbar-content {
        justify-content: flex-end;
    }


    .header-main {
        min-height: 85px;
    }


    .site-logo {
        height: 60px;
    }


    .header-information {
        display: none;
    }


    .main-navigation {
        border-bottom-width: 3px;
    }


    .navigation-wrapper {
        min-height: 58px;
    }


    .mobile-menu-toggle {
        display: flex;
    }


    .navigation-menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: none;

        padding: 0.75rem 0;

        background: var(--facom-green-dark);

        box-shadow: var(--shadow-lg);
    }


    .navigation-menu.is-open {
        display: block;
    }


    .main-menu {
        display: block;
    }


    .menu-item {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.08);
    }


    .menu-item:last-child {
        border-bottom: 0;
    }


    .menu-item > a {
        min-height: 48px;

        padding:
            0.65rem
            1rem;

        border-radius: 0;

        justify-content: flex-start;
    }


    .menu-item > a.active {
        box-shadow:
            inset 4px 0
            var(--facom-yellow);
    }


    .menu-item:hover .menu-arrow {
        transform: none;
    }


    .dropdown-menu {
        position: static;

        display: none;

        min-width: 0;

        padding:
            0.35rem
            0.75rem
            0.75rem
            1.5rem;

        border: 0;

        border-left:
            2px solid
            var(--facom-yellow);

        border-radius: 0;

        background: rgba(0, 0, 0, 0.10);

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .menu-item.dropdown.is-open > .dropdown-menu {
        display: block;
    }


    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85);
    }


    .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.08);

        color: var(--facom-white);
    }


    .dropdown-menu a i {
        color: var(--facom-yellow);
    }


    .menu-donate {
        margin-left: 0;
    }


    .menu-donate > a {
        margin:
            0.75rem
            1rem;

        justify-content: center;

        border-radius: var(--radius-pill);
    }


    .navigation-search {
        margin-left: auto;
    }


    .hero-section {
        height: 620px;
    }


    .footer-main {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .footer-about {
        grid-column: span 2;
    }


    .footer-newsletter {
        grid-column: span 2;
    }


    .footer-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* ================================================================
   39. RESPONSIVE — MOBILE
================================================================ */

@media (max-width: 767.98px) {

    :root {
        --section-padding: 3rem;
        --container-padding: 1rem;
    }


    body {
        font-size: 0.95rem;
    }


    .topbar-links {
        width: 100%;

        justify-content: center;

        gap: 1rem;

        font-size: 0.75rem;
    }


    .site-brand {
        gap: 0.7rem;
    }


    .site-logo {
        height: 52px;
    }


    .brand-name {
        font-size: 1.2rem;
    }


    .brand-slogan {
        font-size: 0.72rem;
    }


    .navigation-wrapper {
        min-height: 54px;
    }


    .hero-section {
        height: 560px;

        min-height: 480px;
    }


    #heroCarousel .carousel-caption {
        padding:
            1.5rem
            var(--container-padding);
    }


    #heroCarousel .carousel-caption h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);

        margin-bottom: 0.8rem;
    }


    #heroCarousel .carousel-caption .lead {
        font-size: 0.95rem;

        margin-bottom: 1.2rem;
    }


    #heroCarousel .carousel-caption .d-flex {
        flex-direction: column;

        align-items: flex-start;
    }


    #heroCarousel .carousel-caption .btn {
        width: 100%;

        max-width: 270px;
    }


    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        display: none;
    }


    .page-header {
        padding:
            2.75rem
            0;
    }


    .page-header h1 {
        font-size: 2rem;
    }


    .section-title {
        margin-bottom: 2rem;
    }


    .card-img-top {
        height: 200px;
    }


    .project-image img,
    .event-image img,
    .blog-card-image img {
        height: 200px;
    }


    .footer-main {
        grid-template-columns: 1fr;
    }


    .footer-about,
    .footer-newsletter {
        grid-column: auto;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .footer-legal {
        justify-content: center;
    }


    .footer-cta {
        padding:
            2.5rem
            0;
    }


    .footer-cta-actions {
        width: 100%;
    }


    .footer-cta-actions .btn {
        flex: 1;
    }


    .newsletter-input-group {
        border-radius: var(--radius-sm);
    }

}


/* ================================================================
   40. RESPONSIVE — TRÈS PETITS ÉCRANS
================================================================ */

@media (max-width: 480px) {

    .topbar {
        display: none;
    }


    .header-main {
        min-height: 72px;
    }


    .site-logo {
        height: 45px;
    }


    .brand-name {
        font-size: 1rem;
    }


    .brand-slogan {
        display: none;
    }


    .navigation-search {
        width: 40px;
        height: 40px;
    }


    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }


    .hero-section {
        height: 520px;
    }


    #heroCarousel .carousel-caption h1 {
        font-size: 1.65rem;
    }


    #heroCarousel .carousel-caption .lead {
        font-size: 0.88rem;
    }


    .btn {
        padding:
            0.6rem
            1rem;

        font-size: 0.88rem;
    }


    .btn-lg {
        padding:
            0.7rem
            1.2rem;

        font-size: 0.95rem;
    }


    .mission-card {
        padding: 1.4rem 1rem;
    }


    .mission-icon {
        width: 60px;
        height: 60px;

        font-size: 1.5rem;
    }


    .footer-social {
        flex-wrap: wrap;
    }


    .back-to-top {
        right: 1rem;
        bottom: 1rem;

        width: 42px;
        height: 42px;
    }

}


/* ================================================================
   41. ACCESSIBILITÉ
================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px solid
        var(--facom-yellow);

    outline-offset: 3px;
}


.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ================================================================
   42. RÉDUCTION DES MOUVEMENTS
================================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }


    .slide-background,
    .carousel-item.active .slide-background {
        transform: none !important;
    }

}


/* ================================================================
   43. IMPRESSION
================================================================ */

@media print {

    .topbar,
    .main-navigation,
    .footer-cta,
    .site-footer,
    .back-to-top,
    .mobile-menu-toggle,
    .navigation-search,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }


    body {
        color: #000;

        background: #fff;

        font-size: 12pt;
    }


    .page-header {
        padding: 1rem 0;

        background: none !important;

        color: #000;

        border-bottom:
            2px solid
            #000;
    }


    .page-header h1 {
        color: #000 !important;

        text-shadow: none;
    }


    .card,
    .mission-card,
    .project-card,
    .blog-card,
    .event-card {
        box-shadow: none !important;

        border:
            1px solid
            #ccc;
    }


    a {
        color: #000;

        text-decoration: underline;
    }

}


/* ================================================================
   44. FACOM — STYLES DES TEMPLATES MODERNISÉS
   ----------------------------------------------------------------
   Complément pour les templates réorganisés :
   accueil, à propos, missions, projets, blog, événements,
   galerie, documents, FAQ, partenaires, formulaires, recherche,
   newsletter, pages institutionnelles et pages d'erreur.
================================================================ */


/* ================================================================
   44.1 BOUTONS FACOM
================================================================ */

.btn-facom-primary,
.btn-facom-secondary,
.btn-facom-yellow,
.btn-facom-danger,
.btn-facom-donate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    padding: .72rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.btn-facom-primary {
    background: var(--facom-green);
    border-color: var(--facom-green);
    color: var(--facom-white);
}

.btn-facom-primary:hover {
    background: var(--facom-green-dark);
    border-color: var(--facom-green-dark);
    color: var(--facom-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-facom-secondary {
    background: var(--facom-white);
    border-color: var(--facom-gray-300);
    color: var(--facom-gray-800);
}

.btn-facom-secondary:hover {
    background: var(--facom-gray-100);
    border-color: var(--facom-green);
    color: var(--facom-green-dark);
    transform: translateY(-2px);
}

.btn-facom-yellow {
    background: var(--facom-yellow);
    border-color: var(--facom-yellow);
    color: var(--facom-dark);
}

.btn-facom-yellow:hover {
    background: var(--facom-yellow-light);
    border-color: var(--facom-yellow-light);
    color: var(--facom-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-facom-danger {
    background: var(--facom-red);
    border-color: var(--facom-red);
    color: var(--facom-white);
}

.btn-facom-danger:hover {
    background: var(--facom-red-dark);
    border-color: var(--facom-red-dark);
    color: var(--facom-white);
    transform: translateY(-2px);
}

.btn-facom-donate {
    min-height: 52px;
    padding: .85rem 1.6rem;
    background: var(--facom-red);
    border-color: var(--facom-red);
    color: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.btn-facom-donate:hover {
    background: var(--facom-red-dark);
    border-color: var(--facom-red-dark);
    color: var(--facom-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* ================================================================
   44.2 EN-TÊTES ET SECTIONS COMMUNES
================================================================ */

.page-header-content {
    position: relative;
    z-index: 2;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.page-header-kicker,
.section-kicker,
.page-cta-kicker,
.error-page-kicker,
.newsletter-form-kicker,
.membership-form-kicker,
.volunteer-form-kicker,
.partner-contact-form-kicker,
.document-info-kicker,
.institutional-navigation-kicker,
.institutional-contact-kicker,
.blog-info-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    color: var(--facom-yellow-light);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-header-kicker i,
.section-kicker i,
.page-cta-kicker i,
.error-page-kicker i {
    color: var(--facom-yellow);
}

.section-heading {
    max-width: 850px;
    margin-bottom: 2.5rem;
}

.section-heading-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-heading .section-kicker {
    color: var(--facom-green);
}

.section-heading .section-title {
    margin-bottom: .75rem;
    text-align: inherit;
}

.section-heading .section-description {
    max-width: 760px;
    margin: 0;
    color: var(--text-muted);
}

.section-heading-centered .section-description {
    margin-left: auto;
    margin-right: auto;
}

.section-action-centered {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.empty-state {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--facom-gray-300);
    border-radius: var(--radius-lg);
    background: var(--facom-gray-50);
    color: var(--text-muted);
    text-align: center;
}

.empty-state i {
    display: block;
    margin-bottom: 1rem;
    color: var(--facom-green-light);
    font-size: 2.5rem;
}

.empty-state-action {
    margin-top: 1rem;
}

.page-cta {
    margin-top: var(--section-padding);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        linear-gradient(
            135deg,
            var(--facom-green-dark),
            var(--facom-green)
        );
    color: var(--facom-white);
}

.page-cta-content {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.page-cta-title {
    margin-bottom: .75rem;
    color: var(--facom-white);
}

.page-cta-description {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    color: var(--text-light);
}

.page-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}


/* ================================================================
   44.3 RECHERCHE ET FILTRES
================================================================ */

.content-search,
.blog-filters-section,
.partners-filters-section,
.search-form-wrapper {
    padding: 2rem 0;
}

.search-form,
.blog-search-form,
.blog-filter-form,
.projects-search-form,
.search-main-form {
    width: 100%;
}

.search-input-group {
    display: flex;
    align-items: stretch;
    gap: .6rem;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-input-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--facom-gray-500);
    pointer-events: none;
}

.search-input,
.search-main-form .search-input {
    width: 100%;
    min-height: 50px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 2px solid var(--facom-gray-300);
    border-radius: var(--radius-pill);
    background: var(--facom-white);
}

.search-input:focus,
.search-main-form .search-input:focus {
    border-color: var(--facom-green);
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(45,106,79,.12);
}

.search-submit {
    min-width: 50px;
    min-height: 50px;
    border: 0;
    border-radius: 50%;
    background: var(--facom-green);
    color: var(--facom-white);
}

.search-submit:hover {
    background: var(--facom-green-dark);
}

.search-result-heading {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.blog-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, .6fr) minmax(140px, .4fr);
    gap: 1rem;
    align-items: end;
}

.blog-filter-options {
    display: contents;
}

.blog-filter-field,
.partners-filter-field {
    min-width: 0;
}

.partners-filter-wrapper {
    padding-top: 0;
}

.partners-filter-form {
    display: flex;
    align-items: end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.partners-filter-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--facom-green-pale);
    color: var(--facom-green-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.clear-filters {
    color: var(--facom-red);
}


/* ================================================================
   44.4 ACCUEIL
================================================================ */

.hero-slide {
    position: relative;
    height: 100%;
}

.hero-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.38) 55%,
        rgba(0,0,0,.08)
    );
}

.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 950px;
    padding: 2rem var(--container-padding);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    color: var(--facom-yellow-light);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-title {
    margin-bottom: 1rem;
    color: var(--facom-white);
    font-size: clamp(2rem, 5vw, 4.3rem);
    text-shadow: 0 3px 20px rgba(0,0,0,.45);
}

.hero-description {
    max-width: 760px;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,.92);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.mission-grid,
.blog-grid,
.partners-grid,
.testimonials-grid,
.key-figures-grid,
.team-grid,
.documents-grid,
.projects-grid,
.project-list-grid,
.events-grid,
.gallery-grid,
.similar-missions-grid,
.related-projects-grid,
.related-posts-grid {
    display: grid;
    gap: 1.5rem;
}

.mission-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-grid,
.project-list-grid,
.projects-grid,
.events-grid,
.related-posts-grid,
.related-projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partners-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.key-figures-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.key-figure {
    padding: 2rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--facom-green-bg);
    text-align: center;
}

.count-number,
.donate-impact-number {
    display: block;
    color: var(--facom-green-dark);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
}

.key-figure-label,
.donate-impact-label {
    display: block;
    margin-top: .5rem;
    color: var(--text-muted);
    font-weight: 600;
}

.partner-card {
    position: relative;
}

.partner-placeholder,
.team-member-placeholder,
.project-card-image-placeholder,
.blog-card-image-placeholder,
.event-card-image-placeholder,
.gallery-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: var(--facom-gray-100);
    color: var(--facom-gray-500);
}

.partner-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 110px;
    color: var(--facom-gray-500);
    font-size: 2rem;
}

.testimonial-card {
    position: relative;
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-md);
    background: var(--facom-white);
    box-shadow: var(--shadow-xs);
}

.testimonial-icon {
    margin-bottom: 1rem;
    color: var(--facom-yellow);
    font-size: 1.8rem;
}

.testimonial-author {
    margin-top: 1.25rem;
    color: var(--facom-green-dark);
    font-weight: 700;
}

.home-cta-section {
    padding: var(--section-padding) 0;
    background: var(--facom-green-bg);
}

.home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: var(--radius-xl);
    background: var(--facom-white);
    box-shadow: var(--shadow-md);
}

.home-cta-content {
    max-width: 760px;
}

.home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    flex-shrink: 0;
}


/* ================================================================
   44.5 À PROPOS / ÉQUIPE / DOCUMENTS
================================================================ */

.about-introduction,
.about-pillars,
.about-team,
.about-documents,
.documents-list-section,
.document-detail-section {
    padding: var(--section-padding) 0;
}

.about-introduction-grid,
.about-introduction-layout,
.about-team-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 3rem;
    align-items: center;
}

.about-lead {
    color: var(--facom-green-dark);
    font-size: 1.2rem;
    font-weight: 600;
}

.about-focus-grid,
.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.about-focus-item,
.about-pillar {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-md);
    background: var(--facom-white);
}

.about-pillar-icon,
.about-focus-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-pale);
    color: var(--facom-green);
}

.about-introduction-image,
.about-image-wrapper {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.about-introduction-image img,
.about-image-wrapper img {
    width: 100%;
    object-fit: cover;
}

.team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-member {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-md);
    background: var(--facom-white);
    box-shadow: var(--shadow-xs);
    text-align: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.team-member-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.team-member-content {
    padding: 1.25rem;
}

.team-member-name {
    margin-bottom: .25rem;
    color: var(--facom-green-dark);
    font-size: 1.1rem;
}

.team-member-position {
    margin-bottom: .75rem;
    color: var(--facom-green);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.team-member-bio {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.team-member-social {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.team-member-social a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-bg);
    color: var(--facom-green);
}

.team-member-social a:hover {
    background: var(--facom-green);
    color: var(--facom-white);
}

.documents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-content {
    flex: 1;
}

.document-title {
    margin-bottom: .5rem;
    color: var(--facom-green-dark);
}

.document-description {
    color: var(--text-muted);
}

.document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .75rem 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.document-type {
    color: var(--facom-red);
    font-weight: 700;
}

.document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
}

.document-download {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
}


/* ================================================================
   44.6 MISSIONS / PROJETS
================================================================ */

.missions-list-section,
.project-detail-section,
.mission-detail-section,
.projects-list-section {
    padding: var(--section-padding) 0;
}

.mission-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.mission-content {
    display: flex;
    flex-direction: column;
}

.mission-title {
    margin-bottom: .6rem;
    color: var(--facom-green-dark);
}

.mission-description {
    color: var(--text-muted);
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--facom-green);
    font-weight: 700;
}

.card-link:hover {
    color: var(--facom-green-dark);
    gap: .6rem;
}

.projects-toolbar {
    margin-bottom: 2rem;
}

.project-card-image,
.project-card-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.project-card-image-placeholder {
    height: 230px;
}

.project-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.project-card-status {
    margin-bottom: .7rem;
}

.project-card-title {
    margin-bottom: .6rem;
    color: var(--facom-green-dark);
}

.project-card-excerpt {
    color: var(--text-muted);
}

.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.project-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.project-card-action {
    margin-top: .75rem;
}

.project-detail-layout,
.mission-detail-layout,
.blog-detail-layout,
.event-detail-layout,
.document-detail-layout,
.institutional-page-layout,
.gallery-detail-layout,
.partner-contact-layout,
.membership-layout,
.volunteer-layout,
.donate-layout,
.newsletter-layout,
.contact-layout,
.document-request-layout,
.search-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 2rem;
    align-items: start;
}

.project-detail-main,
.mission-detail-main,
.blog-detail-main,
.event-detail-main,
.document-detail-main,
.institutional-page-main {
    min-width: 0;
}

.project-detail-image,
.mission-detail-image,
.event-detail-image {
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
}

.project-detail-image img,
.mission-detail-image img,
.event-detail-image img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.project-detail-content,
.mission-detail-content,
.event-description,
.institutional-content {
    color: var(--text-secondary);
    line-height: 1.9;
}

.project-info-card,
.mission-info-card,
.blog-info-card,
.event-info-card,
.document-info-card,
.institutional-navigation-card,
.institutional-contact-card,
.contact-info-card,
.donate-info-card,
.newsletter-info-card {
    position: sticky;
    top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-md);
    background: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.project-info-header,
.mission-info-header,
.event-info-header,
.blog-info-header,
.document-info-header,
.institutional-navigation-header,
.contact-info-header,
.donate-info-header,
.newsletter-info-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.25rem;
}

.project-info-header i,
.mission-info-header i,
.event-info-icon,
.blog-info-icon,
.document-info-icon,
.institutional-navigation-icon,
.contact-info-icon,
.donate-info-icon,
.newsletter-info-icon {
    color: var(--facom-green);
}

.project-info-list,
.mission-info-list,
.event-info-list,
.blog-info-list,
.document-info-list,
.institutional-navigation,
.contact-info-list,
.donate-info-list,
.newsletter-info-list {
    display: grid;
    gap: .9rem;
}

.project-info-item,
.mission-info-item,
.event-info-item,
.blog-info-item,
.document-info-item,
.contact-info-item,
.donate-info-item,
.newsletter-info-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.project-info-icon,
.mission-info-icon,
.event-info-item-icon,
.blog-info-item-icon,
.document-info-item-icon,
.contact-info-item-icon,
.donate-info-item-icon,
.newsletter-info-item-icon {
    flex: 0 0 22px;
    color: var(--facom-green);
}

.project-info-content,
.mission-info-content,
.event-info-item-content,
.blog-info-item-content,
.document-info-item-content,
.contact-info-item-content,
.donate-info-item-content,
.newsletter-info-item-content {
    min-width: 0;
}

.project-info-label,
.mission-info-label,
.event-info-label,
.blog-info-label,
.document-info-label,
.contact-info-label,
.donate-info-label,
.newsletter-info-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.project-info-actions,
.mission-info-actions,
.event-info-actions,
.document-info-actions {
    display: grid;
    gap: .6rem;
    margin-top: 1.25rem;
}

.project-status {
    display: inline-flex;
}

.similar-missions-section,
.related-projects-section,
.related-posts-section {
    padding: var(--section-padding) 0;
    background: var(--facom-gray-50);
}

.similar-missions-grid,
.related-projects-grid,
.related-posts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ================================================================
   44.7 BLOG
================================================================ */

.blog-filters-section {
    background: var(--facom-gray-50);
}

.blog-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.blog-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.featured-posts-section {
    padding: var(--section-padding) 0 2rem;
}

.featured-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.blog-card-image,
.blog-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-card-image-placeholder {
    height: 220px;
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    margin-bottom: .75rem;
}

.blog-card-title {
    margin-bottom: .65rem;
    color: var(--facom-green-dark);
}

.blog-card-excerpt {
    color: var(--text-muted);
}

.blog-detail-header-content {
    position: relative;
    z-index: 2;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blog-detail-category {
    margin-bottom: .75rem;
}

.blog-category-badge {
    display: inline-flex;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--facom-yellow);
    color: var(--facom-dark);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.blog-detail-title {
    color: var(--facom-white);
}

.blog-detail-meta,
.event-detail-header-meta,
.gallery-detail-header-meta,
.document-detail-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    color: rgba(255,255,255,.82);
    font-size: var(--fs-sm);
}

.blog-meta-item,
.event-meta-item,
.gallery-meta-item,
.document-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.blog-meta-separator,
.event-meta-separator,
.gallery-meta-separator,
.document-meta-separator {
    opacity: .5;
}

.blog-detail-section {
    padding: var(--section-padding) 0;
}

.blog-detail-featured-image {
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--radius-lg);
}

.blog-detail-featured-image img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

.blog-share {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    background: var(--facom-green-bg);
}

.blog-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.blog-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--facom-green);
    color: var(--facom-white);
}

.blog-share-link:hover {
    background: var(--facom-green-dark);
    color: var(--facom-white);
    transform: translateY(-2px);
}


/* ================================================================
   44.8 ÉVÉNEMENTS
================================================================ */

.events-list-section {
    padding: var(--section-padding) 0;
}

.event-card-image,
.event-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.event-card-image-placeholder {
    height: 220px;
}

.event-card-content {
    display: flex;
    flex: 1;
    gap: 1rem;
    padding: 1.25rem;
}

.event-card-date {
    flex: 0 0 64px;
    height: 76px;
    padding: .5rem;
    border-radius: var(--radius-sm);
    background: var(--facom-green);
    color: var(--facom-white);
    text-align: center;
}

.event-date-day {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.event-date-month,
.event-date-year {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
}

.event-card-body {
    min-width: 0;
    flex: 1;
}

.event-card-title {
    margin-bottom: .5rem;
    color: var(--facom-green-dark);
}

.event-card-excerpt {
    color: var(--text-muted);
}

.event-card-meta {
    display: grid;
    gap: .35rem;
    margin-top: .8rem;
}

.event-meta-item {
    color: var(--text-muted);
}

.event-card-action {
    margin-top: 1rem;
}

.event-detail-header-meta {
    margin-top: 1rem;
}

.event-detail-section {
    padding: var(--section-padding) 0;
}


/* ================================================================
   44.9 GALERIE
================================================================ */

.gallery-list-section,
.gallery-detail-section {
    padding: var(--section-padding) 0;
}

.gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.gallery-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-card:hover .gallery-card-image img {
    transform: scale(1.05);
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,61,45,.55);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-overlay-icon,
.gallery-detail-overlay-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-yellow);
    color: var(--facom-dark);
}

.gallery-card-image-placeholder {
    height: 100%;
    min-height: 220px;
}

.gallery-card-content {
    padding: 1.1rem 1.25rem 1.25rem;
}

.gallery-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.gallery-card-title {
    margin-bottom: .4rem;
    color: var(--facom-green-dark);
}

.gallery-card-description {
    color: var(--text-muted);
}

.gallery-detail-section {
    padding-bottom: var(--section-padding);
}

.gallery-detail-introduction {
    max-width: 850px;
    margin-bottom: 2rem;
}

.gallery-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.gallery-detail-item {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--facom-gray-100);
}

.gallery-detail-link {
    position: relative;
    display: block;
}

.gallery-detail-link img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.gallery-detail-link:hover img {
    transform: scale(1.04);
}

.gallery-detail-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.gallery-detail-link:hover .gallery-detail-overlay {
    opacity: 1;
}

.gallery-detail-caption {
    padding: .7rem .9rem;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.gallery-detail-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}


/* ================================================================
   44.10 DOCUMENTS
================================================================ */

.document-card {
    min-height: 100%;
}

.document-detail-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-lg);
    background: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.document-detail-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--facom-red-pale);
    color: var(--facom-red);
    font-size: 1.7rem;
}

.document-detail-content {
    min-width: 0;
}

.document-detail-description {
    color: var(--text-secondary);
    line-height: 1.8;
}

.document-detail-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.document-detail-meta-item {
    display: flex;
    gap: .65rem;
    padding: .9rem;
    border-radius: var(--radius-sm);
    background: var(--facom-gray-50);
}

.document-detail-meta-icon {
    color: var(--facom-green);
}

.document-detail-meta-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.document-detail-meta-value {
    color: var(--text-primary);
    font-weight: 600;
}

.document-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}


/* ================================================================
   44.11 FAQ
================================================================ */

.faq-section {
    padding: var(--section-padding) 0;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    box-shadow: var(--shadow-xs);
}

.faq-question {
    min-height: 64px;
}

.faq-question-icon,
.faq-answer-icon {
    flex: 0 0 28px;
    color: var(--facom-green);
}

.faq-question-title {
    flex: 1;
}

.faq-answer {
    border-top: 1px solid var(--facom-gray-200);
    background: var(--facom-gray-50);
}

.faq-answer-content {
    line-height: 1.8;
}


/* ================================================================
   44.12 PARTENAIRES
================================================================ */

.partners-list-section {
    padding: var(--section-padding) 0;
}

.partner-card-logo {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-card-logo img {
    max-width: 170px;
    max-height: 90px;
    object-fit: contain;
}

.partner-card-content {
    width: 100%;
    padding-top: 1rem;
    text-align: center;
}

.partner-card-name {
    margin-bottom: .3rem;
    color: var(--facom-green-dark);
    font-weight: 700;
}

.partner-card-type,
.partner-card-country {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.partner-card-action {
    margin-top: .7rem;
}


/* ================================================================
   44.13 CONTACT / ADHÉSION / BÉNÉVOLAT / PARTENAIRE
================================================================ */

.contact-section,
.membership-section,
.volunteer-section,
.partner-contact-section,
.newsletter-section,
.document-request-section {
    padding: var(--section-padding) 0;
}

.contact-form-wrapper,
.membership-form-wrapper,
.volunteer-form-wrapper,
.partner-contact-form-wrapper,
.newsletter-form-wrapper,
.document-request-form-wrapper {
    min-width: 0;
}

.contact-form-card,
.membership-form-card,
.volunteer-form-card,
.partner-contact-form-card,
.newsletter-form-card,
.document-request-form-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-lg);
    background: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.contact-form,
.membership-form,
.volunteer-form,
.partner-contact-form,
.newsletter-form {
    margin-top: 1.5rem;
}

.form-field {
    margin-bottom: 1.15rem;
}

.form-help {
    margin-top: .35rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.form-field-errors {
    margin-top: .35rem;
}

.form-error {
    color: var(--facom-red);
    font-size: var(--fs-sm);
}

.form-alert {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--facom-red-pale);
    color: var(--facom-red-dark);
}

.required-marker {
    color: var(--facom-red);
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.contact-form-actions,
.membership-form-actions,
.volunteer-form-actions,
.partner-contact-form-actions,
.newsletter-form-actions,
.document-request-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}

.contact-info-list {
    margin-bottom: 1.5rem;
}

.contact-social {
    padding-top: 1.25rem;
    border-top: 1px solid var(--facom-gray-200);
}

.contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.contact-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-bg);
    color: var(--facom-green);
}

.contact-social-link:hover {
    background: var(--facom-green);
    color: var(--facom-white);
}

.membership-introduction,
.volunteer-introduction,
.newsletter-introduction,
.partner-contact-introduction,
.document-request-introduction {
    color: var(--text-secondary);
}

.membership-points,
.volunteer-points,
.partner-contact-points,
.document-request-help {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.membership-point,
.volunteer-point,
.partner-contact-point,
.document-request-help-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--facom-green-bg);
}

.membership-point-icon,
.volunteer-point-icon,
.partner-contact-point-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-pale);
    color: var(--facom-green);
}

.membership-point-content,
.volunteer-point-content,
.partner-contact-point-content {
    min-width: 0;
}

.membership-form-header,
.volunteer-form-header,
.partner-contact-form-header,
.newsletter-form-header,
.document-request-form-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}

.membership-form-icon,
.volunteer-form-icon,
.partner-contact-form-icon,
.newsletter-form-icon,
.document-request-form-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--facom-green-pale);
    color: var(--facom-green);
}

.membership-form-title,
.volunteer-form-title,
.partner-contact-form-title,
.newsletter-form-title,
.document-request-form-title {
    margin-bottom: 0;
}


/* ================================================================
   44.14 NEWSLETTER
================================================================ */

.newsletter-benefits {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.newsletter-benefit {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--facom-green-bg);
}

.newsletter-benefit-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-pale);
    color: var(--facom-green);
}

.newsletter-benefit-content {
    min-width: 0;
}

.newsletter-messages {
    margin-bottom: 1rem;
}

.newsletter-privacy-notice {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.newsletter-info-section {
    margin-top: 2rem;
}

.newsletter-info-card {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.newsletter-info-content {
    min-width: 0;
}


/* ================================================================
   44.15 DON
================================================================ */

.donate-section {
    padding: var(--section-padding) 0;
}

.donate-form-wrapper,
.donate-info-wrapper {
    min-width: 0;
}

.donate-form-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-lg);
    background: var(--facom-white);
    box-shadow: var(--shadow-md);
}

.donate-suggested-amounts {
    margin-bottom: 1.5rem;
}

.donate-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.donate-amount-option {
    min-width: 90px;
    padding: .65rem .9rem;
    border: 2px solid var(--facom-green);
    border-radius: var(--radius-pill);
    background: var(--facom-white);
    color: var(--facom-green);
    font-weight: 700;
}

.donate-amount-option:hover,
.donate-amount-option.is-selected {
    background: var(--facom-green);
    color: var(--facom-white);
}

.donate-amount-custom {
    flex: 1 1 150px;
    min-width: 150px;
}

.donate-form-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--facom-gray-200);
}

.donate-form-section-title {
    margin-bottom: 1rem;
    color: var(--facom-green-dark);
    font-size: 1.1rem;
}

.donate-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.donate-form-field,
.donate-form-message {
    min-width: 0;
}

.donate-form-message {
    grid-column: 1 / -1;
}

.donate-form-anonymous {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
}

.donate-form-anonymous input {
    width: 18px;
    height: 18px;
    accent-color: var(--facom-green);
}

.donate-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.donate-security-notice {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.donate-impact-section {
    margin-top: 2rem;
}

.donate-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

.donate-impact-item {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--facom-green-bg);
    text-align: center;
}


/* ================================================================
   44.16 RECHERCHE
================================================================ */

.search-section {
    padding: var(--section-padding) 0;
    grid-template-columns: 1fr;
}

.search-results-section {
    margin-top: 2rem;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.search-results-summary {
    color: var(--text-muted);
}

.search-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--facom-green);
    color: var(--facom-white);
    font-weight: 800;
}

.search-results-list {
    display: grid;
    gap: 1rem;
}

.search-result-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-md);
    background: var(--facom-white);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.search-result-icon-wrapper {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--facom-green-pale);
}

.search-result-icon {
    color: var(--facom-green);
}

.search-result-icon-project,
.search-result-icon-projects {
    color: var(--facom-yellow-dark);
}

.search-result-icon-blog,
.search-result-icon-post {
    color: var(--facom-red);
}

.search-result-content {
    min-width: 0;
    flex: 1;
}

.search-result-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.search-result-type {
    color: var(--facom-green);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.search-result-date {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.search-result-title {
    margin-bottom: .4rem;
    color: var(--facom-green-dark);
}

.search-result-description {
    margin-bottom: .7rem;
    color: var(--text-muted);
}

.search-result-action {
    font-weight: 700;
}

.search-empty-state,
.search-initial-state {
    padding: 3rem 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--facom-gray-50);
    text-align: center;
}

.search-empty-state i,
.search-initial-state i {
    display: block;
    margin-bottom: 1rem;
    color: var(--facom-green-light);
    font-size: 2.5rem;
}


/* ================================================================
   44.17 PAGES INSTITUTIONNELLES
================================================================ */

.institutional-page-section {
    padding: var(--section-padding) 0;
}

.institutional-content-card {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--facom-gray-200);
    border-radius: var(--radius-lg);
    background: var(--facom-white);
    box-shadow: var(--shadow-sm);
}

.institutional-content-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.institutional-content-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--facom-green-pale);
    color: var(--facom-green);
}

.institutional-content-title {
    margin-bottom: 0;
    color: var(--facom-green-dark);
}

.institutional-content p,
.institutional-content li {
    line-height: 1.85;
}

.institutional-content ul,
.institutional-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
    list-style: revert;
}

.institutional-navigation-card {
    position: static;
}

.institutional-navigation-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.institutional-navigation-link:hover {
    background: var(--facom-green-bg);
    color: var(--facom-green-dark);
}

.institutional-navigation-link-icon {
    color: var(--facom-green);
}

.institutional-contact-card {
    position: static;
    margin-top: 1rem;
    background: var(--facom-green-bg);
}

.institutional-contact-icon {
    color: var(--facom-green);
    font-size: 1.8rem;
}

.institutional-contact-title {
    color: var(--facom-green-dark);
}


/* ================================================================
   44.18 PAGES D'ERREUR 404 / 500
================================================================ */

.error-page {
    padding: var(--section-padding) 0 0;
}

.error-page-layout {
    max-width: var(--container-max-width);
    min-height: 55vh;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 3rem;
    align-items: center;
}

.error-page-content {
    max-width: 720px;
}

.error-page-kicker {
    color: var(--facom-red);
}

.error-page-code {
    margin-bottom: .25rem;
    color: var(--facom-green-dark);
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
}

.error-page-title {
    margin-bottom: 1rem;
    color: var(--facom-green-dark);
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.error-page-description {
    max-width: 650px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.error-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.error-page-visual {
    text-align: center;
}

.error-page-image-wrapper {
    max-width: 520px;
    margin: 0 auto;
}

.error-page-image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.error-page-retry-message {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.error-page-retry-message i {
    color: var(--facom-green);
}

.error-page-search {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--facom-gray-50);
}

.error-page-search-header {
    margin-bottom: 1rem;
}

.error-page-search-icon {
    color: var(--facom-green);
}

.error-page-search-kicker {
    display: block;
    margin-top: .35rem;
    color: var(--facom-green);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
}

.error-page-search-title {
    margin: .25rem 0 .4rem;
}

.error-page-search-description {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.error-page-search-form {
    display: flex;
    gap: .6rem;
}

.error-page-search-input-wrapper {
    position: relative;
    flex: 1;
}

.error-page-search-input {
    width: 100%;
    min-height: 48px;
    padding: .7rem 1rem;
    border: 2px solid var(--facom-gray-300);
    border-radius: var(--radius-pill);
}

.error-page-search-input:focus {
    border-color: var(--facom-green);
    outline: none;
}

.error-page-cta {
    margin-top: 3rem;
}


/* ================================================================
   44.19 UTILITAIRES DE LAYOUT POUR LES NOUVEAUX TEMPLATES
================================================================ */

.about-focus-item,
.about-pillar,
.membership-point,
.volunteer-point,
.partner-contact-point,
.document-request-help-item {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.about-focus-item:hover,
.about-pillar:hover,
.membership-point:hover,
.volunteer-point:hover,
.partner-contact-point:hover,
.document-request-help-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.blog-detail-main table,
.institutional-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.blog-detail-main th,
.blog-detail-main td,
.institutional-content th,
.institutional-content td {
    padding: .7rem;
    border: 1px solid var(--facom-gray-300);
}

.blog-detail-main th,
.institutional-content th {
    background: var(--facom-green-bg);
    color: var(--facom-green-dark);
}


/* ================================================================
   44.20 RESPONSIVE — NOUVEAUX TEMPLATES
================================================================ */

@media (max-width: 1199.98px) {
    .mission-grid,
    .mission-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partners-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .featured-posts-grid,
    .gallery-grid,
    .gallery-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .page-header-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .blog-filters,
    .blog-filter-form {
        grid-template-columns: 1fr;
    }

    .project-detail-layout,
    .mission-detail-layout,
    .blog-detail-layout,
    .event-detail-layout,
    .document-detail-layout,
    .institutional-page-layout,
    .partner-contact-layout,
    .membership-layout,
    .volunteer-layout,
    .donate-layout,
    .newsletter-layout,
    .contact-layout,
    .document-request-layout {
        grid-template-columns: 1fr;
    }

    .project-info-card,
    .mission-info-card,
    .blog-info-card,
    .event-info-card,
    .document-info-card,
    .institutional-navigation-card,
    .contact-info-card,
    .donate-info-card,
    .newsletter-info-card {
        position: static;
    }

    .about-introduction-grid,
    .about-introduction-layout,
    .about-team-grid {
        grid-template-columns: 1fr;
    }

    .about-introduction-image {
        order: -1;
        max-width: 700px;
        margin: 0 auto;
    }

    .mission-grid,
    .mission-list-grid,
    .blog-grid,
    .project-list-grid,
    .projects-grid,
    .events-grid,
    .testimonials-grid,
    .related-projects-grid,
    .related-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .key-figures-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .error-page-layout {
        grid-template-columns: 1fr;
        min-height: auto;
        text-align: center;
    }

    .error-page-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .error-page-actions {
        justify-content: center;
    }

    .error-page-description {
        margin-left: auto;
        margin-right: auto;
    }

    .error-page-visual {
        order: -1;
    }

    .error-page-image-wrapper {
        max-width: 360px;
    }

    .home-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        padding: 2.5rem 0;
    }

    .page-header h1 {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .page-header-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-actions,
    .error-page-actions,
    .page-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .hero-actions .btn-facom-primary,
    .hero-actions .btn-facom-secondary,
    .hero-actions .btn-facom-yellow,
    .error-page-actions > *,
    .page-cta-actions > * {
        width: 100%;
    }

    .mission-grid,
    .mission-list-grid,
    .blog-grid,
    .project-list-grid,
    .projects-grid,
    .events-grid,
    .featured-posts-grid,
    .documents-grid,
    .testimonials-grid,
    .related-projects-grid,
    .related-posts-grid,
    .gallery-grid,
    .gallery-detail-grid {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-focus-grid,
    .about-pillars-grid,
    .blog-filter-options,
    .donate-form-grid,
    .document-detail-metadata {
        grid-template-columns: 1fr;
    }

    .search-input-group,
    .error-page-search-form {
        flex-direction: column;
    }

    .search-submit {
        width: 100%;
        border-radius: var(--radius-pill);
    }

    .search-result-card {
        flex-direction: column;
    }

    .search-result-icon-wrapper {
        width: 42px;
        height: 42px;
    }

    .document-detail-card {
        flex-direction: column;
    }

    .document-detail-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .event-card-content {
        flex-direction: column;
    }

    .event-card-date {
        width: 70px;
    }

    .gallery-detail-navigation {
        flex-direction: column;
    }

    .contact-form-actions,
    .membership-form-actions,
    .volunteer-form-actions,
    .partner-contact-form-actions,
    .newsletter-form-actions,
    .document-request-form-actions,
    .donate-form-actions {
        justify-content: stretch;
    }

    .contact-form-actions > *,
    .membership-form-actions > *,
    .volunteer-form-actions > *,
    .partner-contact-form-actions > *,
    .newsletter-form-actions > *,
    .document-request-form-actions > *,
    .donate-form-actions > * {
        width: 100%;
    }

    .newsletter-info-card {
        flex-direction: column;
    }

    .error-page-code {
        font-size: clamp(5rem, 25vw, 7rem);
    }

    .error-page-image-wrapper {
        max-width: 280px;
    }

    .page-cta {
        margin-top: 3rem;
    }
}

@media (max-width: 480px) {
    .partners-grid,
    .team-grid,
    .key-figures-grid {
        grid-template-columns: 1fr;
    }

    .site-brand {
        max-width: calc(100% - 100px);
    }

    .brand-name {
        white-space: normal;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: .95rem;
    }

    .donate-amount-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .donate-amount-option,
    .donate-amount-custom {
        width: 100%;
        min-width: 0;
    }
}


/* ================================================================
   44.21 IMPRESSION — NOUVEAUX TEMPLATES
================================================================ */

@media print {
    .page-cta,
    .error-page-actions,
    .contact-social,
    .blog-share,
    .gallery-detail-navigation,
    .document-detail-actions,
    .donate-form-actions {
        display: none !important;
    }

    .project-info-card,
    .mission-info-card,
    .blog-info-card,
    .event-info-card,
    .document-info-card,
    .institutional-navigation-card,
    .contact-info-card,
    .donate-info-card,
    .newsletter-info-card {
        position: static;
        box-shadow: none;
    }
}