@charset "utf-8";
/* -------------------------------- */
/*          CSS  Page               */
/* -------------------------------- */

body {
  margin: 0px;
  font-family: Bitstream Vera Sans, sans-serif;
  font-size: var(--main-font-size);
  color: var(--main-color-text);
  background-color : var(--main-color-page);
}

/* BLOC Page : Vidéo + Filtre + PlayList, calculs nécessaires pour responsive */
.clBlocPage {
  box-sizing: border-box; padding: var(--main-gap);
  display: grid; gap: var(--main-gap); 
}
  @media only screen and (orientation: landscape) {
    .clBlocPage {
      grid-template : 
        "gdBlocPlayer             gdBlocPlaylist" calc(100vh - var(--main-filtre-height) - 3 * var(--main-gap))
        "gdBlocFiltre             gdBlocPlaylist" var(--main-filtre-height)
        /var(--main-filtre-width) auto;
    }
  }
  @media only screen and (orientation: portrait) {                                            
    .clBlocPage {
      grid-template :
        "gdBlocPlayer "                           calc( 9 / 16 * var(--main-filtre-width) + var(--main-controls-height) )
        "gdBlocFiltre"                            var(--main-filtre-height)
        "gdBlocPlaylist"                          calc( 100vh - 9 / 16 * var(--main-filtre-width) - var(--main-controls-height) - var(--main-filtre-height)
                                                              - 4 * var(--main-gap))
        /var(--main-filtre-width);
    }
  }

.clBlocPlayer    {
    grid-area: gdBlocPlayer; 
    -webkit-display: flex; display: flex; align-items: center; justify-content: center;
    border-radius: var(--main-border-radius);
    background-color : var(--main-color-bloc);
  }

  .clBlocPlayerContainer {/* Bloc utilisé pour le plein écran(vidéo + contrôles)  */
    -webkit-display: flex; display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    background-color : red;
    background-color: transparent;
 }

  .clBlocFiltre   {
    grid-area: gdBlocFiltre;   
    box-sizing: border-box; padding: var(--main-gap);
    border-radius: var(--main-border-radius); 
    background-color : var(--main-color-bloc);
  }
  .clBlocPlaylist {
    grid-area: gdBlocPlaylist; 
    border-radius: var(--main-border-radius); 
  }
  .clBlocPlaylistScroolbar {
    overflow-y: scroll;padding-right: 0px;
    scroll-behavior: smooth;
    scrollbar-color: var(--main-color-bloc) var(--main-color-page);
    scrollbar-width: thin;
  }

  /*BLOC Filtre*/
  .clFiltre {
    display: grid; align-items:center;
    grid-template:
    "gdFiltreTitreLabel    gdFiltreTitreLabel     gdFiltreTitreActions   gdFiltreTitreActions    gdFiltreTitreActions    gdFiltreTitreActions"    calc(var(--main-line-height))
    "gdFiltreTravailLabel  gdFiltreTravailSelect  gdFiltreAttaqueLabel   gdFiltreAttaqueSelect   gdFiltreAttaqueSelect   gdFiltreAttaqueSelect"   calc(var(--main-line-height))
    "gdFiltreNiveauxLabel  gdFiltreNiveauxSelect  gdFiltreTechniqueLabel gdFiltreTechniqueSelect gdFiltreTechniqueSelect gdFiltreTechniqueSelect" calc(var(--main-line-height))
    "gdFiltrePlaylistLabel gdFiltrePlaylistSelect gdFiltreSensLabel      gdFiltreSensSelect      gdFiltreEntreeLabel     gdFiltreEntreeSelect"    calc(var(--main-line-height))
    "gdFiltreSenseiLabel   gdFiltreSenseiSelect   gdFiltreTypeLabel      gdFiltreTypeSelect      gdFiltreTypeSelect      gdFiltreTypeSelect"      calc(var(--main-line-height))
    /12%                   33%                    17%                    14%                      10%                     14%;
  }
  .clFiltreTitreLabel       {grid-area: gdFiltreTitreLabel;     font-weight: bold;}
  .clFiltreTitreActions     {grid-area: gdFiltreTitreActions;   -webkit-display: flex; display:flex; align-items:center; justify-content:flex-end; font-style: italic;}
  .clFiltreSenseiLabel      {grid-area: gdFiltreSenseiLabel;    text-align: right; }
  .clFiltreSenseiSelect     {grid-area: gdFiltreSenseiSelect;   }
  .clFiltreTravailLabel     {grid-area: gdFiltreTravailLabel;   text-align: right; }
  .clFiltreTravailSelect    {grid-area: gdFiltreTravailSelect;  }
  .clFiltrePlaylistLabel    {grid-area: gdFiltrePlaylistLabel;  text-align: right; }
  .clFiltrePlaylistSelect   {grid-area: gdFiltrePlaylistSelect; }
  .clFiltreAttaqueLabel     {grid-area: gdFiltreAttaqueLabel;   text-align: right; }
  .clFiltreAttaqueSelect    {grid-area: gdFiltreAttaqueSelect;  }
  .clFiltreTechniqueLabel   {grid-area: gdFiltreTechniqueLabel; text-align: right; }
  .clFiltreTechniqueSelect  {grid-area: gdFiltreTechniqueSelect;}
  .clFiltreSensLabel        {grid-area: gdFiltreSensLabel;      text-align: right; }
  .clFiltreSensSelect       {grid-area: gdFiltreSensSelect;     }
  .clFiltreEntreeLabel      {grid-area: gdFiltreEntreeLabel;    text-align: right; }
  .clFiltreEntreeSelect     {grid-area: gdFiltreEntreeSelect;   }
  .clFiltreVitesseLabel     {grid-area: gdFiltreVitesseLabel;   text-align: right; }
  .clFiltreVitesseSelect    {grid-area: gdFiltreVitesseSelect;  }
  .clFiltreNiveauxLabel     {grid-area: gdFiltreNiveauxLabel;   text-align: right; }
  .clFiltreNiveauxSelect    {grid-area: gdFiltreNiveauxSelect;  -webkit-display: flex; display:flex; align-items:center; justify-content:left; }
  .clFiltreTypeLabel        {grid-area: gdFiltreTypeLabel;      text-align: right; }
  .clFiltreTypeSelect       {grid-area: gdFiltreTypeSelect;     -webkit-display: flex; display:flex; align-items:center; justify-content:left;  }



/*  .clFiltreCopyright        {
    grid-area: gdFiltreCopyright;
    -webkit-display: flex; display: flex; align-items:center; 
    font-size: calc(var(--main-font-size) * 0.7);
    opacity:0.7;
  }
*/

    /*BLOC Site et Playlist*/
  .clSite {
    display: grid;
    box-sizing: border-box;  padding: var(--main-gap); margin-bottom : var(--main-gap);
    border-radius: inherit;
    grid-template:
      "gdSiteLogo                        gdSiteTitre"  var(--main-line-input)
      "gdSiteLogo                        gdSiteDetail" calc(var(--main-font-size) * 3)
    /calc(var(--main-font-size) * 12)    auto;
    background: var(--main-color-bloc);
  }
    .clSiteLogo   { 
      grid-area: gdSiteLogo;  
      -webkit-display: flex; display: flex; align-items:center; justify-content: center;
    }
    .clSiteTitre  {
      grid-area: gdSiteTitre;
      font-size: var(--main-font-size);
      font-weight: bold; 
    }
    .clSiteDetail  {
      -webkit-display: flex; display: flex; flex-direction: column;
      grid-area: gdSiteDetail;
      font-size: calc(var(--main-font-size) * 0.7);
      opacity:.7;
    }


  /*BLOC Playlist*/
  .clPlaylistItems {
    border-radius: inherit;
  }