:root {
  --couleur-pale: #fafafa;
  --couleur-pale-hover: #e1e1e1;
    
  --couleur-fonce: #212221;
  --couleur-fonce-hover: #4D4E4D;
  
  --couleur-accent: #84B557;
  --couleur-accent-hover: #77A24E;

  --couleur-accent-alt: #6A9045;
  --couleur-accent-alt-hover: #5D7E3C;

  --couleur-shadow: rgba(0, 0, 0, .3);


} 

/********************/
/*    Général    ****/
/********************/

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;  
  color: var(--couleur-fonce);
  background-color:var(--couleur-pale);
  font: 500 1.2em/1.2 'Roboto', sans-serif;
}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}


h2 {	
	color: var(--couleur-accent);
	font-weight: bold;
}

h3 {	
	text-align: center;
	font-weight: bold;
    padding-top : 2rem;
    padding-bottom : 1rem;
    
}

h4 {
    padding-top : 2rem;
	text-align: left;
	font-weight: bold;
}

.ba-cadre {
  margin: 0 auto;
  border: 5px solid var(--couleur-accent);
  background-color: var(--couleur-pale);
  box-shadow: 0 0 20px var(--couleur-shadow);
  /*user-select: none;*/
  border-radius: 25px;
  overflow:hidden;
  margin-top : 1rem;
  margin-bottom : 1rem;
}

.ba-cadre h1 {
  margin: 0;
  padding: 20px;
  background-color: var(--couleur-fonce);
  font-size: 1.8em;
  text-align: center;
  color: var(--couleur-accent);
  
}

.ba-cadre .items {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.ba-cadre .items .link {
  display: block;
  position: relative;
  padding: 10px 10px 10px 10px;
  border-top: 1px dashed var(--couleur-accent);
  order: 4;
  cursor: pointer;
  animation: undone .5s;
  color: var(--couleur-fonce);
}

.ba-cadre .items .label {
  display: block;
  position: relative;
  padding: 10px 10px 10px 10px;
  /*border-top: 1px dashed var(--couleur-accent);*/
  order: 4;
  /*cursor: pointer;*/
  /*animation: undone .5s;/*
  
  */
  color: var(--couleur-fonce);
  background-color: var(--couleur-accent);
}

.ba-cadre .items .link:hover {
  background-color: var(--couleur-pale-hover);
  text-decoration: none;
  color: var(--couleur-fonce);
}

.form-control:focus {
  border-color: var(--couleur-accent);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
  box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
} 

.btn-primary {
	background-color: var(--couleur-fonce);
	color: var(--couleur-accent);
	border: 0px;
}

.btn-primary:hover {
	background-color: var(--couleur-fonce-hover);
	color: var(--couleur-accent);
	border: 0px; 
}

.btn-primary:active {
    border-color: var(--couleur-fonce-hover)!important;
    background-color:var(--couleur-fonce-hover)!important;
} 

.btn-primary:focus {
  border-color: var(--couleur-accent);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
  box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
} 

.tooltip {
    pointer-events: none;
}
.tooltip > .tooltip-inner {
    background-color: var(--couleur-fonce);
    color: var(--couleur-accent);
}

.ba-container {
	  padding-top: 3rem;
}


.ba-navbar {
	color: var(--couleur-pale);
	background-color: var(--couleur-fonce)!important;
}

.ba-navbar-btn {
	background-color: var(--couleur-accent);
	color: var(--couleur-fonce);
	border: 0px;
	margin-left: 5px;
}

.ba-navbar-btn:hover {
    text-decoration:none;
    background-color : var(--couleur-accent-hover);
}

.ba-navbar-btn:active {
    text-decoration:none;
    border-color: var(--couleur-accent-hover)!important;
    background-color : var(--couleur-accent-hover)!important;
}

.ba-navbar-btn:focus {
  border-color: var(--couleur-accent);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
  box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
} 


.ba-navbar-text {
    color: var(--couleur-pale)!important;
}
.ba-navbar-link {
    color: var(--couleur-pale)!important;
}

.ba-navbar-link:hover {
    color: var(--couleur-accent)!important;
}


.ba-icon-button {
    text-decoration:none;
    color : var(--couleur-fonce);
}

.ba-icon-button:hover {
    text-decoration:none;
    color : var(--couleur-fonce-hover);
}


.ba-icon-flip:before {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.pagination a{
    color: var(--couleur-pale);
    background-color: var(--couleur-fonce);
    border:0;
    outline: 0;
    
}

.pagination a:hover {
    background-color: var(--couleur-fonce-hover);
	color: var(--couleur-accent);
	border:0;
}

.pagination a:focus {
    -webkit-box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
    box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
}

.pagination>li.active>a {
    color: var(--couleur-fonce)!important;
    background-color: var(--couleur-accent)!important;
    border:0;
}

.pagination>li.active>a:focus {

    -webkit-box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
    box-shadow: inset 0 1px 1px var(--couleur-accent),0 0 8px var(--couleur-accent)!important;
}

.pagination>li.active>a:hover {
    background-color: var(--couleur-fonce-hover)!important;
	color: var(--couleur-accent)!important;
	border:0;
}

.pagination>li.disabled>a {
    color: var(--couleur-fonce)!important;
    background-color: var(--couleur-fonce-hover)!important;
    border:0;
}