/* --- CHARGEMENT DES POLICES --- */
@font-face {
font-family: 'nofx';
src: url('font/batman.ttf');
src: url('font/batman.otf') format('truetype'),
     url('font/batman.woff') format('woff'),
     url('font/batman.eot?#iefix') format('embedded-opentype'),
     url('font/batman.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'oblik';
src: url('font/cargante.ttf');
src: url('font/cargante.otf') format('truetype'),
     url('font/cargante.woff') format('woff'),
     url('font/cargante.eot?#iefix') format('embedded-opentype'),
     url('font/cargante.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'ombre';
src: url('font/federico.ttf');
src: url('font/federico.otf') format('truetype'),
     url('font/federico.woff') format('woff'),
     url('font/federico.eot?#iefix') format('embedded-opentype'),
     url('font/federico.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'crayon';
src: url('font/FeiradaFruta.ttf');
src: url('font/FeiradaFruta.otf') format('truetype'),
     url('font/FeiradaFruta.woff') format('woff'),
     url('font/FeiradaFruta.eot?#iefix') format('embedded-opentype'),
     url('font/FeiradaFruta.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'trait';
src: url('font/Raditad.ttf');
src: url('font/Raditad.otf') format('truetype'),
     url('font/Raditad.woff') format('woff'),
     url('font/Raditad.eot?#iefix') format('embedded-opentype'),
     url('font/Raditad.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}




/*--- MESSAGES D'ERREURS ---*/
.erreurs
{
    margin-top: 2em;
    text-align: center;
    font-family: serif;
    text-transform: uppercase;
    font-size: 10px;
    color: black;
    text-shadow: 5px 5px 15px black;
}




.imglogo
{
    max-width: 30%;
    height: auto;
}


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



/* ---- MENUES --- */
#menu {
  margin: 0;
  padding: 0;
  list-style: none;    
  text-align: center ;    
}

#menu li {
  display: inline-block;
  margin-right: 1px ;
  color: #fff ;
  background: #ff1717 ;
  margin-top : 1em;
   
}

#menu li a {
  padding: 4px 20px ;
/*--  background: #ff1717 ; ---*/
  background: #ff1717 url(img/zik.png) left top no-repeat ;
  color: #fff ;
  border: 1px solid #ff3600 ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1em ;
  text-align: center ;
  text-decoration: none ;
  display: block;  
}

#menu li a:hover, #navigation li a:focus, #navigation li a:active {
  background: #ff8b00 url(img/zik.png) left top no-repeat ;
  text-decoration: underline ;
}

/* ---MISE EN PAGE VIDEO YOUTUBE ---*/

.youtube
{
    height: auto;
    width: auto;
    
}


.youtubeson
{
    height: auto;
    width: auto;
    
}



/* ---- MISE EN PAGE DES EXOS TECHNIQUES --- */

.titreexo
{
    text-shadow: 30px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    word-spacing: 10px;
    font-family: fantasy;
    text-shadow: 0px 15px 15px black;
  
}


.attention
{
    font-weight: bold;
    font-size: 15px;
    color: crimson;
    text-shadow: 5px 5px 5px red
}


.descriptionexo
{
   font-family: serif;
    font-size: 10px;
}

.ladate
{
    font-weight: bold;
    font-family: arial;
    line-height : 170%;
    text-decoration: underline;

} 


/* ---- MISE EN PAGE DES ECRITURES OUTILS --- */

.outillage
{
font-weight:bold;
text-decoration-line: none;
text-shadow: 2px 2px 15px black;
font-size: 18px;
color: maroon;
text-align: left;
margin: 5em;
margin-top: auto;
}


/* --- MISE EN PAGE DES ECRITURES WHAT NEWS --- */

.quoideneuf
{
    text-decoration: blue underline;
    font-weight: bold;
    font-size: 20px;
    color: blue;
    text-shadow: 0px 0px 30px blue;

}


/* ---- MISE EN PAGE DES ECRITURES POUR LIGNES DE BASSE --- */

.theorie
{

font-weight: bold;
font-size: 15px;
color: black;
/* text-shadow: 5px 5px 5px black */
}

.variante
{

font-weight: bold;
font-size: 9px;
color: black;
/* text-shadow: 5px 5px 5px black */
}



.titreldb
{

    text-shadow: 30px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    word-spacing: 10px;
    font-family: fantasy;
    text-shadow: 0px 15px 15px black;
  
    
}

.soustitreldb
{

    text-shadow: 30px;
    text-transform: uppercase;
    font-family: cursive;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0px;
    word-spacing: 5px;
    line-height: 1;
 
}

.soussoustitreldb
{

    text-shadow: 30px;
    text-transform: lowercase;
    font-family: cursive;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0px;
    word-spacing: 5px;
    line-height: 1;
 
}


/* ---- MISE EN PAGE DES ECRITURES POUR PLAYLIST --- */

.soustitreplaylist
{
    text-align: center;
    font-family: crayon;
    font-size: 20px;
    letter-spacing: 0px;
    word-spacing: 1px;
    line-height: 1%;
 
}




/* ---- MISE EN PAGE DES ECRITURES TEXTE ALIGNER AVEC LOGO --- */

.textealignelogo
{
    
    font-family: crayon;
    font-size: 15px;
    letter-spacing: 0px;
    word-spacing: 1px;
    line-height: 1%;
   
}

/* ---- MISE EN PAGE DES ECRITURES PRINCIPALES --- */

.intro
{
text-align: center;
font-family: crayon;
text-transform: uppercase;
font-size: 15px;
color: black;
text-shadow: 5px 5px 15px black;
}

.autresconseils
{
font-weight: bold;
font-size: 12px;
color: black ;
}


.explication
{
font-weight: bold;
text-decoration: underline;
font-size: 15px;
color: black;
}

.pointaborde
{
font-weight:bold;
text-decoration-line: underline;
text-shadow: 2px 2px 15px black;
font-size: 14px;
color: black;
text-align: center;
}





.pointabordetexte
{
font-weight: lighter;
text-shadow: 0px 0px 0px black;
font-size: 12px;
color: black;
text-align: center;
}


.cdctitre
{
text-align: center;
font-weight:bold;
text-decoration-line: underline;
text-shadow: 2px 2px 15px black;
font-size: 18px;
color: black;
margin-bottom: 1px;
}

.cdctexte
{
font-weight: lighter;
text-shadow: 0px 0px 0px black;
font-size: 15px;
color: black;
text-align: center;
margin-top: 0px;
}

.niveaucoursvideos
{
font-weight: lighter;
font-style: italic;
text-shadow: 0px 0px 0px black;
font-size: 15px;
color: black;
}


.lienoutils
{
    text-align: center;
    font-weight: lighter;
    font-size: 20px;
    color: blue;
    text-shadow: 5px 5px 5px blue

    
}

.tab
{
    margin-left: 2em;
}


/* ---- MISE EN PAGE DES ECRITURES POUR ATELIERS --- */

.supports
{
    text-align: center;
    font-family: serif;
    font-size: 17px;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1;
}

.newletter
{

    font-family: cursive;
    font-size: 17px;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1;
     
}

.supportsoustitre
{
    text-align: center;
    font-family: serif;
    font-size: 14px;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 4em;
 
}

.versionoriginale
{
    text-align: center;
    text-transform: uppercase;
    font-family: cursive;
    font-size: 10px;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 3em;

} 

.centrage
{
    text-align: center;
}


.centrage-tableau
{
    display: flex;
    justify-content: center;
}


/* ---- MISE EN PAGE DES LIENS VERS LES EXOS/LIGNES DE BASSE ETC. --- */

.niveau
{
    font-weight: bold;  
    font-size: 15px;
    font-family: serif;
    text-align: center;
}


.liensexo
{
font-weight: bold;
font-size: 15px;
color: crimson;
text-shadow: 5px 5px 5px red
}

.outils
{
    font-weight: bold;  
    font-size: 15px;
    font-family: serif;
}



/* ---- MISE EN PAGE DES LIENS PRINCIPAUX DE LA PAGE --- */

.zoomlink img 
{
    height:20px;
    margin: 0px 20px 0px 0px;
}


.zoomlink img:hover 
{
    filter: saturate(10);
}




.zoomtitre img 
{
    height:30px;
    margin: 0px 0px 0px 0px
}


.zoomtitre img:hover 
{
    filter: saturate(4)
}




/* ---- MISE EN PAGE DES TABLEAU DE LIENS POUR LES PREMIERES SOUS PAGES --- */

.tableaudeniveau
{
    border-collapse: separate;
    align-content: center;
}


.tddeniveau
{
    border: 0px;
    font-family: serif;
    font-size: 12px;
    }




/* ---- MISE EN PAGE DES TABLEAU OUTILS --- */

.tableauoutils
{
    border-collapse: collapse;
    text-align: center;
    width="auto";
}


.tdoutils
{
    border: 2px solid black;
    padding:10px 10px;    
    font-family: serif;
    font-size: 17px;
    text-align: center;
}

.troutils
{
    border: 2px solid black;
    padding:10px 10px;    
    font-family: serif;
    font-size: 17px;
    text-align: center;
}


.thoutils
{
    text-align: center;
    font-family: serif;
    font-size: 17px;
    text-align: center;
}

.pdoutils
{
    line-height:90%;
    text-align: center;
}





/* ---- MISE EN PAGE DES TABLEAU DE MORCEAU --- */

.tableaudemorceau
{
    border-collapse: collapse;
}


.tddemorceau
{
    border: 2px solid black;
    padding:10px 10px;    
    font-family: serif;
    font-size: 10px;
}

.trdemorceau
{
    border: 2px solid black;
    padding:10px 10px;    
    font-family: serif;
    font-size: 10px;
}


.thdemorceau
{
    text-align: center;
    font-family: serif;
    font-size: 10px;
}

.pdetableau
{
    line-height:1.5;
}

.pdetonalite
{
    line-height:1.5;
    text-align: center;
}

.pdetableauplaylist
{
    line-height:1;
    text-align: center;
    margin: 2em 0px 2em 0px;
}

.pdetableautona
{
    line-height:1.5;
    font-weight: bold;
    text-align: center;
    
}

/* CA SERT A QUOI ? */
.framep
{
    
    overflow: hidden
}



/* --- IMAGES DES OUTILS ---*/
.imgoutillage
{
    max-width: auto;
    height: 20%;
}

.imgmesures
{
    max-width: auto;
    height: 20%;
}

.imgcoursvid
{
    max-width: 100%;
    height: auto;
}


.cerclerouge
{
    max-width: 5%;
    height: auto;
    vertical-align: middle;
    margin-right: 2px;
} 

.cerclerougedef
{

    max-width: 2%;
    height: auto;
    vertical-align: middle;
    margin-right: 2px;
} 

/* --- IMAGES DES OUTILS YOUTUBE POUR RALENTIR---*/
.imgoutilyoutube
{
    max-width: auto;
    height: 50%;
}



/* --- LOGO DES NIVEAUX ---*/
.logodebutant
{

margin: auto;
background:url("img/debutant.jpg") no-repeat;
background-size: contain;
width:50px;
height:50px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 

.logomoyen
{

margin: auto;
background:url("img/moyen.jpg") no-repeat;
background-size: contain;
width:50px;
height:50px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 

.logoavance
{

margin: auto;
background:url("img/avance.jpg") no-repeat;
background-size: contain;
width:50px;
height:50px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 


.logodebutant-ldb
{

margin:auto;
background:url("img/debutant.jpg") no-repeat;
background-size: contain;
width:90px;
height:90px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 

.logomoyen-ldb
{

margin: auto;
background:url("img/moyen.jpg") no-repeat;
background-size: contain;
width:90px;
height:90px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 

.logoavance-ldb
{

margin: auto;
background:url("img/avance.jpg") no-repeat;
background-size: contain;
width:90px;
height:90px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border : 0px ridge black;
} 


/*--- LOGO DES TITRES ---*/
.textecategorie
{
    text-align: center;
    font-family: crayon;
    text-transform: uppercase;
    font-size: 25px;
    color: black;
    text-shadow: 5px 5px 15px black;
}

/* --- LOGOS CONSCTRUCTION ---*/
.logoconstruction
{

margin: auto;
background:url("img/construction.jpg") no-repeat;
background-size: contain;
width:150px;
height:117px;
border-radius: 2px;
border-radius: 2px;
border-radius: 2px;
border : 0px ridge black;
} 

.logoconstructionpetit
{

margin: auto;
background:url("img/construction.jpg") no-repeat;
background-size: contain;
width:150px;
height:117px;
border-radius: 2px;
border-radius: 2px;
border-radius: 2px;
border : 0px ridge black;
} 





/*--- LOGO FREE ---*/

.imglogofree
{    
    max-width: 15%;
    height:auto;
    vertical-align: super;
}


.imglogofreedeux
{    
    max-width: 15%;
    height:auto;
    vertical-align: middle;
}

.imgoutilcons
{    
    max-width: 20%;
  vertical-align: baseline;
}



/*--- LOGO NIVEAU SUR COURS VIDEOS ---*/

.imglogofreevideos
{    
    margin-left:1em;
    max-width: 5%;
    height:auto;
    vertical-align: baseline;
}


/* ---MISE EN PAGE DES LIENS ---*/

a 
{
  text-decoration: underline;
  color: blue;
}

a:hover, a:active
{
  text-decoration: none;
  color: blue;
 }


.metrique
{
    height:15px ;
}

.mesure
{

}

.effetdejeu
{
    height:auto;
}



/* ---PETITS TESTS ECRITURE ---*/

.nofxtest
{
    font-family: nofx;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}


.crayontest
{
    font-family: crayon;
    text-align: center;
    font-size: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.ombretest
{
    font-family: ombre;
    text-align: center;
    font-size: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.obliktest
{
    font-family: oblik;
    text-align: center;
    font-size: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.traittest
{
    font-family: trait;
    text-align: center;
    font-size: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
}