/******** Layout page secondary et third ***************/

/******************************************/
/******** couleur secondary ***************/
/******************************************/
body.color-5 .btn-info {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--verylightsecondary);
}

/********* btn ***********/
body.color-5 .btn-info:hover {
	color: var(--white);
    background-color: var(--secondary);
    border-color: transparent;
}

body.color-5 ol li:before {
	background: var(--lightsecondary);
}

/********* animaux chiffrés animé ***********/
body.color-5 .quantity {
    background: var(--darksecondary);
}

body.color-5 .quantity .counter_item i {
	color: var(--primary);
}

/********* bloc section infopratique module icon content ***********/
body.color-5 .infopratique .ce-icon-content {
   background: var(--darksecondary);
}

/********* module popin ***********/
body.color-5 .blocpopin .overlay {
    background-color: var(--secondary);
    border-radius: 10px;
}

body.color-5 .blocpopin .modal-header .btn-close {
    background-color: var(--secondary) !important;
}

/********* external internal links ***********/
body.color-5 a.external-link, body.color-5 a.internal-link {
	color: var(--secondary);
}

/********* pastille  ***********/
body.color-5 .frame-circle {
    background-color: var(--secondary);
}

/********* navbar ***********/
body.color-5 button.navbar-toggler {
    background-color: var(--darksecondary);
}

body.color-5 li.nav-item {
	border-bottom-color: var(--darksecondary);
}

body.color-5 nav.navbar.navbar.fixed-top {
	background-color: var(--rgbsecondary90);
}

body.color-5 .offcanvas-header {
	background-color: var(--secondary);
}

body.color-5 .navbar-light .navbar-nav .nav-link:hover {
	color: var(--secondary);
}

body.color-5 .navbar-light .navbar-nav .nav-link.active {
	color: var(--secondary);
}

body.color-5 .navbar-light .navbar-nav .nav-link:focus,
body.color-5 .navbar-light .navbar-nav .nav-link:hover {
    color: var(--secondary);
}

body.color-5 .navbar-light .navbar-nav .nav-link {
	color: var(--darksecondary);
}

/********* footer social icon ***********/
body.color-5 footer .socials ul li a {
	color: var(--secondary);
    border: 1px solid var(--secondary);
}

body.color-5 footer .socials ul li a:hover {
    background: var(--secondary);
	color: var(--white);
    border: 1px solid var(--secondary);
}

/********* module download***********/
body.color-5 .file-download__picto {
	color: var(--secondary);
}

body.color-5 .file-downloads ul a:hover {
	color: var(--primary);
}

body.color-5 .file-downloads ul a:hover i {
	color: var(--primary);
}

/******************************************/
/*********** couleur third ****************/
/******************************************/

/********* btn ***********/
body.color-6 .btn-info {
    color: var(--white);
    background-color: var(--third);
    border-color: var(--verylightthird);
}

body.color-6 .btn-info:hover {
	color: var(--white);
    background-color: var(--third);
    border-color: transparent;
}

body.color-6 ol li:before {
	background: var(--lightthird);
}

/********* animaux chiffrés animé ***********/
body.color-6 .quantity {
    background: var(--darkthird);
}

body.color-6 .quantity .counter_item i {
	color: var(--third);
}

/********* bloc section infopratique module icon content ***********/
body.color-6 .infopratique .ce-icon-content {
   background: var(--third);
}

/********* module popin ***********/
body.color-6 .blocpopin .overlay {
    background-color: var(--third);
    border-radius: 10px;
}

body.color-6 .blocpopin .modal-header .btn-close {
    background-color: var(--third) !important;
}

/********* external internal links ***********/
body.color-6 a.external-link, body.color-6 a.internal-link {
	color: var(--third);
}

/********* pastille  ***********/
body.color-6 .frame-circle {
    background-color: var(--third);
}

/********* navbar ***********/
body.color-6 button.navbar-toggler {
    background-color: var(--darkthird);
}

body.color-6 li.nav-item {
	border-bottom-color: var(--darkthird);
}

body.color-6 nav.navbar.navbar.fixed-top {
	background-color: var(--rgbthird90);
}

body.color-6 .offcanvas-header {
	background-color: var(--third);
}

body.color-6 .navbar-light .navbar-nav .nav-link:hover {
	color: var(--third);
}

body.color-6 .navbar-light .navbar-nav .nav-link.active {
	color: var(--third);
}

body.color-6 .navbar-light .navbar-nav .nav-link:focus,
body.color-6 .navbar-light .navbar-nav .nav-link:hover {
    color: var(--third);
}

body.color-6 .navbar-light .navbar-nav .nav-link {
	color: var(--darkthird);
}

/********* footer social icon ***********/
body.color-6 footer .socials ul li a {
	color: var(--third);
	border: 1px solid var(--third);
}

body.color-6 footer .socials ul li a:hover {
    background: var(--third);
	color: var(--white);
    border: 1px solid var(--third);
}

/********* module download***********/
body.color-6 .file-download__picto {
	color: var(--third);
}

body.color-6 .file-downloads ul a:hover {
	color: var(--secondary);
}

body.color-6 .file-downloads ul a:hover i {
	color: var(--secondary);
}


/*breackpoint bootstrap lg */
@media (min-width:992px) {

/*********** couleur secondary ****************/
	body.color-5 .navbar-light .navbar-nav .nav-link.active {
		color: var(--darksecondary);
	}

	body.color-5 .navbar-light .navbar-nav .nav-link:focus,
	body.color-5 .navbar-light .navbar-nav .nav-link:hover {
		color: var(--darksecondary);
	}

	body.color-5 .navbar-light .navbar-nav .nav-item.active .dropdown-menu .nav-item a.nav-link {
		color: var(--darksecondary);
	}

	body.color-5 .navbar-light .navbar-nav .nav-link.active,
	body.color-5 .navbar-light .navbar-nav .nav-item.active .nav-link {
		color: var(--darksecondary);
	}

/*********** couleur third ****************/
	body.color-6 .navbar-light .navbar-nav .nav-link.active {
		color: var(--darkthird);
	}

	body.color-6 .navbar-light .navbar-nav .nav-link:focus,
	body.color-6 .navbar-light .navbar-nav .nav-link:hover {
		color: var(--darkthird);
	}

	body.color-6 .navbar-light .navbar-nav .nav-item.active .dropdown-menu .nav-item a.nav-link {
		color: var(--darkthird);
	}

	body.color-6 .navbar-light .navbar-nav .nav-link.active,
	body.color-6 .navbar-light .navbar-nav .nav-item.active .nav-link {
		color: var(--darkthird);
	}

/*********** les 2 couleurs ****************/
	body.color-5 .navbar-light .navbar-nav .nav-link,
	body.color-6 .navbar-light .navbar-nav .nav-link {
		color: var(--white);
	}

	body.color-5 .navbar-light .navbar-nav .nav-item.active .nav-link.show,
	body.color-6 .navbar-light .navbar-nav .nav-item.active .nav-link.show {
		color: var(--white);
	}

}