@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Light.ttf);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Medium.ttf);
    font-weight: 500;
    font-style: normal;
}

/* Général */
body {
    background-color: #D2D5D9;
    height: 100%;
    font-family: "Roboto", Arial, sans-serif;
}

a {
    color: #313131;
    text-decoration: none;
}
a:hover, a:focus {
    color: #891769;
}
a:active {
    color: #fff;
    background-color: #891769;
}
nav{
    height:80px;
    padding:10px;
    background-color: #F9F9F9;
    font-family: 'roboto';
    color:#313131;
    border-bottom:1px solid #ccc;
}   
/*
nav, .navbar {
    background-color: #F9F9F9;
    color: #313131;
}
*/

.navbar-center {
    float: none !important;
    display: table !important;
    margin: 0 auto !important;
}
/* Mobile toggle */
.navbar-toggle {
    float: left;
}

/* Active menu item (ouvert) */
.navbar-collapse.in .navbar-nav > .active > a,
.navbar-collapse.in .navbar-nav > .active > a:hover {
    background-color: #891769;
    color: #FFF;
    border: none;
}

/* Logo */
.logo img, .nav > li > img {
    max-width: 150px;
    padding: 20px 10px 0 0;
}

/* Bouton Connexion */


.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #891769;
    color: #fff;
}

/* Apparence des éléments du menu déroulant */
.dropdown-menu > li > a {
    color: #313131;
    padding: 10px 20px;
    font-weight: normal;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

/* Effet hover sur les éléments non actifs */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #f1e6f0; /* Violet très clair */
    color: #891769;
}

/* Apparence des éléments actifs */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #891769;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}
/* Correction dropdown ouvert */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: #891769;
    color: #fff;
    border-color: #891769;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 992px) {
    .logo img, .nav > li > img {
        max-width: 100px;
        margin-top: 5px;
    }
    .btn-connexion {
        font-size: 0.9em;
        padding: 12px;

    }
}

/* ça c'est bon */
        
         



                     
.nav-pills {
    background-color: #F9F9F9;
    font-family: 'roboto';
    color:#313131;
}

.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus {
    color:white;
    background-color:#891769;                
}
                      
.nav-pills .dropdown-toggle{
    float:left;
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{
    background:#891769;
}

.title{
    font-size:2em;
    font-weight: 500;
}
             
.logo {
    max-width:100px;
    padding:0 10px 0 0;
}     
.claim {              
    padding:0 0 17px 30px;
    margin:0;
}
.btn-connexion{
    background-color:#9abd00;
    border-radius:30px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff!important;
    font-family:Arial;
    text-transform:uppercase;
    font-size:1.2em;
    font-weight:800;
    padding:10px 20px!important;
    text-decoration:none;
}
.btn-connexion:hover,.btn-connexion:focus {
    background-color:#891769;
    text-decoration:none;            	
}

@media (max-width: 992px) { 
    .title{
        font-size:1.1em;
    }
    .logo {
        max-width:80px;
    } 
    .claim {              
        font-size:.8em;
    }
    .btn-connexion {
        font-size:.9em;
        padding:5px 10px!important;
    }                      
} 
@media (max-width: 767px) { 

    .logo {
        max-width:60px;
    }                   
}