/* ==========================================================================
   PAGE PRÉSENTATION - COHÉRENCE MAQUETTE EDEN ALSACE
   ========================================================================== */

/* Conteneur parent pour isoler les polices par défaut et forcer le box-sizing */
.page-presentation-global {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #fcfbfa;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page-presentation-global *,
.page-presentation-global *::before,
.page-presentation-global *::after {
    box-sizing: border-box;
}

/* Utilitaires de mise en page */
.pres-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.pres-tag {
    display: inline-block;
    color: #8da84e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

/* ======================================
   SECTION 1 : HERO BANNER (NOIR EN-TÊTE)
====================================== */
.pres-hero-banner {
    background-color: #0b0c08;
    /* 160px de padding haut pour laisser passer le menu fixe sans superposition */
    padding: 160px 24px 90px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pres-hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.pres-subtitle {
    display: block;
    color: #8da84e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.pres-hero-banner h1 {
    font-family: 'Cinzel', serif;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 500;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.pres-hero-banner p {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* ======================================
   SECTION 2 : QUI SOMMES-NOUS ?
====================================== */
.pres-about-section {
    padding: 100px 0;
    background-color: #fcfbfa;
}

/* Layout en colonnes (simulation flex sans flex brut pour éviter les bugs) */
.pres-flex-layout {
    display: table;
    width: 100%;
}

.pres-text-block {
    display: table-cell;
    width: 55%;
    vertical-align: middle;
    padding-right: 60px;
    text-align: left;
}

.pres-image-block {
    display: table-cell;
    width: 45%;
    vertical-align: middle;
}

.pres-text-block h2 {
    font-family: 'Cinzel', serif;
    color: #1a1b15;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.pres-text-block p {
    color: #555555;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.pres-text-block p:last-child {
    margin-bottom: 0;
}

.pres-image-block img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

/* ======================================
   SECTION 3 : NOS ENGAGEMENTS (GRID CHIC)
====================================== */
.pres-engagements-section {
    padding: 100px 0;
    background-color: #ffffff;
    border-top: 1px solid #eae8e5;
    border-bottom: 1px solid #eae8e5;
}

.pres-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.pres-section-title h2 {
    font-family: 'Cinzel', serif;
    color: #1a1b15;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

/* Grille CSS standard pour les cartes d'engagements */
.pres-grid-engagements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.pres-card {
    background: #fcfbfa;
    border: 1px solid #eae8e5;
    padding: 35px 25px;
    border-radius: 6px;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.pres-card:hover {
    transform: translateY(-4px);
    border-color: #8da84e;
}

.pres-card-icon {
    font-size: 24px;
    font-weight: 700;
    color: rgba(141, 168, 78, 0.3); /* Vert Eden en filigrane */
    font-family: 'Cinzel', serif;
    margin-bottom: 15px;
}

.pres-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1a1b15;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.pres-card p {
    color: #666666;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

/* ======================================
   SECTION 4 : BANNIÈRE D'APPEL À L'ACTION
====================================== */
.pres-cta-section {
    padding: 90px 24px;
    background-color: #12140e; /* Vert/noir profond identique au pré-footer */
    text-align: center;
    color: #ffffff;
}

.pres-cta-container {
    max-width: 750px;
    margin: 0 auto;
}

.pres-cta-container h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.pres-cta-container p {
    color: #999999;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 35px 0;
}

/* Boutons */
.pres-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.pres-btn-primary, .pres-btn-secondary {
    display: inline-block;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pres-btn-primary {
    background-color: #8da84e;
    color: #ffffff;
}

.pres-btn-primary:hover {
    background-color: #79943f;
}

.pres-btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pres-btn-secondary:hover {
    border-color: #8da84e;
    color: #8da84e;
}

/* ======================================
   RESPONSIVE DESIGN
====================================== */
@media (max-width: 1024px) {
    .pres-grid-engagements {
        grid-template-columns: repeat(2, 1fr);
    }
    .pres-hero-banner h1 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .pres-flex-layout, .pres-text-block, .pres-image-block {
        display: block;
        width: 100%;
    }
    .pres-text-block {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .pres-grid-engagements {
        grid-template-columns: 1fr;
    }
    .pres-cta-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .pres-btn-primary, .pres-btn-secondary {
        width: 100%;
    }
    .pres-hero-banner {
        padding: 130px 24px 60px 24px;
    }
}