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

a, img {
  display: block;
  border-radius: inherit;
  /*width: 100%;*/
  height: 100%;
  margin-left: auto; margin-right: auto;*/
}

video {
  cursor: pointer;
  display: block;
  border-radius: inherit;
  width: 100%;
}
video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

/* Restylage */
input[type=image] {
  max-width: 80%;
}

select, select:focus {
  cursor: pointer;
  width: 100%;
  height: var(--main-line-input);
  border-radius: calc(var(--main-border-radius) * 0.5);
  font-family: Bitstream Vera Sans, sans-serif;
  font-size: var( --main-font-size);
  border: none; outline: none;
  color: var(--main-color-bloc);
  background-color: var(--main-color-text);
  opacity: .85;
}
option:disabled {
  color: lightgrey;
}

input[type=checkbox] {
  -webkit-appearance: none;
  background-color: transparent;
  border-color: var(--main-color-text);
  margin-top: 2px;
  border-radius: 20%;
  border-style: solid;
  border-width: calc(var(--main-line-input) * 0.1);
  width: var(--main-line-input);
  height: var(--main-line-input);
  opacity: .85;
}
input[type=checkbox][niveau] {
  border-radius: 50%;
}
input[type=checkbox].clInputYellow {border-color: yellow;}
input[type=checkbox].clInputOrange {border-color: orange;}
input[type=checkbox].clInputRed    {border-color: red;}


input[type=checkbox]:checked {
  border-width: calc(var(--main-line-input) / 2 + 1px);
}
input[type=range] {
  filter: grayscale(1) invert(.8) brightness(1.5);
  cursor : pointer;
  width: 100%;
  height: 5px;
  border-radius: 2px;
  color: gray;
}

input[type=range]:active {
  filter: grayscale(1) invert(.8) brightness(2);
}

/* Player : 100% Container -> FullScreen */
.clPlayerContainer {
  background-color: gray;
  background-color: transparent;
  display: grid; align-content: center; justify-content: center;
  border-radius: inherit;
  grid-template: 
    "gdPlayerContainerVideo"       auto
    "gdPlayerContainerControls"    var(--main-controls-height)
  / auto;
}

/* Player : vidéo + controls*/
.clPlayerContainerVideo {
  grid-area: gdPlayerContainerVideo; align-self: bottom; 
  display: flex;
  border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
}
@media only screen and (orientation: landscape) {
  .clPlayerContainerVideo {
  background-color: darkorange;
  background-color: var(--main-color-dark);
    width:    min( calc(var(--main-filtre-width) )
                 , calc(16 / 9 * (100vh - var(--main-filtre-height) - var(--main-controls-height) - 3* var(--main-gap))) );
    height:   min( 9 / 16 * calc(var(--main-filtre-width) )
                 , calc( 100vh - var(--main-filtre-height) - var(--main-controls-height) - 3* var(--main-gap)) );
  }
}
 .clPlayerContainer[fullscreen="true"] > [class="clPlayerContainerVideo"] {
    background-color: lightcoral;
    background-color: var(--main-color-dark);
    width:    min( 100vw, calc(16 / 9 * (100vh - var(--main-controls-height))) );
    height :  min( calc(9 / 16 * 100vw) , calc(100vh - var(--main-controls-height)) );
  }


@media only screen and (orientation: portrait) {
  .clPlayerContainerVideo {
    background-color: yellow;
    background-color: var(--main-color-dark);
    width:   var(--main-filtre-width);
    height:  calc( 9 / 16 * var(--main-filtre-width) );
  }
}

.clPlayerContainerVideoFS { /* présent pour passage plein écran Vidéo seule */
  border-radius:inherit;
  width: 4100%; height: 100%;
  background-color: red;
  background-color: transparent;
}

.clPlayerContainerControls {
  grid-area: gdPlayerContainerControls; align-self: top;
  -webkit-display: flex; display: flex; align-items:center; top;justify-content: center;
  border-radius: 0 0 var(--main-border-radius) var(--main-border-radius);
  background: linear-gradient(to bottom, var(--main-color-dark), black);
  background-color: green;
  background-color: transparent;
}

/* Player : barre de contrôle */
.clPlayerControls {
  background-color: transparent;
  border-radius: inherit;
  height: var(--main-line-height);
  margin : calc(var(--main-gap));
  gap: var(--main-gapX2);
  width: 100%;
  display: grid;
  grid-template :
    "gdPlayerPlayPause                gdPlayerProgress  gdPlayerSpeedRange               gdPlayerSpeedValue               gdPlayerAutoPlay                 gdplayerFullScreen"     100%
  /  calc(var(--main-font-size) * 5)  auto              calc(var(--main-font-size) * 10) calc(var(--main-font-size) * 3)  calc(var(--main-font-size) * 4)  calc(var(--main-font-size) * 4) ; 
}
.clPlayerPlayPause  {grid-area: gdPlayerPlayPause;   -webkit-display:flex; display: flex; align-items: center;}
.clPlayerProgress   {grid-area: gdPlayerProgress;    -webkit-display:flex; display: flex; align-items: center;}
.clPlayerSpeedRange {grid-area: gdPlayerSpeedRange;  -webkit-display:flex; display: flex; align-items: center;} 
.clPlayerSpeedValue {grid-area: gdPlayerSpeedValue;  -webkit-display:flex; display: flex; align-items: center;}
.clPlayerAutoPlay   {grid-area: gdPlayerAutoPlay;    -webkit-display:flex; display: flex; align-items: center;}
.clPlayerFullScreen {grid-area: gdplayerFullScreen;  -webkit-display:flex; display: flex; align-items: center;}

/*Item de Playlist*/
.clItem {
  cursor: pointer;
  display: grid;
  height: 100%;
  gap: calc(var(--main-gap) / 2) var(--main-gap);
  margin-bottom: var(--main-gap);
  padding: var(--main-gap);
  background: linear-gradient(to top, #313651, #414661);
  border-radius: var(--main-border-radius);
  grid-template :
    "gdItemTravail    gdItemSensei      gdItemSensei"     var(--main-font-size)
    "gdItemAttaque    gdItemTechnique   gdItemTechnique"  var(--main-font-size)
    "gdItemNiveau     gdItemForme       gdItemForme"      var(--main-font-size)
  /  50%              auto              calc(var(--main-font-size) * 3);
}
.clItemSensei        {grid-area: gdItemSensei;    text-align: right; font-weight: bold;   opacity: 40%;}
.clItemAttaque       {grid-area: gdItemAttaque;   text-align: right; font-weight: bold;}
.clItemTechnique     {grid-area: gdItemTechnique; text-align: left;  font-weight: bold;}
.clItemForme         {grid-area: gdItemForme;     text-align: left;  font-weight: normal; font-style: italic;}
.clItemTravail       {grid-area: gdItemTravail;   text-align: left;  font-weight: normal;}
.clItemNiveau        {grid-area: gdItemNiveau;    text-align: left;  font-weight: normal; opacity: 70%;}

.clItemSelect             {opacity:  1; transition-timing-function: ease-out;  transition: opacity .2s}
.clItemUnSelect           {opacity: .6; transition-timing-function: ease-in;   transition: opacity .3s;}
@media (pointer: fine) {                                            /* Souris PC */
  .clItemUnSelect:hover     {opacity: .9;transition: .5s;}
}
@media (pointer: coarse) {                                          /* Souris mobile */
  .clItemUnSelect:focus     {opacity: .9;transition: .5s;}
}

.clItemK4:after {content:"\002B24\0025EF\0025EF";font-size: calc(var(--main-font-size) * .75);color:yellow;}
.clItemK2:after {content:"\002B24\002B24\0025EF";font-size: calc(var(--main-font-size) * .75);color:orange;}
.clItemK1:after {content:"\002B24\002B24\002B24";font-size: calc(var(--main-font-size) * .75);color:red;}


/* Actions */
.clAction {
  cursor: pointer; 
  -webkit-display: flex; display: flex; justify-content: center;
  opacity: .85;
}
.clAction:hover {
  opacity: 1; 
  transition: opacity .3s;
}
.clDivCheckbox {
  -webkit-display: flex; display: flex;
  height: var(--main-line-height);
  width: calc(var(--main-font-size) * 3);
}
.clDivIcon {
  -webkit-display: flex; display: flex; justify-content: center;
  height: var(--main-line-height);
  width: calc(var(--main-font-size) * 5);
}

/* Warning */
.clWarning {color: red;}

.TransitionVideoOff {
  opacity: .3;
  transition : opacity .2s;
  transition-timing-function: ease-out;
}
.TransitionVideoOn {
  opacity: 1;
  transition : opacity  .3s;
  transition-timing-function: ease-in;
}