/* ======================================================
   IDEOLOGIE PREMIUM FINAL
====================================================== */

.ideologie-hero{
    min-height: 55vh;
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.75)),
        linear-gradient(135deg, #0f3d2e, #0f172a);
    display:flex;
    justify-content:center;
    align-items:center;
    border-bottom: 5px solid #16a34a;
}

.ideologie-hero h1{
    font-weight:800;
    letter-spacing:1px;
    text-shadow:0 4px 15px rgba(0,0,0,.4);
}

.ideologie-hero p{
    max-width:850px;
    margin:auto;
    color:#f8fafc;
}

/* INTRO */
.intro-card{
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-left: 5px solid #16a34a;
}

/* CARDS */
.ideology-card{
    border-radius:20px;
    overflow:hidden;
    transition:.4s ease;
    background:#fff;
}

.ideology-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15)!important;
}

/* HEADERS */
.principe-header{
    background: linear-gradient(135deg, #15803d, #166534);
    color:white;
    padding:20px;
}

.systeme-header{
    background: linear-gradient(135deg, #0f766e, #155e75);
    color:white;
    padding:20px;
}

.methodologie-header{
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
    color:white;
    padding:20px;
}

.card-header h2{
    margin:0;
    font-weight:700;
    letter-spacing:1px;
}

/* LISTES */
.ideology-list{
    list-style:none;
    padding-left:0;
    margin:0;
}

.ideology-list li{
    padding:14px 0;
    border-bottom:1px solid #e2e8f0;
    color:#334155;
    font-weight:500;
    line-height:1.6;
}

.ideology-list li:last-child{
    border-bottom:none;
}

/* CONCLUSION */
.conclusion-card{
    background:
        linear-gradient(135deg, #0f172a, #14532d);
    color:white;
}

.conclusion-card p{
    color:#f1f5f9;
}

/* RESPONSIVE */
@media(max-width:768px){

    .ideologie-hero{
        min-height:45vh;
        padding:40px 20px;
    }

    .ideologie-hero h1{
        font-size:2rem;
    }

}

/* =====================================================
   PRINCIPE PREMIUM FINAL
===================================================== */

.principe-hero{
    min-height: 50vh;

    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.75)),
        linear-gradient(135deg, #14532d, #0f172a);

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

    border-bottom:5px solid #16a34a;
}

.principe-hero h1{
    font-weight:800;
    letter-spacing:2px;
    text-shadow:0 5px 20px rgba(0,0,0,.4);
}

.principe-hero p{
    max-width:800px;
    margin:auto;
    color:#f8fafc;
}

/* INTRO */
.principe-intro{
    background:
        linear-gradient(135deg, #ffffff, #f8fafc);
    border-left:5px solid #16a34a;
}

/* MENU */
.side-principe{
    background:#ffffff;
}

.principe-menu-header{
    background:
        linear-gradient(135deg, #166534, #14532d);
    color:white;
    padding:25px;
}

.chapter-item{
    margin-bottom:20px;
}

.chapter-link{
    display:block;
    text-decoration:none;
    padding:20px;
    border-radius:16px;
    background:#f8fafc;
    transition:.35s ease;
    border:1px solid #e2e8f0;
}

.chapter-link:hover{
    background:
        linear-gradient(135deg, #14532d, #166534);

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.chapter-link:hover h5,
.chapter-link:hover .chapter-number{
    color:white;
}

.chapter-number{
    display:block;
    font-size:.85rem;
    font-weight:700;
    color:#16a34a;
    margin-bottom:10px;
    letter-spacing:1px;
}

.chapter-link h5{
    color:#1e293b;
    font-weight:600;
    line-height:1.5;
    margin:0;
}

/* MAIN */
.principe-main{
    background:white;
}

.principe-title{
    color:#166534;
    letter-spacing:1px;
}

.principe-image-wrapper{
    padding:20px;
}

.principe-image{
    max-width:420px;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    transition:.4s ease;
}

.principe-image:hover{
    transform:scale(1.02);
}

.principe-text{
    color:#475569;
    line-height:2;
    font-size:1.1rem;
}

/* RESPONSIVE */
@media(max-width:768px){

    .principe-hero{
        min-height:40vh;
        padding:40px 20px;
    }

    .principe-hero h1{
        font-size:2.3rem;
    }

    .principe-image{
        max-width:100%;
    }

}