.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');
}
.Abril_Fatface{
    font-family:"Abril_Fatface";
}
.adriatica{
    font-family:"Abril_Fatface";
}
.Arial{
    font-family:"Arial";
}
.ArialBlack{
    font-family:"Arial black";
}
.Bangers{
    font-family:"bangers";
}
.BookmanOldStyle{
    font-family:"Bookman Old Style";
}
.ComicSansMS{
    font-family:"Comic Sans MS";
}
.Courgette{
    font-family:"Courgette"; 
}
.CourierNew{
    font-family:"Courier New";
}
.Didact_Gothic{
    font-family:"Didact_Gothic";
}
.DRIVE-TH{
    font-family:"DRIVE-TH";
}
.FontLabSource{
    font-family:"FontLabSource";
}
.Garamond {
    font-family:"Garamond";
}
.Georgia{
    font-family:"Georgia";
}
.Helvetica{
    font-family:"Helvetica";
}
*, *:after, *:before { box-sizing: border-box; }
body, html { font-size:medium; padding: 0px; margin: 0px;}


.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;
}
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:large;
}
span{
    font-size:medium;
}
a {
color:inherit;
border:none;
text-decoration: none;
}
.paragraphe{
    text-align:justify;
    text-indent:1.5em;
}
@media screen and (max-width: 500px) {

}
#box_log{
    width:80%;
    margin: auto;
    text-align:center;
    background-color:#222;
    border-radius:10px;
    padding:10px;
    border:2px solid #000;
    color:#efefef;
}
#box_log h1{
    font-size:xx-large;
    color:#0b7603;    
}
#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%;
    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:10vw;
    margin:45vh 45vw;
}
.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;
margin:auto;
padding:0px;
width:100%;
}
#loader_line span{
display: none;
vertical-align:middle;
}
#loader_center{
    display:block;
    width:100%;
    height:100vh;
}
.loader{
position: fixed;
width: 50vw;
left: 0;
top:0;
margin:60vh 25vw;
z-index: 5000;
justify-content: center;
align-items: center;
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;
vertical-align:middle;
position: relative;
width: 80px;
height: 80px;
margin:auto;
}
.effet:after {
content: " ";
display: block;
border-radius: 50%;
width: 0px;
height: 0px;
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: 0px 0px 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:1px solid #666;
    right: 0px;
    z-index: 5;
    position:fixed;
    margin-left:-3px;
    height:35px;
    background-color:#000;
    color:white;
    font-size:medium;
    position:fixed;
    margin-top:-40px;
    border-bottom:0;
}
#colorchange_space{
    width:100%;
    display: block;
    background-color: #000;
    border: 1px solid #666;
    position: fixed;
    top: 50px;
    z-index: 4;
    max-height:90vh;
    overflow-y:scroll;
    padding:5px;
}
#colorchange_space .button_close{
    border:1px solid #666;
    right: 0px;
    z-index: 5;
    position:fixed;
    margin-left:-3px;
    height:35px;
    background-color:#000;
    color:white;
    font-size:medium;
    position:fixed;
    margin-top:-40px;
    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;
    border:1px solid #666;
    border-radius:10px;
    height: auto;
    overflow: hidden;
    display:inline-block;
    width:100%;
    margin: 0 0 -4px -4px;
    padding: 15px;
    margin: 10px auto;
}
#divnuancier-der h2
{
font-size:100%;
text-decoration:underline;
line-height: initial;
color:#0b7603;
text-align:center;
}
#divnuancier
{
color:white;
border: 1px solid #666;
border-radius:10px;
border-collapse:collapse;
overflow: hidden;
font-size:medium;
width:100%;
display:inline-block;
margin: 0;
padding: 15px;
margin: 10px auto;
}
#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: 190px;
    padding:30px;
    width: 100%;
    margin: 0px;
    z-index: 4; 
}
#form_qcm input{
    font-size:medium;
}
/*----------------------CARROUSEL-------------*/
#carrousel{
    position: fixed;
    top: 190px;
    width: 100%;    
    margin: 0;
    padding:10px;
    z-index: 4;
    height:auto;
    overflow:scroll;
}
#img_carrousel{
    overflow: scroll;
    display: inline-flex;
    height: 450px;
}
/* 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:450px;
  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:450px;
}

#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: 450px;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:450px;
}

#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: 450px;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{
    max-width:100%;
    height:450px;
}

/*-------------------CHECKBOX------------------------*/
.checkbox{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    top: 40%;
    float: left;
    }
    span.checkbox::before {
    width: 27px;
    height: 27px;
    background: linear-gradient(45deg, black, transparent);
    left: -35px;
    box-sizing: border-box;
    border: 1px solid #0b7603;
    box-shadow: 2px 1px 1px #0b7603;
    border-radius: 50px;
    transition: border-color .2s;
    }
    span.checkbox:hover::before {
    background-color:#0b7603;
    border-radius:50px;
    }
    span.checkbox::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    left: -31px;
    top: 2px;
    color: transparent;
    transition: color .2s;
    }
    input[type="checkbox"]:checked + label span.checkbox::after {
    color: #FFF;
    padding: 6px 0px 0px 2px;
    }





 /*----------------------MYWORD---------------------*/   
    #myword{
    position: fixed;
    top: 190px;
    width: 100%;
    left:0;
    z-index: 11;
    background-color: rgb(51, 51, 51);
    border-top:0;
    border:2px solid #999;
    overflow-y: scroll;
    height: 70vh;
    }
    #editeurdyna{
    position: fixed;
    top: 170px;
    padding-top:5px;
    width: 100%;
    z-index: 4;
    }
    #space-editeur{
    display: block;
    position: fixed;
    top: 100px;
    left:0;
    width: 100%;
    z-index: 11;
    margin:auto;
    background-color:#000;
    border:2px solid #999;
    max-height: 80vh;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 15px;
    }
    .buttonmyword
    {
    width:35px;
    font-size:medium;
    height:35px;
    display: table-cell;
    vertical-align: middle;
    margin:0 2px;
    }
    .buttonmyword i{
    font-size:21px;
    }
    input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 35px;
    height: 35px;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0px;
    }
    input[type="color"]::-webkit-color-swatch {
    border: none;
    }
    .myword
    {
    background-color:#000;
    width:100%;
    padding: 5px;
    position:relative;
    z-index:200;
    }
    .mywordedit
    {
    width:90%;
    margin:auto;
    height:25vh;
    background-color:white;
    border:1px solid black;
    padding:50px 0;    
    overflow: hidden;
    overflow-y: scroll;
    color:#000;
    font-size:1.5em;
    text-align:left;
    padding:10px;
    }
    #edit-myword{
    margin:0;
    border-collapse:collapse;
    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 2px;
    }
    .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{
        margin:0 10%;
        padding:2px 0;
    }
    .label-colorpicker i{
        padding:4px 0;
    }
    #share button{
        width:35px;
        height:35px;
        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:35px;
        display:block;
        display:table-cell;
        vertical-align:middle;
    }
    #choice_fonts button b{
        font-size:medium;
    }
    #container-colorpicker{
    position: relative;
    overflow: hidden;
    width: 35px;
    height: 35px;
    padding:0px;
    }
    #container-colorpicker button{
        width:35px;
        height:35px;
    }
    .colorpicker{
    position: absolute;
    border: none;
    width:25px;
    height:25px;
    padding:0px;
    margin:0px;
    }
/*----------------COOKIES----------------*/
.flou{
    filter: blur(3px);
    }
    #cookies{
    z-index: 1000;
    width: 90%;
    background-color: #222;
    border-radius: 2%;
    position: fixed;
    text-align: center;
    font-size:1.5em;
    box-shadow: 2px 2px 9px #000;
    margin: 0 5%;
    top: 15px;
    max-height: 90vh;
    overflow: scroll;
    }
    #cookies p{
        text-align:justify;
    }
    @media screen and (min-width:0px) and (max-width:400px) {
        #liste_cookie{
        max-width: 90%;
        }
    }
    @media screen and (min-width:400px) and (max-width:500px) {
        #liste_cookie{
        max-width: 80%;
        }
    }
    @media screen and (min-width:500px) and (max-width:600px) {
        #liste_cookie{
        max-width: 70%;
        }
    }
    @media screen and (min-width:600px) and (max-width:700px) {
        #liste_cookie{
        max-width: 60%;
        }
    }
    @media screen and (min-width:700px) and (max-width:800px) {
        #liste_cookie{
        max-width: 50%;
        }
    }
    #liste_cookie{
        margin:auto;
        display:block;
        position:relative;
        margin-bottom:25px;
    }
    #button-cookies{
    display:table;
    margin:auto;
    }
    #container_button-cookies{
        position:absolute;
        bottom:0;
        background-color:#333;
        width:100%;
        height:90px
    }
    #cookies_desc{
        display:block;
        overflow:scroll;
        max-height: 90vh;
        position: relative;
        padding:0 15px;
        padding-bottom:90px;
    }
    #cookies button{
    border:0px;
    height:57px;
    display:table-cell;
    vertical-align:middle;
    width:40%;
    }
    #cookies button span{
    margin-top:-.4em;
    }
    #cookies button .material-icons{
    font-size:1.1em;
    }
    #cookiesperso{
    position: fixed;
    height:80vh;
    top: 50px;
    z-index: 1001;
    background-color: white;
    color: #111;
    border:2px solid #999;  
    }
    #cookiesperso p{
    font-size: medium;
    text-align:justify;
    text-indent:1.5em;
    padding:15px;
    width:100%;
    }
    #cookiesperso button .material-icons{
    font-size:1.1em;
    }
    .prese-cookie-perso{
    background-color:#111;
    color:#FFF;
    margin:0px;
    text-align:center;
    padding-top:1.4em;
    }
    .prese-cookie-perso p{
        font-size:large;
    }
    .prese-cookie-perso h2{
    color:#111;
    text-align:left;
    }
    .fermercookie{
    background-color:#111;
    color:#FFF;
    position:fixed;
    border:2px solid #999;
    border-bottom:0;
    right:-5px;
    height:45px;
    font-size:1.2em;
    padding:5px;
    margin-top:-45px;
    border-radius: 0;
    }
    .cookie-presentation p{
    width:70%;
    }
    .align-cookie-perso{
    display:block;
    position:relative;
    width: 100%;
    margin: 0px;
    padding: 15px 0;
    background-color: rgb(220,220,220);
    }
    .align-cookie-perso h2{
    width:70%;
    }
    .align-cookie-perso button{
    margin:15px auto;
    font-weight:bold;
    }
    .cookie-presentation button{
    margin-right:5px;
    height:30px;
    margin-top:7px;
    background-color:rgb(160,160,160);
    border:0px;
    }
    .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;
    }


    #my_leftnav .desc{
        display:none;
    }
    #my_leftnav .active{
        display:block;
        margin-top: 10px;
    }
    #my_leftnav .active_lien{
        color:#0b7603;
        border-bottom:2px solid #0b7603;
    }
    #my_leftnav .lien{
        border-bottom:2px solid #999;
    }
    .prese-cookie-perso{
        font-size:x-large;
    }



    /*---------------Fin COOKIES--------------------*/
    .clear{
    background:none;
    color:#940000;
    border:none;
    position:relative;
    z-index:1;
    }
    .clear p{
        text-indent:0;
    }
    .retrait{
    margin-top:-25px;
    margin-left:22px;
    font-size: 50px;
    z-index: 2;
    }
    
    button p{
        text-indent:0;
    }
    
    /*-----------------PROGRESS-BAR----------------*/    
    
    /*---------------FIN-PROGRESS-BAR---------------*/
    
    .inputcomments{
            border-radius: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{
width:auto;
margin:0 auto;
display:inline-flex;
}
#radioclass span{
font-size:11px;
color:#000;
}
.inputradio{
width:60px;
}
.label {
display: block;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.label:first-child .inputradio {
border-radius: 0.5em 0px 0px 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: 0px 0.5em 0.5em 0px;
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;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width:50px;
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-------------------------------------*/
    /*---------------------------------------------------------------------*/
#mess{
width: 100%;
line-height: 1;
color: white;
background-color:#222;
width: 100%;
margin: auto;
position: absolute;
top: 0px;
border:1px solid #666;
}
#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;
font-size:medium;
}
#mess label{
color:#000;
font-size:x-large;
}
#mess label p{
    font-size:x-large;
    font-weight:bold; 
    padding:10px 0;       
}
#mess label img{
    width:50px;
    height:50px;
}
.notificationmess{
    color:red;
    position: absolute;
    top: 28px;
    right: 0px;
    display: block;
    background-color: red;
    width: 10px;
    height: 10px;
    border-radius: 25px;
    }
    .enligne{
    color:#0b7603;
    position: absolute;
    float:right;
    margin-top: -15px;
    right:0;
    bottom:0;
    display: block;
    background-color: #0b7603;
    width: 15px;
    height: 15px;
    border-radius: 25px;
    }
    #message{
    width:100%;
    height:150px;
    color:white;
    background-color:#333;
    }

    
    #oldmess button{
    cursor: pointer;
    display: table-cell;
    position: relative;
    margin: 0;
    padding: 0;
    color:#000;
    font-size: medium;
    border-radius: inherit;
    background-color: #efefef;
    }
    .messaddpoto{
    display: inline-block;
    width: 100%;
    line-height: 1;
    max-height: 150px;
    border-bottom:0;
    color: white;
    overflow: hidden;
    background-color: #222;
    text-align:left;
    border-collapse: collapse;
    }
    #ancrevalid{
    padding:15px;
    font-size:15px;
    }
    #datemess{
    width:100%;
    display:inline-flex;
    }
    #datemess p{
    font-size:1.5em;
    padding-top:5px;
    }
    .coress{
    display:inline-flex;
    margin:auto;
    width:50px;
    }
    .profil{
    display:block;
    font-weight:bold;
    width:100%;
    height:50px;
    margin:0;
    }
    .liste_profil li select{
        max-width:190px;
    }
    #datemess button{
    display:block;
    position:absolute;
    right: 0;
    margin: 0;
    z-index: 0;
    }
    #contenumess{
    display: inline-flex;
    width: 100%;
    max-height: 200px;
    }
    .contenu-mess{
    width:100%;
    font-size:1.5em;
    }
    .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: 0px;
    color: #FFF;
    display: block;
    position: relative;
    height: 0;
    line-height: 0;
    top:20px;
    margin:auto;
    left: -30px;
    border-bottom: 30px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid #0b7603;
    }
    .form-mess{
    width:100%;
    background:#333;
    }
    #oldmess{
    line-height: 1;
    color: white;
    width: 100%;
    line-height: 1;
    background-color:#000;
    position:absolute;
    top:25px;
    display:block;
    z-index:5;
    width:100%;
    margin:auto;
    }
    #oldmess select{
    appearance : auto;
    background-color:#999;
    margin-right:5;
    }
    .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;
    }
    #datesupmess{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    }
    #datesupmess :first-child{
    width: 50%;
    margin: 0px 0px 0px 25%;
    }
    #datesupmess p{
    padding-top:5;
    }
    .messdroite{
    width:80%;
    float:left;
    margin: 0 30;
    }
    .messgauche{
    width:80%;
    float:left;
    margin: 0 30;
    }
    #containermessage{
    width: 100%;
    display: inline-block;
    position: relative;
    margin:0;
    padding:0 0 10 0;
    font-size:1.5em;
    }
    #containermessage label{
    display:inline-flex;
    white-space:normal;
    padding: 10 0 0 5;
    max-width:80%;
    margin:0;
    }
    .datemultimess{
    border-top:1px solid #555;
    width:80%;
    margin-left:10%;
    font-size:1.5em;
    }
    .boutonaddmess{
    cursor: pointer;
    position: relative;
    margin: 0 10%;
    padding: 5px 15px;
    font-size: 20px;
    color:#000;
    font-weight:bold;
    font-size:large;
    background-color: #0b7603;
    border: 2px solid #111111;
    border-radius: 20px;
    }
    .boutonaddmess::before{
    content: ' ';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    }
    .boutonaddmess:hover{
    color:#FFF;
    border: 2px solid #111111;
    background-color: #333;
    }
    .boutonaddmess span{
    font-size:25px;
    }
    .liste_profil li{
        display:table;
    }
    .liste_profil li i{
        display:table-cell;
        vertical-align:middle;
    }
    .tablemess
    {
    width:100%;
    text-align:center;
    }
    .tablemess .messprofil{
    width:20%;
    }
    .tablemess .tabmessmess{
    width:80%;
    }
    .messprofil .imgprofilcom{
    width:50px;
    height:50px;
    border-radius:50px;
    overflow:hidden;
    margin-top:10px;
    }
    .containerselectpoto{
    margin:0;
    padding:5px 0;
    height:auto;
    position:relative;
    background-color:#000;
    display:-webkit-box;
    overflow-y:scroll;
    }
    #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;
        float:left;
        z-index:2;
        border: 0;
        margin-top: -35px;
        margin-left:-1px;
        background-color: #222;
        color: #FFF;
        border: 1px solid #666;
        border-bottom:0;
    }
    .messaddpoto a{
    margin-right: 15px;
    display: table-cell;
    vertical-align: middle;
    }
    .messaddpoto #poto2{
    display: table-cell;
    vertical-align: middle; 
    }
    .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;
    }



/*-------------------------FIN MESSAGERIE----------------------------------*/
/*-------------------------------------*/
/*--------------Video------------------*/
/*-------------------------------------*/
.videoyoutube
{
width:100%;
height:50vh;
}
#twitter-widget-0 #document{
    width:100%;
}
#embed-video-container div{
    max-width:auto;
}
.videotiktok{
width:100vw;
min-height:590px;
}
.videotiktok html body{
overflow: hidden;
}
#root{
overflow: hidden;    
}
#reddit-embed{
width:100vw;
min-height:80vh;
}
.count_bt{
padding:7px;
}
.instagram-media{
    margin:auto;
    max-height:80vh;
}

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



#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;
}
#main{
    height:500px;
    display:block;
    overflow:hidden;
}
.bt-info{
position: absolute;
display: block;
bottom:5px;
left: 15px;
border-radius:5px;
background-color:#000000;color:#ffffff;border: 1px solid #878787;height: 30px;
font-weight: bold;
width:40px;
}
#infospace{
background-color:#FFF;
padding: 15px;
}
.bt-signal{

display: inline-flex;
bottom:220px;
right: 120px;
background-color: #0b7603;
border: 1px solid #FFF;
height: 30px;
width:38px;
padding-top:3px;
font-weight: bold;
}
.bt-abo{
position: absolute;
display: block;
bottom: 5px;
right: 10px;
border-radius:5px;
background-color:#000000;color:#ffffff;border: 1px solid #878787;height: 30px;
padding: 7 15;
font-weight: bold;
}
.bt-desabo{
position: absolute;
display: block;
bottom: 5px;
right: 10px;
height: 30px;
padding: 0px 15px;
font-weight: bold;
border-radius:5px;
background-color:#ffffff;color:#000000;border: 1px solid #878787;}

.section-presentation-central a:hover{
border:solid 2px #FFF;
}
.imginsert{
    max-width:100%;
    height:250px;
    margin:auto;
    display:block;
}
.clear{
background: transparent;
border: 0px;
margin: 0px;
padding: 0px;
height: 25px;
display: block;
float: right;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #dbdbdb;

    background-color: #000000;
    background-repeat:no-repeat;
    background-size: 100% 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
position: relative;
width:100%;
height:100%;
position:relative;
}
.flou{
    filter: blur(3px);
}
i{
    font-style:italic;
}
b{
    font-weight:bold;
}
h1{
    font-size:xxx-large;
}
h2{
    font-size:xx-large;
}
h3{
    font-size:x-large;
}
h4{
    font-size:large;
}
h5{
    font-size:medium;
}
p{
    font-size:medium;
}
section {
margin: 0px;
padding: 0px;
}

#container_presentation{
    top:140px;
    width:100%;
    float: left;
    word-break: break-word;
    z-index:4;
    position:fixed;
    background-color:#ffffff;    
}

#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%;
max-height:70vh;
position: relative;
display: inline-block;
overflow: hidden;
overflow-y: scroll;
float: left;
word-break: break-word;
background-color:#FFF;
}
/*-------------------Article--------------------*/
/*----------------------------------------------*/
.section-presentation-central{
position: relative;
width: 100%;
padding-bottom:200px;
}
.section-presentation-central img{
max-width:100%;
}
.section-presentation-central article{
width:100%;
max-height:350px;
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:100%;
    height:auto;
    margin:auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    justify-content: center;
    grid-gap:10px;
}
@media screen and (max-width:350px) {
    #article{
    grid-template-columns: repeat(auto-fill, 320px);
    }
}
@media screen and (max-width:320px) {
    #article{
    grid-template-columns: repeat(auto-fill, 280px);
    }
}
#article_action{
    display:block;
    width:100%;
    padding:5px;
    position:sticky;
    bottom:0;
    color:#ffffff;background-color:#878787;}
#article_action p{
    display:inline-flex;
    margin:0;
}
#article_action button i{
    color:#ffffff;}
.bt_article_action{
    display:inline-flex;
    width:100%;
}
.article-qcm{
    background-color: #000;
    font-family: cursive;
    width:100%;
    max-height:350px;
    position: relative;
    display: inline-block;
    overflow: overlay;
    float: left;
    padding: 10px;
}
.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:15;
    font-size: x-large;
    font-family:Abril_Fatface;font-size:xx-large;background: linear-gradient(0deg, #333, #000000, #333);}
.textmulticolor {
    background-image: linear-gradient(0deg, #999,#ffffff, #999);     
      -webkit-background-clip: text;
      -moz-background-clip: text; 
      background-clip: text;
      color: transparent;
      } 
#reponse-qcm{
    width:80%;
    margin:auto;
}
.reponse{
    width: 90%;
    margin: 10 2;
    color:darkgray;
    border-radius: 3%;
    border: 1px solid #999;
    padding: 2;
    font-size: large;
}
.formh1
{
background:#000000;color:#ffffff;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font-weight:bold;
font-size: xx-large;
border: 1px solid #0b8b02;
}
.formh2
{
background:#000000;color:#ffffff;width:100%;
text-align:left;
font: normal 100% 'Avantgarde', sans-serif;
font-weight:bold;
border: 1px solid #aaa7a8;
padding:5 2;
}
.imgprofilcom{
overflow:hidden;
-webkit-border-radius:50px;
border-radius:50px;
width:40px;
height:40px;
}
#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;
}

/*-------------------------------------------------------------*/
/*---------------------------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 10%;
position: fixed;
width: 80%;
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: 15px;
}
.bt_close{
    display: block;
    position: absolute;
    top: 2px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #FFF;
    font-size: larger;
}

/*-------------------------------------------------------------*/
/*---------------------------NEWS------------------------------*/
.news{
display:block;
position:relative;
color:#333;
width:100%;
text-align:center;
background-color:#000000;padding-bottom: 10px;
}
.views{
display: block;
position: relative;
text-align: right;
line-height: 1;
height:15px;
}
.datenews{
height:50px;
padding: 10px;
display:inline-flex;
width:100%;
background-color:#000000;color:#ffffff;border-bottom: 2px solid #878787;border-top: 2px solid #878787;}
.datenews a{
display:table;
bottom:5px;
position:relative;
text-decoration:none;
font-size:1.4em;
}
.datenews span{
padding: .6em 1em;
font-weight:bold;
color:#ffffff;font-size:small;
display:table-cell;
vertical-align:middle;
font-size:small;
}
.datenews .clear{
display:inline-flex;
position:absolute;
margin-right: 5px;
margin-top:-4px;
height:25px;
width:25px;
padding:0;
}
.datenews .datetext{
padding:0px;
display:block;
margin:auto;
}
.newsmess{
padding:0px;
word-wrap: break-word;
width: 100%;
height: auto;
z-index: 2;
margin-bottom:30px;
}
.newsmess span div{
display:block;
width: 95%;
margin: auto;
}
.messages{
width:100vw;
}
.comment{
padding: 0px 0px 0px 5%;
}
.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:#000000;color:#ffffff;border-bottom: 1px solid #878787;}

.author{
text-decoration: underline;
font-size: large;
font-weight: bold;
word-wrap: break-word;
}
.userinfo{
text-align:center;
width:100px;
padding: 0px 0px 0px 5%;
}
.datecomment{
    text-align:center;
    font-size:small;
}
.bt_sup{
color: red;
background: transparent;
border: 0px;
float:right;
}
.bt_news{
line-height:1;
position:absolute;
margin:auto;
padding:5px 0px;
display:block;
bottom:0;
width:100%;
background-color:#000000;}
.bt_news button{
    display:table;
}
.bt_news button p{
    display:table-cell;
    vertical-align:middle;
        text-indent:0;
        text-align:center;
}
.mylike{
color:#ffffff;}
.bt_news button i{
    display:table-cell;
    vertical-align:middle;
}
.bt_action{
background: transparent;
border: 0px;
padding:0px;
display:contents;
box-shadow: none;
color:#878787;}
.bt_action p{
width:25px;
display: inline-block;
position: relative;
top: 5px;
}
.ss_chiffre{
display: block;
position: relative;
top: 5px;
left: 5px; 
}

#progressbar {
margin-bottom: 50px;
overflow: hidden;
width:80%;
margin-left:10%;
counter-reset: step;
padding: 30px 10px;
background: linear-gradient(0deg,#ffffff,#000000 2% 98%,#ffffff);}
#progressbar li {
list-style-type: none;
color:#878787;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 #878787;border-color:#222;
background: linear-gradient(90deg,#ff4000,#ffffff,#ffffff);border-radius: 50%;
color:#878787;margin: 0 auto 5px auto;

}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 90%;
height: 2px;
background: grey;
position: absolute;
left: -40%;
top: 24px;
z-index: -1; /*put it behind the numbers*/
text-align: center;
}
#progressbar li a{
margin:0px;
color:#ff4000;font-size:medium;
}
#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,#ffffff,#ff4000,#ff4000);color:#000000}
.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: 0 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: 0 0.5em 0 -1em;
padding: 0 .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
{
	margin:0;
    padding:0;
    border:0;
	list-style:none;
    line-height:1;
    width:100%;
    display:flex;
    position:relative;
    z-index:101;
    box-sizing:border-box;
}#barreprinci ul,#barreprinci ul li,#barreprinci ul li a,#barreprinci #menu-button
{
	margin:0;
    padding:0;
    border:0;
	list-style:none;
    line-height:1;
    height:50px;
    display:table;
    position:relative;
    z-index:101;
    box-sizing:border-box;
    width:100%;
}#barreprinci:after,#barreprinci>ul:after{
	content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;
}#barreprinci #menu-button{
	display:none;
}#barreprinci{
    font-family:'Source Sans Pro',sans-serif;
    line-height:1;
    position:fixed;
    width:100%;
    /*background: linear-gradient(0deg, #000000, #000000,#000000);*/
    /*background-color:#555;*/
    border-bottom:1px solid #222;
}
@media (prefers-color-scheme: dark) {
    #barreprinci{
        background-color:#000;
    }
}
@media(prefers-color-scheme:light) {
    #barreprinci{
        background-color:#000;
    }
}
#barreprinci>ul>li{
    float:left;
    height:45px;
    min-width:40px;
    max-width:50px;
    display:table-cell;
    vertical-align: middle;
}#barreprinci.align-center>ul{
	font-size:0;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;text-align: center;color:black;
}#barreprinci>ul>li>.logobar{
	display:table;text-decoration:none;font:bold 18px/30px 'Bangers',sans-serif;font-size:60px;color:white;padding:2;
}#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:30px;width:30px;display:table-cell;vertical-align:middle;margin:auto; margin-top:10px;
}#barreprinci>ul>li>.logobar p{
	height:30px;margin:0px 5px;letter-spacing:3px;font-family:'Bangers',regular;font-size:xx-large;padding:3px;color:#0b7603;vertical-align: middle;text-shadow: 1px 1px 2px #000;display:none;
}#barreprinci>ul>li>.logobar p:hover{
	text-decoration:none;color:whitesmoke;text-shadow: 2px 2px 2px #0b7603;
}#barreprinci>ul>li>.icon-bar{
	padding:0px;margin:auto;height:45px;width:45px;text-align:center;
}#barreprinci>ul>li>.icon-bar>.material-icons{
	font-size:30px;margin:auto;width:100%;color:white;text-shadow: 1px 1px 2px #000; text-align: center; text-indent: 0; text-align: center; text-indent: 0;margin: 10px 0;
}
@media screen and (min-width:388px) {
    #text_logo{
        display:table-cell;
        vertical-align: middle;
    }
}
@media screen and (max-width:455px) {
    #barreprinci>ul>li>.icon-bar>.material-icons{
        font-size:28px;
    }
    #barreprinci>ul>li>.icon-bar{
        width:auto;
    }
}
@media screen and (max-width:388px) {
    #barreprinci>ul>li>.icon-bar>.material-icons{
        font-size:30px;
    }
    #barreprinci>ul>li>.icon-bar{
        width:auto;
    }
    #text_logo{
        display:none;
    }
}
@media screen and (min-width:280px) {
    #barreprinci .has-sub ul li a{
        font-size:medium;
    }
    #barreprinci .has-sub2 ul li a{
        font-size:medium;
    }
}
@media screen and (max-width:280px) {
    #barreprinci>ul>li>.icon-bar>.material-icons{
        font-size:28px;
    }
    #barreprinci>ul>li {
        min-width:30px;
    }
    #barreprinci .has-sub2 ul li a{
        font-size:medium;
    }
}
#bar_search{
    display:inline-flex;
    padding:0 0 0 5px;
    height:45px;
}
#bar_search input{
    display:table-cell;
    vertical-align: middle;
}
#bar_search button{
    box-shadow: none;
    height: 50px;
    width: 30px;
    float: right;
    background: none;
    border: 0;
    color: white;
    margin: 0 auto;
    padding: 3px 0;
}
#barreprinci>ul>li>.icon-bar>.material-icons:hover{
	font-size:30px;color:#0b7603;
}#barreprinci>ul>li>a>img{
	height:25px;width:25px;padding:0px 0px 0px;margin:10px 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:0
}#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:#0e8106;
}#barreprinci>ul>li:hover>a,#barreprinci>ul>li>a:hover{
	width:50px;color:#0b7603;background-color:#222;border-bottom: 2px solid #0b7603;z-index:2;
}#barreprinci>ul>li.active>a:hover{
    width:50px;color:#0b7603;background-color:#000;border-bottom: 2px solid #0b7603;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:linear-gradient(to 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:0
}#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;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;
    max-width: 50px;
}#barreprinci .has-sub:hover>ul{
	display:block
}#barreprinci .has-sub ul{
	display:none;position:absolute;width:180px;right:0px;height: auto;z-index:2;margin-top:-5px;border: 2px solid #0b7603;
}
#barreprinci.align-right .has-sub ul{
	left:auto;right:0
}#barreprinci .has-sub ul li{
	width: 100%;padding: 0px;
}#barreprinci .has-sub ul li a{
	background:#000000;border-bottom:1px solid #454545;filter:none;display:block;line-height:100%;padding:15px;color:#fff;font-weight:700;width:100%;
}#barreprinci .has-sub ul li a:hover{
	color:#0b7603;
}#barreprinci .has-sub ul li:hover a{
	background: linear-gradient(0deg, #0b7603, #000000,#000000);
}#barreprinci .has-sub2 ul{
	display:none;position:absolute;width:180px;height:auto;right:0px;z-index:4;border:2px solid #0b7603;margin-top:-5px;
}#barreprinci.align-right .has-sub2 ul{
	left:auto;right:0px
}#barreprinci .has-sub2{
    z-index:3;
}#barreprinci .has-sub2:hover>ul{
    display:block;
    max-height:50vh;
    overflow-y:scroll;
}#barreprinci .has-sub2 ul li{
    width:100%;
}#barreprinci .has-sub2 ul li a{
	background: #000000;;border-bottom:1px solid #454545;filter:none;display:block;line-height:120%;padding:15px;color:#fff;font-weight:700;width: 100%;
}
#barreprinci .has-sub2 ul li:hover a{
	background: linear-gradient(0deg, #0b7603, #000000,#000000);color:#fff;font-weight:700
}#barreprinci .has-sub2 ul li a:hover{
    border:2px solid #0b7603;
    border-bottom:0;
}
#barreprinci ul li ul .formsearch{background-color: #000000;height:45px}
#barreprinci .search{border:none;list-style:none;display:inline-block;line-height:1;margin:1px 0px 0px 1px;padding:0px 5px;height:50px;background:none;color:white;width:80%}
#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:1.1em}
.barresearch{background-color:#0e8106;height:30px}
.boutonprinci{padding:0px;height:30px;width:30px}.logomyweb{width:150px;margin:0px;height:30px}

#barreprinci .has-subsearch{
	z-index:3;
}#barreprinci .has-subsearch:hover>ul{
	display:block;background-color:#000;border:2px solid #0b7603;z-index:2;height:50px;margin-top:-5px;
}#barreprinci .has-subsearch ul{
	display:none;position:absolute;width:200px;left:0px
}
#barreprinci.align-right .has-subsearch ul{
	left:auto;right:0
}#barreprinci .has-subsearch ul li{
	margin-bottom:-1px;height:33px
}#barreprinci .has-subsearch ul li a{
	background:#000000;border-bottom:1px solid #454545;font-size:1.5em;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700
}#barreprinci .has-subsearch ul li a:hover{
	background:#000000;border-bottom:1px solid #454545;font-size:1.5em;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700
}#barreprinci .has-subsearch ul li:hover a{
	background: linear-gradient(0deg, #0b7603, #000000,#000000);
}
#result-search{
    position:absolute;
    top:95px;
    min-width:200px;
    max-width:60vw;
    background:linear-gradient(0deg, #444, #444, #000, #444, #444);
    z-index:3;
    left:50px;
    min-height:45px;
    padding: 0px 10px;
    box-shadow: 1px 1px 12px #000;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 70vh;
}
#result-search a{
    border-top:1px solid #FFF;
    width:100%;
    display:inline-flex;
    padding:5px;
    color:#FFF;
}
#result-search a p{
    margin: 1em 0px 0px 1em;
}
barreprinci2,#barreprinci2 ul,#barreprinci2 ul li,#barreprinci2 ul li a,#barreprinci2 #menu-button{
	margin:0;padding:0;border:0;list-style:none;line-height:1;height:45px;display:block;z-index:4;;bottom:20%;box-sizing:border-box}#barreprinci2:after,#barreprinci2>ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0px;height:0px}#barreprinci2 #menu-button{display:none}#barreprinci2{width:auto;border-bottom:1px solid black;font-family:'Source Sans Pro',sans-serif;line-height:1;background: linear-gradient(0deg, #000000, #000000,#0b7603);}#barreprinci2>ul>li{float:left}#barreprinci2.align-center>ul{font-size:0;text-align:center}#barreprinci2.align-center>ul>li{display:inline-block;float:none}#barreprinci2.align-right>ul>li{float:right}#barreprinci2>ul>li>a{font-size:15px;text-decoration:none;color:black;transition:all .2s ease}#barreprinci2>ul>li>.logobar{text-decoration:none;font:italic bold 18px/30px 'Orbitron',sans-serif;font-size:25px;color:white;padding:2px 2px 0 2px;transition:all .2s ease}#barreprinci2>ul>li>.logobar:hover{text-decoration:none;font:italic bold 18px/30px 'Orbitron',sans-serif;font-size:25px;color:black;padding:2px 2px 0 2px;transition:all .2s ease}#barreprinci2>ul>li>.icon-bar{padding:0;margin:0;height:40px;width:40px;text-align:center}#barreprinci2>ul>li>.icon-bar>p{font-size:25px;margin:6px;padding:0;color:white}#barreprinci2>ul>li>.icon-bar>p:hover{font-size:25px;margin:6px;padding:0;color:#0b7603;}#barreprinci2>ul>li>a>img{height:25;width:25;padding:0 0 0;margin:5 0 0 0}#barreprinci2>ul>li>form{padding-top:5px;height:15px;font-size:15px;text-decoration:none;color:black;transition:all .2s ease}#barreprinci2>ul>li:first-child>a{border-top-left-radius:4px;border-bottom-left-radius:4px}#barreprinci2.align-center>ul>li:first-child>a{border-radius:0}#cssmen.align-right>ul>li:first-child>a{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-right-radius:0}#barreprinci2>ul>li:hover>a,#barreprinci2>ul>li.active>a{color:#0e8106;height:45px}#barreprinci2>ul>li:hover>a,#barreprinci2>ul>li>a:hover{background:#111; color:#0b7603;}#barreprinci2>ul>li:after{content:'';position:absolute;top:1px;right:0;color:#fff;display:block;height:20px;width:1px;opacity:.15;background-color:#111;color:#0e8106;background:linear-gradient(to top,rgba(0,0,0,0),#0e8106,rgba(0,0,0,0));}#barreprinci2.align-right>ul>li:after{right:auto;left:-1px}#barreprinci2>ul>li:before{content:'';position:absolute;top:1px;right:-1px;display:block;height:20px;width:1px;opacity:.35}#barreprinci2.align-right>ul>li:before{right:auto;left:0}#barreprinci2>ul>li:last-child:after,#barreprinci2>ul>li:last-child:before{display:none}#barreprinci2.small-screen{width:100%}#barreprinci2.small-screen>ul,#barreprinci2.small-screen.align-center>ul{width:100%;text-align:left}#barreprinci2.small-screen>ul>li,#barreprinci2.small-screen.align-center{float:none;display:block;border-top:1px solid #0e8106}#barreprinci2.small-screen>ul>li>a{padding:18px 25px}#barreprinci2.small-screen>ul>li:after,#barreprinci2.small-screen>ul>li:before{display:none}#barreprinci2.small-screen #menu-button{display:block;padding:18px 25px 19px 25px;cursor:pointer;font-size:15px;text-decoration:none;color:#0e8106}#barreprinci2.small-screen #menu-button.menu-opened{color:#0e8106}#barreprinci2.small-screen #menu-button:after{content:"";position:absolute;right:25px;top:20px;display:block;box-sizing:content-box;border-top:2px solid #0e8106;border-bottom:2px solid #0e8106;width:18px;height:3px}#barreprinci2.small-screen #menu-button.menu-opened:after{border-top:2px solid #0e8106;border-bottom:2px solid #0e8106}#barreprinci2.small-screen #menu-button:before{content:"";position:absolute;right:25px;top:30px;display:block;width:18px;height:2px;background:#0e8106}#barreprinci2.small-screen #menu-button.menu-opened:before{background:#0e8106}#barreprinci2 .has-sub{z-index:2;}#barreprinci2 .has-sub:hover>ul{display:block}#barreprinci2 .has-sub ul{display:none;position:absolute;width:180px;top:-35;left:0}#barreprinci2.align-right .has-sub ul{left:auto;right:0}#barreprinci2 .has-sub ul li{*margin-bottom:-1px;height:33px}#barreprinci2 .has-sub ul li a{background:#000000;border-bottom:1px solid #454545;font-size:11px;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700}#barreprinci2 .has-sub ul li a:hover{background:#000000;border-bottom:1px solid #454545;font-size:11px;filter:none;display:block;line-height:100%;padding:10px;color:#fff;font-weight:700}#barreprinci2 .has-sub ul li:hover a{background: linear-gradient(0deg, #0b7603, #000000,#000000);}#barreprinci2 .has-sub2 ul{display:none;position:absolute;width:200px;right:0;height:auto;bottom:45px;}#barreprinci2.align-right .has-sub2 ul{left:auto;right:0}#barreprinci2 .has-sub2{z-index:100;float:right;}#barreprinci2 .has-sub2:hover>ul{display:block}#barreprinci2 .has-sub2 ul li{*margin-bottom:-1px}#barreprinci2 .has-sub2 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}#barreprinci2 .has-sub2 ul li:hover a{background: linear-gradient(0deg, #0b7603, #000000,#000000);color:#fff;font-weight:700}#barreprinci2 ul li ul .formsearch{background-color:#0e8106;height:33px}#barreprinci2 .search{list-style:none;display:inline-block;line-height:1;width:77%;margin:1 0 0 1;padding:0;height:30px;border:0;background:0;color:white;font-weight:700}#barreprinci2 .search::placeholder{color:white;font-size:10px}.barresearch{background-color:#0e8106;height:30px}.boutonprinci{padding:0 0 0 0;height:30px;width:30px}.logomyweb{width:150px;margin:0;height:30px}


/* LISTE DEROULANTE */

.custom-dropdown--large {
font-size: 1.5em;
}

.custom-dropdown--small {
font-size: .7em;
}

.custom-dropdown__select{
font-size: inherit;
padding: .5em;
margin: 0px; 
}

.custom-dropdown__select--white {
background-color: #fff;
color: #444;
}

@supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {

.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}

.custom-dropdown__select {
padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
border: 0px;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}

.custom-dropdown::after { /* Custom dropdown arrow */
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%; margin-top: -.5em;
}

.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 2em;
right: 0px; top: 0px; bottom: 0px;
border-radius: 0 3px 3px 0px;
}

.custom-dropdown__select[disabled] {
color: rgba(0,0,0,.3);
}

.custom-dropdown.custom-dropdown--disabled::after {
color: rgba(0,0,0,.1);
}

/* White dropdown style */
.custom-dropdown--white::before {
top: .5em; bottom: .5em;
background-color: #fff;
border-left: 1px solid rgba(0,0,0,.1);
}

.custom-dropdown--white::after {
color: rgba(0,0,0,.9);
}

/* FF only temp fix */
@-moz-document url-prefix() {
.custom-dropdown__select { padding-right: .9em }
.custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
.custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
}
}



/* FIN LISTE DEROULANTE */
.sansborder{
border:none;
width:100px;
}
#invisible{
visibility:hidden;
}
#cokpourmoi{

}
.mysprite li
{
width:200px;
height:200px;
display:inline-block;
background:url("/img/sprite.png")
}
.mysprite .myspritecompte
{
background-position: left top;
}
.mysprite .myspriteamis
{
background-position: 20% top;
}
.mysprite .myspriteamis
{
background-position: 40% top;
}
.mysprite .myspritemess
{
background-position: 60% top;
}
.mysprite .myspritesearch
{
background-position: 80% top;
}
.mysprite .myspritesup
{
background-position: right top;
}
.sizedateaffich
{
font-size:35px;
}
.monbouton
{
border:1px solid #ccc;
border-radius:0px 0px 0px 0px;
border:none;

background: #444;
background: linear-gradient( #555, #2C2C2C);
white-space:nowrap;

font-family: Arial,sans-serif;
font-size: 1.1em;
text-align: center;
color: #000;
text-decoration:none;

padding:6px 6px 6px 6px;

margin-right:-4px;
}
.monboutongauche
{
border-collapse:collapse;

white-space:nowrap;
font-family: Arial,sans-serif;
font-size: 1.4em;
text-align: center;
color: #005990;
text-decoration:none;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);

padding:6px 6px 6px 6px;
}
.monboutoncentral
{
border-top:2px solid grey;
border-bottom:2px solid grey;
border-collapse:collapse;
border-radius: 0px 0px 0px 0px;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
0 -1px 0 rgba( 255, 255, 255, 0.4);
border-right:2px solid grey;

background: #444;
background: linear-gradient( #555, #2C2C2C);
white-space:nowrap;

font-family: Arial,sans-serif;
font-size: 1.1em;
text-align: center;
color: #000;
text-decoration:none;

padding:6px 6px 6px 6px;

margin-right:-3px;
}
.monboutondroite
{

border-collapse:collapse;

white-space:nowrap;
font-family: Arial,sans-serif;
font-size: 1.4em;
text-align: center;
color: #005990;
text-decoration:none;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);

padding:6px 6px 6px 6px;

}
.bt{
font-size:30px;
height:35px;
color:#000000;background-color:#ffffff;border: 2px solid #878787;}
.monboutongauche:hover
{
color: #222;
background: #555;
background: linear-gradient( #777, #333);
white-space:nowrap;
}
.monboutongauche:active
{
color: #000;
background: #444;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset,
0 1px 0 rgba( 255, 255, 255, 0.4);
white-space:nowrap;
}
.monboutoncentral:hover
{
color: #222;
background: #555;
background: linear-gradient( #777, #333);
white-space:nowrap;
}
.monboutoncentral:active
{
color: #000;
background: #444;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset,
0 1px 0 rgba( 255, 255, 255, 0.4);
white-space:nowrap;
}
.monboutondroite:hover
{
color: #222;
background: #555;
background: linear-gradient( #777, #333);
white-space:nowrap;
}
.monboutondroite:active
{
color: #000;
background: #444;
white-space:nowrap;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset,
0 1px 0 rgba( 255, 255, 255, 0.4);

}
.boutonadd{
padding: 2 25;
margin: 10px;
position: relative;
display:flex;
font-size: 25px;
max-width:150px;

color:#ffffff;background-color:#000000;border: 2px solid #878787;

}
.logobar
{
font: italic bold 18px/30px 'Orbitron', sans-serif;
font-size:20px;
color:white;
padding: 2px 2px 0px 2px;
}
a img {
border:none;
}
a:hover {
color: white;
}

.main,
.container > header {
width: 100%;
margin: 0 auto;
padding-bottom: 2em;
}

.main {
max-width: 100%;
min-height: 17em;

}

.container > header {
text-align: center;
font-size: 16px;
padding: 4em 2em 3em;
background: rgba(0,0,0,0.01);

}

.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0px;
font-weight: 300;
}

.container > header span {
display: block;
font-size: 60%;
color: #ceccc6;
padding: 0 0 0.6em 0.1em;
}

/* Header Style */
.codrops-top {
background: #fff;
background: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
position: relative;
width: 100%;
font-size: 0.7em;
line-height: 2.2;
}

.codrops-top a {
padding: 0 1em;
letter-spacing: 0.1em;
color: #888;
display: inline-block;
}
.retour{
        font-size: large;
        padding: 5px;
        float: left;
        margin: 10px;
    }
..boutonperso{
cursor:pointer;
color:#ffffff;background-color:#000000;border:1px solid #878787;position: relative;  
height: 50px;
min-width: 50px;
padding: 10px;
border-radius: 5px;
}
.boutonperso:hover{
color:#000000;background-color:#ffffff;}
.boutonperso:hover{
color:#000000;background-color:#ffffff;}
#box{

margin: 0pxpx 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%,#ffffff#ff4000, #3a3939 180deg);box-shadow:1px 1px 12px #ffffff;border-radius:15px;

}
.codrops-top a:hover {
color:black;
}

.codrops-top span.right {
float: right;
}

.codrops-top span.right a {
float: left;
display: block;
}

.codrops-icon:before {
font-family: 'codropsicons';
margin: 0px 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.codrops-icon-archive:before {
content: "\e002";
}
.codrops-icon-next:before {
content: "\e000";
}
.codrops-icon-about:before {
content: "\e003";
}

@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
.container > header {
font-size: 75%;
}
}


.no-js body .gridContainer.clearfix #LayoutDiv1 form br {
font-family: Verdana, Geneva, sans-serif;


}
.edit {
background-position: -16px 0px;
}
.edit:hover {
background-position: -16px -16px;
}
.pdf {
background-position: -80px 0px;
}
.pdf:hover {
background-position: -80px -16px;
}
.plus{
background-position: -32px 0px;
}
.plus:hover{
background-position: -32px -16px;
}

.administration
{
background: url(../img/degrad%20login.png);
background-repeat: repeat;
width: auto;
padding: 5px 15px 5px 15px;
border: 1px solid #FFF;

-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
color: #999;
margin-right:0px;
}
div.spoiler {

border: 2px solid black;
cursor: pointer;
width:100%;
}

div.spoiler div.contenuSpoiler {
display: none;
border: 2px solid black;
}
#search{
width:80%;
margin: 10% 10% 0 10%;
padding:0px;
font-size:15px;
background-color:rgb(67,67,67);
color:white;
}
#search p{
color:white;
}
.search
{
list-style:none;
display:inline-block;
line-height:1;
width:85%;
margin:1 0 0 1;
padding:0px;
height:30px;
border:0px;
background: none;
color:white;
}
.barresearch{
width:100%;
}
.search::placeholder{
color:white;
font-size:15px;
}
.moteursearch
{
list-style:none;
float:center;
width:100%;
padding:0px;
margin:0px;
}
.moteursearch p{
color:white;
}
.iconeslb
{
height:15px;
width:15px;
}
.tab
{
background-color:white;
margin:auto;
width:80%;
border-collapse:collapse;
border-top:3px solid #006600;
vertical-align:center;
}
.tab tr td
{

}
.tab tr th
{
background-color:#333333;
width:50%;
vertical-align:center;
height:30px;
}
.border
{
border-right:2px solid rgb(160,160,160);
}

#entete
{
    background: url('//img/space/topreddit/8ea0233e5509339b333d3d4c6c2a0544.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
min-width:350px;
max-width:2560px;
height:auto;
}
#entete h1,#entete h2,#entete h2,#entete h3,#entete h4,#entete h5,#entete p{ font-size:50%; }
.tabentete
{
width:100%;
min-width:450px;
max-width:2560px;
height:auto;
float:right;
text-align:center;
    border-bottom:3px solid #878787;
}
.tabentete tr th a img
{
min-width:120px;
max-width:100%;
width:40%;
height:auto;
padding:0px;
margin:0px;
}
.section-media{
display:block;
float:left;
position:fixed;
top:140px;
width:100%;
max-height:80vh;
z-index:5;
}
.media{
width:90%;
margin:0 5%;
}
.media img{
width:100%;
max-height:100%;
}


/* 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;
}


#central
{

width:100%;
height:auto;
min-height:100vh;
display:block;
position:relative;
margin:0 auto;
padding:15px 5px;
text-align:center;
min-height:90%;
    background-color: #ffffff;
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
#contenu
{

display:block;
position:relative;
text-align:center;
word-wrap: break-word;
}

#box
{
color:#ffffff;background-color:#000000;border:3px solid #878787;width: 100%;
margin: 0px;
padding:0px;
}
#box h1
{
color:white;
text-align:center;
}
#box p
{
color:white;
}
#box a
{
font-weight: bold;
color: #0b7603;
margin: 0 15px 0 0px;
padding:0px;
line-height:1;
}
#box a p
{
font-weight: lighter;
color: #0b7603;

}

#box a:hover
{
color: whitesmoke;
}
#box input[type="text"]
{
width:60%;
margin-top:20px;
}
#box input[type="submit"]
{
width:27%;
border: 3px solid #0b7603;
color:white;
background-color: #0b7603;
}
#box input[type="submit"]:hover
{
background-color:#0b7603;
}
.tab
{
width:100%;
}
.formalign
{
width:100px;float:left;display:block;color:white;
}
.player
{
width:960px;
height:540px;
}
#footer
{
    width: 100vw;
    height: 350px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 105px);
    gap: 10px;
    text-align: center;
    color: #CCC;
    position: inherit;
    bottom: 0;
    top: 100%;
    padding: 10px;
    background-color: #000000;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    border-top:2px solid #878787;
}
#footer .footer_cell{
    box-shadow: 1px 1px 10px #878787;
    padding: 5px;
}
#footer .footer_cell a p{
    text-indent:0;
    text-align:center;
}
#idliste{
    display: block;
    top: 56%;
}
.liste{
    padding:0px;
    margin:0px;
    display: none;
    position: absolute;
    border-style: inset;
    height: 250px;
    overflow: auto;
}
.imgperso_voletcolor{
    height:250px;
    width:250px;
}
#nuancier
{
padding-top:10px;
width:350px;
height:300px;
margin:15px 15px 15px 15px;
position:relative;
display:block;
background-color:grey;
background-repeat:no-repeat;
background-size: 100% 100%;

-webkit-border-radius: 0.5em;
border-radius: 0.5em;

-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;

/*background:url(../img/logo/vignette.png);*/
color:white;
font-size:80%;
text-align:center;
margin-bottom:5%;

}
.vignette a
{
color:#CCC;
}
.vignette a:hover
{
text-decoration:underline;
}
.vignette a img:hover
{
border:2px solid #F60;
}
.vignette p
{
color:white;
}
.desc
{
text-align:center;
color:#CCC;
}
.player
{
display:block;
position:relative;
align:center;
margin:0 auto;
width:80%;
}
.episode
{
text-align:center;
}
.episode a
{
color:#CCC;

}
.episode a:hover
{
color:#CCC;

}
font
{
font-size:100%;
}


#id_div_1
{
background-color:rgb(51,51,51);
width:100%;
padding: 5 5 5 5;
position:relative;
z-index:200;
display:none;
}
#id_div_2
{
background-color:rgb(51,51,51);
width:100%;
padding: 5 5 5 5;
position:relative;
z-index:200;
display:none;
}
#id_div_3
{
background-color:rgb(51,51,51);
width:100%;
padding: 5 5 5 5;
position:relative;
z-index:200;
display:none;
}

/* ---------------------------------------------------- */
/* Pagination
/* ---------------------------------------------------- */

.pagination {
text-align: center;
}

.pagination ul {
margin: 20px auto;
margin-right: 20px;
list-style: none;
padding: 0px;
}

.pagination ul li {
display: inline-block;
width: 25px;
height: 25px;
border: 1px solid #ddd;
text-align: center;
-webkit-box-shadow: 0 1px 3px #999999;
box-shadow: 0 1px 3px #999999;
}

.pagination ul li a {
display: block;
text-decoration: none;
line-height: 25px;
color:#CCC;
font-size: .9em;
}

.pagination ul li a:hover {
color:#06F;
}

.pagination ul li.active a {
color: #06F;
}
#message{
width:80%;
margin: 0 10% 0 10%;
font-size:15px;
color:#454545;
}
.message {
width:80%;
top: 20%;
z-index: 10;
left: 10%;
color: #5c9270;
padding: 5px 10px;
font-style: italic;
margin: 20px auto;
border: 1px solid #5c9270;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-color: #d6e6dc;
font-size:medium;
}


.errorMessage {
width:80%;
top: 20%;
z-index: 10;
left: 10%;
color:#454545;
padding: 5px 10px;
font-style: italic;
margin: 0px;
font-size:medium;
/*border: 1px solid #c72333;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;*/
/*background-color: #f9c5ca;*/
/*background-color: #FF6262;*/
}


.error {
color: red;
font-size: 0.9em;
font-style: italic;
}

footer
{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0px;
margin: 0px;
position:fixed;
bottom:0px;
color:#FFF;
text-align:center;
width: 100vw;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
background: linear-gradient(0deg,#000, #000,#0b7603);
margin-bottom:0px;
}

/*volet personnalsation*/
#volet {
width: 250px;
padding: 10px;
background: #6B9A49; color: #fff;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
left: 0px;
}
#volet:target {
left: 0px;
}
#volet a.ouvrir,#volet a.fermer
{
padding:10px 25px;
width:200px;
margin-left:155px;
margin-bottom:100px;
background: #555;
color: #fff;
position:right;
text-decoration: none;
display:block;
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
border-radius: 0 0 8px 8px;
}

#volet a.fermer,#volet:target a.ouvrir
{
display: none;
}
#volet_clos:target #volet {
margin-left: -250px;
}

#volet:target a.fermer {
display: block;
}
.vignette {
position : relative ;
z-index:2;
}

.bouton {
position : absolute;
bottom: 10px;
right: 15px;
z-index:8;
}
.bouton-action {
position : realtive;
border-radius: 50%;
}
.bouton-action:hover:after,
.bouton-action:focus:after {
content: attr(aria-label);
position: absolute;
top: -2.4em;
left: 50%;
transform: translateX(-50%);
z-index:1;
}
[aria-label]:hover:before,
[aria-label]:focus:before {
content: "▼";
position: absolute;
top: -1em;
left: 50%;
transform: translateX(-50%); /* on centre horizontalement */
font-size: 20px;
color: #413219;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
outline: none;
}
#resultsearch{
width:100%;
padding:0px;
}
#resultsearch h1,#resultsearch h2,#resultsearch h3,#resultsearch h4,#resultsearch h5,#resultsearch p{font-size:70%;}
.preview
{
width: 150px;
}
#id_div_3 {
display:none;
}
#id_div_4 {
display:none;
}
/*--Liste des menu--*/
header
{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0px;
margin: 0px;
width: 100%;
height: auto;
z-index: 4;
position:fixed;
top:0px;
color:#FFF;
text-align:center;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
margin-top:0px;
}
.header
{
position:relative;
height: calc(100vh - 101px);
margin-top: 100px;
width: 100vw;
overflow: hidden;
z-index: 2;
    background-image:url('https://www.goudiz.com//img/space/topreddit/8ea0233e5509339b333d3d4c6c2a0544.png');
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:4vw;
}
.header-title{
position:absolute;
width:100%;
height:100%;
left:0;
z-index:4;
text-align:center;
line-height:1;
}
.headeradmin-title{
position:absolute;
top:10%;
width:90%;
left:5%;
z-index:4;
text-align:center;
line-height:1;
}
.headeradmin-title a:hover{
border:solid 2px #FFF;
}
.header p{
text-align:justify;
font-size:20px;
text-indent : 1.5em;
}
.header h2{
font-size:5vw;
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
overflow-wrap: break-word;
}
.header h3{
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}
.header h4{
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}
.header h5{
padding:0px;
margin:0px;
font-style: italic;
text-transform: capitalize;
}
.header-presentation{
overflow:hidden;
height: 100%;
width: 100%;
display: block;
}
.container_drag{
    position:absolute;border:2px solid #999;border-style:dashed; 
}
.container_entete{
    position:absolute;
}

#actu:placelholder{
 color:#ffffff; }
.section-actu{
display:block;
float:left;
position:relative;
padding: 50px 0px;
width:100%;

}

.comment_message{
overflow-wrap: break-word;
}
.datetext{
padding-top: 10px;
display: inline-block;
}
nav {
width:100%;
/*padding-right:12;*/
}
#nav2{
position: fixed;
display: flex;
top: 50px;
width: 100%;
z-index: 3;
/*padding-right:12;*/
}