/*	font-family: 'Josefin Sans', sans-serif; */
/*	font-family: 'Poiret One', cursive; */
/*	font-family: 'Comfortaa', cursive; */

body { 
	padding:0; 
	margin:0; 
	font-family: 'Josefin Sans', sans-serif; 
	font-weight:400;
	font-size:20px;
	background:#000; 
	color:#fff;
	line-height:140%;
}

a {color:#fff;}

img {border:none; border:0;}

#conteneur {
	position:relative;
	left:0; top:0;
	width:960px; height:650px;
	padding:20px;
}
#annonce h2{
	font-size:58px;
	font-family: 'Josefin Sans', sans-serif;
	text-transform:uppercase;
}
#annonce a:link { text-decoration:none; color:#fff;}
#annonce a:visited { text-decoration:none; color:#fff;}
#annonce a:hover { text-decoration:none; color:#fff;}

.auteurs { 	font-size:24px;}
.cartel { 	font-size:18px; font-style:italic; padding: 0 15px;}


/* CREDITS - NAVIGATION */
#credits {
	position: fixed;
	margin: 0; padding:0;
	bottom:0px;left:0px;
	z-index:999;
	width:2000px;height:60px;
}
#onglet {
	position:relative;
	margin: 0; padding:0;
	bottom:0px;left:20px;
	z-index:997;
	width:100px;height:20px;
	background:rgba(194, 26, 36, 1);
	border-radius: 10px 10px 0 0;
	color:#FFF; opacity: 0.5;
	text-align:center; font-size:11px;line-height:24px;
	font-family:arial;letter-spacing:1px;
}
#credits ul {
	float:left;
	z-index:998;
	margin: 0;padding:0;
	padding-top:10px;
    display: block;
    width: 2000px; height:30px;
	background:rgba(194, 26, 36, 1);
	opacity: 0.5;
}
#credits ul li {
	display:inline;
	list-style-type:none;
	margin:0;padding:0;
}
#credits a {
/*	color:#fff; */
	font-size:18px;
	text-transform:uppercase;
	text-decoration:none;
	padding: 2px 10px;
	font-family: 'Josefin Sans', sans-serif; 
	font-weight:400;
}
#credits a:link { color:#fff; text-decoration:none; }
#credits a:visited { color:#fff; text-decoration:none; }
#credits a:hover { color:#000; text-decoration:none; }


#moins {
	position: fixed;
	margin: 0; padding:0;
	top:50%;left:0px;
	z-index:999;
	width:100px; height:24px;
}

#moins a {
    display: block;
    margin-left: -12px; padding-left:10px; width: 130px;
	background:rgba(194, 26, 36, 1); color:#fff;
	font-size:18px;	line-height:24px; font-family: 'Josefin Sans', sans-serif; font-weight:400;
	text-decoration:none;
	border-radius: 0 10px 10px 0;
	box-shadow:rgba(0,0,0,0.4) 2px 4px 4px;
	opacity: 0.5;
}
#plus {
	position: fixed;
	margin: 0; padding:0;
	top:50%;right:10px;
	z-index:999;
	width:100px;height:24px;
}
#plus a {
    display: block;
    margin-right: 12px; padding-right:10px; width: 130px;
	background:rgba(194, 26, 36, 1); color:#fff;
	font-size:18px; line-height:24px; font-family: 'Josefin Sans', sans-serif; font-weight:400;
	text-decoration:none;
	border-radius: 10px 0 0 10px;
	box-shadow:rgba(0,0,0,0.4) 2px 4px 4px;
	opacity: 0.5;
}

.tirette { font-family:Arial; font-size:18px; margin:0 12px 8px; }


#page h1 {font-size:28px;}
#page a:link{ color:#fff; text-decoration:underline; }
#page a:visited{color:#fff;}
#page a:hover{color:#000;}


/* Desktop */
@media only screen and (min-width: 768px) {
    #page {
        position:absolute;
        left:50%;top:50%;
        padding:10px 30px;
        width:740px; height:580px;
        overflow:auto;
        z-index:200;
        display:none;
        background:#0B38DC;
        color:#fff;
        -moz-border-radius:10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 0px 4px 3px #000;
        -webkit-box-shadow: 0px 4px 3px #000;
        box-shadow:rgba(0,0,0,0.4) 2px 4px 4px;
        opacity:1.0;
        background:url('interface/ciel2.jpg') repeat-y;
        font-size:16px;
        text-align:justify;
        line-height:1.2em;
    }
    #annonce {
        position: absolute;
        left:-999px; top:0;
        width:600px; height:400px;
        padding-top:200px;
        font-size: 28px;
        text-align: center;
        background: url('interface/rond_home.png') no-repeat center center;
        z-index:5;
        display:none;
    }
}

/* MOBILE */
@media only screen and (max-width: 768px) {
    #page {
        position:absolute;
        left:0!important;
        top:0!important;
        width: auto!important;
        height: auto;
        padding:10px 30px;
        overflow:auto;
        z-index:200;
        display:none;
        background:#0B38DC;
        color:#fff;
        opacity:1.0;
        background:url('interface/ciel2.jpg') repeat-y;
        border-radius: 0;
        font-size:16px;
        text-align:justify;
        line-height:1.2em;
    }
    #annonce {
        position: absolute;
        left:0; top:0;
        width:auto!important; 
        height:100vh;
        padding-top:200px;
        font-size: 28px;
        text-align: center;
        background: rgba(0,0,0,0.4);
        z-index:5;
        display:none;
    }
  }

#close {
	text-align:right;
	padding:0; margin-top:10px;
}
#close > a { cursor:pointer; }

#message {
	position:absolute;
	left:10px;top:10px;
	width:99%;
	height:30px;
	z-index:100;
}

#waiting {
	position:relative;
	top:50%;
	z-index:250;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:32px;
}

.error { 
	color: red;
	font-family:arial;
}

#avertissement {
	position:absolute;
	left:-999px; top:0;
	width:560px; height:400px;
	padding:200px 20px 0 20px;
	opacity:1;
	background: url('interface/rond_avertissement.png') no-repeat center center;
	z-index:55;
	display:none;
}
#pulse{ 
	position:absolute;
	left:0; bottom:70px;
	width:100%;
	height:30px;
	font-size:18px; letter-spacing:1px;
	text-align: center;
}
#pulse a {text-decoration:none;}

/* VIDEO */
video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
}