/* =====================================
   STYLE GLOBAL
===================================== */

:root{
    --primary:#264370;
    --primary-light:#35588f;
    --secondary:#f5f7fa;
    --white:#ffffff;
    --text:#333333;
    --shadow:0 10px 25px rgba(0,0,0,0.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",sans-serif;
    background:var(--secondary);
    color:var(--text);
    line-height:1.6;
}

/* =====================================
   NAVBAR
===================================== */

.navbar{
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.navbar-brand{
    font-weight:700;
    color:var(--primary) !important;
}

.navbar-brand img{
    max-height:70px;
}

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

.hero{
    padding:80px 0;
}

.hero h1{
    color:var(--primary);
    font-size:3rem;
    font-weight:700;
    margin-bottom:20px;
}

.hero p{
    color:#666;
    font-size:1.2rem;
}

.energy-card{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:var(--shadow);
}

/* =====================================
   BENEFICES
===================================== */

.benefits{
    padding:80px 0;
}

.benefit-card{
    background:white;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,0.06);
    height:100%;
    transition:.3s;
}

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

.benefit-card h4{
    color:var(--primary);
}

/* =====================================
   PAGE INSCRIPTION
===================================== */

.main-container{
    max-width:1100px;
    margin:auto;
    padding:40px 15px;
}

.page-header{
    background:rgba(38,67,112,0.92);
    color:white;
    border-radius:20px;
    padding:40px;
    margin-bottom:30px;
    text-align:center;
    box-shadow:var(--shadow);
}

.page-header h1{
    margin-bottom:10px;
    font-weight:700;
}

.page-header p{
    margin-bottom:0;
}

/* =====================================
   CARD
===================================== */

.card{
    border:none;
    border-radius:18px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
    margin-bottom:30px;
}

.card-header{
    background:var(--primary) !important;
    color:white !important;
    padding:18px 25px;
    font-size:18px;
    font-weight:600;
    border-radius:18px 18px 0 0 !important;
}

.card-body{
    padding:30px;
}

/* =====================================
   FORMULAIRE
===================================== */

label{
    font-weight:600;
    margin-bottom:8px;
}

.form-control,
.form-select{
    border-radius:10px;
    margin-bottom:15px;
    border:1px solid #d7dbe3;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 .2rem rgba(38,67,112,.15);
}

/* =====================================
   PAIEMENT
===================================== */

.alert-info{
    border:none;
    border-left:5px solid var(--primary);
}

.alert-warning{
    border:none;
    border-left:5px solid #ffc107;
}

/* =====================================
   SIGNATURE
===================================== */

.signature-canvas{
    width:100%;
    height:220px;
    background:white;
    border:2px dashed var(--primary);
    border-radius:12px;
}

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

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

.btn-primary:hover{
    background:#1e3559;
    border-color:#1e3559;
}

.btn-outline-primary{
    color:var(--primary);
    border-color:var(--primary);
}

.btn-outline-primary:hover{
    background:var(--primary);
    color:white;
}

.btn-submit{
    padding:15px 40px;
    font-size:18px;
}

/* =====================================
   TABLEAU BANCAIRE
===================================== */

.bank-info{
    background:white;
    border-radius:10px;
    overflow:hidden;
}

.bank-info table{
    margin-bottom:0;
}

.bank-info th{
    width:35%;
    background:#f8f9fa;
}

/* =====================================
   FOOTER
===================================== */

footer{
    margin-top:60px;
    background:var(--primary);
    color:white;
    text-align:center;
    padding:25px;
}

footer p{
    margin-bottom:5px;
}

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

@media(max-width:992px){

    .hero{
        text-align:center;
    }

    .hero h1{
        font-size:2.4rem;
    }

}

@media(max-width:768px){

    .hero{
        padding:50px 0;
    }

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

    .page-header{
        padding:25px;
    }

    .card-body{
        padding:20px;
    }

    .signature-canvas{
        height:180px;
    }

}