@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

[data-theme="light"]{
	--primary: #f7f8fc;
	--secondary: #fff;
	--text: #10182f;
	--text2: #545d7a;
	--menu-primary: rgb(255, 255, 255, .9);
	--menu-text: black;
	--search: gray;
	--titre: gray;
	--titre-font: #fff;
	--chat-font: #fff;
	--chat-ligne: #00bcd4;
	--chat-smile: #00bcd4;
	--com-font: #00bcd4;
	--com-text: #fff;
	--like: rgba(0, 0, 0, 0.5);
	--notif: rgb(255, 255, 255, .9);
	--notif-font: #f3f3f3;
	--notif-h1: transparent;
	--notif-close: #414141;
	--profil-c-op: #f2f2f2;
	--profil-c-op-span: #404040;
	--profil-c-h2: #h2h2h2;
	--profil-c-a-hov: #f2f2f2;
	--profil-c-desc: #404040;
	--profil-c-pro: #231E39;
	--profil-c-titre: #a0a0a0;
	--profil-c-act-span: #1c9eff;
	--profil-c-act-small: #afafaf;
	--profil-c-act-hov-span: #007ad6;
	--firm-span: #414141;
	--antpub-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
	--menu-search: #00bcd4;
	--snow: #99ccff;
	--label: #000;
	--status-h1: #eeeeee;
	--select-back: #eeeeee;
	--border: transparent;
	--table-head: #00bcd4;
	--table-th: #fff;
	--table-td: gray;
	--table-body: rgba(0, 188, 212, 0.1);
	--title-firm: #fff;
	--back-title-firm: linear-gradient(141deg,#1fc8db 51%,#2cb5e8 75%);
	--text-smart: slategray;
	--close-dynart: #414141;
	--anim-notif: rgba(0,0,0, 0.4);
}
[data-theme="dark"]{
	--primary: #000;
	--secondary: #414141;
	--text: #fff;
	--text2: #DCDCDC;
	--menu-primary: rgb(65, 65, 65, .9);
	--menu-text: #fff;
	--search: #fff;
	--titre: #fff;
	--titre-font: #414141;
	--chat-font: #292929;
	--chat-ligne: #fff;
	--chat-smile: #fff;
	--com-font: #fff;
	--com-text: gray;
	--like: #fff;
	--notif: rgba(29, 29, 29, 0.9);
	--notif-font: #414141;
	--notif-h1: #414141;
	--notif-close: #fff;
	--profil-c-op: #606060;
	--profil-c-op-span: #fff;
	--profil-c-h2: #fff;
	--profil-c-a-hov: #606060;
	--profil-c-desc: #fff;
	--profil-c-titre: #a0a0a0;
	--profil-c-act-span: #1c9eff;
	--profil-c-act-small: #afafaf;
	--profil-c-act-hov-span: #007ad6;
	--firm-span: #fff;
	--antpub-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5);
	--menu-search: #fff;
	--snow: #fff;
	--label: #fff;
	--status-h1: gray;
	--select-back: #555;
	--border: #fff;
	--table-head: #fff;
	--table-th: gray;
	--table-td: #fff;
	--table-body: #616161;
	--title-firm: gray;
	--back-title-firm: #fff;
	--text-smart: #fff;
	--close-dynart: white;
	--anim-notif: white;
}
html {
  font-family: sans-serif;
  scroll-behavior: smooth;
}

*{-moz-box-sizing: border-box; box-sizing: border-box;
    outline: none;
}

input{
	font-family: Lato, sans-serif;
}

/*Info imp*/

.infoimp
{
    position: fixed;
    background: #f44336;
    z-index: 999;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    bottom: 0;
}

/*fin info imp*/

.body
{
    margin: 0;
    padding: 0;
    top: 0;
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: var(--primary);
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
        -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

.loader_new
{
    position: relative;
    z-index: 9999;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    animation: animate 0.5s linear infinite;
}

.body.hidden
	{
		animation: display .25s .25s forwards ;
	}

@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }

    100%
    {
        transform: rotate(360deg);
    }
}

.loader_new span
{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
}

.loader_new span:nth-child(1)
{
    filter: blur(5px);
}
.loader_new span:nth-child(2)
{
    filter: blur(10px);
}
.loader_new span:nth-child(3)
{
    filter: blur(25px);
}
.loader_new span:nth-child(4)
{
    filter: blur(50px);
}

.loader_new:after
{
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #240229;
    border-radius: 50%;
}

.bienvenue{
  position: absolute;
  width: 100%;
  color: #fff;
  font-size: 52px;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-40%);
  margin-bottom: 10px;
}

body
{
	/*width: 100%;*/
	height: auto;
	min-width: 100%;
	position: relative;
	margin: 0;
	background: var(--primary);
	transition: background .25s linear;
  /*transition: all .25s;
      -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
	/*padding-bottom: 100px;*/

}

/* MAJ SITE */
.contenu_maj
{
	position: relative;
	top: 240px;
	width: 90%;
	max-width: 1667.2px;
}

.contenu_maj h1
{
	margin-bottom: 10px;
	background: none;
}

.lien_maj
{
	display: block;
	background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
	color: white;
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 10px;
	text-align: center;
}

.MAJ
{
    width: 80%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 20px;
    background: var(--secondary);
    color: #000000;
    padding: 20px;
    overflow: hidden;
    transition: max-height .50s;
    overflow-y: auto;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.MAJ p
{
    /*line-height: 40px;*/
    color: var(--text);
}

.content_version
{
	position: absolute;
}

#version
{
	background: var(--titre);
	color: var(--titre-font);
	padding: 5px;
	border-radius: 5px;
}
#type_version
{
	background: #00C853;
	color: #fff;
	padding: 5px;
	border-radius: 5px;
	left: 5px;
	position: relative;
}
#type_version_beta
{
	background: #ff6f00;
	color: #fff;
	padding: 5px;
	border-radius: 5px;
	left: 5px;
	position: relative;
}
/* fin MAJ */

#content-glob
{
    display: inline-block;
    position: relative;
	left: 2%;
	height: auto;
    width: 96%;
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 20px;
}

.latest_nb_com
{
    position: absolute;
    color: #fff;
    /*float: left;
    display: block;
    text-align: right;*/
    right: 0;
    padding-top: 5px;
    padding-right: 10px;
    height: 30px;
    top: -30px;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    z-index: 11;
}

.content-latest-n
{
    width: 100%;
    height: 160px;
    display: inline-block;
    border-radius: 20px;
    background: black;
    position: relative;
    z-index: 10;
	-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
}

.content-latest-cont
{
    display: inline-block;
    overflow: hidden;
    border-radius: 20px;
    width: 45%;
	-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
height:160px;
}

.content-latest-cont:first-child
{
    width: 90%;
}

.content-latest-n:hover .backg-n img
{
    opacity: 0.8;
}

.content-latest-n:hover
{
    cursor: pointer;
}

.content-latest-n:hover .latest_nb_com
{
    top: 0;
}

.content-latest-n h2
{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: xx-large;
    z-index: 11;
}

.backg-n
{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.backg-n img
{
    width: 100%;
    height: 100%;
    opacity: .6;
    position: relative;
    z-index: 1;
    /*transform: scale(1.1);*/
    object-fit: cover;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

article
{
	/*display: inline-block;*/
	color: #000;
	margin-top: 10px;
	width: 100%;
	height: 100%;
}

footer
{
	position: absolute;
	text-align: center;
	background-color: #616161;
	/*margin-top: 10px;*/
	height: 100px;
	color: #fff;
	width: 100%;
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	bottom: 0;
	/*border: 1px solid black;*/
}

footer p
{
    color: #fff;
}

p
{
	margin: 0;
	color: var(--text);
}

h3
{
	margin: 0;
	font-size: 1vw;
	padding-bottom: 10px;
	color: var(--text);
}

#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
z-index: 999;
transition: right 0.5s;
    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}



.mod_sombre
{
	height: 30px;
	line-height: 0;
	padding: 5px;
	position: relative;
	text-align: left;
  width: 75%;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
}
.label-mod-sombre
{
	color: var(--menu-text);
}

input[type="checkbox"]
{
	display: inline-block;
	margin: 0;
	position: relative;
	width: 40px;
	height: 20px;
	-webkit-appearance: none;
	/*vertical-align: top;*/
	background: #c6c6c6;
	outline: none;
	border-radius: 20px;
	border: none;
	box-shadow: inset 0 0 5px rgba(0,0,0,.2);
	transition: .5s;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

input[type="checkbox"]::-ms-check
{
    display: none; /* unstyle IE checkboxes */
}

input:checked[type="checkbox"]
{
	background: #00bcd4;
}

input[type="checkbox"]:before
{
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	top: 50%;
	left: 2px;
	background: #fff;
	transform: translatey(-50%);
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
	transition: .10s linear;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

input:checked[type="checkbox"]:before
{
	left: 50%;
	top: 50%;
	transform: translatey(-50%);
	width: 22px;
	height: 22px;
}

#scales.open{
	background: #00bcd4;
}

#scales.open:before{
	left: 50%;
	top: 50%;
	transform: translatey(-50%);
	width: 22px;
	height: 22px;
}

#menu-mobile
{
	display: none;
}

.haut-titre
{
	margin: 0;
	color: #fff
}

#nbcom
{
display: inline-block;
text-align: center;
vertical-align: top;
border: 2px solid #00bcd4;
border-radius: 8px;
background-color: #fff;
width: 7%;
float: left;
height: 10%;
}

#nbcom2
{
	width: auto;
	height: 50%;
	display: inline-block;
	color: #00bcd4;
	border-radius: 5px;
	background-color: transparent;
}

.nbcom3
{
	color: #fff;
	display: inline-block;
}

#bulle
{
	width: 100%;
	height: auto;
	display: inline-block;
	border-radius: 50%;
}

#div_cliquable
{
	display: block;
	text-align: center;
	margin-left: 7.5%;
	float: left;
	position: relative;
	width: 1053.5px;
	height: 274px;
	z-index: 1000;
}

#page_article
{
	display: inline-block;
	width: 60%;
	margin-left: 5%;
}

img
{
	max-width: 100%;
}

.article ul li
{
	color: var(--text);
  list-style: initial;
}

.article ol li
{
	color: #000;
  list-style: initial;
}

.article
{
	display: inline-block;
	width: 100%;
	overflow: hidden;
	vertical-align: top;
	background-color: var(--secondary);
  	padding: 20px;
}

.aff_load_search
{
	width: 70%; 
	height: 100%; 
	display:flex; 
	justify-content:center; 
	z-index: 9999; 
	background: var(--secondary); 
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	overflow: auto; 
	padding: 20px; 
	margin: 0 auto;
}

#article_recherche
{
	display: inline-block;
	text-align: center;
	width: 100%;
	height: 100%;
	font-family: "Roboto",sans-serif
}

.aff_recherche
{
	display: inline-block;
	width: 70%;
	height: 100%;
	z-index: 9999;
	background: var(--secondary);
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	overflow: auto;
	padding: 20px;
}

#chksearch-close
{
	height: 100%;
	width: 15%;
	position: absolute;
	top: 0;
	z-index: 9999;
}
#chksearch-close2
{
	height: 100%;
	width: 15%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 9999;
}

.divrecherche
{
	text-align: right;
	border-bottom: 5px solid #fff;
	display: inline;
	vertical-align: middle;
	width: 90%;
	height: 75px;
	color: #fff;
	line-height: 100px;
}

#recherchevalid
{
	/*background-image: url(image/loupeb.png);*/
	background-repeat: no-repeat;
	background-color: #fff;
	border: none;
	width: 30px;
	height: 29px;
	vertical-align: middle;
	display: none;
	background-size: contain;
	cursor: pointer;
}

#result_recherche
{
	width: 100%;
	display: inline-block;
	text-align: center;
}

.recherche
{
	border: none;
	background-color: var(--secondary);
	vertical-align: middle;
	color: var(--text);
	height: 100%;
	width: 0;
	position: absolute;
	display: none;
	transition: width .25s;
	font-size: 30px;
}

.recherche_menu
{
	border: none;
	background-color: var(--secondary);
	vertical-align: middle;
	color: var(--text);
	height: 100%;
	width: 0;
	position: absolute;
	display: none;
	transition: width .25s;
	font-size: 30px;
}

.recherche_menu.show
{
	display: block;
	width: 86%;
}

.recherche.show
{
	display: block;
	width: 86%;
}

.menu_search
{
  background-color: var(--secondary)!important ;
  top: 10px!important;
}

.menu_zindex
{
	z-index: 9999!important;
}
.menu_zindex_anim
{
	animation: hidemenu .5s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.back_search
{
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	background-color: rgba(65, 65, 65, .9);
	z-index: 9998;
}

#recherche::-webkit-input-placeholder  {
   color:    #00bcd4;
   font-size: 30px;
}
#recherche:-moz-placeholder  {
   color:    #00bcd4;
   opacity:  1;
   font-size: 30px;
}
#recherche::-moz-placeholder {
   color:    #00bcd4;
   opacity:  1;
   font-size: 30px;
}
#recherche:-ms-input-placeholder {
   color:    #00bcd4;
   font-size: 30px;
}

.news_cont
{
	text-align: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 182px;
	padding: 10px;
}

.data
{

}

.lien_article
{
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 42px;
	background-color: transparent;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	color: #fff;
	transition: color .50s, background-color .50s;
}

.lien_article .fa-play{
	color: #fff;
}

#lien_article3
{
	width: 95%;
	height: 210px;
	margin-left: 28.73px;
}

.div_lien_article
{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: 2px solid #fff;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	background: transparent;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: none;
	transition: background-color .25s;
}

.fa-search {
    color: var(--search)
}

.fa-play::before
{
	content: "\f04b";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
}

.lien_article:hover
{
	color: #fff;
	background-color: #00bcd4;
	transition: color .50s, background-color .50s;
}

#aside
{
	display: inline-block;
	top: 10px;
	width: 25%;
	height: auto;
	margin-left: 3.3%;
	vertical-align: top;
}

#show_chat:target aside
{
	display: block;
}

.avatar
{
	color: gray;
	position: absolute;
	width: auto;
	left: 0;
	border-bottom: 2px solid gray;
	border-radius: 0;
	text-align: left;
	background: transparent;
}

#p
{
    margin-top: 10px;
    border: 2px solid #00bcd4;
    border-radius: 5px;
    padding: 10px;
}

#espace
{
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;
	display: inline-block;
}

#change_info
{
	width: 50%;
	display: inline-block;
	background-color: white;
}

.news
{
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border: 1px solid #00bcd4;
	width: 90%;
	margin: auto;
	height: 170px;
	display: inline-block;
	text-align: center;
	background-color: #fff;
	transition: transform 1s;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
	position: relative;
}

.barre_favoris
 {
   width: 100%;
   height: 70px;
   background: var(--secondary);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   padding: 10px;
 }

 .libellé
 {
 	width: 70%;
 	height: 100%;
 	line-height: 50px;
 	padding: 0 25px;
 	display: inline-block;
 }

 .contenu_libellé
 {
    width: auto;
    display: inline-block;
    height: 80%;
    padding-left: 10px;
    border-radius: 3px;
    text-align: center;
    line-height: 0;
    /*vertical-align: middle;*/
    background: #f4f4f4;
    padding-right: 10px;

 }

 .libellé .contenu_libellé p
 {
    display: block;
    height: 100%;
    line-height: 40px;
    vertical-align: middle;
    color: #999;
 }

 .favoris
 {
 	display: inline-block;
 	float: right;
 	width: 30%;
 	height: 100%;
 	text-align: center;
 	vertical-align: middle;
 	line-height: 46px;
 }

 .favoris .likes a
 {
 	height: 100%;
  }

 .favoris .likes p
 {
 	width: 10px;
 	height: 100%;
 	color: var(--like);
 	font-size: 1.3vw;
 	display: inline-block;
 	vertical-align: top;
 	line-height: 46px;
  }

   .favoris .dislikes a
 {
 	height: 100%;
  }

 .favoris .dislikes p
 {
 	width: 10px;
 	height: 100%;
 	color: var(--like);
 	font-size: 1.3vw;
 	display: inline-block;
 	vertical-align: top;
 	line-height: 46px;
  }


 .likes
 {
 	display: inline-block;
 	vertical-align: top;
 	width: 30%;
 	height: 100%;
 }

 .dislikes
 {
 	vertical-align: top;
 	display: inline-block;
 	width: 30%;
 	height: 100%;
 	 }

.global_art
{
	width: 29%;
	height: auto;
	display: inline-block;
	position: relative;
	margin-top: 20px;
}

.global_art_search
{
	width: 23%;
	height: auto;
	display: inline-block;
	position: relative;
	margin-top: 20px;
	margin-right: 24px;
}

.date
{
	width: 90%;
	color: white;
	margin: auto;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	height: auto;
	background: #00bcd4;
  padding: 10px;
}

.date_recherche
{
	width: 90%;
	margin: 0 auto;
	color: white;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	height: auto;
	background: #00bcd4;
  padding: 10px;
}

.date_span
{
	line-height: 0;
}

.news:hover .img_article
{
	transform: scale(1.25);
}

.news:hover .data
{

}

#fleche-haut
{
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: block;
}

#fleche-haut-lien
{
	vertical-align: middle;
	display: block;
	height: auto;
	width: 100%;
}

.fa-bell{
  color: #00bcd4;
}

.fa-smile{
    color: var(--chat-smile);
}

.fleche-droite::after
{
	content: "f0da";
	color: grey;
}

.fa-thumbs-up
{
	font-weight: 400;
	font-size: 2vw;
	line-height: 46px;
	color: var(--titre);
}

.fa-thumbs-down
{
	font-weight: 400;
	font-size: 2vw;
	line-height: 46px;
	color: var(--titre);
}

.fa-home
{
  color: #fff;
  line-height: 100px;
  font-size: 2vw;
}

.fa-caret-right
{
	content: "f0da";
	color: grey;
}

.fa-chevron-up
{
	content: "\f077";
	color: #fff;

}

.fa-chevron-down
{
	content: "f078";
  display: inline-block;
  line-height: 0;
	color: var(--menu-text);
  transition: transform 0.5s;
      -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

.fa-chevron-down::before
{
	content: "\f078";
	width: 1%;
  right: 0;
}

.fa-comment-slash
{
	font-weight: 1000;
	font-size: 32px;
  color: #00bcd4;
}

.fa-user-plus
{
	content: "\f234";
	color: green;
	font-size: 3em;
	text-align: center;
	line-height: 120px;
	background: transparent;
}

.fa-user-circle
{
	content: "\f2bd";
	color: #00bcd4;
	font-size: 3em;
	line-height: 120px;
}

.fa-keyframes{
  color: gray;
}

#fa-home-id
{
	font-size: 2.5vw;
}

#user-add
{
	height: 100%;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	float: right;
	display: inline-block;
}

#login-co
{
	height: 100%;
	float: right;
}

#div-fleche-haut
{
	margin: 0 auto;
	padding: 25px 0;
	vertical-align: middle;
	display: inline-block;
	height: 50px;
	width: 6%;
}

#erreur_recherche
{
	height: auto;
}

.rechercheid-mobile
{
	background: var(--secondary);
}

.image_article
{
	display: block;
	position: relative;
	overflow:hidden;
    line-height: 277px;
	height: 150px;
	width: 100%;
}

#image_article2
{
	width: 100%;
	height: auto;
	text-align: center;
	border-radius: 0;
	background-color: var(--secondary);
  border-top-right-radius: 20px;
	border-top-left-radius: 20px;
  overflow: hidden;
}

#img_article2
{
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	max-height: 300px;
	object-fit: cover;
}

#img_auteur
{
	width: 6.25em;
	height: 6.25em;
	display: block;
	vertical-align: middle;
	margin: 0 auto;
	-webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    object-fit: cover;
}

#h2com
{
  text-align: center;
  color: var(--com-text);
  font-size: 18px;
  margin: 0;
  background: var(--com-font);
  padding: 10px;
  border-radius: 20px 20px 0 0;
}

#pseudo_profil {
    color: #ffffff;
    text-transform: uppercase;
    background-color: transparent;
    width: 90%;
    z-index: 2;
    position: relative;
}

#pseudo_profil_article
{
	border-radius: 7px;
	margin: 0;
	color: #fff;
	background-color: transparent;
	display: inline-block;
	border: none;
	width: auto;
  line-height: 40px;
	height: 100%;
  box-shadow: none;
	text-transform: uppercase;
}

#date_publication {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    float: right;
}

em {
    height: 100%;
    display: block;
    vertical-align: middle;
    line-height: 40px;
}

#image_profil
{
    width: 84%;
    height: 300px;
    top: 0;
    right: 0;
    text-align: center;
    position: absolute;
    overflow: hidden;
    color: #8BC34A;
    margin: 0 auto;
    padding: 10px;
    background: #000000;
}

#image_profil_article
{
	width: 100%;
	height: auto;
	display: inline-block;
  background: var(--secondary);
	vertical-align: top;
	color: #fff;
  padding: 20px;
	border-radius: 20px;
	margin-bottom: 10px;
}

#image_profil2 {
  width: 100px;
  height: 100px;
  object-fit: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /*border: 5px solid #ffffff;*/
    z-index: 2;
    position: relative;
}

.li_membre span
{
	color: var(--text);
}

.backg_profil
{
    top: 0;
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.img_backg {

    z-index: 1;
    height: 100%;
    object-fit: cover;
    width: 100%;
    filter: blur(3px);
    opacity: 0.5;

}

.img_redacteur
{
	display: inline-block;
	height: 40px;
  width: 40px;
	vertical-align: top;
}

#image_profil3
{
	width: auto;
	line-height: 50px;
	height: 100%;
  width: 100%;
  object-fit: cover;
    -webkit-border-radius:50%;
    background-color: #fff;
    -moz-border-radius:50%;
    border-radius:50%;
}

#lien_modif_pass
{
	display: inline-block;
	border-radius: 5px;
	padding: 0.5%;
	height: auto;
	line-height: 40px;
	color: #8BC34A;
	border: 2px solid #8BC34A;
	width: auto;
}

li
{
	list-style: none;
}

.img_article
{
	text-align: center;
	width: 100%;
	height: 110%;
	line-height: 0;
	object-fit: cover;
	transition: transform .25s;
}

.img_article:hover
{
		transform: scale(1.25); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#date_com
{
	text-align: right;
}

#com_text
{
    width: 90%;
    border-radius: 0 0 10px 10px;
    margin: 0;
    display: inline-block;
    padding: 10px 0 0 10px;
}

#commentaires
{
	background-color: var(--secondary);
	width: 100%;
	height: auto;
	margin: 0 auto;
	/*left: 7.5%;*/
	top: 10px;
  border-radius: 20px;
	border: 3px solid #00bcd4;
	display: inline-block;
	position: relative;
  padding: 10px;
}


#commentairescont
{
    display: inline-block;
    width: 80%;
    position: relative;
    height: auto;
    text-align: left;
    padding: 6px;
    /* margin-left: 10%; */
}

#type_membre
{
	background-color: #3498db;
	display: block;
	height: 25px;
	line-height: 25px;
	color: #fff;
	border-radius: 5px;
}

textarea
{
  border: none;
	display: inline-block;
	color: var(--titre);
	width: 80%;
	height: auto;
	resize: none;
	border-radius: 10px;
  background: transparent;
	position: relative;
	font-family: Lato, sans-serif;
}

textarea::-webkit-input-placeholder {
    color: var(--titre);
}

.ckeditor
{
  border: none;
	display: inline-block;
	color: #414141;
	width: 80%;
	height: auto;
	resize: none;
	border-radius: 10px;
  background: transparent;
	position: relative;
}

textarea:hover > #lignecom
{
	max-width: 70%;
	height: 2px;
	background-color: #00bcd4;
	margin: 0 auto;
}

#lignecom
{
	max-width: 0;
	transition: 1s;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

.content_rp_com_1
{
    max-height: 0;
    width: 50.8125em;
    left: 50px;
    position: relative;
    border-left: 3px solid #00bcd4;
    /*transition: max-height .25s, overflow .25s;*/
        -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

.inputcom
{
    height: 64px;
    border-radius: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    width: 9%;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    margin-top: 5px;
    vertical-align: top;
    background-color: transparent;
    background-image: url(/image/fleche.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 25px;
    color: #00bcd4;
}

.inputcomrep
{
    height: 54px;
    border-radius: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    width: 30px;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    margin-top: 5px;
    vertical-align: top;
    background-color: transparent;
    background-image: url(/image/fleche.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 25px;
    color: #00bcd4;
}

.contentbtrp
{
  width: 19.5%;
  margin: 0 auto;
  display: inline-block;
  position: absolute;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
}

.annulercom
{
  width: 70px;
  height: 30px;
  cursor: pointer;
  border: 2px solid gray;
  border-radius: 5px;
  background-color: transparent;
  color: gray;
  display: inline-block;
  vertical-align: middle;
  margin-top: 14.5px;
  margin-left: 5px;
  line-height: 0;
}

.annulercom:hover
{
	background-color: gray;
}

#rp_com_1:last-child
{
    margin-bottom: 0!important;
}
.rp_com_1
{
	background:var(--secondary);
	width: 50em; height: auto;
    margin: 0 auto;
    margin-bottom:10px;
    margin-left: 10px;
    border-radius: 10px;
    border: 3px solid #00bcd4;
    display: inline-block;
    position: relative;
    padding: 10px;
}
#textcom
{
    border: none;
    display: inline-block;
    width: 100%;
    background: var(--secondary);
    border-radius: 0 0 20px 20px;

}

.repcom
{
  transition: all 0.25s ease 0s;
  height: auto;
  overflow: hidden;
  top: 20px;
  display: inline-block;
  color: #414141;
  width: 100%;
  position: relative;
  background: var(--secondary);
  border-radius: 5px;
  padding: 10px;
}

#imgauteur {
    display: inline-block;
    width: 20%;
    text-align: center;
    float: left;
    margin-top: 2px;
    position: relative;
    height: 100%;
    padding: 3px;
    border-right: 1px solid rgba(0, 0, 0, 0.10);
}

#h1
{
	display: inline-block;
	margin: 0;
	width: 100%;
}

#h1article
{
	background-color: var(--secondary);
	color: var(--titre);
	border: none;
  box-shadow: none;
}

#article
{
	display: inline-block;
	text-align: center;
	width: 68%;
	height: auto;
}

.content_article
{
    width: 100%;
    position: relative;
    left: 2%;
    padding-bottom: 20px;
}

.theme
{
    padding: 10px;
}

.theme h1
{
	color: gray;
	position: relative;
	width: 35%;
	left: 0;
	margin: 0;
    margin-bottom: 0px;
	border-bottom: 2px solid gray;
	border-radius: 0;
	text-align: left;
	background: transparent;
	margin-bottom: 20px;
}

.personnalisation
{
    height: auto;
    display: block;
    padding: 10px;
}

.personnalisation h1
{
	color: gray;
	position: relative;
	width: 40%;
	left: 0;
	margin: 0 0 10px 0;
	border-bottom: 2px solid gray;
	border-radius: 0;
	text-align: left;
	background: transparent;
}

.theme-separ
{
    width: 70%;
    height: 1px;
    display: block;
    margin: 0 auto;
    background: #12cdc4;
}

.ME
{
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    background: var(--primary);
    transition: all .25s;
}

#profil
{
    width: 75%;
    left: 58%;
    top: 300px;
    margin-top: 20px;
    position: absolute;
    height: auto;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    transform: translatex(-50%);
}

/*Info perso*/

@keyframes zoominput {
  0% {
		transform: scale(1.1);
  }

	50% {
		transform: scale(1.2);
	}

  100% {
		transform: scale(1.1);
  }
}

#input_info
{
	width: 45%;
	border: 2px solid var(--com-font);
	padding: 15px;
  top: 60px;
	position: relative;
  box-shadow: 0;
  transition: all .25s;
  color: var(--titre);
  border-radius: 10px
}

#input_info:focus
{
	border: 2px solid #00bcd4;
  box-shadow: 0 0 5px gray;
  animation: .20s zoominput;
  animation-fill-mode: forwards;
}

#modif_info
{
  border: none;
outline: none;
color: #fff;
background: #00bcd4;
position: absolute;
right: 0;
text-align: center;
cursor: pointer;
border-radius: 40px;
transition: all 0.25s;
box-shadow: 0 4px 15px -5px #00bcd4;
padding: 15px 30px;
font-size: 15px;
}

.article a {
  border: none;
  outline: none;
  color: #fff;
  background: #00bcd4;
  cursor: pointer;
  border-radius: 40px;
  transition: all 0.25s;
  box-shadow: 0 4px 15px -5px #00bcd4;
  padding: 15px 30px;
  font-size: 15px;
}

.input_info_email
{
 float: right;
}

.input_info_pseudo
{
  float: left;
}

#date_inscri
{
	position: absolute;
	top: 200px;
	right: 0;
}

#info_h1
{
  background: transparent;
  color: gray;
  position: absolute;
  width: auto;
  left: 0;
  border-bottom: 2px solid gray;
  border-radius: 0;
  text-align: left;
}
/*Fin info*/

/*Theme sombre*/

#submit_form
{
border: none;
outline: none;
color: #fff;
background: #00bcd4;
margin: 0 auto;
text-align: center;
cursor: pointer;
border-radius: 40px;
transition: all 0.25s;
box-shadow: 0 4px 15px -5px #00bcd4;
padding: 15px 30px;
font-size: 15px;
}
/**/

#refu
{
	text-align: center;
	width: 50%;
	background-color: grey;
	color: white;
	display: inline-block;
}

header
{
	/*display: none;*/
	width: 100%;
	position: fixed;
	top: 0;
	margin: 0 auto;
	height: 120px;
	line-height: 120px;
	background-color: transparent;
	border-top: none;
	-webkit-transition-property: top, bottom, transform;
    -webkit-transition-duration: .25s;
        -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatey(0) translatez(0);
	z-index: 1000;
}


#header
{
	width: 100%;
	height: 120px;
	line-height: 120px;
	display: flex;
}

#logohead
{
	width: 48%;
	height: 100%;
	display: inline-block;
	text-align: center;
}


#logo
{
	width: auto;
	height: 100%;
	line-height: 120px;
	vertical-align: top;
}

#logomenu
{
	width: 30px;
	height: 20px;
	margin-right: 2px;
	top: 5px;
}

#inscriptionbouton
{
	text-align: center;
	border-radius: 60px;
	border: none;
	margin-left: 15px;
	background: mediumblue;
	cursor: pointer;
	padding: 0;
	height: 50px;
	background-color: white;
	color: #3498db;
	width: 30%;
	-webkit-animation-name: clignote; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 2s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count:infinite; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: clignote; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 2s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: infinite; /*on dit que l'animation se répétera à l'infini.*/
}

#logo_profil
{
    width: 100%;
    border-radius: 50%;
    display: inline-block;
    height: 100%;
    border: 3px solid #414141;
    object-fit: cover;
}

#profil_image
{
    height: 60px;
    width: 60px;
    text-align: center;
    overflow: hidden;
    display: block;
    position: absolute;
    border-radius: 50%;
    margin: 0 auto;
    left: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.usr_img
{
	display: none;
}
  #content_profil_min
  {
	display: none;
  }

#profil_image ul li ul
{
	transition: max-height 1s;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
	max-height: 300px;
}

#profil_image:hover #ligne
{
	transition: max-width 1s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.connectionbouton
{
	text-transform: uppercase;
	text-align: center;
	display: inline;
	margin: 0 auto;
	cursor: pointer;
	height: 100%;
    top: 0;
    border: none;
	border-radius: 5px;
	background: none;
	padding: 0;
	color: #00bcd4;
	width: 100%;
	transition: all .25s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    line-height: 0;
	font-family: lato, sans-serif;
	font-size: 14px;
}

.liconnect
{
    border-bottom: 2px solid #00bcd4;
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.liconnect:hover
{
    border-bottom: 2px solid transparent;
}

.connectionbouton::before
{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 48px;
  line-height: 0;
  background: #00bcd4;
  border-radius: 50%;
  transition: .50s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  /*margin-left: 0.96%;*/
  z-index: -1;
  opacity: 0;
}

.liconnect:hover .connectionbouton
{
  color: #fff;
}

.liconnect:hover .connectionbouton::before
{
  width: 100%;
  opacity: 1;
  border-radius: 5px 5px 5px 5px;
  color: #fff;
}

.liconnect::hover
{
    border-radius: 5px;
}

.lien_inscription
{
    display: inline;
    height: 100%;
    width: 100%;
    cursor: pointer;
    border: none;
    color: #fff;
    background: none;
    border-radius: 5px;
    line-height: 0;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -ms-transition: .25s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    padding: 0;
    text-align: center;
	font-family: lato, sans-serif;
	font-size: 14px;
}

.lien_inscription::before
{
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    height: 48px;
    line-height: 0;
    background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
    border-radius: 5px;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -ms-transition: .25s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    /*margin-left: 0.65%;*/
    z-index: -1;
	opacity: 1;
}

.liinscrip
{
    border-bottom: 2px solid transparent;
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.liinscrip:hover
{
    border-bottom: 2px solid #00bcd4;
}

.liinscrip:hover .lien_inscription::before
{
    	width: 48px;
	opacity: 0;
    border-radius: 100%;
    color: #00bcd4;
}

.liinscrip:hover .lien_inscription
{
    color: #00bcd4;
}

#formupload
{
	top: 220px;
	position: relative;
	text-align: center;
	margin: 0 auto;
	height: 50px;
	color: black;
	width: 100%;
}

#inscription_lien
{
	text-align: center;
	color: white;
	background-color: blue;
	width: 30%;
	height: 50px;
	border: 1px solid white;
	border-radius: 5px;
}

#moncompte
{
	text-align: right;
}

#pseudo
{
	width: 70%;
	height: 60px;
	border: none;
	border-top: 1px solid #e5e5e5;
}

#pseudo:focus
{
	border-bottom: 3px solid #00bcd4;
	border-top: 3px solid #00bcd4;
	text-align: left;
	-webkit-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
}

.info
{
	background: transparent;
	width: 100%;
	color: #D50000;
	font-family: cursive;
	font-size: 17px;
	text-align: center;
}

input[type="pseudo"], input[type="password"], input[type="text"]
{
    border-radius: 0;
}

input[type="file"]
{
	display: none;
}

.i
{
background-color:#f44336;
color:white;
text-align:center;
margin: 0 auto;
margin-bottom: 30px;
width: 90%;
height: auto;
line-height: 40px;
display: block;
border-radius: 5px;
font-size: 20px;
}

#verif_password
{
	width: 70%;
	height: 60px;
	border: none;
	border-top: 1px solid #e5e5e5;
}

#verif_password:focus
{
	border-bottom: 3px solid #00bcd4;
	border-top: 3px solid #00bcd4;
	-webkit-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
}

#password
{
	width: 70%;
	height: 60px;
	border: none;
	border-top: 1px solid #e5e5e5;
}

#password:focus
{
	border-bottom: 3px solid #00bcd4;
	border-top: 3px solid #00bcd4;
	-webkit-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
}

#confirm
{
	width: 70%;
	height: 60px;
	border: none;
	border-top: 1px solid #e5e5e5;

}

#confirm:focus
{
	border-bottom: 3px solid #00bcd4;
	border-top: 3px solid #00bcd4;
	-webkit-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
}

#email
{
	width: 70%;
	height: 60px;
	border: none;
	border-top: 1px solid #e5e5e5;

}

#email:focus
{
	border-bottom: 3px solid #00bcd4;
	border-top: 3px solid #00bcd4;
	-webkit-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-webkit-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-webkit-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
	-moz-animation-name: progress; /*on affecte l'animation clignote à notre bouton*/
	-moz-animation-duration: 0.5s; /*on définit la durée de l'animation à 1s*/
	-moz-animation-iteration-count: 1; /*on dit que l'animation se répétera à l'infini.*/
}
#validmodif
{
	border:2px solid #8BC34A;
	display: block;
	color: #8BC34A;
	background-color: #fff;
	width: 70%;
	height: 60px;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	line-height: 60px;
	border-radius: 5px;
}

#recup
{
	color: white;
	background-color: #3498db;
	width: 20%;
	height: 50px;
	border: 1px solid white;
	border-radius: 5px;
}

#label-recup
{
	cursor: pointer;
    color: white;
    width: 20%;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    border-radius: 5px;
    display: block;
    background-color: #3498db;
}

#upload
{

	color: white;
	background-color: #3498db;
	width: 20%;
	height: 50px;
	border: 1px solid white;
	border-radius: 5px;
}

#userlogo
{
	width: 7%;
	height: 70px;
}

#pseudoco
{
	width: 93%;
	height: 70px;
	float: right;
	font-size: 14px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
}

#pseudoco:focus{
	border-bottom: 1px solid #00bcd4;
}

#passwordco
{
	width: 93%;
	height:70px;
	float: right;
	padding: 0;
	font-size: 14px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
}

#passwordco:focus{
	border-bottom: 1px solid #00bcd4;

}

#connectionsend
{
	color: #fff;
	background-color: #3498db;
	width: 100%;
	font-size: 25px;
	border: 0;
	cursor: pointer;
	height: 50px;
	padding: 0;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

ul #deconnectionsend
{
	width: 90%;
	height: 36px;
	line-height: 0;
	display: block;
  margin: 0 auto;
}

ul #Mon_espace_input
{
	height: 36px;
	width: 90%;
	border-radius: 5px;
	color: var(--com-font);
	background: var(--secondary);
	cursor: pointer;
}

#Mon_espace_input
{
  border: 2px solid var(--com-font);
  margin-bottom: 5px;
}

/*btn radio thme*/
input[type="radio"].scales {
  display: none;
}
input[type="radio"].scales + label {
  position: relative;
  padding-right: 1.7rem;
}
input[type="radio"].scales + label::before,
input[type="radio"].scales + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content:'';
  border-radius: 1.25rem;
}
input[type="radio"].scales + label::before {
  top: 50%;
  right: 0;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 1.5rem;
  height: 1.5rem; 
  transform: translateY(-50%);
}
input[type="radio"].scales + label::after {
  top: 50%;
  right: 4px;
  width: calc(1.5rem - 8px);
  height: calc(1.5rem - 8px);
  transform: translateY(-50%);
}
input[type="radio"].scales:checked + label::after {
  background-color: #00bcd4;
}
input[type="radio"].scales:checked + label::before {
  border: 1px solid #00bcd4;
}
/*Fin btn radio theme*/

#Redac_input
{
	height: 36px;
	width: 90%;
	border-radius: 5px;
	color: var(--com-font);
	background: var(--secondary);
	cursor: pointer;
	border: 2px solid var(--com-font);
	margin-bottom: 5px;
}

.div_deco
{
	height: 100%;
	line-height: 0;
}

#deconnectionsend
{
	color: #ffffff;
	margin-top: 1px;
	background: gray;
	/*background-color: #fff;*/
	width: 70%;
	border: 0;
	text-transform: uppercase;
	cursor: pointer;
	height: 100%;
	padding: 0;
	border-radius: 5px;
}

#connectionsend:hover
{
	cursor: pointer;
}

#acueil
{
	/*position: relative;*/
	width: 100%;
	margin-top: 243px;
	padding-bottom: 100px;
	min-height: 2100px;
}

aside
{
	text-align: center;
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	background: var(--chat-font);
	border-radius: 10px;
}

ul
{
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
}

span {
    color: var(--text);
}

.article span{
	color: var(--text)!important;
}

h1
{
  margin: 0 auto;
  /*display: inline-block;*/
  text-align: center;
  font-size: 2vw;
  color: var(--titre);
  width: 95%;
  border-bottom: 0;
  border-radius: 10px;
  background: var(--titre-font);
}

#h1menu
{
	background-color: #0032ff;
}

h2
{
	color: var(--text);
	font-size: 18px;
	margin: 0;
}

#ligne
{
	max-width: 0%;
	height: 2px;
	background-color: #00bcd4;
	transition: max-width 1s;
	    -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
}

#boutonhead ul li ul li
{
	z-index: 1003;
	line-height: 0;
  height: auto;
	vertical-align: top;
  margin-top: 0;
}

#boutonhead ul li ul li:first-child
{
	height: 30%;
}

#boutonhead ul li:hover ul li
{
	text-align: center;
	margin: 0 auto;
	width: 100%;
	z-index: 1001;
}
 #boutonhead ul li:hover ul
 {
 	transition: opacity .50s, max-height .50s;
	transform: scale(1);
	z-index: 1001;
	opacity: 1;
	max-height: 400px;
 }



#boutonhead ul li ul
{
	background-color: var(--secondary);
	position: absolute;
	box-shadow: 0 5px 10px grey;
	top: 0;
	margin: 0 auto;
	overflow: hidden;
	width: 200px;
	max-height: 77.6px;
	transition: opacity .50s, max-height .25s;
	border-radius: 15px;
	padding-bottom: 10px;
	line-height: 0;
	z-index: 1003;
	opacity: 0;
}

#boutonhead ul li ul:hover
{
	position: absolute;
	margin: 0 auto;
	width: 200px;
}

#boutonhead ul li a
{
	height: 40px;
}

#boutonhead .li_membre {
    background-color: var(--secondary) !important;
}

#boutonhead #ul2
{
	margin-left: 50.9%;
	padding: 0;
	height: 100%;
	display: inline-block;
	min-width: 200px;
  line-height: 0;
  vertical-align: top;
    position: absolute;
  	right: 86px;
}

#boutonhead #ul3
{
	padding: 0;
	height: 100%;
	display: inline-block;
	width: 20%;
  line-height: 0;
  vertical-align: top;
}

#boutonhead #ul4
{
	padding: 0;
	height: 100%;
	display: inline-block;
	min-width: 86px;
  line-height: 0;
  vertical-align: top;
  	position: absolute;
  	right: 0;
}

#boutonhead .liul4
{
  margin-top: 0;
  width: 100%;
}

#boutonhead ul li {
	position: relative;
	display: inline-block;
	color: #0032ff;
	font-size: 14px;
	font-family: 'Roboto Condensed',sans-serif;
	text-transform: uppercase;
	width: 100%;
	height: 50px;
	vertical-align: top;
	z-index: 1001;
  margin-top: 36px;
}

#boutonhead #ul3 li {
    position: relative;
    display: inline-block;
    text-align: center;
    color: #0032ff;
    font-size: 14px;
    font-family: 'Roboto Condensed',sans-serif;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    vertical-align: middle;
    overflow: hidden;
}

#boutonhead ul li:hover {

	color: #0032ff;
}


#boutonhead
{
	width: 51.5%;
	display: inline-block;
	text-align: center;
	height: 120px;
  vertical-align: top;
}
/* animation chrome,opera,etc.. */

@-webkit-keyframes clignote {
0%{box-shadow:0px 0px 20px mediumblue;
background-color: white;}
50%{box-shadow:0px 0px 0px white;}
100%{box-shadow:0px 0px 20px mediumblue;}
}

@-webkit-keyframes progress {
0%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 0%;}
100%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 70%;}
}
@-webkit-keyframes relay {
0%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 0%;}
100%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 70%;}
}

@-webkit-keyframes transmenu {
0%{height: 50px;
display: block;}
100%{
height: 240px;
display: block;}
}

@-webkit-keyframes transmenu2 {
0%{height: 10px;
	display: block;
}
100%{
height: 80px;
display: block;}
}

@-webkit-keyframes transmenu3 {
0%{height: 80px;
	display: block;
}
100%{
height: 0;
display: block;}
}

@-webkit-keyframes newsanime {
0%{width: 1%;
}
100%{
width: 80%;
}
}

@-webkit-keyframes newsanime2 {
0%{width: 0;
}
100%{
width: 20%;
}
}

@-webkit-keyframes newsanime3 {
0%{height: 0;
}
100%{
height: 150px;
}
}

@-webkit-keyframes newsanime4 {
0%{width: 1%;
}
100%{
width: 58%;
}
}

@-webkit-keyframes newsanime5 {
0%{width: 0;
}
100%{
width: 100%;
}
}

/* animation firefox */

@-moz-keyframes clignote {
0%{box-shadow:0px 0px 20px mediumblue;
background-color: white;}
50%{box-shadow:0px 0px 0px white;}
100%{box-shadow:0px 0px 20px mediumblue;}
}

@-moz-keyframes progress {
0%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 0%;}
100%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 70%;}
}

@-moz-keyframes relay {
0%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 0%;}
100%{border-bottom: 3px solid #00bcd4;
border-top: 3px solid #00bcd4;
width: 70%;}
}

@-moz-keyframes transmenu {
0%{height: 50px;
display: block;}
100%{
height: 240px;
display: block;}
}

@-moz-keyframes transmenu2 {
0%{height: 10px;
	display: block;
}
100%{
height: 80px;
display: block;}
}

@-moz-keyframes newsanime {
0%{width: 1%;
}
100%{
width: 80%;
}
}

@-moz-keyframes newsanime2 {
0%{width: 0;
}
100%{
width: 20%;
}
}

@-moz-keyframes newsanime3 {
0%{height: 0;
}
100%{
height: 150px;
}
}

@-moz-keyframes newsanime4 {
0%{width: 1%;
}
100%{
width: 58%;
}
}

@-moz-keyframes newsanime5 {
0%{width: 0;
}
100%{
width: 100%;
}
}

#overlay3{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}
#overlay3:target{
    display: block;
}

#overlay3:target .popup_block{
    transition: width 2s;
        -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
    width: 50%;
}

.popup_block{
    background: #fff;
    text-align: center;
    padding: 0;
    position: relative;
    margin: 10% auto;
    width: 0%;
    box-shadow: 0px 0px 20px #000;
    transition: width 2s;
        -webkit-transform: translate3d(0 0 0);
    -moz-transform: translate3d(0 0 0);
    -ms-transform: translate3d(0 0 0);
    -o-transform: translate3d(0 0 0);
    border-radius: 40px;
}
img.btn_close {
    float: right;
    width: 50px;
    height: 50px;
    margin: -110px -70px 0 0;
}

#h1overlay
{
	margin: 0;
	color: #000;
	border: none;
	background-color: #f6f4f4;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

label
{
	text-align: left;
	position: relative;
	display: inline-block;
	vertical-align: top;
	top: 10px;
}

.scales
{
	top: 0;
}

#formupload .span
{
    color: #fff;
    display: block;
    width: 90%;
    margin: 0 auto;
    background: #00bcd4;
    border-radius: 10px 10px 0 0;
    padding: 10px;
}

#formupload input
{
    width: 90%;
    background-color: white;
    border-radius: 0 0 10px 10px;
    border-bottom: 5px solid #00bcd4;
    color: #000;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
}

#formupload #upload
{
    width: 70%;
    background-color: #00bcd4;
    border-radius: 10px;
    border-bottom: 2px solid #00bcd4;
    color: #fff;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
}

#formupload label
{
	color: var(--titre);
}

.cke_chrome
{
    border-radius: 10px;
    overflow: hidden;
}
/*Notification*/

 	@keyframes anim_notif{
    0% {
		transform: scale(0.8);
		border: 2px solid #f44336;
		opacity: 1;

	}
	
	100% {
		transform: scale(1.7);
		border: 2px solid #f44336;
		opacity: 0;
	}
    	}

.border_notif
{
	top: 0;
	left: 0;
	line-height: 20px;
	font-size: 32px;
	width: 20px;
	height: 20px;
	border: 10px solid #f44336;
	opacity: 1;
	display: inline-block;
	position: absolute;
	animation: ease-out 1.5s infinite anim_notif;
	transition: transform 3s;
	border-radius: 50%;
	background: transparent;
	transform: scale(1);
}

.notification_cont
{
	height: 50px;
	width: 50px;
	background-color: var(--notif);
	position: fixed;
	display: block;
	top: 35px;
	right: calc((86px/2) - (25px));
	transition: width .5s, height .4s, border-radius .5s, opacity 1s;
	overflow-y: auto;
	overflow-x:hidden;
	border-radius: 50%;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
	padding: 5px;
	opacity:0;
}

.notification
{
	margin: 0 auto;
	color: #fff;
	width: 95%;
	border-bottom: 0;
	border-radius: 10px;
	background: var(--notif-font);
	top: 10px;
	position: relative;
	padding: 5px 10px 10px 10px;
	margin-bottom: 10px;
	height: auto;
	display: block;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
}

.h1_notif
{
	background: var(--notif-h1);
}

.h2_notif
{
	color: #00bcd4;
	display: inline-block;
	font-size: 14px;
}

.import_notif
{
	display: inline-block;
	background: gray;
	padding: 5px;
	border-radius: 5px;
	color: #fff;
}

.contenue_notif
{
	position: relative;
	top: 20px;
	display: block;
	min-height: 40px;
	width: 100%;
}

.hide-notif-btn
{
	color: var(--notif-close);
	font-size: 40px;
	top: 0;
	padding-left: 92.5%;
}

.hide-notif
{
	position: absolute;
	right: 10px;
	top: 50%;
	cursor: pointer;
	color: var(--notif-close);
	font-size: 19px;
	transform: translatey(-50%);
}

.hide-all-notif
{
	color: #fff;
	margin-top: 1px;
	background-color: gray;
	width: 70%;
	border: 0;
	text-transform: uppercase;
	cursor: pointer;
	height: auto;
	padding: 5px;
	border-radius: 5px;
	display: block;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
	top: 4px;
	margin-bottom: 10px;
}

.nb_notif
{
	position: absolute;
	top: 40px;
	color: #fff;
	left: 50%;
	background: #f44336;
	display: block;
	width: 20px;
	height: 20px;
	font-size: 15px;
	line-height: 20px;
	border-radius: 50%;
}


#subnotif
{
	border: none;
	outline: none;
	color: #fff;
	background: #00bcd4;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	border-radius: 40px;
	transition: all 0.25s;
	box-shadow: 0 4px 15px -5px #00bcd4;
	padding: 15px 30px;
	font-size: 15px;
}

#subnotif:hover
{
    background: #00bcd4;
    color: #fff;
}

/*Tuto Antipub*/

#choixtutonav
{
    position: relative;
    width: 100%;
}

#contenuchoix
{
    position: absolute;
    top: 220px;
    width: 100%;
    display: inline-block;
    padding: 20px;
}

#choixtutonav #contenuchoix #contenunav img
{
    width: 200px;
    top: 10px;
    position: relative;
}

.fa-sync-alt
{
	margin: 0 auto;
	left: 50%;
	display: block;
	position: relative;
	font-size: 60px;
	transform: translateX(-50%);
	text-align: center;
	background: #00bcd4;
	color: #fff;
	border-radius: 20px;
	margin-bottom: 10px;
	width: 100%;
}

.ret_accueil
{
	position: absolute;
	width: 70%;
	left: 2%;
	top: 25px;
}

.content_ret_accueil
{
	height: 100%;
	background: #00bcd4;
	position: relative;
	padding: 30px;
	width: 20%;
	border-radius: 20px;
	color: #fff;
	text-align: right;
	min-width: 250px;
}

.content_ret_accueil p
{
	margin: 0;
	color: #fff;
}

.fa-chevron-left
{
	content: "";
	display: inline-block;
	font-size: 30px;
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.content_nav_detect img
{
	width: 50px;
	height: 50px;
	display: inline-block;
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
}

.nav_detect
{
	position: absolute;
	width: 70%;
	right: 2%;
	top: 25px;
}

.content_nav_detect
{
	height: 80px;
	background: var(--secondary);
	position: relative;
	width: 20%;
	border-radius: 20px;
	border: 5px solid #00bcd4;
	min-width: 224px;
}

.content_nav_detect p
{
	margin: 0;
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 4%;
}

.content_choix_nav
{
	width: 10%;
	background: var(--secondary);
	border-radius: 20px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 2%;
	padding: 10px;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
}

.content_choix_nav ul a
{
	color: #fff;
}

.content_choix_nav li
{
	border-radius: 50%;
	overflow: hidden;
	width: 90px;
	height: 90px;
	margin: 0 auto;
    margin-bottom: 0px;
	margin-bottom: 10px;
}

.content_choix_nav span
{
	width: 90px;
	height: 90px;
	display: block;
	position: absolute;
	border-radius: 50%;
	box-shadow: var(--antpub-shadow);
	opacity: 0;
	transition: opacity 500ms;
}

.content_choix_nav li:hover span
{
	opacity: 1;
}

.content_choix_nav li img
{
	width: 100%;
	height: 100%;
}

#contenunav
{
    width: 49.8%;
    text-align: center;
    display: inline-block;
    margin-bottom: 20px;
}

#contenunav a
{
    display: block;
    width: 200px;
    position: relative;
    margin: 0 auto;
    color: #fff;
    background: #00bcd4;
    border-radius: 10px;
    padding: 20px;
    top: 10px;
}

#content-antipub
{
    width: 70%;
	text-align: center;
	background: var(--secondary);
	position: absolute;
	top: 120px;
	border-radius: 20px;
	right: 2%;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
}

#content-antipub .lienmaj
{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    display: block;
    width: auto;
    background: #00bcd4;
    color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
}

.lienmaj
{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    display: block;
    width: auto;
    background: #00bcd4;
    color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
}

.contdialog
{
    position: relative;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    height: 250px;
    border: 2px solid #00bcd4;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0,0,0,.5);
    background: #fff;
}

.dialog
{
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    color: black;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    z-index: 1000;
}

#choixactuel
{
    width: 20%;
    border-radius: 10px;
    background-color: #00bcd4;
    border: 2px solid #00bcd4;
    color: #fff;
    padding: 10px;
    bottom: 20px;
    position: absolute;
    cursor: pointer;
}

#choixautre
{
    width: 20%;
    min-width: 217px;
    border-radius: 10px;
    background-color: #607D8B;
    border: 2px solid #607D8B;
    color: #fff;
    padding: 10px;
    bottom: 20px;
    right: 20px;
    position: absolute;
    cursor: pointer;
}
/*Fint tuto antipub*/
/*Page Apropos*/

#apropos
{
    position: relative;
    width: 100%;
    height: 100%;
	display: flex;
	top: 400px;
}

#contenuapropos
{
    width: 70%;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid #00bcd4;
    border-radius: 10px;
    text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

#apropos #contenuapropos p
{
    font-size: 35px;
	line-height: 30px;
    color: red;
	margin: 0;
}

/*Fin page Apropos*/
/*optimisation chrome*/
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
input:-internal-autofill-selected {
    background-color: transparent !important;
    background-image: none !important;
}
/*fin opti*/
/*Avatar*/
    	@keyframes looping{
    0% {
		transform: translateX(-50%) rotate(0deg);
	}
	
	100% {
		transform: translateX(-50%) rotate(360deg);
	}
    	}


    .div_anim.on{

    	animation: linear 2s infinite looping ;
    }

      html {
        font-family: sans-serif;
      }
      .form {
    width: 100%;
    background: transparent;
    height: auto;
    margin: 0 auto;
   	margin-top: 20px;
      }

      .contanim
      {
      	position: relative;
      	text-align: center;
      	top: 50px;
		display: block;
      }

      .preview
      {
    position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
      }
      
      .form .preview div{
        height: 300px;
        width: 300px;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 auto;
          
      }
      
      .form ol {
        padding-left: 0;
        margin: 0;
      }
      .form li, div > p {
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
      }
      .form img {
    order: 1;
    margin: 0 auto;
    height: 100%;
      }
      .form p {
    line-height: 32px;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 300px;
      }
      .form label, form button {
	background-color: rgba(0, 0, 0, .7);
    position: relative;
    display: inline-block;
    border-radius: 50%;
    font-size: 0.8rem;
    height: 300px;
    width: 300px;
    margin: 0;
    border: none;
    margin-bottom: 10px;
    line-height: 300px;
    text-align: center;
    top: 0;
    color: #fff;
    z-index: 2;
      }
      .form label:hover, form button:hover {
        background-color: #00bcd4;
        color: white;
      }
      .form label:active, form button:active {
        background-color: #0D3F8F;
        color: white;
      }
      .div_anim
      {
      	position: absolute;
      	background: #fff;
      	border: 5px solid;
      	border-color: #00bcd4 #fff;
      	border-radius: 50%; 
      	top: -5px;
      	width: 310px;
      	height: 310px;
      	transition: transform 1s;
      	left: 50%;
      	transform: translateX(-50%) rotate(0deg);
      }

      #submit{
	border: none;
outline: none;
color: #fff;
background: #00bcd4;
margin: 0 auto;
text-align: center;
cursor: pointer;
border-radius: 40px;
transition: all 0.25s;
box-shadow: 0 4px 15px -5px #00bcd4;
padding: 15px 30px;
font-size: 15px;
top: 50px;
	position: relative;
      }

      #submit:hover
      {
      	background: #00bcd4;
      	color: #fff;
      }
      
      #para{
          color: #fff;
      }
/*Fin avatar*/
/*Change OTP*/
#secureOtp
{
	position: relative;
	margin: 0 auto;
	/*top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);*/
	width: 100%;
	padding: 0;
	padding-bottom: 40px;
	box-sizing: border-box;
	border-radius: 10px;
	text-align: left;
}
#secureOtp h1
{
	color: gray;
	position: relative;
	width: 50%;
	left: 0;
	margin: 0;
	border-bottom: 2px solid gray;
	border-radius: 0;
	text-align: left;
	background: transparent;
}
#subotp{
	border: none;
    outline: none;
    color: #fff;
    background: #00bcd4;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    border-radius: 40px;
    transition: all 0.25s;
    box-shadow: 0 4px 15px -5px #00bcd4;
    padding: 15px 30px;
    font-size: 15px;
}
/*Fin change OTP*/
/*Change mdpv2*/
#box_mdp
{
    position: relative;
    top: 0;
    height: 100%;
	/*top:0; right:0; bottom:0; left:0;*/
}
#mdpv2
{
	position: relative;
	margin: 0 auto;
	/*top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);*/
	width: 100%;
	padding: 0;
	padding-bottom: 40px;
	box-sizing: border-box;
	border-radius: 10px;
	text-align: left;
}
#mdpv2 h1
{
	color: gray;
	position: relative;
	width: 50%;
	left: 0;
	margin: 0;
	border-bottom: 2px solid gray;
	border-radius: 0;
	text-align: left;
	background: transparent;
	margin-bottom: 20px;
}

#mdpv2 .inputBox
{
	position: relative;
	width: 50%;
	margin: 0 auto;
}

#mdpv2 .inputBox input
{
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: var(--label);
	letter-spacing: 1px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #00bcd4;
	outline: none;
	background: transparent;
}
#mdpv2 .inputBox label
{
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 14px;
	color: var(--label);
	pointer-events: none;
	transition: all .10s linear;
	font-family: sans-serif;
}

#mdpv2 .inputBox input:focus ~ label,
#mdpv2 .inputBox input:valid ~ label
{
	top: -25px;
	left: 0;
	text-align: center;
	color: #00bcd4;
	transition: all .1.5s;
	font-family: sans-serif;

}

#mdpv2 input[type="submit"]
{
	border: none;
	outline: none;
	color: #fff;
	background: #00bcd4;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	border-radius: 40px;
	transition: all 0.25s;
	box-shadow: 0 4px 15px -5px #00bcd4;
	padding: 15px 30px;
	font-size: 15px;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

#mdpv2 input[type="submit"]:hover
{
	background: #00bcd4;
	color: #fff;
	transition: all 1s;
}
/*Fin Change mdv2*/
/*admin en ligne*/

    	@keyframes anim_ligne{
    0% {
		transform: scale(0.8);
		border: 1px solid #00c853;
		opacity: 1;

	}
	
	100% {
		transform: scale(1.7);
		border: 1px solid #00c853;
		opacity: 0;
	}
    	}

.border_ligne
{
	width: 14px;
	height: 14px;
	display: inline-block;
	position: absolute;
	animation: ease-out 1.5s infinite anim_ligne;
	background: transparent;
	transform: scale(1);
	border: 1px solid #00c853;
	transition: transform 3s;
	border-radius: 50%;
}

.rond_ligne
{
	display: inline-block;
	width: 14px;
	height: 14px;
	max-width: 14px;
	max-height: 14px;
	border-radius: 50%;
	background-color: #00c853;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 5px;
}

.rond_ligne_user
{
	display: inline-block;
	width: 14px;
	height: 14px;
	max-width: 14px;
	max-height: 14px;
	border-radius: 50%;
	background-color: #00c853;
	vertical-align: top;
}

.border_ligne_off
{
	width: 14px;
	height: 14px;
	display: inline-block;
	position: absolute;
	background: transparent;
	transform: scale(1);
	transition: transform 3s;
	border-radius: 50%;
}

.rond_ligne_off
{
	display: inline-block;
	width: 14px;
	height: 14px;
	max-width: 14px;
	max-height: 14px;
	border-radius: 50%;
	background-color: #f44336;
	vertical-align: top;
}

.h1_rond_ligne
{
	background: transparent;
	color: var(--titre);
	position: relative;
	width: auto;
	border-radius: 0;
	margin: 0 auto;
    margin-bottom: 0px;
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
}

.ligne_user
{
    vertical-align: top;
    position: relative;
    display: inline-block;
    height: auto;
    top: -2px;
}

.cont_ligne
{
	width: 100%;
	background: var(--secondary);
	padding: 10px;
	border-radius: 20px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
	margin-bottom: 10px;
}
/*fin admin enligne*/
/*App recherche*/
#result-search
{
	position: fixed;
	z-index: 9998;
	width: 100%;
	height: 100%;
	padding-top: 140px;
}
/*Fin app recherche*/
/*DynArt*/
.dynArt_glob
{
	visibility: hidden;
	width: 100%;
	background: none;
	height: 100%;
	position: fixed;
	z-index: 9997;
	top: 0;
	overflow: hidden;
	opacity: 0;
	transition: background .25s;
}
.dynArt_glob.show
{
	opacity: 1;
	background: rgba(0, 0, 0, 0.7);
	visibility: visible;
}
.dynArt_content
{
position: fixed;
height: calc(100% - 20px);
width: 50%;
background: var(--secondary);
top: 20px;
z-index: 9998;
transform: translate(-50%,100%);
left: 50%;
border-radius: 50px 50px 0 0;
overflow-y: auto;
overflow-x: none;
transition: transform .25s, opacity .25s;
opacity:0;
}
.dynArt_content.show
{
	transform: translate(-50%, 0px);
	opacity:1;
}
.close_dynart
{
	position: fixed;
	display: none;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	z-index: 9999;
	color: white;
	text-align: center;
	border-radius: 50%;
	font-size: 30px;
}
.close_dynart .fa-times
{
	content: "f00d";
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}
.dyn_class
{
	background: red;
	height: auto;
	color: white;
	border-radius: 10px;
	padding: 15px;
	line-height: 0;
	top: calc(22.5px - 15px);
	position: relative;
	min-width: 158px;
	transition: background .50s;
	cursor: pointer;
}
.dyn_class.active
{
	background: green!important;
}
.dyn_class:hover:after,
.dyn_class:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -100%;
  left: 50%;
	transform: translate(-50%, -50%); /* on centre horizontalement  */
  z-index: 999; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 14px 14px;
  background: #00bcd4;
  color: #fff;
  border-radius: 4px;
  font-size: 1.2rem;
}
[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -35%;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #00bcd4;
  z-index: 999;
}
.recharge_class
{
background: linear-gradient(141deg,#1fc8db 51%,#2cb5e8 75%);
height: auto;
color: #fff;
border-radius: 10px;
padding: 15px;
line-height: 0;
top: calc(22.5px - 15px);
position: relative;
min-width: 158px;
transition: background .50s;
cursor: pointer;
}
.recharge_class:hover:after,
.recharge_class:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -100%;
  left: 50%;
	transform: translate(-50%, -50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 14px 14px;
  background: #00bcd4;
  color: #fff;
  border-radius: 4px;
  font-size: 1.2rem;
  z-index: 999;
}
[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -35%;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #00bcd4;
  z-index: 999;
}
.page_dynart
{
	display: inline-block;
	width: 100%;
	margin-left: 5%;
}
div#page_dynart div#image_article2
{
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
/*Fin dynart*/
/*Status site*/
.global-content-status
{
	position: relative;
    top: 250px; 
	text-align: center;
    width: 100%;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding-top: 110px;
}
.content-status
{
	background: var(--secondary);
    color: gray;
    border-radius: 20px;
    min-width: 80%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    padding: 10px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 39px;
    height: 40px;
    display: inline-block;
}
.content-status-site
{
	background: var(--secondary);
    color: gray;
    border-radius: 20px;
    min-width: 80%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    padding: 10px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 39px;
    height: 40px;
    display: inline-block;
}
.serv_site
{
	box-shadow: 0 5px 4px -1px rgb(0 0 0 / 30%);
	padding: 0;
	margin: 10px auto;
	border-radius: 20px;
	width: 300px;
	overflow: hidden;
	background: var(--secondary);
}
.serv_site h1
{
	background: var(--status-h1);
	border-radius:0;
	width:100%; 
	padding:10px;
	font-size:29px;
}
/*Fin status site*/
/*Recherche mobile*/
#chk-cmpt
{
	display: none;
}
.show-cmpt-btn
{
	display: none;
}
#chk-search
{
    display: none;
}

.show-search-btn
{
    display: none;
}

.close-search-btn
{
	display: none;
}
#chk-search-close
{
    display: none;
}
/*Fin recherche mobile*/
/*Admin*/
.content_nb_pers
{
	top: 80px;
	position: relative;
	min-width: 400px;
	border: 2px solid var(--border);
	border-radius: 20px;
	height: 250px;
	padding: 10px;
	display: inline-block;
	margin: 10px;
	box-shadow: 0 0 8px rgba(0,0,0,.5);
	overflow: hidden;
}
.titre_nb_pers
{
	position: relative;
	display: block;
	font-size: 25px;
}
.content_nb_pers:last-child .titre_nb_pers
{
	top: 40px;
}
.nb_pers
{
	display: block;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	font-size: 40px;
	color: var(--titre);
}
#content-stat{
	width: 75%;
	left: 58%;
	top: 300px;
	margin-top: 20px;
	position: absolute;
	height: auto;
	padding: 10px;
	border-radius: 10px;
	display: flex;
	text-align: center;
	transform: translatex(-50%);
	justify-content: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.table
{
	padding-top: 60px;
	position: relative;
	top: 80px; 
	border-radius: 20px;
	overflow: hidden;
	background: var(--secondary);
}
.table-head
{
	width: 100%;
  	position: absolute;
  	left: 0;
  	top: 0;
}
table
{
	width: 100%;
	border-collapse: collapse;
}
.table th
{
	font-family: Lato-Bold;
	font-size: 18px;
	color: var(--table-th);
	line-height: 1.4;
	background-color: var(--table-head);
}
.table-head th
{
	padding-top: 18px;
	padding-bottom: 18px;
}
.table td
{
	font-family: Lato-Regular;
	font-size: 15px;
	color: var(--table-td);
	line-height: 1.4;
}
.table-body td
{
	padding-top: 16px;
	padding-bottom: 16px;
}
.column1
{
	width: 15%;
	padding-left: 40px;
}
.column2
{
	width: 10%;
}
.column3
{
	width: 20%;
}
.column4
{
	width: 15%;
}
.column5
{
	width: 20%;
}
.column6
{
	width: 20%;
}
th, td
{
	text-align: left;
	font-weight: unset;
	padding-right: 10px;
}
.table .table-body tr:nth-child(2n)
{
	background-color: var(--table-body);
}
.content-maj-user
{
	position: fixed;
    display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #414141;
	padding: 10px;
	width: 50%;
	height: 100%;
	border-radius: 20px;
}
.content-maj-user.show
{
	display: block;
}
/*Fin Admin*/
/*DDMFIRM*/

/*header DDMFIRM*/
#logohead_ddmfirm
{
	width: 100%;
	height: 100%;
	display: inline-block;
	text-align: center;
}
/*FIN HEADER DDMFIRM*/

/*barre de recherche*/
.chercheurdiv
{
	width: 90%;
	height: auto;
	position: absolute;
	top: 240px;
	background: var(--secondary);
	border-radius: 10px;
	margin: 0 auto;
	padding: 10px;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
}
.chercheur
{
	border: none;
	background-color:
	transparent;
	vertical-align: middle;
	color: var(--text);
	height: 70px;
	width: 85%;
	font-size: 16px
}
.chercheur::placeholder
{
	color: var(--titre);
	opacity: 1;
	font-size: 16px
}
#chercheurvalid
{
	display: none;
}
.labelcherche
{
	top: 50%;
	height: 70px;
	line-height: 70px;
	float: right;
	font-size: 50px;
	position: absolute;
	right: 10px;
	transform: translateY(-50%);
}
.select-cat
{
	border-radius: 10px;
	border: none;
	padding: 0 10px 0 10px;
	height: 70px;
	background: var(--select-back);
	color: var(--titre);
	font-size: 16px;
	cursor: pointer;
	position: absolute;
	right: 80px;
}
/*fin barre de recherche*/
/*contenu firmactu*/
#firmactu
{
	top: 340px;
	position: relative;
	width: 100%;
	min-height: 400px;
	border-radius: 10px;
	padding: 10px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.firmactu_info
{
	display: inline-block;
	width: 79%;
	position: relative;
	top: 0;
	vertical-align: top;
	height: 150px;
}
#contenu_firmactu
{
	display: inline-block;
    width: 100%;
    height: 150px;
    background: var(--secondary);
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
}

#contenu_firmactu:hover .lien_background 
{
  display: block;
}

#contenu_firmactu:hover .div_lien_article
{
	display: block;
}

#contenu_firmactu .user
{
	display: flex;
	margin-top: auto;
	position: absolute;
	left: 10px;
	bottom: 0;
	padding: 10px;
}

#contenu_firmactu a
{
	color: var(--text);
}
#cont_img_art
{
	display: inline-block;
	position: relative;
    width: 18%;
    height: 100%;
    overflow: hidden;
	background: white;
    text-align: center;
}
#titre_art
{
	display: inline-block;
    top: 10px;
    position: relative;
    width: 98%;
    text-align: left;
    word-break: break-word;
	color: var(--title-firm);
	background: var(--back-title-firm);
	border-radius: 5px;
	padding: 5px;
	left: 10px;
}
.titre_categorie
{
	position: relative;
	top: 0;
	width: 49.5%;
	float: left;
	height: 50px;
	border-bottom: 2px solid var(--firm-span);
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
	margin-right: 1%;
	color: var(--firm-span);
	margin-bottom: 20px;
}
.titre_categorie_droite
{
	position: relative;
	top: 0;
	width: 49.5%;
	float: left;
	height: 50px;
	border-bottom: 2px solid var(--firm-span);
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--firm-span);
	margin-bottom: 20px;
}
.img_art
{
	height: 100%;
    width: auto;
	transition: transform .25s, filter .25s;
}

#contenu_firmactu:hover .img_art {
  transform: scale(1.2);
  filter: blur(2px);
  }

#contenu_firmactu_ope:hover .img_art {
  transform: scale(1.2);
  filter: blur(2px);
  }

.contenu_smart
{
	width: 49.5%;
	position: relative;
	display: flex;
	top: 10px;
	justify-content: space-evenly;
	flex-wrap: wrap;
	min-width: 500px;
}

.contenu_ope
{
	width: 49.5%;
	position: relative;
	float: right;
	top: 10px;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	min-width: 500px;
}

#contenu_firmactu_ope
{
	display: inline-block;
	width: 100%;
	height: 150px;
	background: var(--secondary);
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
}

#contenu_firmactu_ope:hover .lien_background {
  display: block;
}

#contenu_firmactu_ope:hover .div_lien_article{
	display: block;
}

#contenu_firmactu_ope .user {
  display: flex;
  margin-top: auto;
  position: absolute;
  left: 10px;
  bottom: 0;
  padding: 10px;
}

#contenu_firmactu_ope a
{
	color: var(--text);
}
/*fin contenu*/
/*logo marque*/
.marque
{
	position: absolute;
	top: 300px;
	width: 100%;
	padding-left: 1%;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.marque .container-marque{
	height: 80px;
	border-radius: 20px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
	position: relative;
	display: flex;
	margin-left: 1%;
	width: 200px;
	background: var(--secondary);
	color: var(--text);
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	overflow: hidden;
}
.container-marque a{
	color: #fff;
	width: 100%;
	height: 100%;
	line-height: 80px;
}
.logomarque
{
	height: auto;
	width: 50px;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	left: 10px;
}
/*fin logo marque*/
#card_ope
{
	position: relative; 
	width: 500px; 
	padding: 0; 
	height: 180px;
}
#card_smart
{
	height: 177px;
	width: 400px;
}
.cont_info_smart
{
	width: 100%;
	top: 0;position: absolute;
	height: 100%;
	right: 0;
	text-align: left;
}
.cont_info_smart_e1
{
	height: 100%; 
	display: inline-block; 
	width: calc(400px - 90px); 
	vertical-align: top; 
	text-align: center;
}
#card-header-ope
{
	width: 180px; 
	height: 100%;
	background: #fff;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}
.cont_info_ope
{
	width: calc(500px - 180px);
	top: 0;position: absolute;
	height: 100%;
	right: 0;
}
.container-changelog
{
	visibility: hidden;
	width: 100%;
	background: none;
	height: 100%;
	position: fixed;
	z-index: 9997;
	top: 0;
	overflow: hidden;
	opacity: 0;
	transition: background .25s;
}
.changelog
{
	position: fixed;
	height: calc(100% - 20px);
	width: 50%;
	background: var(--secondary);
	top: 20px;
	z-index: 9998;
	transform: translate(-50%,100%);
	left: 50%;
	border-radius: 50px 50px 0 0;
	overflow-y: auto;
	overflow-x: none;
	transition: transform .25s,opacity .25s;
	opacity: 0;
}
.changelog.show
{
	transform: translate(-50%,0);
	opacity: 1;
}
.container-changelog.show
{
	visibility: visible;
	background: rgba(0,0,0,.7);
	opacity: 1;
}
.changelog ul
{
	padding-left: 20px;
    padding-right: 20px;
}

/*Fin DDMFIRM css*/
/*New design article*/
* {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  /*background-color: #f7f8fc;*/
  font-family: Lato, sans-serif;
  color: var(--text);
}
.container {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.card {
  margin: 10px;
  background-color: var(--secondary);
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 300px;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  outline:none;
  border:none;
  text-decoration:none;
}
.card h4{
	min-height: 38px;
}
.card-header img {
	height: 100%;
	width: 100%;
  object-fit: cover;
  transition: transform .25s;
}
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  min-height: 250px;
  text-align: left;
}

.card-header{
	overflow: hidden;
	position: relative;
	height: 200px;
	-webkit-perspective: 1000;
  	-webkit-backface-visibility: hidden;
  	-webkit-transform: translate3d(0,0,0);
  	outline:none;
  	border:none;
  	text-decoration:none;
}

.card-header span{
	position: absolute;
	left: 0;
	display: block;
	padding: 10px;
	background: var(--com-font);
	color: var(--secondary);
	border-bottom-right-radius: 20px;
	z-index: 2;
	border-right: 2px solid var(--secondary);
	border-bottom: 2px solid var(--secondary);
}

.card:hover .card-header img{
	transform: scale(1.2);
	filter: blur(2px);
}

.card:hover .div_lien_article{
	display: block;
}

.card:hover .lien_background{
	display: block;
}

.lien_background{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0, .5);
	z-index: 2;
	display: none;
}

.card-body h4 a {

	color: var(--text);
}

.tag {
  background: #cccccc;
  border-radius: 50px;
  font-size: 12px;
  margin: 0;
  color: #fff;
  padding: 2px 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tag-teal {
  background-color: #47bcd4;
}
.tag-purple {
  background-color: #5e76bf;
}
.tag-pink {
  background-color: #cd5b9f;
}

.card-body p {
  font-size: 13px;
  margin: 0 0 40px;
  color: var(--text);
}
.user {
  display: flex;
  margin-top: auto;
}

.user img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.user-info h5 {
  margin: 0;
  text-align: left;
  color: var(--text);
}
.user-info small {
  color: var(--text2);
  text-align: left;
}
.firmactu_info .user-info small{
  height: 20px;
  display: block;
}

/*Fin new design article*/
#contact {
  font-size: 16px;
  color: #404040;
  font-family: Montserrat, sans-serif;
}
.profil-card {
  background-color: var(--secondary);
  max-width: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);
}
.profil-card .banner {
  background-image: url("https://www.beta.ddmactu.zd.fr/image/profil2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 11rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}
.profil-card .banner img {
  background-color: #fff;
  width: 8rem;
  height: 8rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
  border-radius: 50%;
  transform: translateY(50%);
  transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 2;
}
.profil-card .banner img:hover {
  transform: translateY(50%) scale(1.3);
}
.profil-card .profil-menu {
  width: 100%;
  height: 5.5rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  box-sizing: border-box;
}
.profil-card .profil-menu .opener {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  border-radius: 50%;
  transition: background-color 100ms ease-in-out;
}
.profil-card .profil-menu .opener:hover {
  background-color: var(--profil-c-op);
}
.profil-card .profil-menu .opener span {
  background-color: var(--profil-c-op-span);
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  top: 0;
  left: calc(50% - 0.2rem);
  border-radius: 50%;
}
.profil-card .profil-menu .opener span:nth-child(1) {
  top: 0.45rem;
}
.profil-card .profil-menu .opener span:nth-child(2) {
  top: 1.05rem;
}
.profil-card .profil-menu .opener span:nth-child(3) {
  top: 1.65rem;
}
.profil-card h2.name {
  text-align: center;
  padding: 0 2rem 0.5rem;
  margin: 0;
  color: var(--profil-c-h2);
  font-size: 16px;
  font-family: Montserrat, sans-serif;
}
.profil-card .title {
  color: var(--profil-c-titre);
  font-size: 0.85rem;
  text-align: center;
  padding: 0 2rem 1.2rem;
}
.profil-card .actions {
  padding: 0 2rem 1.2rem;
  display: flex;
  flex-direction: column;
  order: 99;
}
.profil-card .actions .follow-info {
  padding: 0 0 1rem;
  display: flex;
}
.profil-card .actions .follow-info h2 {
  text-align: center;
  width: 50%;
  margin: 0;
  box-sizing: border-box;
}
.profil-card .actions .follow-info h2 a {
  text-decoration: none;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.8rem;
  transition: background-color 100ms ease-in-out;
}
.profil-card .actions .follow-info h2 a span {
  color: var(--profil-c-act-span);
  font-weight: bold;
  transform-origin: bottom;
  transform: scaleY(1.3);
  transition: color 100ms ease-in-out;
}
.profil-card .actions .follow-info h2 a small {
  color: var(--profil-c-act-small);
  font-size: 0.85rem;
  font-weight: normal;
}
.profil-card .actions .follow-info h2 a:hover {
  background-color: var(--profil-c-a-hov);
}
.profil-card .actions .follow-info h2 a:hover span {
  color: var(--profil-c-act-hov-span);
}
.profil-card .actions .follow-btn button {
  color: #fff;
  font: inherit;
  font-weight: bold;
  background-color: #00bcd4;
  width: 100%;
  border: none;
  padding: 1rem;
  outline: none;
  box-sizing: border-box;
  border-radius: 1.5rem/50%;
  margin-bottom: 10px;
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.profil-card .actions .contact-btn button {
	color:#fff;
	font: inherit;
	font-weight: bold;
	background-color: #606060;
	width: 100%;
	border: none;
	outline: none;
	box-sizing: border-box;
	border-radius: 1.5rem/50%;
	margin-bottom: 10px;
	transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }

  .profil-card .actions .contact-btn button a {
	padding: 1rem;
	width: 100%;
	height: 100%;
	display: block;
	color: inherit;
  }
.profil-cardrd .actions .follow-btn button:hover {
  background-color: #efb10a;
  transform: scale(1.1);
}
.profil-card .actions .follow-btn button:active {
  background-color: #e8a200;
  transform: scale(1);
}
.profil-card .desc {
  text-align: justify;
  padding: 0 2rem 2.5rem;
  order: 100;
  color: var(--profil-c-desc);
  font-size: 16px;
  font-family: Montserrat, sans-serif;
}

.profil-card .pro {
	color: var(--profil-c-pro);
	background-color: #FEBB0B;
	border-radius: 3px;
	font-size: 14px;
	font-weight: bold;
	padding: 3px 7px;
	position: absolute;
	left: 20px;
	top: 0.80rem;
	transform: translateY(50%);
}

/*Fin profil card*/
/*Smartphone card*/
.container-smart {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
	top:250px;
	position: relative;
}
.card-header-smart
{
	background: #fff;
	height: 200px;
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 1;
}
.card_smart{
	background: var(--secondary);
	border-radius: 20px;
	text-align: center;
	width: 360px;
	box-shadow: 0 2px 20px rgba(0,0,0,.2);
	margin:10px;
	overflow:hidden;
	position: relative;
}
.card_smart img{
	min-height: 200px;
	max-height: 200px;
	z-index: 2;
	position: relative;
}

.card-header-smart img
{
	max-height: 200px;
	min-height: unset;
	z-index: 2;
	position: relative;
}
.card_smart h1{
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: 1.5vw;
}
.h1_smart{
	color: var(--text-smart);
	border-bottom: 2px solid var(--text-smart);
    border-radius: unset;
}
.card_smart a{
    font-family: montserrat,sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    color: var(--text-smart);
    font-weight: 700;
	border-top: 1px solid var(--text-smart);
}
.a_smart{
	margin-top: 20px;
	width: 100%;
	padding: 20px 30px;
	-webkit-box-shadow: unset;
    box-shadow: unset;
	border-radius: 0;
}
/*Fin Smartphone card*/
/*tuto*/

#prevent-lien
{
	width: 70px;
    overflow: hidden;
    vertical-align: sub;
    height: 70px;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 70px;
    padding: 0;
    border-radius: 40px;
    border: 2px solid var(--text-smart);
}
.container-tuto
{
	display: flex;
	width: 100%;
	justify-content: space-evenly;
	flex-wrap: wrap;
	top: 250px;
	position: relative;
}
#card-header-tuto
{
	width: 180px;
	height: 100%;
	background: #fff;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}
.cont_info_tuto
{
	width: calc(500px - 180px);
	top: 0;
	position: absolute;
	height: 100%;
	right: 0;
}
.card_tuto
{
	position: relative;
	width: 500px;
	padding: 0;
	height: 180px;
}

#card_tuto_net
{
	width: 750px;
    padding: 0;
    height: 180px;
    background: var(--secondary);
    border-radius: 20px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
    margin: 10px;
    overflow: hidden;
    position: relative;
}

#card_tuto
{
	width: 500px;
    padding: 0;
    height: 180px;
    background: var(--secondary);
    border-radius: 20px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
    margin: 10px;
    overflow: hidden;
    position: relative;
}

/*Fin tuto*/
/*Anim loader article*/
        @keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/*Fin anim loader article*/
/*Anim notif*/
@-webkit-keyframes shownotif {
    0% {height: 50px; width: 50px; opacity: 0; border-radius: 50%; z-index: 1000}
    100% {height: 92%; width: 500px; opacity: 1; border-radius: 20px; z-index: 1000}

}
/*@-webkit-keyframes hidenotif {
    0% {height: 92%; width: 500px; opacity: 1; border-radius: 20px; z-index: 1000}
	50% {height: 50px; width: 50px; box-shadow: 0 0 7px 7px var(--anim-notif); z-index: 1000}
	99% {opacity: 1;}
    100% {opacity: 0; border-radius: 50%; z-index: 1}

}*/
@-webkit-keyframes hidemenu {
    0% {z-index: 9999}
	50% {z-index: 9999}
	99% {z-index: 9999}
    100% {z-index: 999}

}
.shownotif{
    animation: shownotif .7s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.hidenotif{
      animation: hidenotif .5s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
/*Loader v2 ddmspace*/

.visuallyhidden {
	display: none;
  }

.pl,
.pl__worm {
 animation-duration: 2s;
 animation-iteration-count: infinite;
}

.pl {
 animation-name: bump5;
 animation-timing-function: linear;
 width: 5em;
 height: 5em;
}

.pl__ring {
 stroke: hsla(var(--hue),10%,10%,0.1);
 transition: stroke 0.3s;
}

.pl__worm {
 animation-name: worm5;
 animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
}

/* Animations */
@keyframes display
{
	0% {
		opacity: 1;
	   }
	  
	   100% {
		opacity: 0;
		visibility: hidden;
	   }
}
@keyframes bump5 {
 from,
  42%,
  46%,
  51%,
  55%,
  59%,
  63%,
  67%,
  71%,
  74%,
  78%,
  81%,
  85%,
  88%,
  92%,
  to {
  transform: translate(0,0);
 }

 44% {
  transform: translate(1.33%,6.75%);
 }

 53% {
  transform: translate(-16.67%,-0.54%);
 }

 61% {
  transform: translate(3.66%,-2.46%);
 }

 69% {
  transform: translate(-0.59%,15.27%);
 }

 76% {
  transform: translate(-1.92%,-4.68%);
 }

 83% {
  transform: translate(9.38%,0.96%);
 }

 90% {
  transform: translate(-4.55%,1.98%);
 }
}

@keyframes worm5 {
 from {
  stroke-dashoffset: 10;
 }

 25% {
  stroke-dashoffset: 295;
 }

 to {
  stroke-dashoffset: 1165;
 }
}
/*Fin loader*/
/*Check beta stable*/
.v_stable
{
	display: block;
}
.v_stable.show
{
   display: block;
}

.v_beta{
   display: none;
}

.v_beta.show
{
   display: block;
}
.chk_fr
{
   position: relative;
background: transparent;
border: none;
color: #fff;
width: 95px;
padding: 0;
height: 38px;
}

.chk_en
{
position: relative;
background: transparent;
border: none;
color: var(--titre);
width: 95px;
padding: 0;
height: 38px;
}

#contain_change_type
{
width: 195px;
position: relative;
margin: 0 auto;
border-radius: 20px;
box-shadow: inset 0px 0px 5px -2px;
}

#contain_back_dyn
{
   width: 100%;
}

.back_dyn
{
width: 50%;
position: absolute;
left: 0;
background: #00bcd4;
height: 100%;
top: 0;
border-radius: 20px;
transition: left .25s;
}

.back_dyn.show
{
   left: 50%;
}
/*Logiciels*/
.content-element
{
    display: inline-block;
    width: 68%;
}
.content-app
{
	top: 20px;
    position: relative;
}
.app
{
	display: flex;
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90%;
	align-items: center;
	margin: 20px auto;
	position: relative;
	background: var(--secondary);
}
.content-logo img
{
	width: auto;
	height: 100%;
}
.button-app
{
	border-radius: 10px;
    background: #00bcd4;
    padding: 10px;
	border: none;
    color: #fff;
	cursor: pointer;
}
.content-logo
{
    height: 60px;
	width: 60px;
}
.button-app .fa-solid
{
	border-right: 2px solid;
    padding-right: 5px;
    margin-right: 5px;
}
.logi_info_dispo
{
	color: #f44336;
}