.reinitialise {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* Vous devrez modifier les quotes selon le langage de la page (ici il s'agit du Langage Français) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
width : auto;
word-spacing : normal;
z-index : auto;
}
@font-face{
font-family:"Abril_Fatface";
src:url('../fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('ttf');
src:local('Abril_Fatface'),local('Abril_Fatface'),url('../fonts/Abril_Fatface/AbrilFatface-Regular.ttf');
}
@font-face{
font-family:"adriatica";
src:url('../fonts/adriatica/Adriatica.ttf') format('ttf');
src:local('adriatica'),local('adriatica'),url('../fonts/adriatica/Adriatica.ttf');
}
@font-face{
font-family:"Bangers";
src:url('../fonts/bangers/Bangers.ttf') format('ttf');
src:local('bangers'),local('bangers'),url('../fonts/bangers/Bangers.ttf');
}
@font-face{
font-family:"Courgette";
src:url('../fonts/Courgette/Courgette-Regular.ttf') format('ttf');
src:local('Courgette'),local('Courgette'),url('../fonts/Courgette/Courgette-Regular.ttf');
}
@font-face{
font-family:"Didact_Gothic";
src:url('../fonts/Didact_Gothic/DidactGothic-Regular.ttf') format('ttf');
src:local('Didact_Gothic'),local('Didact_Gothic'),url('../fonts/Didact_Gothic/DidactGothic-Regular.ttf');
}
@font-face{
font-family:"DRIVE-TH";
src:url('../fonts/drive/DRIVE-TH.TTF') format('ttf');
src:local('drive'),local('drive'),url('../fonts/drive/DRIVE-TH.TTF');
}
@font-face{
font-family:"FontLabSource";
src:url('../fonts/Font Lab Source/Lobster 1.4 merged and optimized.vfb') format('vfb');
src:local('FontLabSource'),local('FontLabSource'),url('../fonts/Font Lab Source/Lobster 1.4 merged and optimized.vfb');
}
@font-face{
font-family:"Indie_Flower";
src:url('../fonts/Indie_Flower/IndieFlower-Regular.ttf') format('ttf');
src:local('Indie_Flower'),local('Indie_Flower'),url('../fonts/Indie_Flower/IndieFlower-Regular.ttf');
}
@font-face{
font-family:"Lighthouse";
src:url('../fonts/Lighthouse/Lighthouse_PersonalUse.ttf') format('ttf');
src:local('Lighthouse'),local('Lighthouse'),url('../fonts/Lighthouse/Lighthouse_PersonalUse.ttf');
}
@font-face{
font-family:"Lobster";
src:url('../fonts/Lobster/Lobster-Regular.ttf') format('ttf');
src:local('Lobster'),local('Lobster'),url('../fonts/Lobster/Lobster-Regular.ttf');
}
@font-face{
font-family:"Lobster_Two";
src:url('../fonts/Lobster_Two/Lobster-Regular.ttf') format('ttf');
src:local('Lobster_Two'),local('Lobster_Two'),url('../fonts/Lobster_Two/LobsterTwo-Regular.ttf');
}
@font-face{
font-family:"MonteCarlo";
src:url('../fonts/MonteCarlo/MonteCarlo-Regular.ttf') format('ttf');
src:local('MonteCarlo'),local('MonteCarlo'),url('../fonts/MonteCarlo/MonteCarlo-Regular.ttf');
}
@font-face{
font-family:"Orbitron";
src:url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('ttf');
src:local('Orbitron'),local('Orbitron'),url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf');
}
@font-face{
font-family:"Passion_One";
src:url('../fonts/Passion_One/PassionOne-Regular.ttf') format('ttf');
src:local('Passion_One'),local('Passion_One'),url('../fonts/Passion_One/PassionOne-Regular.ttf');
}
@font-face{
font-family:"Permanent_Marker";
src:url('../fonts/Permanent_Marker/PermanentMarker-Regular.ttf') format('ttf');
src:local('Permanent_Marker'),local('Permanent_Marker'),url('../fonts/Permanent_Marker/PermanentMarker-Regular.ttf');
}
@font-face{
font-family:"remarcle";
src:url('../fonts/remarcle/remarcle.ttf') format('ttf');
src:local('remarcle'),local('remarcle'),url('../fonts/remarcle/remarcle.ttf');
}
@font-face{
font-family:"Special_Elite";
src:url('../fonts/Special_Elite/SpecialElite-Regular.ttf') format('ttf');
src:local('Special_Elite'),local('Special_Elite'),url('../fonts/Special_Elite/SpecialElite-Regular.ttf');
}
@font-face{
font-family:"teamspirit";
src:url('../fonts/Teamspirit/teamspirit.ttf') format('ttf');
src:local('teamspirit'),local('teamspirit'),url('../fonts/Teamspirit/teamspirit.ttf');
}
@font-face{
font-family:"Yellowtail";
src:url('../fonts/Yellowtail/Yellowtail-Regular.ttf') format('ttf');
src:local('Yellowtail'),local('Yellowtail'),url('../fonts/Yellowtail/Yellowtail-Regular.ttf');
}
*, *:after, *:before { box-sizing: border-box; }
body, html { font-size: medium; padding: 0; margin: 0;}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.flou{
filter: blur(3px);
}
i{
font-style:italic;
}
b{
font-weight:bold;
}
h1{
font-size:xxx-large;
}
h2{
font-size:xx-large;
margin: 0;
padding: 5;
}
h3{
font-size:x-large;
}
h4{
font-size:large;
}
h5{
font-size:medium;
}
p{
font-size:medium;
text-align:justify;
text-indent:15px;
}
label{
    font-size:medium;
}
span{
    font-size:medium;
}
button p{
    text-indent:0;
}
.paragraphe{
    text-align:justify;
    text-indent:1.5em;
}
#box_log{
    width:350px;
    margin: 50px auto;
    text-align:center;
    background-color:#222;
    border-radius:10px;
    padding:10px;
    border:2px solid #000;
    color:#efefef;
}
#box_log input[type=pseudo],#box_log input[type=nom], #box_log input[type=prenom]{
padding: 8px 10px;
font-size: medium;
border: 3px solid #0b7603;
background-color: #000;
color: white;
margin:0px auto;
border-radius:50px;
text-align: center;
display:block;
}
#box_log input::placeholder{
    color:#FFF;
}
/*------------------------------------------------*/
/*----------------BLOQUEUR DE PUB-----------------*/
/*------------------------------------------------*/
#blocadds{
    position: fixed;
    z-index: 1000;
    top: 40%;
    width:80%;
    margin:0 10%;
    text-align: center;
    height: 150px;
    padding: 30px;
    background-color: #000;
    color: red;
    font-weight: bold;
    border:2px solid #0b7603;
    border-radius: 5px; 
}
/*------------------------------------------------*/
/*--------------------LOADER----------------------*/
/*------------------------------------------------*/

.background-loader{
    display: block;
    margin: auto;
    position: fixed;
    z-index: 5;
    width:5vw;
    margin:45vh 48vw;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  border: 8px solid #0b7603;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #0b7603 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}









#loader_line{
display:block;
position:relative;
top:45%;
margin:auto;
padding:0;
width:100px;
}
#loader_line span{
display: none;
vertical-align:middle;
}
#loader_center{
display:block;
width:50%;
text-align:center;
height:100vh;
margin:auto;
}
.loader{
position: fixed;
text-align: center;
overflow: hidden;
padding: 50px;
width: 10vw;
z-index: 5000;
margin: 40Vh 45vw;
height: 20vh;
text-align:center;
overflow:hidden;
}
.loader span{
line-height:1;
vertical-align:middle;
display:inline-block;
position:relative;
height:80px;
font-size: xxx-large;
color:#0b7603;
}


#point:after{
color:white;
}
.horizontal_effet{
color:#0b7603;
animation: horizontal 5s infinite;
}
@keyframes horizontal {
    from, to { color: #0b7603; }
    10%      { color: #90B808 }
    20%      { color: #FFD100; }
    30%      { color: #FF0000; }
    40%      { color: #FF0074; }
    50%      { color: #BD00FF; }
    60%      { color: #4600FF; }
    70%      { color: #006CFF; }
    80%      { color: #00D4FF; }
    90%      { color: #00FF8F; }
}




.effet {
display: block;
position: relative;
width: 80px;
height: 80px;
margin:auto;

}
.effet:after {
content: " ";
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 8px;
box-sizing: border-box;
border: 32px solid #0b7603;
border-color: #0b7603 transparent #0b7603 transparent;
animation: effet 5s infinite;
}

@keyframes effet {
from,to{color:#0b7603;}
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
10%      { border: 32px solid #90B808; border-color: #90B808 transparent #90B808 transparent;}
20%      { border: 32px solid #FFD100; border-color: #FFD100 transparent #FFD100 transparent;}
30%      { border: 32px solid #FF0000; border-color: #FF0000 transparent #FF0000 transparent;}
40%      { border: 32px solid #FF0074; border-color: #FF0074 transparent #FF0074 transparent;}
50% {
border: 32px solid #BD00FF; border-color: #BD00FF transparent #BD00FF transparent;
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
60%      { border: 32px solid #4600FF; border-color: #4600FF transparent #4600FF transparent; }
70%      { border: 32px solid #006CFF; border-color: #006CFF transparent #006CFF transparent; }
80%      { border: 32px solid #00D4FF; border-color: #00D4FF transparent #00D4FF transparent; }
90%      { border: 32px solid #00FF8F; border-color: #00FF8F transparent #00FF8F transparent; }
100% {
transform: rotate(1800deg);
}
}
.lettre{
color:#0b7603;
font-size:80px;
letter-spacing:15px;
margin-bottom:150px;
animation:flash 1.2s linear infinite;
}
@keyframes flash{
0%{
color :chartreuse;
text-shadow: 0 0 7px chartreuse;
}
90%{
color:#484848;
text-shadow:none;
}
100%{
color :chartreuse;
text-shadow: 0 0 7px chartreuse;
}
}
.lettre:nth-child(1){
animation-delay:0.1s;
}
.lettre:nth-child(2){
animation-delay:0.2s;
}
.lettre:nth-child(3){
animation-delay:0.3s;
}
.lettre:nth-child(4){
animation-delay:0.4s;
}
.lettre:nth-child(5){
animation-delay:0.5s;
}
.lettre:nth-child(6){
animation-delay:0.6s;
}
.lettre:nth-child(7){
animation-delay:0.7s;
}
.lettre:nth-child(8){
animation-delay:0.8s;
}
.lettre:nth-child(9){
animation-delay:0.9s;
}
.lettre:nth-child(10){
animation-delay:1s;
}
.fondu-out{
opacity:0;
transition: opacity 0.4s ease-out;
}
#space-editeur .button_close{
    border:0;
    z-index: 15;
    height:35px;
    background:transparent;
    color:white;
    font-size:medium;
    position:absolute;
    top:0px;
    right:0;
    border-bottom:0;
}
#colorchange_space{
    width:50%;
    display: block;
    background-color: #000;
    border: 1px solid #666;
    border-radius:15px;
    position: fixed;
    top: 150px;
    z-index: 4;
    max-height:90vh;
    margin:0 25%;
    overflow-y: scroll;
}
#colorchange_space .button_close{
    border:1px solid #666;
    right: 25%;
    z-index: 5;
    position:fixed;
    height:35px;
    background-color:#000;
    color:white;
    font-size:medium;
    margin-top:-1px;
    border-bottom:0;
}
/*---------------------Fin du loader---------------------------------- */

/*---------------------NUANCIER & IMG ---------------------------------*/
#titrenuancier {
    width: 100%;
    text-align: center;
    padding-top:5px;
}
#titrenuancier h1
{
text-decoration:underline;
line-height: initial;
color:#0b7603;
font-size: x-large;
text-align:center;
}
#divnuancier-der{
color:white;
padding:5px 5px 5px 5px;
border:1px solid #666;
border-radius:10px;
border-collapse:collapse;
height: auto;
overflow: hidden;
display:inline-block;
min-height:200px;
width:34%;
padding: 15px;
margin: 10px;
}
#divnuancier-der h2
{
font-size:100%;
text-decoration:underline;
line-height: initial;
color:#0b7603;
text-align:center;
}
#divnuancier
{
color:white;
border: 1px solid #333;
border-radius:10px;
border-collapse:collapse;
min-height: 200px;
overflow: hidden;
font-size:medium;
width:30%;
display:inline-block;
padding: 15px;
margin: 10px;
}
#divnuancier h1
{
text-decoration:underline;
line-height: initial;
color:#0b7603;
text-align:center;
font-size:x-large;
}
#divnuancier h2
{
text-decoration:underline;
line-height: initial;
color:#0b7603;
font-size:large;
text-align:center;
}
#divnuancier h3
{
text-decoration:underline;
line-height: initial;
color:#0b7603;
font-size:medium;
text-align:left;
}
#divnuancier select{
    background-color: #555;
    font-size: medium;
    color: #FFF;
    border: 1px solid #FFF;
}

/*---------------------QCM---------------------*/
#qcm{
    position: fixed;
    top: 220px;
    width: 60%;
    margin: 0 20%;
    z-index: 4; 
}


/*----------------------CARROUSEL-------------*/
#carrousel{
    position: fixed;
    top: 200px;
    width: 60%;    
    margin: 0 20%;
    z-index: 4;
    height:auto;
    overflow:scroll;
}
#img_carrousel{
    overflow: scroll;
    display: inline-flex;
    max-height: 1000px;
}
$animationSpeed: 40s;
/* Animation */
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-337.5px * 6))}
    from{ margin-left:-20%;}
    to{ margin-left: calc(337.5px * 6)}
}
@-webkit-keyframes move {
  0% {
    margin-left: -400px;
  }
  100% {
    margin-left: 800px;
  }
}
#img_carrousel_infini,#img_carrousel_infini_cadre,#img_carrousel_infini_cadre2,
#img_carrousel_infini_cadre3,#img_carrousel_infini_cadre4,#img_carrousel_infini_cadre5,
#img_carrousel_infini_cadre6,#img_carrousel_infini_cadre7,#img_carrousel_infini_cadre8,
#img_carrousel_infini_cadre9,#img_carrousel_infini_cadre10,#img_carrousel_infini_cadre11,
#img_carrousel_infini_cadre12,#img_carrousel_infini_cadre13,#img_carrousel_infini_cadre14,
#img_carrousel_infini_cadre15,#img_carrousel_infini_cadre16,#img_carrousel_infini_cadre17,
#img_carrousel_infini_cadre18,#img_carrousel_infini_cadre19,#img_carrousel_infini_cadre20{
    width: 100%; max-width: 1000px;overflow:hidden;margin:0px;
}
#img_carrousel_infini figure,#img_carrousel_infini_cadre figure,#img_carrousel_infini_cadre2 figure,
#img_carrousel_infini_cadre3 figure,#img_carrousel_infini_cadre4 figure,#img_carrousel_infini_cadre5 figure,
#img_carrousel_infini_cadre6 figure,#img_carrousel_infini_cadre7 figure,#img_carrousel_infini_cadre8 figure,
#img_carrousel_infini_cadre9 figure,#img_carrousel_infini_cadre10 figure,#img_carrousel_infini_cadre11 figure,
#img_carrousel_infini_cadre12 figure,#img_carrousel_infini_cadre13 figure,#img_carrousel_infini_cadre14 figure,
#img_carrousel_infini_cadre15 figure,#img_carrousel_infini_cadre16 figure,#img_carrousel_infini_cadre17 figure,
#img_carrousel_infini_cadre18 figure,#img_carrousel_infini_cadre19 figure,#img_carrousel_infini_cadre20 figure
{
  position: relative; 
  width: 500%;
  max-height:1000px;
  margin: 0px;
  padding: 0px;
  font-size: 0px;
  text-align: left;
  animation: 30s slidy infinite;
  display:inline-flex;
}

#img_carrousel_infini figure a,#img_carrousel_infini_cadre figure a,#img_carrousel_infini_cadre2 figure a,
#img_carrousel_infini_cadre3 figure a,#img_carrousel_infini_cadre4 figure a,#img_carrousel_infini_cadre5 figure a,
#img_carrousel_infini_cadre6 figure a,#img_carrousel_infini_cadre7 figure a,#img_carrousel_infini_cadre8 figure a,
#img_carrousel_infini_cadre9 figure a,#img_carrousel_infini_cadre10 figure a,#img_carrousel_infini_cadre11 figure a,
#img_carrousel_infini_cadre12 figure a,#img_carrousel_infini_cadre13 figure a,#img_carrousel_infini_cadre14 figure a,
#img_carrousel_infini_cadre15 figure a,#img_carrousel_infini_cadre16 figure a,#img_carrousel_infini_cadre17 figure a,
#img_carrousel_infini_cadre18 figure a,#img_carrousel_infini_cadre19 figure a,#img_carrousel_infini_cadre20 figure a
{
    width:20%;
    display:inline-flex;
    max-height:1000px;
}

#img_carrousel_infini figure a img,#img_carrousel_infini_cadre figure a img,#img_carrousel_infini_cadre2 figure a img,
#img_carrousel_infini_cadre3 figure a img,#img_carrousel_infini_cadre4 figure a img,#img_carrousel_infini_cadre5 figure a img,
#img_carrousel_infini_cadre6 figure a img,#img_carrousel_infini_cadre7 figure a img,#img_carrousel_infini_cadre8 figure a img,
#img_carrousel_infini_cadre9 figure a img,#img_carrousel_infini_cadre10 figure a img,#img_carrousel_infini_cadre11 figure a img,
#img_carrousel_infini_cadre12 figure a img,#img_carrousel_infini_cadre13 figure a img,#img_carrousel_infini_cadre14 figure a img,
#img_carrousel_infini_cadre15 figure a img,#img_carrousel_infini_cadre16 figure a img,#img_carrousel_infini_cadre17 figure a img,
#img_carrousel_infini_cadre18 figure a img,#img_carrousel_infini_cadre19 figure a img,#img_carrousel_infini_cadre20 figure a img
{
    width: 100%; max-height: 1000px;margin:0px;padding:0px;float:center;position:relative;z-index:1;
}
#img_carrousel_infini_cadre figure a img { border:5px solid #FFF}
#img_carrousel_infini_cadre2 figure a img { background-image: url('../img/cadre/grass-dew-plant-sunlight-leaf-flower-1018212-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre3 figure a img { background-image: url('../img/cadre/nature-forest-grass-snow-plant-field-1294575-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre4 figure a img { background-image: url('../img/cadre/nature-grass-abstract-plant-lawn-texture-593466-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre5 figure a img { background-image: url('../img/cadre/tree-nature-grass-abstract-plant-field-1358084-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre6 figure a img { background-image: url('../img/cadre/coffee-texture-coffee-bean-produce-natural-fresh-3030-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre7 figure a img { background-image: url('../img/cadre/texture-floor-wall-stone-wall-brick-material-99030-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre8 figure a img { background-image: url('../img/cadre/plant-deck-texture-plank-leaf-fall-95-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre9 figure a img { background-image: url('../img/cadre/sea-water-ocean-horizon-texture-wave-461-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre10 figure a img { background-image: url('../img/cadre/tree-nature-grass-abstract-plant-field-1358084-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre11 figure a img { background-image: url('../img/cadre/water-texture-pattern-line-swimming-pool-blue-1130496-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre12 figure a img { background-image: url('../img/cadre/light-sky-night-star-milky-way-texture-1268143-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre13 figure a img { background-image: url('../img/cadre/coffee-black-and-white-white-photography-texture-hole-1120543-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre14 figure a img { background-image: url('../img/cadre/black-and-white-texture-tube-floor-pattern-line-874842-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre15 figure a img { background-image: url('../img/cadre/light-texture-skyscraper-pattern-line-green-83401-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre16 figure a img { background-image: url('../img/cadre/computer-man-forest-light-technology-sunlight-742594-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre17 figure a img { background-image: url('../img/cadre/tree-branch-pine-evergreen-holiday-christmas-1417898-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre18 figure a img { background-image: url('../img/cadre/leather-texture-floor-pattern-line-black-497039-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre19 figure a img { background-image: url('../img/cadre/abstract-advertismet-arrangement-art-art-and-craft-artwork-1438011-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre20 figure a img { background-image: url('../img/cadre/texture-leaf-flower-underwater-colourful-macro-569459-pxhere.com.jpg'); padding:30px;}

#img_carrousel_infini figure .oneshot,#img_carrousel_infini_cadre figure .oneshot,#img_carrousel_infini_cadre2 figure .oneshot,
#img_carrousel_infini_cadre3 figure .oneshot,#img_carrousel_infini_cadre4 figure .oneshot,#img_carrousel_infini_cadre5 figure .oneshot,
#img_carrousel_infini_cadre6 figure .oneshot,#img_carrousel_infini_cadre7 figure .oneshot,#img_carrousel_infini_cadre8 figure .oneshot,
#img_carrousel_infini_cadre9 figure .oneshot,#img_carrousel_infini_cadre10 figure .oneshot,#img_carrousel_infini_cadre11 figure .oneshot,
#img_carrousel_infini_cadre12 figure .oneshot,#img_carrousel_infini_cadre13 figure .oneshot,#img_carrousel_infini_cadre14 figure .oneshot,
#img_carrousel_infini_cadre15 figure .oneshot,#img_carrousel_infini_cadre16 figure .oneshot,#img_carrousel_infini_cadre17 figure .oneshot,
#img_carrousel_infini_cadre18 figure .oneshot,#img_carrousel_infini_cadre19 figure .oneshot,#img_carrousel_infini_cadre20 figure .oneshot
{
    width:20%;
    display:inline-flex;
    max-height:1000px;
}

#img_carrousel_infini figure .oneshot img,#img_carrousel_infini_cadre figure .oneshot img,#img_carrousel_infini_cadre2 figure .oneshot img,
#img_carrousel_infini_cadre3 figure .oneshot img,#img_carrousel_infini_cadre4 figure .oneshot img,#img_carrousel_infini_cadre5 figure .oneshot img,
#img_carrousel_infini_cadre6 figure .oneshot img,#img_carrousel_infini_cadre7 figure .oneshot img,#img_carrousel_infini_cadre8 figure .oneshot img,
#img_carrousel_infini_cadre9 figure .oneshot img,#img_carrousel_infini_cadre10 figure .oneshot img,#img_carrousel_infini_cadre11 figure .oneshot img,
#img_carrousel_infini_cadre12 figure .oneshot img,#img_carrousel_infini_cadre13 figure .oneshot img,#img_carrousel_infini_cadre14 figure .oneshot img,
#img_carrousel_infini_cadre15 figure .oneshot img,#img_carrousel_infini_cadre16 figure .oneshot img,#img_carrousel_infini_cadre17 figure .oneshot img,
#img_carrousel_infini_cadre18 figure .oneshot img,#img_carrousel_infini_cadre19 figure .oneshot img,#img_carrousel_infini_cadre20 figure .oneshot img
{
    width: 100%; max-height: 1000px;margin:0px;padding:0px;float:center;position:relative;z-index:1;
}
#img_carrousel_infini_cadre figure .oneshot img { border:5px solid #FFF}
#img_carrousel_infini_cadre2 figure .oneshot img { background-image: url('../img/cadre/grass-dew-plant-sunlight-leaf-flower-1018212-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre3 figure .oneshot img { background-image: url('../img/cadre/nature-forest-grass-snow-plant-field-1294575-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre4 figure .oneshot img { background-image: url('../img/cadre/nature-grass-abstract-plant-lawn-texture-593466-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre5 figure .oneshot img { background-image: url('../img/cadre/tree-nature-grass-abstract-plant-field-1358084-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre6 figure .oneshot img { background-image: url('../img/cadre/coffee-texture-coffee-bean-produce-natural-fresh-3030-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre7 figure .oneshot img { background-image: url('../img/cadre/texture-floor-wall-stone-wall-brick-material-99030-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre8 figure .oneshot img { background-image: url('../img/cadre/plant-deck-texture-plank-leaf-fall-95-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre9 figure .oneshot img { background-image: url('../img/cadre/sea-water-ocean-horizon-texture-wave-461-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre10 figure .oneshot img { background-image: url('../img/cadre/tree-nature-grass-abstract-plant-field-1358084-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre11 figure .oneshot img { background-image: url('../img/cadre/water-texture-pattern-line-swimming-pool-blue-1130496-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre12 figure .oneshot img { background-image: url('../img/cadre/light-sky-night-star-milky-way-texture-1268143-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre13 figure .oneshot img { background-image: url('../img/cadre/coffee-black-and-white-white-photography-texture-hole-1120543-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre14 figure .oneshot img { background-image: url('../img/cadre/black-and-white-texture-tube-floor-pattern-line-874842-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre15 figure .oneshot img { background-image: url('../img/cadre/light-texture-skyscraper-pattern-line-green-83401-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre16 figure .oneshot img { background-image: url('../img/cadre/computer-man-forest-light-technology-sunlight-742594-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre17 figure .oneshot img { background-image: url('../img/cadre/tree-branch-pine-evergreen-holiday-christmas-1417898-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre18 figure .oneshot img { background-image: url('../img/cadre/leather-texture-floor-pattern-line-black-497039-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre19 figure .oneshot img { background-image: url('../img/cadre/abstract-advertismet-arrangement-art-art-and-craft-artwork-1438011-pxhere.com.jpg'); padding:30px;}
#img_carrousel_infini_cadre20 figure .oneshot img { background-image: url('../img/cadre/texture-leaf-flower-underwater-colourful-macro-569459-pxhere.com.jpg'); padding:30px;}



@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
#img_carrousel img{
    width:100%;
    max-height:1000px;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 30px;
height: 30px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
input::placeholder{
color:#FFF;
}
/*----------------------MYWORD---------------------*/
#myword{
position: fixed;
top: 190px;
width: 60%;
margin:0 20%;
left:0;
z-index: 11;
background-color: rgb(51, 51, 51);
border-top:0;
border:2px solid #999;
}
.buttonmyword
{
width:35px;
height:35px;
font-size:20px;
display: table-cell;
vertical-align: middle;
margin:0 2px;
}

#editeurdyna{
position: fixed;
top: 200px;
width: 60%;
margin: 0 20%;
z-index: 4;
}
#space-editeur{
display: block;
position: fixed;
top: 140px;
width: 60%;
max-width: 700px;
z-index: 11;
margin: 0 20%;
background-color: #000;
border:2px solid #666;
max-height: 80vh;
overflow: scroll;
overflow-x: hidden;
border-radius:25px;
}
.myword
{
background-color:#000;
width:100%;
padding: 5px;
position:relative;
z-index:200;
}
.mywordedit
{
width:90%;
margin:auto;
height:300px;
background-color:white;
border:1px solid black;
padding:25px 0;
overflow:scroll;
color:black;
text-align:left;
padding:10px;
}
#edit-myword{
width:100%;
margin:auto;
padding-bottom:10px;
border: 1px solid #666;
border-top: 0;
border-bottom: 0;
}
#edit-myword button{
    color:black;
    padding:0;
    background-color:whitesmoke;
    padding: 0 5px;
    display:table-cell;
    vertical-align:middle;
    margin:0 1px;
}
.colorpicker{
visibilite:hidden;
}
.label-colorpicker{
color: #000;
background-color: #efefef;
font-size: x-large;
font-weight: bold;
width:35px;
height:35px;
border:1px solid #767676;
margin:0 2px;
display:block;
text-align: center;
}
.label-colorpicker img{
    width:25px;
    height:25px;
}
.label-colorpicker i{
    padding:4px 0;
}
#share button{
    width:45px;
    height:44px;
    display:block;
    padding:0 5px;
    font-size:25px;
    border-radius:inherit;
    background-color:#efefef;
    display:table-cell;
    vertical-align:middle;
}
#choice_fonts{
    display:table;
    margin:auto;        
}
#choice_fonts button{
    height:45px;
    display:table-cell;
    vertical-align:middle;
    margin:0 2px;
}
#choice_fonts button b{
    font-size:medium;
}
#container-colorpicker{
position: relative;
overflow: hidden;
padding:0px;
}
.colorpicker{
position: absolute;
border: none;
width:25px;
height:25px;
padding:0px;
margin:0px;
}
#container-colorpicker button{
    width:35px;
    height:35px;
}
.bleu{
background-color:#0000ff;
width:20px;
height:20px;
}
.rouge{
background-color:#ff0000;
width:20px;
height:20px;
}
.noir{
background-color:#000000;
width:20px;
height:20px;
}
.blanc{
background-color:#ffffff;
width:20px;
height:20px;
}
.jaune{
background-color:#ffff00;
width:20px;
height:20px;
}
.vert{
background-color:#00ff00;
width:20px;
height:20px;
}
.gris{
background-color:#999999;
width:20px;
height:20px;
}
.rose{
background-color:#ff0099;
width:20px;
height:20px;
}
.violet{
background-color:#660066;
width:20px;
height:20px;
}
.orange{
background-color:#ff3300;
width:20px;
height:20px;
}
/*----------------COOKIES----------------*/

.flou{
    filter: blur(3px);
    }
    @media screen and (min-width:800px) and (max-width:1000px) {
        #cookies{
        width: 50%;
        margin:0 25%;
        }
    }
    @media screen and (min-width:1000px) and (max-width:1300px) {
        #cookies{
        width: 50%;
        margin:0 25%;
        }
    }
    @media screen and (min-width:1300px) and (max-width:1600px) {
        #cookies{
        width: 40%;
        margin:0 30%;
        }
    }
    @media screen and (min-width:1600px) and (max-width:2000px) {
        #cookies{
        width: 40%;
        margin:0 30%;
        }
    }
    @media screen and (min-width:2000px) and (max-width:2500px) {
        #cookies{
        width: 40%;
        margin:0 30%;
        }
    }
    @media screen and (min-width:2500px) and (max-width:3000px) {
        #cookies{
        width: 30%;
        margin:0 35%;
        }
    }
    @media screen and (min-width:3000px) {
        #cookies{
        width: 20%;
        margin:0 40%;
        }
    }
    #cookies{
    z-index: 1000;
    background-color: #222;
    border-radius: 1%;
    top: 10%;
    position: fixed;
    padding: 2%;
    text-align: center;
    box-shadow: 2px 2px 9px #000;
    }
    #liste_cookie{
        margin:auto;
        display:block;
        position:relative;
        width:50%;
        margin-bottom:25px;
    }
    #button-cookies{
    display:table;
    margin:auto;
    }
    #cookies button{
    margin:15px;
    border:0;
    height:57px;
    display:table-cell;
    vertical-align:middle;
    }
    #cookies button span{
    margin-top:-.4em;
    }
    #cookies button .material-icons{
    font-size:1.1em;
    }
    #cookiesperso{
    position: fixed;
    top: 50px;
    height:80vh;
    z-index: 1001;
    width: 70%;
    margin-left: 15%;
    background-color: white;
    color: #111;
    border:2px solid #999;    
    }
    #cookiesperso button .material-icons{
    font-size:1.1em;
    }
    .prese-cookie-perso{
    background-color:#111;
    color:#FFF;
    margin:0;
    text-align:center;
    padding-top:1.4em;
    }
    .prese-cookie-perso h2{
    color:#111;
    text-align:left;
    }
    .fermercookie{
    background-color:#111;
    color:#FFF;
    position:fixed;
    border-bottom:2px solid #999;
    border-left:2px solid #999;
    border-right:2px solid #999;
    border-top:2px solid #999;
    border-radius:0;
    right:15%;
    height:45px;
    font-size:1.5em;
    padding:5px;
    margin-top:-2px;
    }
    .cookie-presentation p{
    width:70%;
    }
    .align-cookie-perso{
    display: inline-flex;
    position:absolute;
    bottom:0;
    width: 100%;
    height:100px;
    margin: 0;
    padding: 15px;
    background-color: rgb(220,220,220);
    }
    .align-cookie-perso h2{
        margin:15px auto;
    }
    .align-cookie-perso button{
    margin-top:12px;
    height:auto;
    padding:0 15px;
    background-color:#9b9b9b;
    padding:5px;
    color:#000;
    font-weight:bold;
    }
    .cookie-presentation button{
    margin-right:5px;
    height:30px;
    margin-top:7px;
    background-color:rgb(160,160,160);
    border:0;
    }
    .cookie-presentation h3{
    background-color:#111;
    color:#FFF;
    width:70%;padding:5px;
    }


    
    #nav-left{
        width:100%;
        margin:1px solid #999;
        margin-left:0;
        margin-right:0;
    }
    #my_leftnav{
        margin:0;
        padding:0;
        overflow-y: scroll;
        overflow-x:none;
    }


    #my_leftnav .desc{
        display:none;
    }
    #my_leftnav .active{
        display:block;
    }
    #my_leftnav .active_lien{
        color:#0b7603;
        border-right:2px solid #0b7603;
    }
    #my_leftnav .lien{
        border-bottom:2px solid #999;
        display:block;
        position:relative;
        width:40%;
        padding: 1px 5px;
    }
    #my_leftnav .active_lien h3{
        color:#0b7603;
    }
    #my_leftnav .paragraphe{
        position:absolute;
        right:0;
        width:60%;
        top:160px;
        padding: 0 50px;        
    }
    #my_leftnav .paragraphe p{
        font-size:large;
    }
    .prese-cookie-perso{
        font-size:x-large;
    }



    /*---------------Fin COOKIES--------------------*/
    .clear{
        background-color:#1fe0;
        color:#940000;
        border:0;
        padding: 0;
        height: 25;
        display: block;
        float: right;
        position:relative;
        z-index:1;
        }
        .inputcomments{
            border-radius:0;
        }
    .clear p{
        text-indent:0;
    }
    button p{
        text-indent:0;
    }

/*-----------------NOTIFICATIONS----------------*/
#container_notifs{

}
#notifications{
    border-bottom:1px solid #FFF;
}#notifications h1{
    color:#FFF;
    font-size:large;
    margin:0;
}#notifications h2{
    font-size:medium;
    color:#FFF;
    margin:0;
}
.bandeau_notifications{
    border-bottom:2px solid #FFF;
    background-color:#000;
}
#mess_notif{
    display:table;
    text-align:center;
    width:auto;
    margin:auto;
}
#mess_notif img{
    display:table-cell;
    vertical-align:middle;
}
#mess_notif p{
    display:table-cell;
    vertical-align:middle;
}
.message_notif{
    display:inline-flex;
}
.title_notification{
    font-size:medium;
}
/*---------------FIN-NOTIFICATION---------------*/


/*-----------------MODE EN LIGNE NEWS------------*/

#radioclass{
display:table;
margin:15px auto 0 auto;
}
#space-editeur #radioclass span{
color:#FFF;
}
#radioclass span{
color:#000;
}
.label {
display: table-cell;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.label:first-child .inputradio {
border-radius: 0.5em 0 0 0.5em;
box-shadow:
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #27262600 inset,
0 0.1em 0 #afa490 inset,
0 -0.1em 0 #ffffff3f,
0 0.2em 0.5em #0000007f,
0 -0.1em 0 #a0c19d inset,
-0.1em -0.2em 0 #ffffff7f inset,
0.2em 0 0 #ffffff7f inset;
}
.label:last-child .inputradio{
border-radius: 0 0.5em 0.5em 0;
box-shadow:
0 -0.1em 0 #a0c19d inset,
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #2726267f inset,
0 0.1em 0 #afa490 inset,
-0.1em 0 0 #afa490 inset,
0 -0.1em 0 #ffffff3f,
0 0.2em 0.5em #0000007f,
-0.1em -0.1em 0 0.1em #ffffff7f inset;
}
.label:first-child .inputradio:checked {
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626 inset,
0 0.1em 0 #847a62 inset,
0 -0.1em 0 #ffffff3f,
0 0.1em 0 #ffffff7f,
0 -0.1em 0 #0b7603 inset,
-0.1em -0.2em 0 #ffffff7f inset,
0.2em 0 0 #ffffff7f inset;
}
.label:last-child .inputradio:checked {
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626 inset,
0 -0.1em 0 #0b7603 inset,
0 0.1em 0 #847a62 inset,
-0.1em 0 0 #847a62 inset,
0 -0.1em 0 #ffffff3f,
0 0.1em 0 #ffffff7f,
-0.1em -0.1em 0 0.1em #ffffff7f inset;
}
.inputradio{
background-image: linear-gradient(#111111 33%,#b58a8a 58%,#e17575,#ff0000,#ffffff);
border-radius: 0px;
box-shadow:
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #27262600 inset,
0 0.1em 0 #afa490 inset,
0 -0.1em 0 #ffffff3f,
0 0.2em 0.5em #0000007f,
0 -0.1em 0 #a0c19d inset,
-0.1em -0.2em 0 #ffffff7f inset;
cursor: pointer;
display: block;
margin-bottom: 0.5em;
width: 100%;
height: 1em;
transition: box-shadow var(--transDur) ease-in-out;
appearance: none;
width:80px;
margin:0px;
}
.inputradio:checked {
background-image: linear-gradient(#0b7603 33%,#666666 58%,#0b7603,#a0c19d,#ffffff);
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626 inset,
0 0.1em 0 #847a62 inset,
0 -0.1em 0 #ffffff3f,
0 0.1em 0 #ffffff7f,
0 -0.1em 0 #0b7603 inset,
-0.1em -0.2em 0 #ffffff7f inset;
}
.inputradio:checked + span {
opacity: 1;
}
.inputradio:focus {
outline: transparent;
}
.inputradio + span {
opacity: 0.65;
transition: opacity var(--transDur) ease-in-out;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg: #5c6270;
--fg: #e3e4e8;
}
.label:first-child .inputradio{
box-shadow:
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #27262600 inset,
0 0.1em 0 #afa490 inset,
0 -0.1em 0 #0000001f,
0 0.2em 0.5em #0000007f,
0 -0.1em 0 #a0c19d inset,
-0.1em -0.2em 0 #ffffff7f inset,
0.2em 0 0 #ffffff7f inset;
}
.label:last-child .inputradio{
box-shadow:
0 -0.1em 0 #a0c19d inset,
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #2726267f inset,
0 0.1em 0 #afa490 inset,
-0.1em 0 0 #afa490 inset,
0 -0.1em 0 #0000001f,
0 0.2em 0.5em #0000007f,
-0.1em -0.1em 0 0.1em #ffffff7f inset;
}
.label:first-child .inputradio:checked {
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626 inset,
0 0.1em 0 #847a62 inset,
0 -0.1em 0 #0000007f,
0 0.1em 0 #0000007f,
0 -0.1em 0 #0b7603 inset,
-0.1em -0.2em 0 #ffffff7f inset,
0.2em 0 0 #ffffff7f inset
}
.label:last-child .inputradio:checked {
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626 inset,
0 -0.1em 0 #0b7603 inset,
0 0.1em 0 #847a62 inset,
-0.1em 0 0 #847a62 inset,
0 -0.1em 0 #0000001f,
0 0.1em 0 #0000007f,
-0.1em -0.1em 0 0.1em #ffffff7f inset;
}
.inputradio {
box-shadow:
0.1em 0 0 #2726267f inset,
-0.1em 0 0 #27262600 inset,
0 0.1em 0 #afa490 inset,
0 -0.1em 0 #0000001f,
0 0.2em 0.5em #0000007f,
0 -0.1em 0 #a0c19d inset,
-0.1em -0.2em 0 #ffffff7f inset;
}
.inputradio:checked {
box-shadow:
0.1em 0 0 #272626af inset,
-0.1em 0 0 #272626af inset,
0 0.1em 0 #847a62 inset,
0 -0.1em 0 #0000007f,
0 0.1em 0 #0000007f,
0 -0.1em 0 #0b7603 inset,
-0.1em -0.2em 0 #ffffff7f inset;
}
}

/*--------------FIN MODE EN LIGNE NEWS-----------*/


/*---------------------------------------------------------------------*/
/*--------------------- MESSAGERIE-------------------------------------*/
/*---------------------------------------------------------------------*/
/*Light Mode */
@media(prefers-color-scheme:light)
{
    #mess{
    background-color:#efefef;
    color:#000;
    }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
    #mess {
    background-color: #000;
    color: white;
    }
}
#message{
width:100%;
height:150px;
color:white;
background-color:#333;
}

#mess{
width: 100%;
line-height: 1;
position:absolute;
top:0;
z-index:5;
width:100%;
max-width:600px;
margin:0;
box-shadow:1px 1px 9px #000;
}
#mess button{
cursor: pointer;
display: block;
position: relative;
margin: 0;
padding: 0;
color:#000;
font-size: 25px;
border-radius: inherit;
background-color: #efefef;
display: table-cell;
vertical-align: middle;
}
#mess select{
appearance: auto;
background-color:#efefef;
border:2px solid #767676;
background-color: #efefef;
font-size:medium;
}
#mess .messaddpoto{
    display: inline-block;
    width: 100%;
    line-height: 1;
    max-height: 150px;
    border: 1px solid #666;
    border-bottom:0;
    color: white;
    overflow: hidden;
    background-color: #333;
    text-align:left;
}
#mess label{
color:#000;
font-size:x-large;
display: table;
margin: auto;
}
#mess label p{
    font-size:x-large;
    font-weight:bold; 
    padding:5px 0;       
}
#mess label img{
    width:50px;
    height:50px;
}
.notificationmess{
color:red;
position: absolute;
top: 32px;
right: 5px;
display: block;
background-color: red;
width: 10px;
height: 10px;
border-radius: 25px;
}
.enligne{
color:#0b7603;
position: absolute;
float:right;
margin-top: -15px;
right:0;
display: block;
background-color: #0b7603;
width: 15px;
height: 15px;
border-radius: 25px;
}

#oldmess button{
cursor: pointer;
display: table-cell;
position: relative;
margin: 0;
padding: 0;
color:#000;
font-size: medium;
border-radius: inherit;
background-color: #efefef;
}
.messlive {
position: relative;
background-color: #0b7603;
text-align: center;
min-height: 80px;
color: #fff;
padding-top: 10;
border: 2px solid #555555;
border-top-right-radius: 20px 20px;
border-top-left-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
border-bottom-left-radius: 20px 20px;
}
#ancrevalid{
padding:15px;
font-size:15px;
}
#datemess{
width:100%;
display:inline-flex;
}
#datemess p{
font-size:1.5em;
padding-top:5px;
}
.coress{
display:block;
margin:auto;
}
.profil{
display:inline-grid;font-weight:bold;width:100%;
}
#background_profil{
    border:2px solid #555;
    border-radius:15px;
    margin:0 15px;
}
#datemess button{
display:block;
position:absolute;
right: 0;
margin: 0;
z-index: 0;
}
#contenumess{
display: inline-flex;
width: 100%;
min-height:100px;
}
.contenu-mess{
width:80%;
font-size:1.5em;
display:block;
position:relative;
overflow:overlay;
min-height: 50px;
max-height: 400px;
}
.mess-pseudo{
width: 80%;
padding: 0 10%;
display: block;
}
.date{
font-family: ComicFighter, Georgia; /* on spécifie une autre police standard, au cas où... */
font-weight:bold;
font-size:11pt;
position:relative;
}
.messlive mess{
font-family: ComicFighter, Georgia; /* on spécifie une autre police standard, au cas où... */
font-weight:bold;
font-size:11pt;
position:relative;
top:26px;
}
#arrow_inner{
width: 0;
color: #FFF;
display: block;
position: relative;
height: 0;
line-height: 0;
left:-30px;
margin:auto;
top:20px;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
border-right: 30px solid #0b7603;
}
@media screen and (800px <= width <=900px) { #arrow_inner{ margin: auto; } } @media screen and (900px <=width <=2000px) { #arrow_inner{ margin: auto; } } @media screen and (width> 2000px) {
#arrow_inner{
margin:auto;
}
}
#oldmess{
line-height: 1;
color: white;
width: 100%;
line-height: 1;
background-color:#333;
position:fixed;
top:88px;
z-index:5;
width:60%;
margin:0 20%;
}
#oldmess .messaddpoto{
display: inline-block;
width: 100%;
line-height: 1;
max-height: 150px;
border: 1px solid #666;
border-bottom:0;
color: white;
overflow: hidden;
text-align:left;
padding:5px;
}
#oldmess .close{
display:block;
position:absolute;
width:35px;
height:35px;
top:-35px;
float:left
;background-color:#000;
border:1px solid #666;
border-bottom:0;color:#FFF;
z-index:2;
}
#mess .close{
display:block;
position:absolute;
width:35px;
height:35px;
top:-35px;
float:left;
background-color:#000;
border:1px solid #666;
border-bottom:0;color:#FFF;
z-index:2;
}
.messfriends {
position: relative;
background-color: #0b7603;
text-align: center;
min-height: 80px;
color: #fff;
padding-top: 10;
border: 2px solid #555555;
border-top-right-radius: 20px 20px;
border-top-left-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
border-bottom-left-radius: 20px 20px;
}
.messfriends mess{

font-family: ComicFighter, Georgia; /* on spécifie une autre police standard, au cas où... */
font-weight:bold;
font-size:11pt;
position:relative;
top:26px;
}
.messgauche{
width:80%;
float:left;
margin: 0 10%;
padding: 10;
}
#datesupmess{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#datesupmess :first-child{
width: 50%;
margin: 0 0 0 25%;
}
#datesupmess p{
padding-top:5;
}
#containermessage{
width: 100%;
display: inline-block;
position: relative;
margin:0;
padding:0 0 10 0;
}
.messdroite{
width:80%;
float:left;
margin: 0 10%;
padding: 10;
}
.boutonaddmess{
    display:table-cell;
    vertical-align:middle;
    color:#0b7603;
    font-size: 20px;
    width:45px;
    height: 44px;
    padding:0;
    background-color: #000;
    border-radius: 0px;
    border-left: 2px solid #767676;
    border-top: 2px solid #767676;
    border-bottom: 0;
    border-right: 0;
}
.boutonaddmess::before{
content: ' ';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.boutonaddmess:hover{
color:#FFF;
border: 2px solid #0b7603;
transform: translate(4px,2px);
transition-duration:1s;
box-shadow: 1px 1px 1px #0b7603;
}
.boutonaddmess span{
font-size:28px;
}
.boutonaddmess i{
padding-top:5px;
}
.liste_profil li{
    display:table;
}
.liste_profil li i{
    display:table-cell;
    vertical-align:middle;
}
.imgprofilcom{
overflow:hidden;
border-radius:50px;
width:50px;
height:50px;
}
.imgprofilcom2{
overflow:hidden;
border-radius:50px;
width:50px;
height:50px;
}
.tablemess
{
width:80%;
margin: 0 10% 30px 10%;
}
.tablemess .messprofil{
width:100%;
text-align:center;
padding-top:20px;
}
.tablemess .tabmessmess{
width:80%;
}
.containerselectpoto{
margin:0;
padding:5px 0;
height:auto;
position:relative;
background-color:#000;
display:-webkit-box;
overflow-y:scroll;
}

.selectfriend{
position: relative;
display:block;
text-align:center;
font-size:medium;
height:120px;
width:100px;
}
.selectfriend label{
display:table-cell;
vertical-align:middle;
}

.selectfriend input[type="checkbox"]{
display:none;
}
.selectfriend span{

font-size:medium;
font-weight:bold;
color: #efefef;
margin:auto;
width:100px;
display:block;
}
.selectfriend img{
display:block;
vertical-align:middle;
margin:auto;
float:none;
}
.selectfriend span::before,
.selectfriend span::after {
content: '';
position: absolute;
bottom: 10px;
margin: auto;
}
.selectfriend span.checkbox::before {
width: 27px;
height: 27px;
background: linear-gradient(45deg, black, transparent);
box-sizing: border-box;
border: 1px solid #0b7603;
box-shadow: 2px 1px 1px #0b7603;
border-radius: 50px;
transition: border-color .2s;
display:block;
margin:auto;
left:auto;
margin-left:35px;
}
.selectfriend span.checkbox:hover::before {
background-color:#0b7603;
border-radius:50px;
}
.selectfriend span.checkbox::after {
content: '\f00c';
font-family: 'FontAwesome';
top:82px;
left:38px;
color: transparent;
transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {

color: #FFF;
padding: 6px 0 0 2px;
}
.bouton_invite{
display: inline-flex;
height: 40px;
padding: 25 0 0 5;
margin: 0;
width: 20%;
font-size:medium;
color:#0b7603;
}
#poto2 {
background-color: #fff;
color: #000;
font-weight: bold;
text-align:center;
overflow-y: scroll;
}

.twitter-tweet {
    width:auto;
    margin:10px auto;
}
.instagram-media{
    margin:auto;
    max-height:55vh;
}
/*-------------------------FIN MESSAGERIE----------------------------------*/
#del-notif{
    margin:10px auto;
}


.optionbox{
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}

.optionbox select {
  background: #0b7603;
  color: #fff;
  padding: 10px;
  width: 250px;
  height: 50px;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 48px rgb(5,68,2);
  -webkit-appearance: button;
  outline: none;
}

.optionbox:before{
content: '\f358';
font-family: "Font Awesome 5 free";
position: absolute;

top: 0;
right: 0;

height: 50px;
width: 50px;
background: #0b7603;
text-align: center;
line-height: 50px;
color:#fff;
font-size: 30px;
pointer-events: none;


}

.optionbox:hover:before{
 
  background: #61C759;


}

#newsmesstt span iframe{
    margin:auto;
}



/*---------------------------------------------------*/
/*-------------COMMUN TOUS LES DESIGN----------------*/
/*---------------------------------------------------*/
#container_presentation{
    top:150px;
    width:80%;
    margin:0 10%;
    float: left;
    word-break: break-word;
    position:fixed;
    z-index:2;
    background-color:#fff;
    box-shadow:1px 1px 9px #000;
    border:2px solid #999;
    padding:0;
}
#container_presentation .close{
    color:#000;
    height:45px;
    width:45px;
    display: block;
    position: absolute;
    top: -45px;
    background-color: #555;
    border: 2px solid #999;
    border-bottom: 0;
    right: 0;
    margin: 0;
    font-weight:bold;
    font-size: medium;
    margin-right: -2px;
    font-size: large;
    font-weight: bold;
}
#container_presentation article{
width:100%;
position: relative;
display: inline-block;
overflow: hidden;
overflow-y: scroll;
float: left;
word-break: break-word;
}
.retour{
    font-size: x-large;
    padding: 5px;
    float: left;
    margin: 10px;
}
#listfriends_index{
    position:relative;
    width:350px;
}
/*-------------------------------------*/
/*--------------Video------------------*/
/*-------------------------------------*/
.videoyoutube
{
width:100%;
height:48vh;
}
#container_presentation .videoyoutube{
height:65vh;
}
.videotiktok
{
width:350px;
height:580px;
}
#reddit-embed{
    width:100%;    
    min-height:400px;
}
.count_bt{
padding:7px;
}
.instagram-media{
    
}


/*--------------------------------------*/
/*-------------FIN VIDEO----------------*/
/*--------------------------------------*/