@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

html, body {
   padding:0;
   margin:0;
}

img {
   display:block;
   max-width:100%;
   height:auto;
}

body {
   font-family:"Oswald", sans-serif;
   font-weight:300;
   font-size:17px;
   overflow-y:auto;
   overflow-x:hidden;
}

h1 {
   color:#268ab8;
   font-weight:400;
   font-size:2.4em;
   margin:0.7em 0;
   text-transform:uppercase;
   text-align:center;
}

nav ul {
   margin:0;
   text-align:center;
}

nav ul li {
   display:inline-block;
   padding:10px 30px;
   font-size:24px;
   font-weight:900;
   text-transform:uppercase;
   list-style:none;
}

nav ul li a {
   color:#000;
   text-decoration:none;
}

nav ul li a:hover {
   color:#fff;
   text-decoration:none;
}

header {
   position:fixed;
   display:block;
   width:100%;
   height:auto;
   background-color:#D10000;
   z-index:5;
}

header::after {
   clear:both;
}

section {
   display:block;
   position:relative;
   top:56px;
   width:100%;
}

.logo {
   position:absolute;
   display:block;
   top:30px;
   left:30px;
   max-width:200px;
   z-index:5;
}

#tv {
   position:relative;
   height:910px;
}

#brouillage {
   position:relative;
   width:1274px;
   max-height:681px;
   top:50px;
   left:50.3%;
   transform:translateX(-50%);
   opacity: 1;
   z-index:3;
   transition: opacity 2s ease-out;
}

#brouillage.actif {
   opacity:0;
   transition: opacity 2s ease-out;
}

#ecran-noir {
   display:block;
   position:absolute;
   width:1274px;
   height:681px;
   top:50px;
   left:50.3%;
   transform:translateX(-50%);
   background-color:#000;
   z-index:2;
}

#peche-live-tv-ecriture {
   display:block;
   position:absolute;
   top:24%;
   left:50.3%;
   transform:translate(-50%);
   z-index:3;
}

#peche-live-tv-ecriture {
   display:block;
   position:absolute;
   top:30%;
   left:50.3%;
   transform:translate(-50%);
   z-index:3;
}

#bientot-en-ligne {
   display:block;
   position:absolute;
   top:21%;
   left:50.3%;
   transform:translate(-50%);
   opacity:0;
   z-index:3;
}

#bientot-en-ligne.actif {
   animation: bientotEnLigne 2s ease-out forwards;
   animation-delay:2s;
}

@keyframes bientotEnLigne {
   0% {opacity:0;}
   100% {opacity:1;}
}

#reference-observateur {
   position:absolute;
   height:0.5px;
   width:1274px;
   top:600px;
   left:50%;
   transform:translateX(-50%);
   z-index:1;
}

#ecran {
   position:absolute;
   left:50%;
   transform:translateX(-50%);
   z-index:4;
}

footer {
   position:relative;
   display:block;
   width:100%;
   height:120px;
   bottom:0;
}