.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----------------*/
/*--------------------------------------*/



#form1{
display:none;
}
body{
height:100%;
width:100%;
word-wrap: break-word;
}

main{
padding:0px;
margin:0px;
}
a{
color:inherit;
border:none;
text-decoration: none;
}

.clear{
background: transparent;
border: 0px;
margin: 0px;
padding: 0px;
height: 25px;
display: block;
float: right;
}
section{

margin: 0px;
padding: 0px;
}
.section-presentation-central{
margin: 0px;
padding: 0px 0px 150 0px;
position: relative;
display:block;
float:left;
width: 100%;
}
#box
{

width: 80%;
margin: 0px 10% 0px 10%;
padding: 20px 0px 20px 0px;
color:white;
position:relative;
justify-content:center;
align-items:center;
border-radius:3px;
transition:0.5s;
text-align:center;
min-height:30%;
overflow:hidden;
background: conic-gradient(from 0deg at 0% 25%,#d50e2b,#FFC300, #3a3939 180deg);box-shadow:1px 1px 12px #d50e2b;border-radius:15px;
}
#central
{
width:100%;
height:auto;
min-height:100vh;
display:block;
position:relative;
margin:0px auto;
text-align:center;
padding:50px 10% 50px 10%;
min-height:90%;
    background-color: #d50e2b;
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

.boutonperso{
cursor:pointer;
color:#d50e2b;background-color:#fe9039;border:1px solid #581845;position: relative;  
height: 50px;
min-width: 50px;
padding: 10px;
border-radius: 5px;
}
.boutonperso:hover{
color:#fe9039;background-color:#581845;}
.boutonpersotext{
cursor: pointer;
margin: 30px;
padding: 5px 9px 5px 9px;
font-size: 17px;
line-height: 25px;
border-radius: 8%;
position: relative;
background: radial-gradient(circle at 50% 120%, #000, #222 10%, #111 80%, #000 100%);
}
.boutonadd{
padding: 2px 25px;
margin: 10px;
position: relative;
display:flex;
font-size: 25px;
max-width:150px;
text-align:center;
text-decoration:none;
color:#d50e2b;background-color:#fe9039;border: 2px solid #581845;

}
/*-------------------------------------------------------------*/
/*---------------------------HEADER----------------------------*/
#element0{
      
}
#presentation0{
      
}
.header h1{
font-size:5vw;
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;

}

@keyframes anim-fromtop {
  0% { opacity: 0; transform: translateY(-100%);}
  25% { opacity: 1; transform: translateY(0%);}
  50% {
  }
  100% {
  }
}


@keyframes anim-popoutin {
  0% {
    color: black;
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    color: red;
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    color: black;
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    /* animate nothing to add pause at the end of animation */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}








@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes depth {
  0% {
    text-shadow: 0 0 black;
  }
  25% {
    text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
  }
  50% {
    text-shadow: 0 0 black;
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
      -5px 0 black;
  }
  100% {
    text-shadow: 0 0 black;
  }
}





@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
  }
  100% {
    -webkit-transform: translateZ(160px) translateY(-100px);
            transform: translateZ(160px) translateY(-100px);
  }
}
@keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
  }
  100% {
    -webkit-transform: translateZ(160px) translateY(-100px);
            transform: translateZ(160px) translateY(-100px);
  }
}



@keyframes bounce{
     from {transform: translateY(0);}
     to   {transform: translateY(-20px);}
}
@keyframes rotate{
     from {-webkit-transform: rotate(0deg);}
     to   {-webkit-transform: rotate(360deg);}
}
@keyframes coeur{
     from {transform: font-size:35px;}
     to   {transform: font-size:15px;}
}

.animation{
display: block;
margin: 0px 25%;
position: fixed;
width: 25%;
text-align: center;
background-color: rgb(17, 17, 17);
min-height: 300px;
border-radius: 25px;
border: 1px solid rgb(102, 102, 102);
z-index: 5;
color: rgb(255, 255, 255);
padding: 25px;
}

.bt_close{
    display: block;
    position: absolute;
    top: 2px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #FFF;
    font-size: larger;
}



/*-------------------------------------*/
/*-----------SCROLLBAR-----------------*/
/*-------------------------------------*/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}




section {

margin: 0px;
padding: 0px;
}
.section-presentation-central{
position: relative;
width: 100%;
padding-bottom:200px;
}
.section-presentation-central img{
max-width:100%;
}
.section-presentation-central article{
width:650px;
max-height:650px;
position: relative;
display: inline-block;
overflow-x: hidden;
float: left;
padding:0;
word-break: break-word;
}
.section-presentation-central a:hover{
    border:solid 2px #FFF;
}
#article{
    width:80%;
    height:auto;
    margin:auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 650px);
    justify-content: center;
    grid-gap:10px;
}
#article_action{
    display:block;
    width:100%;
    padding:5px;
    position:sticky;
    bottom:0;
    color:#d50e2b;background-color:#581845;}
#article_action p{
    display:inline-flex;
    margin:0;
}
#article_action button i{
    color:#d50e2b;}
.bt_article_action{
    display:inline-flex;
    width:100%;
}
.article-qcm{
    background-color: #000;
    font-family: cursive;
    width:650px;
    max-height:650px;
    padding:15;
    overflow:overlay;
}
.textmulticolor {
    background-image: linear-gradient(0deg, #999,#d50e2b, #999); 
      background-clip: text;
      color: transparent;
      } 
      .question{
    width: 80%;
    margin: auto;
    text-align: center;
    background-color: darkgray;
    font-size: medium;
    border-radius: 1%;
    border-left: 1px solid #3c3c3c;
    border-right: 1px solid #3c3c3c;
    font-family: cursive;
    margin-top:15px;    
    font-family:Impact;font-size:xx-large;background: linear-gradient(0deg, #333, #fe9039, #333);}
#reponse-qcm{
    width: 80%;
    margin: auto;
}
.reponse{
    width: 90%;
    margin: 10px 2px;
    color:darkgray;
    border-radius: 3%;
    border: 1px solid #999;
    padding: 2px;
    font-size: large;
}
.formh1
{
background:#DAF7A6;color:#d50e2b;padding: 20px 30px 15px 30px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font-weight:bold;
font-size: xx-large;

}

.retrait{
margin: 10px 10px 10px 70px;
float:left;
}
.input{
margin: 10px 10px 10px 30px;
}
.formh2
{
background:#DAF7A6;color:#d50e2b;padding: 10px 30px 10px 30px;
margin: 70px 10px 10px 10px;
width:60%;
text-align:left;
font: normal 120% 'Avantgarde', sans-serif;
font-weight:bold;
border: 1px solid #aaa7a8;
}
#progressbar {
margin-bottom: 50px;
overflow: hidden;
width:80%;
margin-left:10%;
counter-reset: step;
padding: 30px 10px;
background: linear-gradient(0deg,#d50e2b,#fe9039 2% 98%,#d50e2b);}
#progressbar li {
list-style-type: none;
color:#581845;text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:hover {
transform:translateX(0px);
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 50px;
line-height: 50px;
display: block;
font-size: 10px;
color: black;
box-shadow:2px 2px 8px #581845;border-color:#222;
background: linear-gradient(90deg,#FFC300,#d50e2b,#d50e2b);border-radius: 50%;
color:#581845;margin: 0px auto 5px auto;

}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 90%;
height: 2px;
background: grey;
position: absolute;
left: -45%;
top: 24px;
z-index: -1; /*put it behind the numbers*/
text-align: center;
}
#progressbar li a{
margin:0px;
color:#FFC300;font-size:large;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: linear-gradient(90deg,#d50e2b,#FFC300,#FFC300);color:#fe9039}
.section-media{
background: linear-gradient(90deg,#d50e2b,#FFC300,#FFC300);color:#fe9039float:left;
position:fixed;
top:150px;
max-height:50vh;
width:50vw;
margin:0 25%;
z-index:5;
}
.media{
}
.media img{
width:100%;
max-height:100%;
}
.buttons
{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0px 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
-webkit-border-radius: .2em;
border-radius: .2em;
}
.buttons:before
{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0px 0.5em 0 -1em;
padding: 0px .2em;
pointer-events: none;
}
.add:before { content: "\271A"; }
.edit:before { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before { content: "\2714";}
.email:before { content: "\2709";}
.cross:before { content: "\2716"; }
.dollar:before { content:"\0024"; }
.euro:before { content:"\20AC"; }
.pound:before { content: "\00A3"; }
.cent:before { content: "\20B5"; }
.celsius:before { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }
.next:before { content: "\279C"; }
.left_arrow:before { content: "\2190"; }
.up_arrow:before { content: "\2191"; }
.right_arrow:before { content: "\2192"; }
.down_arrow:before { content: "\2193"; }
.up_left_arrow:before { content: "\2196"; }
.up_right_arrow:before { content: "\2197"; }
.down_left_arrow:before { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }
.like:before { content: "\2764"; }
.star:before { content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }
.watch:before { content: "\231A"; }
.blacksun:before { content: "\2600"; }
.cloud:before { content: "\2601"; }
.umbrella:before { content: "\2602"; }
.snowman:before { content: "\2603"; }
.blackstar:before { content: "\2605"; }
.whitestar:before { content: "\2606"; }
.blackphone:before { content: "\260E"; }
.whitephone:before { content: "\260F"; }
.saltire:before { content: "\2613"; }
.hot_drink:before { content: "\2615"; }
.skull:before { content: "\2620"; }
.radioactive:before { content: "\2622"; }
.biohazard:before { content: "\2623"; }
.peace:before { content: "\262E"; }
.yingyang:before { content: "\262F"; }
.frowning_face:before { content: "\2639"; }
.smiling_face:before { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before { content: "\263E"; }
.wheelchair:before { content: "\267F"; }
.recycle:before { content: "\267D"; }
.recycle2:before { content: "\267C"; }
.music_note:before { content: "\266C"; }
.warning:before { content: "\26A0"; }
.male_and_female:before { content: "\26A4"; }
.scissors:before { content: "\2701"; }
.airplane:before { content: "\2708"; }
.snow:before { content: "\2042"; }
#barreprinci,#barreprinci ul,#barreprinci ul li,#barreprinci ul li a,#barreprinci #menu-button
{
	margin:0px;padding:0px;border:0px;
	list-style:none;line-height:1;height:50px;display:block;position:relative;z-index:101;;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}#barreprinci:after,#barreprinci>ul:after{
	content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;
}#barreprinci #menu-button{
	display:none;
}#barreprinci{
	width:auto;
    border-bottom:1px solid black;
    font-family:'Source Sans Pro',sans-serif;
    line-height:1;
    /*background: linear-gradient(0deg, #000000, #000000,#000000);*/
    /*background-color:#555;*/
}
@media (prefers-color-scheme: dark) {
    #barreprinci{
        background-color:#000;
    }
}
@media(prefers-color-scheme:light) {
    #barreprinci{
        background-color:#000;
    }
}
#barreprinci>ul>li{
	float:left;
}#barreprinci.align-center>ul{
	font-size:0px;text-align:center
}#barreprinci.align-center>ul>li{
	display:inline-block;float:none
}#barreprinci.align-right>ul>li{
	float:right;
}#barreprinci>ul>li>a{
	font-size:15px;text-decoration:none;color:black;
}#barreprinci>ul>li>.logobar{
	display:inline-flex;text-decoration:none;font:bold 18px/30px 'Orbitron',sans-serif;font-size:25px;color:white;padding:2px 2px 0px 2px;
}#barreprinci>ul>li>.logobar:hover{
	background-color:#000;display:inline-flex;text-decoration:none;font:bold 18px/30px 'Orbitron',sans-serif;font-size:25px;color:white;padding:2px 2px 0px 2px;
}#barreprinci>ul>li>.logobar img{
	height:40px;width:40px;margin:5px;
}#barreprinci>ul>li>.logobar p{
	height:50px;margin:1px;font-family:'Bangers',regular;font-size:xxx-large;padding:10px;font-weight:bold;letter-spacing:2px;color:#0b7603;text-shadow: 1px 1px 2px #000;
}#barreprinci>ul>li>.logobar p:hover{
	text-decoration:none;color:whitesmoke;background:transparent;text-shadow: 3px 3px 3px #0b7603;
}#barreprinci>ul>li>.icon-bar{
	margin:0px;height:50px;width:50px;text-align:center;
}#barreprinci>ul>li>.icon-bar>.material-icons{
	font-size:35px;width:50px;height:50px;padding:10px;margin:0px;color:white;text-shadow: 1px 1px 2px #000;text-indent:0;text-align:center;
}#barreprinci>ul>li>.icon-bar>.material-icons:hover{
	font-size:35px;width:45px;height:50px;padding:5px;margin:0px;color:white;text-shadow: 3px 3px 3px #000;background:#222;
}#barreprinci>ul>li>a>img{
	height:25px;width:25px;padding:0px 0px 0px;margin:7px 0px 0px 0px;
}#barreprinci>ul>li>form{
	padding-top:5px;height:15px;font-size:15px;text-decoration:none;color:black;
}#barreprinci>ul>li:first-child>a{border-top-left-radius:4px;border-bottom-left-radius:4px;
}#barreprinci.align-center>ul>li:first-child>a{
	border-radius:0px
}#cssmen.align-right>ul>li:first-child>a{
	border-top-left-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-right-radius:0px;
}#barreprinci>ul>li:hover>a,#barreprinci>ul>li.active>a{
	color:#0b7603;background-color:#000;border-bottom: 2px solid #0b7603;
}#barreprinci>ul>li:hover>a,#barreprinci>ul>li>a:hover{
	color:#0b7603; box-shadow: 0px 15px 35px rgba(0,0,0,.5); background-color:#0b7603;border-bottom: 0;border-top:0;z-index:2;
}#barreprinci>ul>li:after{
	content:'';position:absolute;top:1px;right:0px;color:#fff;display:block;height:20px;width:1px;opacity:.15;background:#0e8106;background:linear-gradient(to top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));background:-webkit-linear-gradient(top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));background:-ms-linear-gradient(top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));background:-moz-linear-gradient(top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));background:-o-linear-gradient(top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));
}#barreprinci.align-right>ul>li:after{
	right:auto;left:-1px
}#barreprinci>ul>li:before{
	content:'';position:absolute;top:1px;right:-1px;display:block;height:20px;width:1px;opacity:.35;
}#barreprinci.align-right>ul>li:before{
	right:auto;left:0px
}#barreprinci>ul>li:last-child:after,#barreprinci>ul>li:last-child:before{display:none}#barreprinci.small-screen{width:100%}#barreprinci.small-screen>ul,#barreprinci.small-screen.align-center>ul{
	width:100%;text-align:left}#barreprinci.small-screen>ul>li,#barreprinci.small-screen.align-center{float:none;display:block;border-top:1px solid #0e8106
}#barreprinci.small-screen>ul>li>a{
	padding:18px 25px
}#barreprinci.small-screen>ul>li:after,#barreprinci.small-screen>ul>li:before{
	display:none
}#barreprinci.small-screen #menu-button{
	display:block;padding:18px 25px 19px 25px;cursor:pointer;font-size:15px;text-decoration:none;color:#0e8106
}#barreprinci.small-screen #menu-button.menu-opened{
	color:#0e8106
}#barreprinci.small-screen #menu-button:after{
	content:"";position:absolute;right:25px;top:20px;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border-top:2px solid #0e8106;border-bottom:2px solid #0e8106;width:18px;height:3px
}#barreprinci.small-screen #menu-button.menu-opened:after{
	border-top:2px solid #0e8106;border-bottom:2px solid #0e8106
}#barreprinci.small-screen #menu-button:before{
	content:"";position:absolute;right:25px;top:30px;display:block;width:18px;height:2px;background:#0e8106
}#barreprinci.small-screen #menu-button.menu-opened:before{
	background:#0e8106
}#barreprinci .has-sub{
	z-index:100;
	float:right;
}#barreprinci .has-sub:hover>ul{
	display:block
}#barreprinci .has-sub ul{
	display:none;position:absolute;width:180px;right:0;z-index:1;margin-top:-2px;height: auto;border: 2px solid #0b7603;
}
#barreprinci.align-right .has-sub ul{
	left:auto;right:0px
}#barreprinci .has-sub ul li{
	width:100%;
}#barreprinci .has-sub ul li a{
	background:#222;border-bottom:1px solid #999;font-size:1.2em;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700;text-overflow:ellipsis;
}#barreprinci .has-sub ul li a:hover{
	background:#222;border-bottom:1px solid #999;font-size:1.2em;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700;text-overflow:ellipsis;
}#barreprinci .has-sub ul li:hover a{
	background: linear-gradient(0deg, #444, #000,#444);
}#barreprinci .has-sub2 ul{
	display:none;position:absolute;width:200px;right:0;z-index: 4; margin-top: -2px; height: auto; border: 2px solid #0b7603;
}#barreprinci.align-right .has-sub2 ul{
	left:auto;right:0px
}#barreprinci .has-sub2{z-index:100;}
#barreprinci .has-sub2:hover>ul{display:block; max-height:50vh; overflow-y:scroll;}
#barreprinci .has-sub2 ul li{ margin-bottom:-1px;
}#barreprinci .has-sub2 ul li a{
	background: #222;border-bottom:2px solid #999;font-size:1.2em;filter:none;display:block;line-height:120%;padding:10px;color:#fff;font-weight:700;text-overflow:ellipsis;
}#barreprinci .has-sub2 ul li:hover a{
	background: linear-gradient(0deg, #444, #000,#444);
}

#barreprinci .has-subsearch a{
	display:none;
}
#barreprinci .has-subsearch ul{
	display:flex;
}#barreprinci.align-right .has-subsearch ul{left:auto;right:0px}
#barreprinci .has-subsearch{z-index:100;display:flex;width:30%;}
#barreprinci .has-subsearch:hover>ul{display:block;height:auto;}
#barreprinci .has-subsearch ul li{margin-bottom:-1px;}
#barreprinci .has-subsearch ul li a{ background: #000000;;border-bottom:1px solid #454545;font-size:11px;filter:none;display:block;line-height:120%;padding:10px;color:#fff;font-weight:700;
}#barreprinci .has-subsearch ul li:hover a{	background: linear-gradient(0deg, #222, #000,#222);border:2px solid #0b7603;color:#fff;font-weight:700}	
#barreprinci ul li ul .formsearch{height:40px;padding: 0 10px;width:100%;margin:6px 0; border: 2px solid #0b7603; border-radius: 25px;background-color:#000;}
#barreprinci .search{border:none;list-style:none;display:inline-block;line-height:1;margin:3px 0px 0px 3px;background:none;color:white;width:80%;font-size:1.2em;}
#barreprinci .search::after{box-sizing:content-box;border:none;}
#barreprinci .search::before{box-sizing:content-box;border:none;}
#barreprinci .search:focus{border:none;outline: none;border:0;}
#barreprinci .search::placeholder{border:none;color:white;font-size:17}
.formsearch form button p{
	font-size:30;
	padding-top:8;
}
#result-search{
    position:absolute;
    top:51px;
    z-index:1000;
    left:213px;
    min-height:50px;
    padding: 0 10;
    width:30%;
    color:white;
    border:1px solid #0b7603;
    text-align: center;
    box-shadow: 1px 1px 12px #000;
    background-color: #444;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 70vh;
}
#result-search a{
    border-top:1px solid #FFF;
    width:100%;
    display:inline-flex;
    padding:5;
    color:#FFF;
}
#result-search a p{
    margin: 1em 0 0 1em;
}
.barresearch{background-color:#0e8106;height:30px}.boutonprinci{padding:0px 0px 0px 0px;height:30px;width:30px}.logomyweb{width:150px;margin:0px;height:50px}
@media only screen and (max-width:670px) {
	#barreprinci .search{
		width:112px;
		color:white;
	}
}
#bar_search{
    display:inline-flex;
}
#bar_search input{
    display:table-cell;
    vertical-align: middle;
}
#bar_search button{
    box-shadow: none;
    height: 40px;
    width: 30px;
    float: right;
    background: none;
    border: 0px;
    color: white;
    margin: 0px auto;
    padding: 3px 0;
}#footer
{
    width: 100vw;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 11.7%);
    gap: 10px;
    text-align: center;
    color: #CCC;
    position: inherit;
    bottom: 0;
    top: 100%;
    padding: 10px;
    background-color: #fe9039;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    border-top:2px solid #581845;
}
#footer .footer_cell{
    box-shadow: 1px 1px 10px #581845;
    padding: 5px;
}
        #footer .footer_cell a p{
            text-indent:0;
            text-align:center;
        }
#container{
    width:80%;
    margin:5% 10%;
    display:none;
}



footer
{
justify-content: space-between;
align-items: flex-end;
padding: 0px;
margin: 0px;
position:fixed;
bottom:0px;
color:#FFF;
text-align:center;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
margin-bottom:0px;
}
#idliste{
    display: block;
    left: 250px;
    top: 900px;
}
.liste{
    padding:0px;
    margin:0px;
    display: none;
    position: absolute;
    border-style: inset;
    height: 350px;
    overflow: auto;
}
.imgperso_voletcolor{
    height:350px;
    width:350px;
}
.imgprofilcom{
overflow:hidden;
-webkit-border-radius:50px;
border-radius:50px;
width:50px;
height:50px;
}
#choix_logo{
    background-color:#3333;
    padding: 20px 10px;
}
#choix_logo img{
    max-width:100%;
}
#choix_logo button{
    position:relative;
    z-index:2;color:red;
    margin-bottom:-30px;
}



/* BOUTON SWITCH */

    .bouton-on-off{
    width: 50px;
    height: 25;
    display: block;
    overflow: hidden;
    position: relative;
    padding-top:5;
    }

    .switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34px;
    }

    /* Hide default HTML checkbox */
    .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    }

    /* The slider */

    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F70000;
    -webkit-transition: .4s;
    transition: .4s;
    }

    .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    }
    .slider p{
        display:block;
        font-weight:bold;
        text-indent:0;
    }
    input:checked + .slider {
    background-color: #0b7603;
    }

    input:focus + .slider {
    box-shadow: 0 0 1px #0b7603;
    }

    input:checked + .slider:before {
    -webkit-transform: translateX(48px);
    -ms-transform: translateX(48px);
    transform: translateX(48px);
    }
    .slider:before p{
        text-indent:15px;
    }
    /* Rounded sliders */
    .slider.round {
    border-radius: 34px;
    }

    .slider.round:before {
    border-radius: 50%;
    }

    
    .slider_back {
        width: 100%;
        height:100%;
        display:block;
        position:fixed;
        z-index:0;
        top:0;
        left:0;
        margin: 0;
        
    }
    .slider-wrapper {
        width: 100%;
        height: 400px;
        position: relative;
    }

    .slide {
        float: left;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 3s linear;
    }
    .slider-wrapper > .slide:first-child {
        opacity: 1;
    }

    /*------------FIN BOUTON SWITCH--------------*/




.button_drag{
position:absolute;
top:-15px;
left:-15px;
border-radius:50%;
padding:0;
background-color:#999;
}
.button_animation{
display: block;
position: absolute;
right: -25px;
top: -20px;
border-radius: 50%;
background-color:#999;
}



/*-------------------------------------------------------------*/
/*---------------------------NEWS------------------------------*/
.news{
display:block;
color:#333;
width:100%;
text-align:center;
background-color:#fe9039;padding-bottom: 50px;
position: relative;
}
.views{
display: block;
position: relative;
text-align: right;
line-height: 1;
height:15px;
}
.messages{
display:block;
width:60%;
max-width:1000px;
margin-left: calc((100vw - 1000px) / 2);
}
.commentnews{
display: block;
color: #333;
text-align: center;
background-color: #FFF;
border-bottom: 1px solid #222;
}
.commentcommentnews{
display: block;
color: #333;
text-align: center;
background-color:#fe9039;color:#d50e2b;border-bottom: 1px solid #581845;}
.newsmess{
padding:0px;
word-wrap: break-word;
z-index: 2;
}
.newsmess span div{
display:block;
width: 95%;
margin: auto;
}
.author{
text-decoration: underline;
font-size: large;
font-weight: bold;
word-wrap: break-word;
}
.userinfo{
text-align:center;
width:100px;
}
.datenews{
background-color:#fe9039;color:#d50e2b;border-bottom: 2px solid #581845;border-top: 2px solid #581845;height:60px;
padding: 10px;
display:inline-flex;
width:100%;
}
.datenews a{
display:block;
margin:auto;
bottom:5px;
position:relative;
text-decoration:none;
}
.datenews span{
padding: 5px;
font-weight:bold;
color:#d50e2b;position: relative;
top: -15px;
font-size: 18px;
margin: 0px;
}
.datenews .clear{
display:inline-flex;
position:absolute;
}
.datenews .datetext{
padding:0px;
display:block;
margin:auto;
}
.datetext{
padding-top: 10px;
display: inline-block;
}
.datecomment{
    text-align:center;
    font-size:small;
}
.bt{
font-size:30px;
height:35px;
color:#fe9039;background-color:#d50e2b;border: 2px solid #581845;}
.bt_sup{
color: red;
background: transparent;
border: 0px;
display: inline-flex;
}
.bt_news{
    line-height:1;
    position:absolute;
    margin:auto;
    padding:5px 0px;
    display:block;
    bottom:0;
    width:100%;
    background-color:#fe9039;}
    .bt_news button{
        display:table;
    }
    .bt_news button p{
        display:table-cell;
        vertical-align:middle;
        text-indent:0;
        text-align:center;
    }
    .mylike{
        color:#d50e2b;    }
    .bt_news button i{
        display:table-cell;
        vertical-align:middle;
    }
.bt_action{
background: transparent;
border: 0px;
padding:0px;
display:contents;
color:#581845;}
.bt_action p{
width:25px;
display: inline-block;
position: relative;
top: 5px;
left: 2px;
box-shadow: none;
}
.header{
height: calc(100vh - 101px);
position:relative;
width:100vw;
overflow:hidden;
z-index:2;
margin-top: 50px;
    background-image:url('https://www.goudiz.com/img/space/topinsta/dccc72d7ea00c2df003c1be9233ee42c.jpg');
background-repeat: no-repeat;
background-position:center top;
background-size: 100% 100%,cover;
word-wrap: break-word;
}
.header img{
width:100%;
}
.header a{
color:azure;
font-size:3vw;
}
.header-title{
position:absolute;
top:0;
width:100%;
height:100%;
left:0;
z-index:4;
text-align:center;
line-height:1;
}
.headeradmin-title{
position:absolute;
width:60%;
left:20%;
z-index:4;
text-align:center;
line-height:1;
}
.headeradmin-title a:hover{
border:solid 2px #FFF;
}
.header p{
text-indent : 1.5em;
text-align:center;
font-style: italic;
}
.header h2{
font-size:2vw;
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}
.header h3{
font-size:3em;
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}
.header h4{
font-size:2em;
padding:0px;
margin:0px;

font-style: italic;
text-transform: capitalize;
}
.header h5{
font-size:1.5em;
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}

.header-presentation{
overflow:hidden;
width: 100%;
height: 100%;
margin: 0px;
}
.container_drag{
    position:absolute;border:2px solid #999;border-style:dashed; 
}
.container_entete{
    position:absolute;
}
#infospace{
background-color:#FFF;
padding:15px;
}
#bt-header-title{
display: inline-flex;
position: absolute;
float: left;
left:15px;
bottom:5px;
}
.bt-info{
position: relative;
display: inline-flex;
margin-right: 5px;
background-color: #0b7603;
border: 1px solid #FFF;
height: 30px;
font-weight: bold;
width:40px;
padding: 2px 7px;
}
.bt-signal{
display: inline-flex;
bottom:10px;
left: 5px;
background-color: #0b7603;
border: 1px solid #FFF;
padding: 0 5;
font-weight: bold;
}
.bt-abo{
position: relative;
display: inline-flex;
background-color: #0b7603;
border: 1px solid #FFF;
height: 30px;
padding: 7px 15px;
font-weight: bold;
}
.bt-desabo{
position: relative;
display: block;
height: 30px;
padding: 0px 15px;
font-weight: bold;
}

.section-presentation-central a:hover{
border:solid 2px #FFF;
}
.imginsert{
    height:350px;
    max-width:100%;
}
.section-actu{
display:block;
float:left;
position:relative;
padding-bottom:150px;
width:100%;

}
.comment_message{
overflow-wrap: break-word;
}

@media only screen and (max-width: 600px) {
.header{
height:30%;
overflow:hidden;
}
.header-title{
width:100%;
top:0px;
left:0px;
line-height:1;
}
.header h1{
font-size:2em;
}
.header h2{
font-size:1.8em;
}
.header h3{
font-size:1.5em;
}
.header h4{
font-size:1.2em;
}
.header h5{
font-size:1em;
}
.header p{
font-size:1em;
}
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #000;

    background: url('/img/space/topinsta/3f42fc6ccfb48b2ce963a591cf8b000c.jpg');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
min-height: 100%;
margin: 0px;
padding: 0px;
top:0px;
position: relative;
width: 100vw;
height: 100%;
overflow-x: hidden;
}
header
{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0px;
margin: 0px;
width: 100%;
height: auto;
z-index: 3;
position:fixed;
top:0px;
color:#FFF;
text-align:center;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
margin-top:0px;
}

nav{
height:50px;
width:100%;
}
#nav2{
position: relative;
display: flex;
width: 100%;
z-index: 1;
}