.lamain{
             display:flex;
             position:relative;
             top: 10px;
            left:0px;  
/*            width: 42px;*/
            height: 12px;
              
              
              
          }  




/*

*/








/* ======================================================= AIDES 
        Pour Bracket:
            Ctrl+E pour editer (exemple une couleur)

    */

/*
    :root {
      --main-TayeFont: 4vw;
    }
*/

/* Taille normale des titres sur un ordinateur */
    /* body { background-color:blue  ;} */
    body { background-image: url("images/fond_a.jpg");}
    :root {
        --main-TayeFont: 14px;
        --main-CoulParagTitre: #46371c;
        --main-CoulParagParag:  #7c6439;
        --main-CoulBordDivC : #2e5520;
        --main-CoulLink : #7aa824;
        --main-CoulLinkVisited : #82a248; 
        --main_ligMusSelect:#85e2f8;
       --popo :horiz;
    }
    
    .DivCentral{ width: 92%}
@media (max-width: 640px) {
    /*
	   * {
		  box-sizing: border-box;
	   }
    */
    body {
        background-image: url("images/fond_bl.jpg");
        width: auto;
    }
    :root {
        --main-TayeFont: 14px;
        --main-CoulParagTitre: #156371;
        --main-CoulParagParag: #006476;
        --main-CoulBordDivC : #204355;
        --main-CoulLink : #455ec4;
        --main-CoulLinkVisited : #6976aa;
        --main_ligMusSelect:#DDEE66;
         --popo :vertic;
    }
     
    .DivCentral{ width: 85%}
 /*   
    body:before {
        content: "Version mobile du site";
        display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
*/
}

/* Si on utilise un petit écran (que ce soit avec un ordinateur dans une petite fenêtre ou avec un smartphone), les titres sont réduits */
/*
    @media only screen and (max-width: 320px) {
            body { background-color:red ; }
        :root {
            --main-TayeFont: 1em;
        }
        body { background-image: url("images/fond_a_phone.jpg");}
    }
*/


::first-line {
    /*  text-transform: uppercase;*/
    /*      text-indent: -3% each-line; Pour identer meme les <BR> . Attention ne fonctionne pas !*/
/*
    padding-left: 10px ;
    left: 20px;
     text-indent: -3% ; 
    
    ko? text-align-last: 16%;
*/
    text-indent: -16px ;  
}


    /* ======================================================= Les Webkits  */
    ::-webkit-scrollbar {
      width: 10px;
      cursor: pointer;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(10, 70, 96, 0.5);
      border-radius: 4px;
    }


    /* ======================================= si on veut un a particulier , sous-classe, faire ainsi :
    .laclasse{  
        font-weight:bold;
        color: #8be271   
    }       
    a.laclasse {
    }  
    a.laclasse:link {
        color: #0d5d3b;
        font-size: 40px;
    }
    a.laclasse:visited { 
        color: #225544;
        font-size: 40px;
    }
    a.laclasse:hover {
        color: #FFFF33;
        font-size: 40px;
    }

     /* =======================================================  le BODY */





    body {
      font-size: calc(var(--main-TayeFont) * 1)   ;  
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
 
      background-color: black;
/*      background-image: url("images/fond_a.jpg");*/
     }


     /* =======================================================  LES PARAGRAPHES */


    .PetitItalic{       
        font-size: calc(var(--main-TayeFont) * 0.8) ;  
        font-style: italic;
        font-weight:normal;
/*        padding-left: calc(var(--main-TayeFont) * 2.8);*/
/*        color:var(--main-CoulParagParag) ; */
         /* width=100px ;*/
    }


    .DateV{       
        font-size: calc(var(--main-TayeFont) * 0.8) ;  
        font-style: italic;
        font-weight:normal;
        padding-left: calc(var(--main-TayeFont) * 2.8);
        color:var(--main-CoulParagParag) ; 
         /* width=100px ;*/
    }


    .Gros00{
        font-size: calc(var(--main-TayeFont) * 1.1)  ; 
/*        font-weight: bold;*/
        padding-left: 20px;
        color:#46371c;
    }  

    /* paragTitre00  paragTitre01  ... // parag00 parag01 ...    */

     .paragTitre00{
        /* pour un Div */
        text-align:  center;
        align-content: center;
         /* Base */ 
        font-size: calc(var(--main-TayeFont) * 2)  ; 
        font-weight: bold;
        padding-left: 0px;
        color:#e3ffa5;
         text-shadow: 2px 2px 2px #000000,  0 0 33px rgb(131, 57, 3)
/*             , 0 0 3px #ff0404;*/
    } 
     .paragSousTitre00{
        /* pour un Div */
        text-align:  center;
        align-content: center;
         /* Base */ 
        font-size: calc(var(--main-TayeFont) * 1)  ; 
        font-weight: bold;
        padding-left: 0px;
        color:#e3ffa5;
         text-shadow: 2px 2px 2px #000000,  0 0 33px rgb(131, 57, 3)
/*             , 0 0 3px #ff0404;*/
    }
     .paragTitre01{
        font-size: calc(var(--main-TayeFont) * 1.6)  ; 
        font-weight: bold;
        padding-left: calc(var(--main-TayeFont) * 0.4) ;
        color:var(--main-CoulParagTitre) ; /* #46371c;*/
    } 
     .paragTitre02{
        font-size: calc(var(--main-TayeFont) * 1.3); 
        font-weight: bold;
        padding-left: calc(var(--main-TayeFont) * 1.2);
        color:var(--main-CoulParagTitre) ;
    } 
     .paragTitre03{
        font-size: calc(var(--main-TayeFont) * 1); 
        font-weight: bold;
        padding-left: calc(var(--main-TayeFont) * 2.2);
        color:var(--main-CoulParagTitre) ;
    } 

    .parag00{
        font-size: calc(var(--main-TayeFont) *1); 
        font-weight: bold;
        padding-left: calc(var(--main-TayeFont) * 0.4);
        color:var(--main-CoulParagParag) ;/*color:#46371c;*/     
    }  
    .parag01{
        font-size: calc(var(--main-TayeFont) * 1 ) ;
/*        font-weight: bold;*/
        padding-left: calc(var(--main-TayeFont) * 1.8);
         color:var(--main-CoulParagParag) ;
    }
     .parag02{       
        font-size: calc(var(--main-TayeFont) * 1) ;       
        font-weight:normal;
        padding-left: calc(var(--main-TayeFont) * 2.8);
         color:var(--main-CoulParagParag) ; 
         /* width=100px ;*/
    }
     .parag03{       
        font-size: calc(var(--main-TayeFont) * 1) ;       
        font-weight:normal;
         padding-left: calc(var(--main-TayeFont) * 3.8);
         color:var(--main-CoulParagParag) ;
         /* width=100px ;*/
    }
    .paragCentral00{
         text-align:  center;
         font-weight: bold;
        font-size: calc(var(--main-TayeFont) * 1.6 ) ;
         color:var(--main-CoulParagParag) ;
          width: 100% ;
    }
    .paragCentral01{
         text-align:  center;
        font-size: calc(var(--main-TayeFont) * 1 ) ;
        padding-left: calc(var(--main-TayeFont) * 1.8);
         color:var(--main-CoulParagParag) ;
/*
          width: 50% ;
          left: 25%;
*/
        
    }
     /* =======================================================  LA DIV PRINCIPALE*/
       .DivCentral {
            position: absolute;
            left: 8px;
            top: 28px;
            visibility: visible;          
/*            width: 92%;*/
/*
           
            height: 90%;                         sya rien d'autre  
            height: -webkit-calc(100% - 72px);    pour Chrome 
            height: -moz-calc(100% - 72px);     pour Firefox  
            height: calc(100% - 72px);           pour suport natif 
            
*/
           
           
            -moz-border-radius:14px;
            -webkit-border-radius:14px;
            border-radius:14px;
            border-top-width: 4px;
            border-right-width: 4px;
            border-bottom-width: 4px;
            border-left-width: 4px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-color: var(--main-CoulBordDivC)  ;

            padding:11px;
/*         
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 4px;
 */ 
            color: #ffffff;
/*            font-size: calc(var(--main-TayeFont) * 0.8) ;*/
        }



     /* =======================================================  TABLEAU DE BASE*/





.TableBase{
    width:  100%;
    color: #294617;   
}
.TableBase a {}

.TableBase a:link {
    color:  #0a4752;
    font-size: calc(var(--main-TayeFont) * 0.6) ;
}
.TableBase a:visited { 
    color: #225544;
    font-size: calc(var(--main-TayeFont) * 0.6) ;
}
.TableBase a:hover {
    color: #FFFF33;
    font-size: calc(var(--main-TayeFont) * 0.6) ;
}

.TableBase .tdprem:first-child  {  
    -moz-border-bottom-right-radius: 14px;
     -moz-border-bottom-left-radius: 14px;
     -moz-border-top-right-radius: 14px;
     -moz-border-top-left-radius: 14px;
    
    -webkit-border-bottom-right-radius: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -webkit-border-top-left-radius: 14px; 
} 

/*
.TableBase tr:first-child { 
    -moz-border-bottom-right-radius: 14px;
     -moz-border-bottom-left-radius: 14px;
     -moz-border-top-right-radius: 1px;
     -moz-border-top-left-radius: 1px;
    
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 14px; 
} 
*/
  
.TableBase  td:first-child  {
    font-size: calc(var(--main-TayeFont) * 0.8) ;
    /*  zut , et la deuxieme col alors ?      */
     width: 80px;
    -moz-border-bottom-right-radius: 14px;
     -moz-border-bottom-left-radius: 14px;
     -moz-border-top-right-radius: 1px;
     -moz-border-top-left-radius: 1px;
    
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 14px; 
}
/*pour la deuxieme colone */
.TableBase  td:nth-child(2) {
     width: 250px;
}
.TableBase  td:last-child  {
    font-size: calc(var(--main-TayeFont) * 0.6) ;

    -webkit-border-bottom-right-radius: 14px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-right-radius: 14px;
    -webkit-border-top-left-radius: 0px; 
}
.TableBase td , .TableBase .tdprem {
    font-weight: bolder;
     border-color: #0d3307;  
    border-style: solid;   
    border-width: 2px;      
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 20px; 
}

.TableBase tr{
    border-color: #0d3307;  
    border-style: solid;   
    border-width: 3px;
}



    /* ======================================================= Pour toutes les balises a  */


    a {
        /*  color: #ff0000;   */   
/*        font-size: (calc(var(--main-TayeFont) * 1)) ;*/
    }
    a:link {
        color: var(--main-CoulLink);
        font-weight:bold;
/*        font-size: (calc(var(--main-TayeFont) * 1)) ;*/
    }

    a:visited { 
      color: var(--main-CoulLinkVisited); /*  #2e6a22; */
/*         font-size: calc(var(--main-TayeFont) * 1)  ;*/
    }
    a:hover {
      color: #FFFF33;
/*         font-size: calc(var(--main-TayeFont) * 1)  ;*/
    }
    a:active {
      color: #fa8700;
/*         font-size: calc(var(--main-TayeFont) * 1)  ;    */
    }

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

styleLigMusSel{
    color: var(--main_ligMusSelect);   
}