/* ==========================================================
   CONTACT - DIGIETATFIN
========================================================== */

:root{

    --primary:#4897A8;
    --primary-dark:#3d8291;
    --light:#f8f9fa;
    --dark:#2c3e50;
    --text:#6c757d;
    --border:#e9ecef;
    --radius:15px;
    --transition:.3s ease;

}

/* ==========================================================
   GENERAL
========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    background:#fff;

    color:var(--dark);

}

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

.contact-hero{

    background:linear-gradient(135deg,#4897A8 0%,#5ba9b8 100%);

    color:#fff;

    padding:80px 0;

}

.contact-hero h1{

    line-height:1.2;

}

.contact-hero .lead{

    opacity:.95;

}

.contact-hero .badge{

    font-size:.9rem;

}

.contact-hero .btn{

    border-radius:50px;

    padding:12px 30px;

    transition:var(--transition);

}

.contact-hero .btn:hover{

    transform:translateY(-3px);

}

/* ==========================================================
   CARDS
========================================================== */

.card{

    border:none;

    border-radius:var(--radius);

    transition:var(--transition);

    overflow:hidden;

}

.card:hover{

    transform:translateY(-6px);

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

}

.card-header{

    background:#fff;

    border-bottom:1px solid var(--border);

}

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

.form-label{

    font-weight:600;

    color:var(--dark);

}

.form-control,

.form-select{

    border-radius:10px;

    border:1px solid #dfe3e6;

    padding:12px 15px;

    transition:var(--transition);

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(72,151,168,.20);

}

textarea{

    resize:vertical;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    border-radius:50px;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline-primary{

    color:var(--primary);

    border-color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-outline-success:hover,

.btn-outline-warning:hover,

.btn-outline-light:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   ICONES
========================================================== */

.display-4 i,

.display-5 i{

    transition:var(--transition);

}

.card:hover .display-4 i,

.card:hover .display-5 i{

    transform:scale(1.10);

}

/* ==========================================================
   CONTACT INFO
========================================================== */

.contact-info i{

    color:var(--primary);

}

.contact-info h6{

    margin-top:10px;

    font-weight:600;

}

.contact-info p{

    color:var(--text);

}

/* ==========================================================
   ALERTES
========================================================== */

.alert{

    border:none;

    border-radius:12px;

}

.alert-success{

    background:#e8f8ee;

    color:#157347;

}

.alert-danger{

    background:#fdeaea;

    color:#842029;

}

/* ==========================================================
   CTA
========================================================== */

.contact-cta{

    background:linear-gradient(135deg,#4897A8,#5ba9b8);

    color:#fff;

}

.contact-cta .btn{

    border-radius:50px;

    padding:14px 32px;

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    border-radius:30px;

    padding:.6rem 1rem;

}

/* ==========================================================
   FAQ
========================================================== */

.accordion-item{

    border:none;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.accordion-button{

    font-weight:600;

}

.accordion-button:not(.collapsed){

    background:rgba(72,151,168,.10);

    color:var(--primary);

}

/* ==========================================================
   LISTES
========================================================== */

ul{

    padding-left:20px;

}

li{

    margin-bottom:8px;

}

/* ==========================================================
   SECTIONS
========================================================== */

section{

    scroll-margin-top:90px;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.contact-hero,

.card,

.contact-cta{

    animation:fadeUp .6s ease;

}

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

@media (max-width:991px){

    .contact-hero{

        text-align:center;

        padding:60px 0;

    }

    .contact-hero h1{

        font-size:2.5rem;

    }

    .contact-hero i{

        margin-top:40px;

        font-size:6rem !important;

    }

}

@media (max-width:768px){

    .contact-hero h1{

        font-size:2rem;

    }

    .btn-lg{

        width:100%;

        margin-bottom:10px;

    }

    .contact-cta .btn{

        width:100%;

        margin-bottom:10px;

    }

}