Parfait. Nous allons donner à programme.css une identité différente des autres pages : 🟢 Vert liturgique comme couleur dominante. 🟡 Or jubilaire pour les accents. 🔵 Bleu marial en couleur secondaire. 📅 Un style inspiré des agendas et calendriers professionnels. Crée le fichier : assets/css/programme.css Puis colle cette PARTIE 1.
/*
=========================================================
CMS AKONO
PROGRAMME.CSS
---------------------------------------------------------
Programme Officiel du Jubilé du Centenaire
Paroisse Notre-Dame des Sept Douleurs d'Akono
---------------------------------------------------------
Développé par :
ESSOMBA Pancrace Cédric
Pancrace Consulting Group
=========================================================
*/


/*=========================================================
VARIABLES
=========================================================*/

:root {

    --prog-vert: #2E7D32;

    --prog-vert-clair: #43A047;

    --prog-bleu: #0F4C81;

    --prog-or: #D4AF37;

    --prog-bg: #F7FAF7;

    --prog-shadow: 0 20px 60px rgba(0, 0, 0, .12);

    --prog-radius: 28px;

}


/*=========================================================
HERO
=========================================================*/

.programme-hero {

    position: relative;

    min-height: 85vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

    padding: 120px 20px;

    background:

        linear-gradient(rgba(46, 125, 50, .86),

            rgba(18, 70, 28, .88)),

        url("../images/eglise-akono.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}


/*=========================================================
OVERLAY
=========================================================*/

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(transparent,

            rgba(0, 0, 0, .25));

}


/*=========================================================
DECORATION
=========================================================*/

.programme-hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -250px;

    top: -250px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

}

.programme-hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

}


/*=========================================================
CONTENU
=========================================================*/

.programme-hero .hero-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;

}


/*=========================================================
BADGE
=========================================================*/

.hero-badge {

    display: inline-block;

    padding: 12px 28px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(10px);

    color: #FFF;

    font-weight: 600;

    margin-bottom: 30px;

}


/*=========================================================
TITRE
=========================================================*/

.programme-hero h1 {

    color: #FFF;

    font-size: 66px;

    line-height: 1.15;

    margin-bottom: 30px;

    font-weight: 800;

    text-shadow: 0 10px 25px rgba(0, 0, 0, .35);

}


/*=========================================================
PARAGRAPHE
=========================================================*/

.programme-hero p {

    color: #F3F3F3;

    font-size: 22px;

    line-height: 1.9;

    max-width: 780px;

    margin: auto;

}


/*=========================================================
BOUTONS
=========================================================*/

.programme-hero .hero-buttons {

    margin-top: 45px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

}

.programme-hero .btn,

.programme-hero .btn-or {

    min-width: 220px;

}


/*=========================================================
SECTION TITLE
=========================================================*/

.section-title {

    width: min(900px, 92%);

    margin: auto;

    margin-bottom: 70px;

    text-align: center;

}

.section-title h2 {

    color: var(--prog-vert);

    font-size: 48px;

    margin-bottom: 20px;

    position: relative;

}

.section-title h2::after {

    content: "";

    display: block;

    width: 110px;

    height: 5px;

    margin: 20px auto 0;

    border-radius: 20px;

    background: linear-gradient(90deg,

            var(--prog-vert),

            var(--prog-or));

}

.section-title p {

    color: #666;

    font-size: 19px;

    line-height: 2;

}


/*=========================================================
BADGE DES SECTIONS
=========================================================*/

.section-badge {

    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(46, 125, 50, .10);

    color: var(--prog-vert);

    font-weight: 600;

    margin-bottom: 20px;

}


/*=========================================================
STATISTIQUES
=========================================================*/

.historical-stats {

    width: min(1350px, 92%);

    margin: 80px auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}

.historical-card {

    background: #FFF;

    border-radius: 28px;

    padding: 45px;

    text-align: center;

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

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.historical-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,

            var(--prog-vert),

            var(--prog-or));

}

.historical-card:hover {

    transform: translateY(-10px);

}

.historical-card h3 {

    font-size: 58px;

    color: var(--prog-vert);

    margin-bottom: 12px;

}

.historical-card p {

    color: #666;

    font-size: 18px;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .programme-hero {

        background-attachment: scroll;

    }

    .programme-hero h1 {

        font-size: 48px;

    }

}

@media(max-width:768px) {

    .programme-hero {

        min-height: 70vh;

    }

    .programme-hero h1 {

        font-size: 36px;

    }

    .programme-hero p {

        font-size: 18px;

    }

    .historical-stats {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:576px) {

    .historical-stats {

        grid-template-columns: 1fr;

    }

}
/*=========================================================
FILTRES
=========================================================*/

.programme-filtres {

    width: min(1300px, 92%);

    margin: 60px auto;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;

}

.filtre {

    padding: 14px 28px;

    border: none;

    border-radius: 50px;

    background: #FFF;

    color: var(--prog-vert);

    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

    transition: .35s;

}

.filtre:hover {

    background: var(--prog-vert);

    color: #FFF;

    transform: translateY(-3px);

}

.filtre.actif {

    background: linear-gradient(135deg,
            var(--prog-vert),
            var(--prog-vert-clair));

    color: #FFF;

}


/*=========================================================
GRILLE DES EVENEMENTS
=========================================================*/

.programme-grid {

    width: min(1400px, 92%);

    margin: 70px auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));

    gap: 40px;

}


/*=========================================================
CARTE EVENEMENT
=========================================================*/

.programme-card {

    position: relative;

    display: flex;

    gap: 25px;

    background: #FFF;

    border-radius: 30px;

    padding: 35px;

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

    overflow: hidden;

    transition: .35s;

}

.programme-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 70px rgba(0, 0, 0, .15);

}

.programme-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            var(--prog-vert),
            var(--prog-or));

}


/*=========================================================
DATE
=========================================================*/

.programme-date {

    width: 90px;

    min-width: 90px;

    height: 100px;

    border-radius: 22px;

    background: linear-gradient(135deg,
            var(--prog-vert),
            var(--prog-vert-clair));

    color: #FFF;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.programme-date span {

    font-size: 38px;

    font-weight: 700;

}

.programme-date small {

    margin-top: 6px;

    font-size: 15px;

    letter-spacing: 1px;

}


/*=========================================================
CONTENU
=========================================================*/

.programme-content {

    flex: 1;

}

.programme-content h3 {

    color: var(--prog-vert);

    font-size: 28px;

    margin: 15px 0;

}

.programme-content p {

    color: #666;

    line-height: 1.9;

    margin-top: 15px;

}


/*=========================================================
CATEGORIE
=========================================================*/

.programme-categorie {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(46, 125, 50, .10);

    color: var(--prog-vert);

    font-size: 14px;

    font-weight: 600;

}


/*=========================================================
INFOS
=========================================================*/

.programme-infos {

    list-style: none;

    margin: 18px 0;

    padding: 0;

}

.programme-infos li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #555;

}

.programme-infos i {

    width: 34px;

    height: 34px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--prog-vert);

}


/*=========================================================
BADGE EVENEMENT MAJEUR
=========================================================*/

.event-badge {

    position: absolute;

    top: 22px;

    right: 22px;

    padding: 8px 18px;

    border-radius: 40px;

    background: linear-gradient(135deg,
            var(--prog-or),
            #F5C842);

    color: #FFF;

    font-size: 13px;

    font-weight: 700;

}


/*=========================================================
CARTE MAJEURE
=========================================================*/

.programme-majeur {

    border: 2px solid rgba(212, 175, 55, .30);

}


/*=========================================================
AUCUN EVENEMENT
=========================================================*/

.empty-programme {

    width: 100%;

    background: #FFF;

    padding: 70px;

    text-align: center;

    border-radius: 30px;

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

}

.empty-programme i {

    font-size: 70px;

    color: var(--prog-or);

    margin-bottom: 25px;

}

.empty-programme h3 {

    color: var(--prog-vert);

    margin-bottom: 20px;

}

.empty-programme p {

    color: #666;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px) {

    .programme-card {

        flex-direction: column;

    }

    .programme-date {

        width: 100%;

        height: 90px;

        flex-direction: row;

        gap: 15px;

    }

}

@media(max-width:768px) {

    .programme-grid {

        grid-template-columns: 1fr;

    }

}
/*=========================================================
AGENDA ANNUEL
=========================================================*/

.agenda-mois {

    width: min(1400px, 92%);

    margin: 70px auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


/*=========================================================
CARTE MOIS
=========================================================*/

.mois-card {

    position: relative;

    background: #FFF;

    border-radius: 28px;

    padding: 35px;

    text-align: center;

    cursor: pointer;

    overflow: hidden;

    transition: .35s;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);

}

.mois-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 28px 65px rgba(0, 0, 0, .16);

}

.mois-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            var(--prog-vert),
            var(--prog-or));

}


/*=========================================================
NUMERO DU MOIS
=========================================================*/

.mois-numero {

    width: 85px;

    height: 85px;

    margin: auto;

    margin-bottom: 20px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,
            var(--prog-vert),
            var(--prog-vert-clair));

    color: #FFF;

    font-size: 32px;

    font-weight: 700;

}


/*=========================================================
TITRES
=========================================================*/

.mois-card h3 {

    color: var(--prog-vert);

    font-size: 28px;

    margin-bottom: 12px;

}

.mois-card small {

    color: #777;

    font-size: 16px;

}


/*=========================================================
EFFET SELECTION
=========================================================*/

.mois-card.active {

    background: linear-gradient(135deg,
            var(--prog-vert),
            #1F5E26);

    color: #FFF;

}

.mois-card.active h3,

.mois-card.active small {

    color: #FFF;

}

.mois-card.active .mois-numero {

    background: #FFF;

    color: var(--prog-vert);

}


/*=========================================================
EVENEMENTS MAJEURS
=========================================================*/

.programme-majeur {

    position: relative;

    border: 2px solid rgba(212, 175, 55, .35);

    background: #FFFDF7;

}

.programme-majeur::after {

    content: "";

    position: absolute;

    width: 140px;

    height: 140px;

    right: -50px;

    bottom: -50px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

}


/*=========================================================
SECTION EVENEMENTS MAJEURS
=========================================================*/

.programme-grid .programme-majeur h3 {

    color: var(--prog-vert);

}

.programme-grid .programme-majeur .programme-categorie {

    background: rgba(212, 175, 55, .18);

    color: #8A6A00;

}


/*=========================================================
PETITE ANIMATION
=========================================================*/

.mois-card,

.programme-majeur {

    animation: fadeUp .8s ease;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .agenda-mois {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:900px) {

    .agenda-mois {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:600px) {

    .agenda-mois {

        grid-template-columns: 1fr;

    }

}
/*=========================================================
TELECHARGEMENT DU PROGRAMME
=========================================================*/

.download-card {

    width: min(850px, 92%);

    margin: 70px auto;

    padding: 60px;

    text-align: center;

    background: #FFF;

    border-radius: 30px;

    box-shadow: 0 22px 60px rgba(0, 0, 0, .12);

    position: relative;

    overflow: hidden;

}

.download-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 8px;

    background: linear-gradient(90deg,
            var(--prog-vert),
            var(--prog-or));

}

.download-card i {

    font-size: 80px;

    color: #D32F2F;

    margin-bottom: 25px;

}

.download-card h3 {

    color: var(--prog-vert);

    font-size: 34px;

    margin-bottom: 20px;

}

.download-card p {

    color: #666;

    font-size: 18px;

    line-height: 1.9;

    margin-bottom: 35px;

}


/*=========================================================
INFORMATIONS PRATIQUES
=========================================================*/

.info-grid {

    width: min(1400px, 92%);

    margin: 70px auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 35px;

}

.info-card {

    background: #FFF;

    border-radius: 28px;

    padding: 40px;

    text-align: center;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.info-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            var(--prog-vert),
            var(--prog-or));

}

.info-card:hover {

    transform: translateY(-10px);

}

.info-card i {

    width: 90px;

    height: 90px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(46, 125, 50, .10);

    color: var(--prog-vert);

    font-size: 38px;

}

.info-card h3 {

    color: var(--prog-vert);

    margin-bottom: 18px;

    font-size: 26px;

}

.info-card p {

    color: #666;

    line-height: 1.9;

}


/*=========================================================
CALL TO ACTION
=========================================================*/

.don-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: linear-gradient(135deg,
            var(--prog-vert),
            #1B5E20);

}

.don-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -220px;

    top: -220px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

}

.don-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

}

.don-card {

    position: relative;

    z-index: 2;

    width: min(1000px, 92%);

    margin: auto;

    text-align: center;

}

.don-card h2 {

    color: #FFF;

    font-size: 50px;

    margin: 25px 0;

    line-height: 1.3;

}

.don-card p {

    color: #F3F3F3;

    font-size: 19px;

    line-height: 2;

    max-width: 850px;

    margin: auto;

}

.don-card .section-badge {

    background: rgba(255, 255, 255, .12);

    color: #FFF;

}

.don-card .hero-buttons {

    margin-top: 45px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

}

.don-card .btn,

.don-card .btn-or,

.don-card .btn-vert {

    min-width: 220px;

}


/*=========================================================
ANIMATIONS
=========================================================*/

.download-card,

.info-card,

.don-card {

    animation: fadeUp .8s ease;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px) {

    .download-card {

        padding: 40px 25px;

    }

    .download-card h3 {

        font-size: 28px;

    }

    .don-card h2 {

        font-size: 34px;

    }

}

@media(max-width:576px) {

    .don-card .btn,

    .don-card .btn-or,

    .don-card .btn-vert {

        width: 100%;

    }

}