/*****************************************************************************
 * Règles génériques                                                         *
 *****************************************************************************/

*                                            { box-sizing: border-box; }
div.clear                                    { clear: both; }
button                                       { cursor: pointer; }
button.image                                 { font-size: 11pt; min-width: 120px; cursor: pointer; border: 1px solid #003C74; padding: 2px 14px; border-radius: 3px; background: linear-gradient(#FEFEFE, #D8D2C4 50%);
                                               line-height: 24px;
                                             }
button:hover                                 { border: 1px solid #DE7307; background: linear-gradient(#FEFEFE, #E6E1D9 50%); }
button.image img                             { display: inline-block; float: left; margin: 4px 10px 0 -4px; max-width: 18px; max-height: 18px; }
a                                            { text-decoration: none; color: inherit; }
ul.sortable                                  { cursor: move; margin-left: -40px; list-style-type: none; }
ul.sortable li                               { padding: 3px 0; height: 35px; overflow: hidden; }
ul.sortable span.title                       { display: inline-block; padding: 2px 10px; width: 400px; border: 1px solid gray; }
ul.sortable li img.button                    { float: right; margin-left: 5px; border: 1px solid transparent; padding: 2px; cursor: pointer; }
ul.sortable li img.button:hover              { border: 1px solid gray; background: #FFFFFF; }
fieldset.info                                { width: 750px; position: relative; background: rgba(255, 255, 255, 0.3); padding: 15px 10px 10px 10px; }
fieldset.info img                            { position: absolute; right: 4px; top: -6px; height: 160px; }
fieldset.info legend                         { padding: 1px 15px; border: 1px solid #8C489F; background: #EDE0F1; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); }
td.bordered                                  { border: 1px solid gray; padding: 0 10px; }
tr.vert                                      { background: #D6EEC8; }
tr.rouge                                     { background: #FFD2D2; }
tr.title                                     { color: white; background: #743F88; }

/*****************************************************************************
 * Règles CSS                                                                *
 *****************************************************************************/

BODY                                         { margin: 0; padding: 0; color: #000000; background: #FFFFFF; overflow-wrap : break-word; word-wrap: break-word; background: url(images/background.jpg) no-repeat center fixed;
                                               font-family: 'Roboto', sans-serif; background-size: cover;
                                             }

div.centered                                 { text-align: center; }

table.condensed                              { border-collapse: collapse; }
table.bordered td                            { padding: 1px 10px; border: 1px solid gray; }
table.hovered tr:hover                       { background: #EBF0F1; }
table tr.ytstat                              { cursor: pointer; }
table tr.active,
table tr.active:hover                        { color: white; background: #777BB0; }

/*****************************************************************************
 * En-tête                                                                   *
 *****************************************************************************/

div.header                                   { position: fixed; left: 0; top: 0; width: 100%; background: linear-gradient(#9250AB, #211126); height: 115px; }
div.header img.logo                          { float: left; margin: 0 15px 0 15px; max-height: 120px; }
div.header h1                                { margin: 10px 0 0 0; padding: 0; color: #EAEAEA; font-family: placard_condensedregular; font-weight: normal; font-size: 2.5rem; }
div.header ul                                { position: absolute; left: 115px; bottom: 0; margin: 0; list-style-type: none; }
div.header li                                { display: inline-block; margin: 0; padding: 0 20px; color: #FFF; background: transparent; border-right: 1px solid gray; line-height: 30px; cursor: pointer; }
div.header li:first-child                    { margin-left: -40px; border-left: 1px solid gray; }
div.header li:hover                          { background: #8F4BA9; }
div.header li.selected,
div.header li.selected:hover                 { color: #000; background: #BCBEBB; }

/*****************************************************************************
 * Barre d'outils                                                            *
 *****************************************************************************/

div.bar                                      { position: fixed; z-index: 2; left: 0; top: 115px; width: 100%; height: 50px; padding: 10px 20px 0 20px; background: rgba(255, 255, 255, 0.8); overflow: hidden; 
                                               box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
                                             }

/*****************************************************************************
 * Contenu                                                                   *
 *****************************************************************************/

div.content                                  { position: fixed; left: 0; top: 115px; width: 100%; height: calc(100% - 115px); padding: 20px; background: rgba(255, 255, 255, 0.8); overflow-y: auto; }
div.content_maj                              { position: fixed; left: 0; top: 165px; width: 100%; height: calc(100% - 165px); padding: 20px; background: rgba(255, 255, 255, 0.8); overflow-y: auto; }
div.content h1,
div.content_maj h1                           { margin: 0 0 6px 0; padding: 0; font-family: placard_condensedregular; font-weight: normal; font-size: 2.8rem; color: #6A3A7C; }
div.content h2,
div.content_maj h2                           { margin: 0 0 12px 0; padding: 0; font-family: placard_condensedregular; font-weight: normal; font-size: 2.0rem; color: #6A3A7C; }

div.annee                                    { padding: 5px 10px; width: 100%; border: 1px solid gray; background: linear-gradient(#9250AB, #211126); color: #EAEAEA;
                                               font-family: placard_condensedregular; font-weight: normal; font-size: 1.3rem;
                                             }

/*****************************************************************************
 * Page des tutoriels                                                        *
 *****************************************************************************/

div.menu                                     { width: 700px; column-count: 2; font-size: 1.3rem; line-height: 30px; }
div.menu a                                   { color: #0070A6; }
div.menu a:hover                             { color: maroon; }

div.vidyt h3                                 { margin: 20px 0 10px 0; border: 1px solid black; background: rgba(0, 0, 0, 0.15); padding: 5px 10px; border-radius: 10px; }
div.vidyt td                                 { padding-bottom: 8px; }
div.vidyt td:nth-child(2)                    { width: 260px; padding-left: 20px; }
div.vidyt td:nth-child(3)                    { padding-left: 40px; }
div.vidyt td:nth-child(4)                    { width: 260px; padding-left: 20px; }
div.vidyt td:nth-child(5)                    { padding-left: 40px; }
div.vidyt td:nth-child(6)                    { width: 260px; padding-left: 20px; }
div.vidyt img                                { border: 3px solid #5785D0; border-radius: 5px; padding: 5px; background: white; }

/*****************************************************************************
 * Chaîne YouTube                                                            *
 *****************************************************************************/

div.channel                                  { position: fixed; left: 20px; top: 150px; width: 150px; text-align: center; font-size: 0.8rem; }
div.channel h2                               { margin: 10px 0 5px 0; font-size: 1.3rem; }

div.chaine                                   { position: absolute; left: 180px; top: 25px; width: calc(100% - 210px); }
div.chaine h3                                { margin: 20px 0 10px 0; padding: 5px 10px 5px 0; width: 600px;
                                               border-width: 0; border-style: solid; border-bottom-width: 3px; border-image: linear-gradient(to right, #7A438F, #D3D4D2) 1;
                                             }

div.chaine_inside                            { display: flex; flex-wrap: wrap; justify-content: flex-start; }
div.chaine_inside a                          { display: inline-block; width: 150px; min-height: 157px; max-width: 150px; margin: 0 15px 15px 0; border: 1px solid gray; border-radius: 10px; font-size: 0.9rem; text-align: center;
                                               padding: 10px;
                                             }
div.chaine_inside a img                      { max-width: 80px; max-height: 80px; }

/***** SMARTPHONES        ****************************************************/

@media only screen and (max-width: 410px)
  {
  div.channel                                { display: none; }
  div.chaine                                 { left: 10px; width: calc(100% - 20px); }
  div.chaine_inside a                        { margin-right: 10px; }
  div.chaine h3                              { width: 100%; }
  }

/***** TABLETTES, DESKTOP ****************************************************/

@media only screen and (min-width: 800px)
  {
  div.yt_group                               { display: inline-block; margin: 0 25px 20px 0; min-width: 800px; }
  }

/*****************************************************************************
 * Contenu - Montages                                                        *
 *****************************************************************************/

div.myMontages_content                       { margin: 20px 0; }
div.myMontage                                { display: inline-block; position: relative;  width: 600px; height: 90px; margin: 0 20px 20px 0; border: 1px solid gray; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
                                               padding: 10px 10px 0 170px; background: #F7F4EE; cursor: pointer;
                                             }
div.myMontage h1                             { margin: 0; padding: 0 0 5px 0; color: #7A3F8B; font-family: placard_condensedregular; font-weight: normal; font-size: 1.2rem; }
div.myMontage img.thumb                      { position: absolute; left: 10px; top: 10px; max-width: 123px; max-height: 69px; border: 1px solid gray; }
div.myMontage img.feux                       { position: absolute; left: 140px; top: 10px; height: 40px; }
div.myMontage h5                             { position: absolute; right: 0px; bottom: 0px; margin: 0; padding: 4px 7px; color: #F5EFF8; background: #643472; }

/*****************************************************************************
 * Contenu - Vidéos                                                          *
 *****************************************************************************/

div.myVideos_content                         { margin: 20px 0; }
div.myVideo                                  { display: inline-block; position: relative;  width: 240px; height: 220px; margin: 0 20px 20px 0; border: 1px solid gray; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
                                               background: #F7F4EE; cursor: pointer;
                                             }
div.myVideo h1                               { margin: 0; padding: 2px 5px; color: #7A3F8B; background: linear-gradient(#F7F0F9, #D5B6DE); font-family: placard_condensedregular; font-weight: normal; font-size: 1.1rem; }
div.myVideo img                              { max-width: 238px; max-height: 134px; }
div.myVideo img.feux                         { position: absolute; right: 10px; bottom: 10px; height: 40px; }
div.myVideo h5                               { position: absolute; left: 0px; bottom: 0px; margin: 0; padding: 4px 7px; color: #F5EFF8; background: #643472; }

div.informations                             { font-size: 1.5rem; }
div.informations img.montage                 { margin: 0 20px 10px 0; height: 300px; float: left; }
div.informations table td                    { vertical-align: top; }

div.locaVideo                                { display: inline-block; margin: 0 20px 20px 0; }
div.locaVideo video                          { width: 450px; }
div.locaVideo h3                             { margin: 0; padding: 0; color: #643472; font-family: placard_condensedregular; font-weight: normal; font-size: 1.4rem; }
div.separator                                { margin-top: 20px; padding-top: 20px; border-top: 1px solid gray; }

/*****************************************************************************
 * Contenu - Youtube                                                         *
 *****************************************************************************/

div.myYoutube_content                        { margin: 20px 0; }
div.myYoutube_content ul                     { font-size: 1.5rem; list-style-type: none; }
div.myYoutube_content a                      { color: #0070A6; }
div.myYoutube_content a:hover                { color: maroon; }

div.myYoutube                                { display: inline-block; margin: 0 20px 20px 0; padding: 5px; width: 332px; height: 270px; border: 1px solid #8B8B8B; cursor: pointer; overflow: hidden; }
div.myYoutube:hover                          { border: 1px solid #000000; background: #FFFFFF; }
div.myYoutube img                            { max-width: 320px; max-height: 180px; }
div.myYoutube h3                             { margin: 0; padding: 0; color: #643472; font-family: placard_condensedregular; font-weight: normal; font-size: 1.2rem; text-wrap: nowrap; }

div.myYoutube_studio                         { display: inline-block; position: relative;  width: 600px; height: 90px; margin: 0 20px 20px 0; border: 1px solid gray; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
                                               padding: 10px 165px 0 10px; background: #F7F4EE;
                                             }
div.myYoutube_studio h1                      { margin: 0; padding: 0 0 5px 0; color: #7A3F8B; font-family: placard_condensedregular; font-weight: normal; font-size: 1.2rem; }
div.myYoutube_studio img.thumb               { position: absolute; right: 35px; top: 10px; max-width: 123px; max-height: 69px; border: 1px solid gray; }
div.myYoutube_studio_inside                  { height: 70px; cursor: pointer; }
div.myYoutube_studio img.feux                { position: absolute; right: 10px; top: 10px; height: 40px; }
div.myYoutube_studio table                   { border-collapse: collapse; }

/*****************************************************************************
 * Table pour les sauvegardes / restaurations                                *
 *****************************************************************************/

table.save                                   { border: 2px solid #9DA8A8; border-collapse: collapse; font-size: 1.0rem; }
table.save tr                                { background: #FFF; border-top: 1px solid #B6BEBE; }
table.save tr:hover                          { background: #EBF0F1; }
table.save th                                { font-weight: normal; padding: 2px 15px; background: #D1DCDE; }
table.save td                                { padding: 2px 15px; }
table.save label                             { cursor: pointer; user-select: none; }
table.save .sel                              { cursor: pointer; }

/*****************************************************************************
 * Formulaire de connexion                                                   *
 *****************************************************************************/

div.applet_connect                           { display: none; z-index: 11; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); }
div.applet_connect div.connect               { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 40px; background: rgba(16, 16, 16, 0.9);
                                               box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border-radius: 10px;
                                             }
div.applet_connect div.connect h2            { margin: 0 0 30px; padding: 0; color: #FFF; text-align: center; }
div.applet_connect div.connect .inputBox     { position: relative; }
div.applet_connect div.connect .inputBox input
                                             { width: 100%; padding: 10px 0; font-size: 16px; color: #FFF; letter-spacing: 1px; margin-bottom: 30px; border: none; outline: none; background: transparent;
                                               border-bottom: 1px solid #FFF;
                                             }
div.applet_connect div.connect .inputBox label
                                             { position: absolute; top: 0; left: 0; padding: 10px 0; color: #FFF; letter-spacing: 1px; font-size: 16px; pointer-events: none; transition: .5s; }
div.applet_connect div.connect .inputBox input:focus ~ label,
div.applet_connect div.connect .inputBox input:valid ~ label
                                             { top: -18px; left: 0; color: #03A9F4; font-size: 12px; }
div.applet_connect div.connect .inputCenter  { text-align: center; }
div.applet_connect div.connect input[type='submit'],
div.applet_connect div.connect input[type='button']
                                             { display: inline-block; margin: 10px 5px; border: 1px solid transparent; outline: none; color: #FFF; background: #03A9F4; padding: 10px 20px; cursor: pointer; border-radius: 5px; }
div.applet_connect div.connect input[type='submit']:hover,
div.applet_connect div.connect input[type='button']:hover
                                             { border: 1px solid #FFF; }

/***** TABLETTES, DESKTOP ****************************************************/

@media only screen and (min-width: 410px)
  {
  div.applet_connect div.connect             { width: 400px; }
  }

/*****************************************************************************
 * Formulaires                                                               *
 *****************************************************************************/

form h3                                      { margin: 0 0 10px 0; padding: 0; color: #643472; font-family: placard_condensedregular; font-weight: normal; font-size: 1.5rem; }
div.applet_form                              { display: none; z-index: 11; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
#form_field                                  { position: relative; margin: 15px 0; vertical-align: top; font-size: 1rem; }
#form_field label.header                     { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 150px; }
#form_field label.change_pass                { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 200px; }
#form_field input[type='checkbox']           { visibility: hidden; }
#form_field input[type='radio'],
#form_field label                            { cursor: pointer; }
#form_field .slideThree                      { display: inline-block; width: 80px; height: 26px; background: #333; margin: 0 auto;
                                               border-radius: 50px;
                                               position: relative;
                                               box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
                                             }
#form_field .slideThree:after                { content: 'NON'; font: 12px/26px Arial, sans-serif; color: #FF9595; position: absolute; right: 10px; z-index: 0; font-weight: bold;
                                               text-shadow: 1px 1px 0px rgba(255,255,255,.15);
                                             }
#form_field .slideThree:before               { content: 'OUI'; font: 12px/26px Arial, sans-serif; color: #0DFF0D; position: absolute; left: 10px; z-index: 0; font-weight: bold; }
#form_field .slideThree label                { display: block; width: 34px; height: 20px; margin-top: 0;
                                               border-radius: 50px;
                                               transition: all .4s ease;
                                               cursor: pointer;
                                               position: absolute; top: 3px; left: 3px; z-index: 1;
                                               box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
                                               background: #FCFFF4;
                                               background: linear-gradient(to bottom, #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%);
                                             }
#form_field .slideThree input[type='checkbox']:checked + label
                                             { left: 43px; }

#form_field .custom_dropdown                 { display: inline-block; font-family: 'Roboto', sans-serif; cursor: pointer; }
#form_field .custom_dropdown select          { padding: 1px 5px; font-size: 11pt; line-height: 1; border: 1px solid silver; height: 24px; cursor: pointer;
                                               background-image: linear-gradient(to bottom, #EDEDED 12%, #FFFFFF 53%);
                                             }
input.button                                 { cursor: pointer; margin: 15px 0 0 0; padding: 1px 15px; }

/*****************************************************************************
 * Formulaire montage                                                        *
 *****************************************************************************/

div.button_vignette                          { position: absolute; left: 578px; top: 20px; width: 190px; text-align: right; }
img.form_vignette                            { width: 190px; }

/*****************************************************************************
 * Formulaire de saisie d'une vidéo                                          *
 *****************************************************************************/

#FrmVideoEdit                                { position: absolute; left: 100px; top: 50px; padding: 20px; background: #D3D4D2; border: 1px solid black; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); width: 800px; }

/*****************************************************************************
 * Formulaire de rattachement d'une vidéo YouTube                            *
 *****************************************************************************/

#FrmAttach                                   { position: absolute; left: 100px; top: 50px; padding: 20px; background: #D3D4D2; border: 1px solid black; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); width: 800px; }

/*****************************************************************************
 * Aplat                                                                     *
 *****************************************************************************/

#idWait                                      { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);
                                               text-align: center; display: table-cell; vertical-align: middle; display: none;
                                             }
#idWait TABLE                                { width: 100%; height: 100%; border-collapse: collapse; text-align: center; }
#idWait TABLE TD                             { height: 100%; padding: 0; vertical-align: middle; }