/* ==================================================
   BFP DESIGN SYSTEM GLOBAL THEME
   Plateforme Nationale de Signalement
   Brigade Féminine de Police
================================================== */


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

:root{

    --bfp-dark:#071a33;

    --bfp-blue:#102a43;

    --bfp-light:#21445a;


    --gold:#d4af37;

    --gold-light:#ffdf75;


    --primary:#0d6efd;

    --success:#198754;


    --white:#ffffff;

    --glass:
    rgba(255,255,255,.08);

}


.dropdown{

position:relative;

}

.dropdown-menu{

z-index:3000;

margin-top:12px;

}


.nav-link.active::after{

pointer-events:none;

}


/* ==================================================
   RESET GLOBAL
================================================== */


*{

    box-sizing:border-box;

}



html,
body{

    min-height:100%;

}

body{
min-height:100vh;
}



body{

margin:0;

min-height:100vh;

font-family:
'Segoe UI',
Tahoma,
Geneva,
Verdana,
sans-serif;


background:

linear-gradient(
135deg,
var(--bfp-dark),
var(--bfp-blue),
var(--bfp-light)
);


color:white;


display:flex;

flex-direction:column;

overflow-x:hidden;

}





/* ==================================================
   LOGO WATERMARK CENTRAL
================================================== */


body::before{

content:"";

position:fixed;

top:50%;

left:50%;


width:45vw;

height:45vw;


max-width:600px;

max-height:600px;



background:

url('../images/logo.png')

center/contain

no-repeat;


opacity:.20;


transform:
translate(-50%,-50%);


z-index:0;


}


.container,
nav,
footer,
section,
main{

position:relative;

z-index:1;

}


/* ==================================================
   BACKGROUND BUBBLES
================================================== */


.background-bubbles{


    position:fixed;


    inset:0;


    overflow:hidden;


    z-index:-2;


}



.background-bubbles span{


    position:absolute;


    bottom:-100px;


    background:

    rgba(255,255,255,.15);



    border-radius:50%;



    animation:

    bubbleMove

    25s

    linear

    infinite;


}




@keyframes bubbleMove{


from{


    transform:
    translateY(0);


    opacity:.8;

}


to{


    transform:
    translateY(-1200px);


    opacity:0;

}


}






/* ==================================================
   NAVBAR PREMIUM BFP
================================================== */

.navbar{

background:

rgba(7,26,51,.88)!important;


backdrop-filter:

blur(15px);


border-bottom:

2px solid var(--gold);


box-shadow:

0 10px 30px rgba(0,0,0,.35);


padding:

12px 20px;


z-index:2000;

}



.navbar-brand{


    color:

    var(--gold-light)!important;


    font-weight:900;


}



.navbar-brand img{

width:60px;

height:60px;

object-fit:contain;

filter:
drop-shadow(
0 0 10px rgba(212,175,55,.6)
);

}



.navbar-brand img{

    width:60px;
    height:60px;
    object-fit:contain;

    filter:
    drop-shadow(
    0 0 10px rgba(212,175,55,.6)
    );

    transition:transform .3s ease;
}


.navbar-brand:hover img{

    transform:scale(1.05) rotate(3deg);

}


.navbar-brand span{

    font-size:1rem;
    line-height:1.3;
    white-space:nowrap;

}


.navbar-brand small{

    font-size:.75rem;

}



.nav-link{


    color:white!important;


    font-weight:600;


    margin:0 8px;


    transition:.3s;


}



.nav-link:hover{


    color:

    var(--gold)!important;



    transform:

    translateY(-2px);


}



.nav-link.active{


    color:

    var(--gold-light)!important;


    font-weight:800;


}





/* ==================================================
   DROPDOWN
================================================== */


.dropdown-menu{


    background:

    rgba(10,15,25,.95);


    backdrop-filter:

    blur(15px);



    border:

    1px solid var(--gold);



    border-radius:15px;


}




.dropdown-item{


    color:white;


    padding:12px 18px;


    transition:.3s;


}



.dropdown-item:hover{


    background:

    var(--gold);


    color:#111;


}




/* ==================================================
   BOUTON APPLICATION ANDROID
================================================== */


.btn-download{


    background:

    linear-gradient(
        135deg,
        #198754,
        #0dcaf0
    );



    border:none;


    color:white;


    font-weight:700;



    border-radius:50px;



    padding:

    10px 22px;



    transition:.3s;


}




.btn-download:hover{


    transform:

    translateY(-3px)

    scale(1.03);



    color:white;


}





.btn-pulse{


    animation:

    btnPulse 2s infinite;


}




@keyframes btnPulse{


50%{


transform:scale(1.05);


}


}






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


/* =====================================================
   FOOTER PREMIUM IDENTIQUE A_PROPOS
===================================================== */

.footer-premium {


background:

linear-gradient(
135deg,
rgba(0,0,0,.85),
rgba(20,20,20,.95)
);



border-top:

3px solid #ffc107;



padding:

40px 20px 20px;



margin-top:auto;



box-shadow:

0 -10px 30px rgba(0,0,0,.4);



position:relative;

z-index:10;


}



.footer-title {


color:#ffc107;


font-weight:800;


font-size:1.2rem;


margin-bottom:15px;


}



.footer-text {


color:#ddd;


font-size:.9rem;


line-height:1.7;


}



.footer-link {


color:#ddd;


text-decoration:none;


display:block;


margin-bottom:8px;


transition:.3s ease;


}



.footer-link:hover {


color:#ffc107;


padding-left:5px;


}




.footer-social a {


display:inline-flex;


align-items:center;


justify-content:center;


width:40px;


height:40px;


border-radius:50%;


background:

rgba(255,193,7,.15);



color:#ffc107;


margin:5px;


transition:.3s ease;


}



.footer-social a:hover {


background:#ffc107;


color:#111;


transform:

translateY(-5px);


}




.footer-bottom {


border-top:

1px solid rgba(255,255,255,.15);


margin-top:30px;


padding-top:15px;


font-size:.85rem;


color:#aaa;


text-align:center;


}







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


@media(max-width:768px){


    .navbar-brand img{


        width:45px;

        height:45px;


    }


    .btn-download{


        width:100%;


        margin-top:15px;


    }



    body::before{


        width:300px;

        height:300px;


    }


}



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


.about-card{


background:

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



backdrop-filter:

blur(8px);



border-radius:20px;



padding:35px;



color:#f8f9fa;



border:

1px solid rgba(255,221,87,.3);



box-shadow:

0 10px 30px rgba(0,0,0,.5);



}



.about-card h2{


color:

var(--gold-light);



font-weight:800;



text-shadow:

0 0 10px rgba(255,221,87,.4);


}