/* =============================================================================

 *		                _style.css : mise en forme du site
 
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * Eléments communs
 * ----------------------------------------------------------------------------- */
html, body { 
  margin: 0; padding:0 ;
  font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.75em;
  overflow: hidden; scroll-behavior: smooth; scrollbar-width: none;
}

body { width:100vw; height:100vh; }

/* -----------------------------------------------------------------------------
 * Page d'accueil
 * ----------------------------------------------------------------------------- */
.bdy_accueil  { background-image: linear-gradient(to top, #052257, #040524); }

.img_acc_orig { position:absolute; left:10vw; top:5vh; width:80vw ; animation: origscroll 2s 4s forwards; }
.img_acc_info  { position:absolute; top:100vh; left:10vw; width:80vw ; animation: infoscroll 8s 3s forwards; }
.img_acc_flem { position:absolute; left:10vw; top:5vh; width:80vw ; opacity:0 ; animation: flemshow 8s 3s forwards ; }
.img_acc_marr { position:absolute; left:20vw; top:20vh; width:60vw ; rotate: -15deg; opacity:0 ; animation: marrshow 2s 1s forwards ; }
.img_acc_back { position:absolute; right:5vw; top:-35vh; width:20vw ; animation: backscroll 0.5s 8s forwards;}

@keyframes origscroll {
	0% { opacity: 1 ; } 
	100% { opacity:0 ; }
} 
@keyframes infoscroll {
	0% { opacity: 1 ; } 
	95% { opacity:1 ; }
	100% { top:-250vh ; opacity:0 ; }
}
@keyframes flemshow {
	0% { opacity: 0 ; } 
	100% { opacity:1 ; }
} 
@keyframes marrshow {
	0% { opacity: 1 ; } 
	95% { opacity:1 ; }
	100% { opacity:0 ; }
} 
@keyframes backscroll {
	0% { opacity: 1 ; } 
	100% { top:10vh ; }
} 

.img_bout01   { position:absolute; left:30vw;  bottom:15vh; width:18vw ; border:solid 2px #052257 ;}
.img_bout01:hover { cursor:pointer; border:solid 2px red ; }
.img_bout02   { position:absolute; right:30vw; bottom:15vh; width:18vw ; border:solid 2px #052257 ; }
.img_bout02:hover { opacity: 0; }

/* -----------------------------------------------------------------------------
 * Page Profils
 * ----------------------------------------------------------------------------- */
.bdy_pro { background-image: radial-gradient(circle, #222840, #000209); }
.img_pro_qec  { position:absolute; left:38vw; top:5vh; width:24vw ; }
.img_pro_logo  { position:absolute; left:5vw; top:5vh; width:10vw ; }
.img_pro_bob1 { position:absolute; left:10vw; top:35vh; width:9vw ; }
.img_pro_bob2 { position:absolute; left:10vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_bob2:hover { opacity:1; cursor:pointer; }
.img_pro_pdb1 { position:absolute; left:20vw; top:35vh; width:9vw ; }
.img_pro_pdb2 { position:absolute; left:20vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_pdb2:hover { opacity:1; cursor:pointer; }
.img_pro_jrk1 { position:absolute; left:30vw; top:35vh; width:9vw ; }
.img_pro_jrk2 { position:absolute; left:30vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_jrk2:hover { opacity:1; cursor:pointer; }
.img_pro_flx1 { position:absolute; left:40vw; top:35vh; width:9vw ; }
.img_pro_flx2 { position:absolute; left:40vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_flx2:hover { opacity:1; cursor:pointer; }
.img_pro_alb1 { position:absolute; left:50vw; top:35vh; width:9vw ; }
.img_pro_alb2 { position:absolute; left:50vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_alb2:hover { opacity:1; cursor:pointer; }
.img_pro_cal1 { position:absolute; left:60vw; top:35vh; width:9vw ; }
.img_pro_cal2 { position:absolute; left:60vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_cal2:hover { opacity:1; cursor:pointer; }
.img_pro_chj1 { position:absolute; left:70vw; top:35vh; width:9vw ; }
.img_pro_chj2 { position:absolute; left:70vw; top:35vh; width:9vw ; opacity:0; }
.img_pro_chj2:hover { opacity:1; cursor:pointer; }
.img_pro_plus { position:absolute; left:80vw; top:35vh; width:9vw ; }
.img_pro_plus:hover { opacity:0; }
.img_bout03  { position:absolute; left:35vw; bottom:15vh; width:30vw ; border:solid 2px #052257 ; }
.img_bout03:hover { opacity: 0; }

/* -----------------------------------------------------------------------------
 * Page des sélections
 * ----------------------------------------------------------------------------- */
.bdy_sel { background-image: linear-gradient(to top, #060a13, #191e2a); }

.sel_table { 
	position:absolute; left: 5vw; top:1vh; 
	width:90vw; height:50vw ; /* pour aspect 16/9 conservé */
	display: grid; grid-template-columns: 100%; 
	grid-template-rows: 41% 18% 6% 30% ;
	gap: 2%; justify-content: center ;
}
.sel_item1 { display: grid; grid-template-columns: 100%; justify-items: center;  }
.sel_topimg { height:100%; border:solid 2px grey; border-radius: 5px; }
.sel_item2 { display: grid; grid-template-columns: 17% 17% 17% 17% 17%; column-gap: 1.8%; justify-content: center; }
.sel_it2 { display: grid; justify-items: center ; cursor:pointer; }
.sel_btimg { width:100% ; }
.sel_item3 { display: grid; grid-template-columns: 100%; justify-content: left ; }
.sel_it3 { width:80%; display: grid; justify-self: left; }
.sel_notre { width:30% ; }
.sel_item4 { 
	display: grid; grid-template-columns: 18% 18% 18% 18% 18%; height:15vh;
	column-gap: 0.3vw; justify-content: center; 
}
.sel_it4 { width:90%; height:65%; display: grid; justify-self: stretch; }
.sel_selimg { width:100% ; opacity:0.8 ; border:solid 2px grey; }
.sel_selimg:hover { opacity:1; cursor:pointer; border:solid 2px white ; }
.sel_it4txt {  
	position:relative; width:99%; font-size:2vh; font-weight:bold; text-align:center; 
	color:white ; background-color:rgba(1,1,1,0.5) ;
	top: 50%; left: 51%; transform: translate(-50%, -155%); 
	height:3vh ; padding-top:1vh ;
}


/* -----------------------------------------------------------------------------
 * Page des épisodes
 * ----------------------------------------------------------------------------- */
.bdy_vid { background-image: linear-gradient(to top, #060a13, #191e2a); }

.vid_table { 
	position:absolute; left: 5vw; top:1vh; 
	width:90vw; height:50vw ; /* pour aspect 16/9 conservé */
	display: grid; 
	grid-template-columns: 12% 83% 5%; 
	grid-template-rows: 15% 80%;
	gap: 1.5%; justify-content: left ;
	color:white; font-size:2.5vh;
}
.vid_header  { 
	grid-column-end: span 2 ; align-self: end; 
	padding:0px ; border-bottom:solid 2px grey ; 
	display: flex; flex-direction: row; 
}
.vid_select { 
	position:absolute; top:1vh; left:0vw; width:70vw;
	padding:2vh; 
	font-size:3vh; font-weight:bold; color:white ;
	display:flex ; justify-content:left; align-items:center ; 
	background-image: linear-gradient(to right, blue 20%, yellow 40%, blue 60%, #191e2a 80%); 
}
.vid_retour { position:absolute; right:2.5vw; top:0.5vw; width:9vw; height:12% ; border:solid 1px rgba(0,0,0,0) ;  }
.vid_retour:hover { border:solid 2px white; }
.vid_flem   { position:absolute; right:1vw; top:4vh; width:7vw ; }
.vid_episode { font-weight:bold; cursor: pointer; text-decoration-line: underline; }
.vid_episode:hover { opacity:0 ; }
.vid_others  { padding-left:3vw; cursor: pointer; font-weight:bold; }
.vid_others:hover { opacity:0 ; }

.vid_saiscol  { padding:1vw ; font-size:2vh; }
.vid_cursais  { 
	font-weight:bold; cursor: pointer; text-align:center ; 
	margin-top:2vh ; padding-top:1vh; height:7vh ; 
	color:Indigo; background-color: Gold; border:solid 1px white; 
	} 
.vid_liensais { font-weight:bold; cursor: pointer; text-align:center ; margin-top:2vh ; padding-top:1vh; height:7vh ; border:solid 1px rgba(0,0,0,0); }
.vid_liensais:hover { background-color:grey; border:solid 1px grey; }
.vid_nbepis { font-size:2vh; padding-bottom:2.5vh; color:grey; }
.vid_retsel { 
	font-weight:bold; cursor: pointer; text-align:center ; 
	margin-top:2vh ; padding-top:1vh; height:7vh ; border:solid 1px rgba(0,0,0,0); 
	font-size:2vh; 
    color:LightSkyBlue ;	
}
.vid_retsel:hover { background-color:Indigo ; border:solid 1px white; }

.vid_listeepis { 
	display: grid; 
	grid-template-columns: 100%; 
	grid-template-rows: 24% 24% 24% 24%;
	gap: 2%; justify-content: left ;
	color:white; font-size:3vh;
}

.vid_pointer { 
	display: grid; 
	grid-template-columns: 22% 57% 15%; 
	grid-template-rows: 25% 75%;
	gap: 2.5%; justify-content: left ;
	color:white; font-size:3vh;
	border:solid 2px rgba(0,0,0,0) ;
}
.vid_pointer:hover { cursor:pointer; border:solid 2px white ; background-color:Indigo ; }

.vid_image   { grid-row-end: span 2 ; }
.vid_selimg  { height:97%; object-fit: fill; border:solid 1px white ; }
.vid_titre   { padding-top:6px ; font-weight:bold; color:LightSkyBlue ; }
.vid_minutes { padding:2px ; font-weight:bold; text-align:right; color:LightSkyBlue ; } 
.vid_empty   { } 
.vid_texte   { padding:2px ; grid-column-end: span 2 ; font-size:2.5vh; }

/* -----------------------------------------------------------------------------
 * Partie lecteur video (superposée dans page videos, caché par défaut)
 * ----------------------------------------------------------------------------- */
 
.lct_retour { position:absolute; right:2vh; top:0.5vw; width:10vw; height:10vh ; border:solid 2px black; }
.lct_retour:hover { border:solid 2px white; }
.lct_flem   { position:absolute; right:2vw; top:2vh; width:7vw ; }

 
 .vid_lecteur { 
	position:absolute; left: 0vw; top:0vh; width:100vw; height:100vh;
	background-color: black ;
	visibility:hidden;
}
.vid_lecteur video { 
	position:absolute ; left:10vw; top:3vh; width:75vw; 
	border:solid 1px white ;
}
.vid_lecteur video controls { 
	position:absolute; bottom:1vh ; width:50vh ;
}

 .vid_finlect { 
	position:absolute ; right:1vw; top:1vh ; 
	width:2vw; height:4vh ;
	text-align:center; 
	border:solid 2px white ;
	color:white ; font-size:3vh;
	cursor: pointer; 
}