body {
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

.btn-success {
	background-color: rgba(139, 86, 191, 1);
	transition:       background-color .5s ease-in-out;
	border:           0
	}

.btn-success:hover {
	background-color: black;
	border:           0
	}

#wrapper {
	padding-top: 100px;
	}

.video {
	width: 100%;
	aspect-ratio: 16/9;
	margin: 2vh auto;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	body {
		overflow-x: hidden;
		width: 100vw;
		}
	
	}

/* NAVIGATION PRINCIPALE
************************************************************************************************************************/

#main-nav {
	background-color: rgba(139, 86, 191, 1);

	padding:          0;
	color:            rgba(255, 255, 255, .5);
	display:          flex;
	justify-content:  space-between;
	position:         fixed;
	width:            100vw;
	z-index:          1000;
	transition: 1s ease box-shadow;
	}

#main-nav.shadow {
	box-shadow: 0 4px 18px rgba(0,0,0,.6);
	}

#main-nav #logo {
	flex:                0 0 25%;
	max-width:           25%;
	display:             block;
	/*width: 25vw;*/
	background:          url(../img/logo-palliactif.png) no-repeat rgba(139, 86, 191, 1);
	background-size:     contain;
	background-position: center center;
	height:              100px;
	margin:              0;
	padding:             0;
	}

#main-nav ul {
		 list-style: none;
		 padding:    0 1em;
		 margin:     0;
		 height:     100px;
		 display:    flex;
			
		 }

#main-nav li {
	font-size:       1.3vmax;
	align-self:      center;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding:         0 .7em;
	}


#main-nav .active, input.active {
	background-color: rgba(139, 86, 191, 1);
	color:            white;
	border-radius:0;
	border:0;
	font-weight:      900;
	}

#main-nav .active a {
	color:         white;
	border-bottom: 3px solid white
	}




#main-nav a {
	color:      rgba(255, 255, 255, .5);
	transition: .5s ease color;
	}

#main-nav a:hover {
	color:           white;
	text-decoration: none;
	}

#menu-button {
	display: none;
	}
#sub-nav a.inactive {
	color:silver
}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	
	#menu-button {
		position:  absolute;
		font-size: 6vw;
		padding:   .5em;
		margin:    0;
		width:     10vw;
		top:       0vh;
		right:     10px;
		z-index:   900000;
		display:   block;
		}
	
	#main-nav #logo {
		width:     100vw;
		max-width: 100vw;
		flex:      1 1 100%
		}
	
	#menu-button:before {


		content:     "\f0c9";
;		font-family: "Font Awesome 5\ Free";
		font-weight: 900;
		color:       white;
		}
	
	.nav #menu-button:before {

		content:     "\f00d";
	;		font-family: "Font Awesome 5\ Free";
		font-weight: 900;
		color:       white;
		}
	
	#wrapper {
		padding-top: 0;
		}
	
	#main-nav {
		position: inherit;
		}
	
	#main-nav ul {
		display: none;
		}
	
	.nav {
		overflow: hidden;
		}
	
	.nav #main-nav {
		display: block;
		/*position: fixed;*/
		/*top:0;*/
		/*left:0;*/
		/*width: 100vw;*/
		/*height: 100vh;*/
		/*z-index: 2000;*/
		}
	
	.nav #main-nav ul {
		background-color:        rgba(139, 86, 191, .8);
		-webkit-backdrop-filter: blur(20px);
		position:                fixed;
		top:                     0;
		left:                    0;
		width:                   100vw;
		height:                  100vh;
		z-index:                 2000;
		display:                 block;
		padding:                 0;
		margin:                  0;
		display:                 flex;
		flex-direction:          column;
		justify-content:         center;
		}
	
	.nav #main-nav li {
		
		height:     10vh;
		display:    block;
		align-self: auto;
		}
	
	.nav #main-nav li a {
		display:         flex;
		flex-direction:  column;
		text-align:      center;
		width:           100%;
		height:          100%;
		justify-content: center;
		font-size:       8vw;
		
		}
	
	#main-nav .active {
		background-color: transparent;
		}
	
	#main-nav .active a {
		border-bottom: 0;
		text-decoration: underline;
		}
		
	}


/* NAVIGATION LATERALE
************************************************************************************************************************/

#sub-nav {
	min-height:       100vh;
	/*background-color: rgba(139, 86, 191, 0.25);*/
	background-color: #f9f9f9;
	display:          flex;
	flex-direction:   column;
	padding:          1vw;
	}

#sub-nav a {
	color: black;
	/*display: flex;*/
	}


#sub-nav h4, #sub-nav h5 {
	/*margin: 0;*/
	/*text-align: center;*/
	/*color:white*/
	}

#sub-nav h5 {
	margin-bottom: 2em;
	font-size:     1vw;
	}

p.inactive {
	display: block;
	padding: .5rem 1rem;
	color:rgba(0,0,0,.3)
}

#sub-nav a.nav-link {
	padding: .3rem 1rem;
}

#sub-nav a.nav-link.active {
	color:            white;
	font-weight:      900;
	background-color: rgba(139, 86, 191, 1);
	color:            white;
	/*width: 24.2vw;*/
	box-shadow:       0 2px 10px rgba(0, 0, 0, .2);
	}


#vivre #sub-nav a.nav-link.active,
#soigner #sub-nav a.nav-link.active,
#aider #sub-nav a.nav-link.active
{
	background-color: rgba(255, 198 ,0, 1);
	color:black;
	}

#sub-nav.page .title h4 {
	color:      white;
	text-align: center;
	margin:     0;
	}

#sub-nav.page .title h5 {
	color:      white;
	text-align: center;
	margin:     0 0 5em 0;
	}

#sub-nav.page .title img {
	width: 50%;
	margin: 2vh 25%;
}

#btn-filter {
	display: none;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
		 #sub-nav {
		height:    auto;
		min-height: 0;
		}
	
	#sub-nav.page {
		min-height: 0;
		}
	
	
	#sub-nav.page .title {
		display: flex
		}
	
	#sub-nav.page .title img {
		width: 20vw;
		padding-right: .5em;
		margin: 0;
		}
	
	#sub-nav.page .title h4 {
		font-size: 18px;
		text-align: left;
		}
	
	#sub-nav.page .title h5 {
		font-size: 14px;
		text-align: left;
		margin: 0 0 20px 0;
		}
	
	#sub-nav h5 {
		font-size: 24px;
		}
	
	.filter {
		top:100px;
		left: -80vw;
		position: absolute;
		z-index: 500;
		width: 80vw;
		transition:.5s ease left;
		}
	
	.filter.visible {
		left: 0;
		box-shadow: 0 8px 8px rgba(0,0,0,.5);
		}
	

	
	#btn-filter {
		display: block;
		width: 8vw;
		height:8vw;
		left: calc(80vw);
		position: absolute;
		top:0;
		background-color: black;
		color:white;
		text-align: center;
		padding-top: .2em;
		}
	
	#btn-filter::after {

		content: "\f0b0";
	;		font-family: "Font Awesome 5\ Free";
		font-weight: 900;
		margin: 8px auto 0;
		}
	
	.filter.visible #btn-filter::after {
		font-family: "Font Awesome 5 Free";
		content: "\f00d";
		margin: 8px auto 0;
		}
		
	}

/* STRUCTURE
************************************************************************************************************************/

.row.page {
	width:      100vw;
	min-height: 85vh;
	}

#content {
	padding: 5vh 0 5vh 5vw;
	}

.content {
	flex:      0 0 65%;
	max-width: 65%;
	
	}

.content a:not(.btn){
	color:       rgba(139, 86, 191, 1);
	}


.side-bar {
	flex:      0 0 25%;
	max-width: 25%;
	padding:   3em;
	}

.side-bar a {
	
	font-weight: 700;
	color:       rgba(139, 86, 191, 1);
	}


.side-bar h5.soustitre {
	font-size:   12px;
	color:       grey;
	border-top:  1px dotted grey;
	padding-top: 1em;
	margin-top:  3em;
	}

.side-bar p {
	margin: 0 0 .2em 0;
	}

.content {
	padding: 3em;
	line-height: 1.6em;
	}

.content {
	font-size: 18px;
	max-width: 70rem;
	}

.content > h3 {
	font-size:   3vw;
	line-height: 1.2em;
	}

.content h4 {
	font-size: 2vw;
	}

.content h4 {
	font-size:   2.5vw;
	font-weight: 100;
	margin:      0 0 1em;
	}

.content h6.title {
	color:          rgba(139, 86, 191, 1);
	text-transform: lowercase;
	font-weight:    900;
	font-size:      2rem;
	margin:         2em 0 1em 0;
	
	}


@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	.row.page {
		display:    block;
		min-height: auto;
		}
	
	.side-bar {
		height:     fit-content;
		min-height: 0;
		max-width:  100vw;
		flex:       0 0 100%;
		width:      100vw;
		order:      2;
		padding: 0 1em;
		text-align: center;

		}
	
	.side-bar .img-fluid {
	    max-width: 90vw;
		  margin: 2vh 0 2vh 2vw;
		}
	#content {
		padding: 5vh 1vw;
		
		}
	
	.content {
		flex:      1 1 100%;
		max-width: 100%;
		order:     0;
		padding: 1em 1em 5em 1.4em;
		}
	
	.content > h3 {
		font-size:   24px;
		line-height: 1.2em;
		}
	}

/* TYPO
*************************************************************************************************************************/
.soustitre {
	font-size:      1.3vw;
	text-transform: uppercase;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	.soustitre {
		margin-top: 2em;
		font-size:  18px;
		
		}
	}


/* RAYON ACTION
*************************************************************************************************************************/
#rayon-action {
	width:  20vw;
	height: 20vw;
	}

#rayon-action div {
	width:      100%;
	height:     100%;
	position:   relative;
	margin-top: -20vw;
	
	}

#rayon-action div:first-child {
	margin-top: 0;
	}


#rayon-action-wrapper {
	font-size: 90%;
	}

#rayon-action-wrapper  h6 {
	font-weight: 900;
	margin:      2em 0 .5em 0;
	text-transform: uppercase;
	}


#rayon-action-wrapper li {
	font-weight: 700;
	padding: 0 0 0 .5em;
	margin: 0 0 1em 0;
	list-style: none;
	}



#rayon-action-wrapper li span {
	font-weight: 300;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	#rayon-action {
		width:  80vw;
		height: 80vw;
		margin-bottom:40vw

		}
	
	#rayon-action div {
		margin-top: -80vw;
		}
	}

/* ACCUEIL
************************************************************************************************************************/

#accueil-wrapper {
	width:  80vw;
	margin: auto;
	}

#accueil-video {
	width: 80vw;
	margin: 5vh auto 10vh;
	}

#accueil-video video {
	width: 100%;
	}

#home-button-wrapper {
	/*display: flex;*/
margin: 2vh auto 10vh;
	}

.home-button {
	color:white;
	margin:10px;
	padding: .2em;
	transition: .1s transform ease-in-out;

	width: 13vw;
	height: 8vw;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	}

.home-button .gutter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	}

.home-button h3 {
	margin: 0;
	}

.slide {


	/*display: flex;*/
	/*padding: 0 10px ;*/


	}

.home-button:hover {
	text-decoration: none;
	color:white;
	transform:scale(1.05);
	}

.carrousel {
	height: 50vh;
	}

.carrousel .item {
	display:         flex;
	width:           100%;
	height:          100%;
	color:           #333;
	text-decoration: none;
	}

.carrousel .item > div {
	flex:   0 0 50%;
	width:  50vw;
	height: 50vh;
	
	}

.carrousel .item .text {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         2vw;
	
	}

.carrousel .item .text h3 {
	font-size:   2.5vw;
	font-weight: 900;
	margin:      0;
	}

.carrousel .item .text h4 {
	font-size:   1.75vw;
	font-weight: 200;
	}

/*.carrousel .item .visuel {*/
/*	height: calc(50vw * 0.75);*/
/*	border: 1px dotted red;*/
/*	}*/


#accueil .btn-success {
	float: right;
	}


@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#accueil-video {
		width: 80vw;
		margin: 5vh auto 5vh;
		}
	
	.home-button {
		width: 50vw;
		height: 25vw;
		}
	
	.carrousel {
		margin: 2vh 0;
		}
	
	.carrousel .item {
		flex-direction: column;
		height: 50vh;

		}
	
	.carrousel .item > div {
		flex:   1 1 50%;
		width:  100vw;
		height: fit-content;
		}
	
	.carrousel .item .visuel {
		height: 40vh;
		width:  100%;

		}
	
	.carrousel .item .text {
		/*text-align: center;*/
		flex:   1 1 20%;
		width: 100%;
		}
	.carrousel .item .visuel {
		background-position: center;
		}
	
	.carrousel .item .text h3 {
		font-size:5vw
		}
	
	.carrousel .item .text h4,  .carrousel .item .text h4 strong{
		font-size:3.5vw
		}
	}

#publics-bar {
	width:   100%;
	display: flex;
	/*background-color: rgba(139, 86, 191, .4);*/
	height:           100%
	}

.publics-item {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	flex:            0 0 25%;
	text-align:      center;
	color:           white;
	font-size:       100%;
	font-weight:     100;
	transition:      .2s box-shadow ease-in-out;
	padding:         6em 4em;
	}

.publics-item h3 {
	font-weight:    900;
	width:          auto;
	flex:           0 0 10%;
	vertical-align: bottom;
	
	}

.publics-item h4 {
	flex:      0 0 10%;
	font-size: 1vw
	}

.publics-item:hover {
	text-decoration: none;
	color:           white;
	z-index:         200;
	}

.arrow {
	color: rgba(255, 198 ,0, 1);
	}

.arrow span {
	opacity:    0;
	transition: .2s opacity ease-in-out;
	}

.publics-item:hover .arrow span {
	opacity: 1;
	}

.publics-item.presentation {
	background-color: rgba(255, 198 ,0, 1);
	color:            black;
	}

.publics-item.presentation  {
	display: flex;
	flex-direction: column;
	justify-content: center;

	}

.publics-item .picto {
	height:     15vh;
	width:      15vh;
	margin:     0 auto;
	flex:       1 0 80%;
	-webkit-transition: transform .3s ease-in-out;
	-moz-transition: transform .3s ease-in-out;
	}

.publics-item:hover .picto {
	-webkit-transform: scale(1.2) rotate(-2deg);
	-moz-transform: scale(1.2) rotate(-2deg);
	}

#public-icons {
	padding:    0 1em;
	margin:     0;
	height:     100px;
	display:    flex;
 
	}

.publics-icon {
	width: 2em;
	height: 2em;
	align-self: center;
	}

.publics-icon .picto{
	width: 2em;
	height: 2em;
	filter: grayscale(1);
	opacity: .8;
	}

.publics-icon .picto.active{
	filter: grayscale(0);
	opacity: 1;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#publics-bar {
		flex-wrap: wrap;
		}
	
	.publics-item.presentation {
		flex: 0 0 100%;
		}
	
	.publics-item {
		flex:      1 1 31%;
		padding:   .5em 0;
		font-size: 100%;
		height: 14vh;
		padding: 3vw;
		}
	
	.publics-item .picto {
		height: 10vh;
		width:  10vh;
		border:1px solid transparent;
		}
	
	.publics-item h3 {
		/*padding:   .5em 0;*/
		font-size: 100%;
		}
	
	.publics-item h4 {
		display: none;
		}
	
	#public-icons {
		height: auto;
		margin: 0 auto;
		}
	
	.publics-icon .picto{
		align-self: center;
		}
		
	}

.une {
	padding:    1em 2em;
	margin-top: 5vh;
	}

.une h2 {
	color:          rgba(139, 86, 191, 1);
	text-transform: lowercase;
	font-weight:    900;
	margin: 2em 0 1em;
	}

.une h2 a, .une h2 a:hover {
  color: rgba(139, 86, 191, 1);
	text-decoration: none;
}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	.une {
		padding: 0 0 5vh 0;
		margin: 0;
		}
	}

/* ANNUAIRE
************************************************************************************************************************/
.label {
	height:     1vh;
	margin-top: 1vh;
	}

#lbl-quoi {
	/*background:          url(../img/flt-label-quoi.png) no-repeat;*/
	/*background-size:     contain;*/
	/*background-position: left center;*/
	}

#lbl-ou {
	/*background:          url(../img/flt-label-ou.png) no-repeat;*/
	/*background-size:     contain;*/
	/*background-position: left center;*/
	}

#lbl-qui {
	/*background:          url(../img/flt-label-qui.png) no-repeat;*/
	/*background-size:     contain;*/
	/*background-position: left center;*/
	}

.list-item .detail {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.list-item {
	border:  1px solid rgba(139, 86, 191, .4);
	margin:  0 0 2vh 0;
	padding: .5em;
	}

.list-item .visuel {
	min-height: 10vh;
	
	}

.list-item .visuel img {
	/*height: 100%;*/
	width: 100%;
	/*height: 14vh;*/
	/*width: auto;*/
	}

.list-item, .list-item:hover {
	color:           black;
	text-decoration: none;
	transition:      .2s box-shadow ease-in-out;
	}

.list-item h3, .list-item h4 {
	margin: .2em 0;
	color:black;
	}

.list-item h4 {
	font-size:   110%;
	font-weight: 100;
	color:       #333
	}

.list-item:hover {
	box-shadow: 0 4px 8px rgba(139, 86, 191, .2);
	}

.no-results {
	padding: 20vh 0;
	text-align: center;
	color:   rgba(139, 86, 191, 1);
	text-transform: lowercase;
	font-size: 4vw;
	}

.prestations-list {
	color:#555;
	font-size: 80%;
	text-transform: lowercase;
	line-height: 1.2em;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	.list-item .visuel {
		order:0;
		margin-bottom: 1em;
		}
	
	.list-item .detail {
		order:1;
		}
	}

#btn-search {
	background:    rgba(139, 86, 191, 1);
	color:         white;
	border:        0;
	border-radius: 100px;
	height:        2.2em;
	width:         2.2em;
	border:                    1px solid rgba(139, 86, 191, 1);
	margin: 0 0 0 .3em;
	}

#search-input {
	border:                    1px solid rgba(139, 86, 191, 1);
	border-radius:    100px;
	width: calc(100% - 3em);
	height:        2.2em;
	padding:                   .2em .5em;
	float:left
	}


@media screen and (min-device-width: 320px) and (max-width: 568px) {
	#search-input {
		/*width: 80vw;*/
		}
	}


/* PUBLICS
************************************************************************************************************************/
.publics-bar {
	display: flex;
	margin:  0 0 .5em 0;
	}


.detail .publics-bar {
	margin: 1em 0;
	
	}


.public-icon {
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	margin:          0 2em 0 0;
	height:          2em;
	color:           rgba(139, 86, 191, 5);
	font-size:       80%;
	}

.public-icon .picto {
	width:         1.2em;
	height:        1.2em;
	border-radius: 100px;
	color:         white;
	background:    rgba(139, 86, 191, 5);
	margin:        0 .2em 0 0;
	border:        2px solid black;
	align-self:    center;
	}

.public-icon .caption {
	align-self: center;
	}

/* LETTRE INFO
************************************************************************************************************************/
.hidden {
	display:none
}
/* PAGINATION
************************************************************************************************************************/

#pagination {
	text-align: center;
	margin-top: 1em;
	width:      100%;
	float:      left;
	}

#pagination li {
	
	width:       1.3em;
	color:       white;
	font-weight: 900;
	display:     inline;
	margin:      2px;
	color:       #333;
	}

#pagination li span, #pagination li a {
	padding:         2px 8px;
	font-weight:     500;
	border-radius:   4px;
	text-decoration: none;
	}

#pagination li span {
	font-weight: 900;
	background:  rgba(139, 86, 191, 5);
	color:       white;
	}

#pagination li a {
	
	color:      white;
	background: silver;
	}

/* PIED DE PAGE
************************************************************************************************************************/
#footer-wrapper {
	width: 96vw;
	margin: auto;
	}

#footer {

	background: #222;
	min-height: 100px;
	color:      #d9d9d9;
	font-size:  1vw;
	margin: 0 ;
	padding: 0;
	}

#footer .col.left img {
	width: 100%;
	}

#footer .col.center {
display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-size: 90%;
	}

#footer .col.center p {
	margin: .5em 0 0 0;
	}

#footer .col {
	padding: 2vw;
	margin: 0;
	}

#footer a {
	color: #d9d9d9;
	}


#footer i.rs {
	font-size: 3vw;
	margin:    0 0 0 .3em;
	}

#footer img {
	max-width: 15vw;
	}

#footer .right {
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

#footer #credits {
	font-size: 80%;
	opacity: .8;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	#footer {
		font-size: 14px;
		}
	
	#footer .col {
		
		}
	
	#footer .left {
		padding: 0 4em;
		margin: 0 0 4em 0;
		}
	
	#footer .right {
		text-align: center;
		}
	
	#footer .center p {

		text-align: center;
		}
	
	#footer i.rs {
		font-size: 44px;
		}
	
	#footer #credits {
		margin: 4em 0;
		}
	}

/* TEMPORAIRE
************************************************************************************************************************/
.construction {
	color:           rgba(139, 86, 191, .4);
	font-size:       4vw;
	width:           100%;
	min-height:      90vh;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-content:   center;
	font-weight:     100;
	text-align:      center;
	}

h2.construction {
	min-height: 1em;
	margin:     1em 0;
	}

.apercu {
	background: black;
	color:      white;
	padding:    .5em;
	text-align: center;
	}


/* AUTOCOMPLETE */
.custom-combobox {
	display:block;
	border: 1px dotted transparent;
	
	}
.custom-combobox-toggle {
	position: absolute;
	top: 3px;
	bottom: 0;
	margin-left: -1px;
	padding: 1em 0;
	height: 30px;
	
	}

.ui-button {
	height: 27px;
	}
.custom-combobox-input {
	margin: 0;
	padding: 5px 10px;
	width: calc( 100% - 8em );
	font-size: 1.2em;
	}

.ui-autocomplete {
	max-height: 350px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	/* add padding to account for vertical scrollbar */
	padding-right: 20px;
	}

.search-combobox {
	
	}

.autocomplete {
	margin: 6px 0;
	}

li.hidden {
	display: none;
	}

ul.suggestion {
	width: 100%;
	display: none;
	list-style: none;
	background: rgba(255,255,255,.6);
	padding: 0;
	max-height: 20vh;
	overflow-x: hidden;
	overflow-y: auto;
	box-shadow: 0 4px 8px rgba(0,0,0,.4);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	}
ul.suggestion li {
	border-bottom: 1px solid #f0f0f0;
	padding: .5em 0;
	cursor: pointer;
	}

ul.suggestion li a {
	padding: 0 1em;
	width: 100%;



	}