:root {
    /**********************************/
    /* palette de couleur du site web */
    /* palette de couleur du site web */

    --blanc: #FFE7DB;                   /* blanc  f4e6d9 */ 
    --noir: #000000;
    --CouleurBlancCreme: #FFE7DB ;      /* blanc creme   ffebd7 */ 
    --CouleurGrisFonce: #0F0C0A;        /* gris foncé   333 */  
    --CouleurVertPale: #cdd7cd;         /* vert pale   5e7a6c */ 
    --CouleurVertFonce: #425445;        /* vert foncé   425445 */
    --CouleurBeigePale: #c79b74;        /* Beige pale   c79b74 */
    --CouleurBeigeFonce: #a77f58;       /* Beige foncé   a77f58 */
    --CouleurJaune: #FFFF00;            /* Jaune   FFFF00 */
    --CouleurOrange: #ff6600;           /* Orange   ff6600 */
    --vert: #00ff00;                    /* Vert   00ff00 */
    --bleu: #d9e7f4;                    /* Bleu   d9e7f4 */
    /* palette de couleur du site web */
    /* palette de couleur du site web */
    /**********************************/
  


    /***********************************/
    /*   Choix des couleurs du site    */
    /*   Choix des couleurs du site    */

    --CouleurFondDuSiteweb: var(--blanc);
    --CouleurFonce1:  var(--CouleurGrisFonce);/* var(var(--CouleurVertFonce); */
    --CouleurFonce2:  var(--CouleurGrisFonce);/* var(var(--CouleurBeigeFonce); */
    --CouleurPale1:  var(--blanc); /* var(--CouleurBlancCreme); */
    --CouleurPale2:   var(--blanc);/* var(var(--CouleurBeigePale); */

    /*   Choix des couleurs du site    */
    /*   Choix des couleurs du site    */
    /***********************************/



    --VideoBackColor: var(--CouleurFondDuSiteweb);
    --NavBarBgColor: var(--CouleurGrisFonce);



    /**************************************/
    /* COULEURS DE LA SECTION SPECTACLE    */
    /*                                      */
    --Show-GrandCadre-color: var(--CouleurPale1);
    --Show-Top-color: var(--CouleurPale1); 
    --textClair-color: var(--CouleurPale1); 
    --NextShow-bgcolor: var(--CouleurFonce1);
    --Show-bottom-color: var(--CouleurFonce1);
    --Show-Top-bgcolor:var(--CouleurFonce1); 
    /*                                      */
    /* COULEURS DE LA SECTION SPECTACLE    */
    /**************************************/



    --CouleurFontPale: var(--CouleurPale1);
    --CouleurFontFonce: var(--CouleurFonce1) ;
    --CouleurBandCampBordure:var(--CouleurPale1);
    --NavBarTextColor: var(--CouleurPale2);
}



.fontBellefair{ font-family: 'Bellefair', serif; }
.fontKurale{ font-family: 'Kurale', serif; }
.fontSolitreo{ font-family: 'Solitreo', cursive; }
.fontVujahday{ font-family: 'Vujahday Script', cursive; }
.fontFinger{font-family:'Finger Paint', cursive;}
.fontIndie{font-family:'Indie Flower', cursive;}
.fontPacifico{font-family:'Pacifico', cursive;}
.fontSatisfy{font-family:'Satisfy', cursive;}
.fontBaloo{font-family: 'Baloo Chettan 2', cursive;}
.fontLondrina{font-family: 'Londrina Solid', cursive;}
.fontRubikDirt { font-family: "Rubik Dirt", system-ui; font-weight: 400; font-style: normal;}
.fontSancreek{font-family: "Sancreek", serif; font-weight: 400; font-style: normal;}


.fontMenu_PLC{ font-family: 'Lobster', cursive; }
.fontSpectacles{ font-family: 'Rajdhani', sans-serif; }
.fontTexte{font-family: 'Rajdhani', sans-serif;}
.fontNouvelles{ font-family: 'Rajdhani', sans-serif;}
.fontMenu{ font-family: "Rubik Dirt", system-ui; font-weight: 400; font-style: normal;}


a{color: var(--CouleurFontFonce);}
body {
    margin:0; 
    margin-top:55px; 
    /*background-color:var(--CouleurFondDuSiteweb);*/
    background-color:var(--CouleurGrisFonce);
    font-family: 'Satisfy', cursive;
    overflow-x: hidden;
    /*scrollbar-3dlight-color: var(--NavBarBgColor);*/
    /*scrollbar-width: none;*/
}



.link-style {
  color: var(--CouleurFontPale);
}

.link-style:hover {
  color: #F4E6D9;
}


.TextePale {color: var(--CouleurPale1); background-color:var(--CouleurGrisFonce) ;}
.TextePale a{color: var(--CouleurPale1);}
/*.TexteSombre {color: var(--CouleurFonce2); background-image: linear-gradient(to top, var(--CouleurFondDuSiteweb), var(--CouleurPale1)); }*/
.TexteSombre {color: var(--CouleurFonce2); background-color: var(--CouleurFondDuSiteweb); }
.TexteSombre a{color: var(--CouleurFonce2);}
.fondpale {background-color:var(--CouleurPale1) ;}
.fondSombre {background-color:var(--CouleurFonce2) ;}

.fondTransparent {
    color: var(--CouleurFonce2); 
    /*background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), var(--CouleurFondDuSiteweb)); */
    background-color: transparent;
}



    /****************************************************
    * Ajout d'un espace de 55px au dessus de la bio,     *
    * pour ne pas cacher l'image avec le menu en cliquant *
    * sur le lien BIO                                      */
    .trichebio{
        width:auto;
        height:55px;
        background-color:var(--CouleurFondDuSiteweb);
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/



    /****************************************************
    *                                                    *
    *          BARRE de MENU en haut                      *
    *                                                      */
.navbar {
    overflow: hidden;
    background-color: var(--NavBarBgColor);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    height: 56px;
}

.navbar a {
  float: left;
  display: block;
  background: var(--NavBarBgColor);
  color: var(--NavBarTextColor);
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 26px;
  font-weight: 200;
}

.navbar a:hover {
  background: var(--NavBarTextColor);
  color: var(--NavBarBgColor);
}
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/




    /****************************************************
    *                                                    *
    *          Video qui colle en haut                    *
    *                                                      */
.box1{
    width:100%;
    z-index: -1000;
    /*background-color: var(--VideoBackColor);*/
    background-color: var(--NavBarBgColor);
    margin-bottom: 0px;/*-6px;*/
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    margin-top: 0px;
    left: 0;
}
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/





    /****************************************************
    *    Ajustement de la grosseur des H2 pour           *
    *    la section INFOLETTRE                            *
    *                                                      */
    #mc_embed_signup{
        clear:center; 
        width:100%;
        align-self:center;
        /*color:var(--CouleurFontPale);*/
        color:var(--CouleurFonce1);
    }

    .infolettre{
        /*background-image: linear-gradient(to top, rgba(0,0,0,0.0), var(--CouleurGrisFonce)); */
        /*background: var(--CouleurFonce1);*/
        background: var(--CouleurFontPale);
    }

    .infolettre h2{
        font-size: 3em;
        font-weight: 120;
        padding-top: 0px;
        text-align: center;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/




.titrefonce{
    color: var(--CouleurFonce1);
    font-family: "Kurale", serif;


}
.titrepale{
    color: var(--CouleurPale1);
    font-family: "Kurale", serif;
}






    /****************************************************
    *                                                    *
    *          section  BAND CAMP                         *
    *                                                      */
    .BandCamp {
        color: var(--CouleurFonce2); 
        background-color: var(--CouleurGrisFonce);
        /*background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), var(--CouleurGrisFonce)); */
    }
    .LecteurBandCamp{
        position: relative;
        padding-bottom: 100px;
        align-self: center;
        width: 48%;
        height: auto;
        min-width: 40%; 
        max-width: 700px;
    }
    .iframeBandCamp{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 700px;
        height: 100%;
        border: 3;
        border-radius: 10px;
        border-color: var(--CouleurBandCampBordure);
        box-shadow:-2px 6px 10px 1px rgba(0,0,0,1)
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/


.new-section {
  padding-top: 0px;
  text-align: center;
  font-size: 4em;
  font-weight: 250;
}

.leTier{
    width:30%;
} 



    /****************************************************
    *                                                    *
    *          section  COPYRIGHT                         *
    *                                                      */
    .copyright{
      font-family: 'Varela Round', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 100; 
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: center;
    }
    /*                                                      */
    /*          section  COPYRIGHT                         *
    /*                                                    *
    /****************************************************/


/***************************/
/*    section NOUVELLES    */
/*    section NOUVELLES    */
.SectionNouvelles{
  font-size: 1.2em;
  font-weight: 600;
}

.SectionNouvelles img{
     width: 90%;
     height: auto; 
     max-width: 340px;
     min-width: 200px;
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: var(--CouleurFonce1);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
        drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
        drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
        drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
        drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color)); 
}
.SectionNouvelles div{
    margin-top: 0px;
    padding-right: 30px;
    padding-left: 30px;
}
/*    section NOUVELLES    */
/*    section NOUVELLES    */
/***************************/






/***********************/
/*    Vidéo YOUTUBE    */
/*    Vidéo YOUTUBE    */
.Youtube {
    align-self: center;
    height: auto;
    width: 100vw;
    overflow: hidden;
    /*width: 60vw;
    margin-left: 20vw;*/
}
.LecteurYoutube{
    position: relative;
    width: 100vw;
    padding-bottom: 42.55%;
    /*padding-top: 15%;
    padding-bottom: 56.25%;
    margin-top: -15%;
    margin-bottom: -25%;*/
}
.iframeYoutube{
    position:absolute;
    align-self: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*border: 3;
    border-radius: 20px;
    border-color: var(--CouleurBandCampBordure);
    box-shadow:-2px 6px 10px 1px rgba(0,0,0,1)*/
}
/*    Videé YOUTUBE    */
/*    Videé YOUTUBE    */
/***********************/



/******************************/
/*    Vidéo YOUTUBE petit    */
/*    Vidéo YOUTUBE petit   */
.YoutubePetit {
    align-self: center;
    height: auto;
    width: 75vw;
    overflow: hidden;
    /*width: 60vw;
    margin-left: 20vw;*/
}
.LecteurYoutubePetit{
    position: relative;
    width: 75vw;
    padding-bottom: 56.25%;
    /*padding-top: 15%;
    padding-bottom: 56.25%;
    margin-top: -15%;
    margin-bottom: -25%;*/
}
.iframeYoutubePetit{
    position:absolute;
    align-self: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*border: 3;
    border-radius: 20px;
    border-color: var(--CouleurBandCampBordure);
    box-shadow:-2px 6px 10px 1px rgba(0,0,0,1)*/
}
/*    Videé YOUTUBE petit    */
/*    Videé YOUTUBE petit   */
/***************************/




/***********************/
/*  Section Spectacle  */
/*  Section Spectacle  */
.EvenRow {
    border-radius: 24px 24px 30px 10px;
    margin:6px;
    width: 300px;
    height: auto;
    -moz-box-shadow: -3px 2px 0px 0px var(--Show-bottom-color);
    -webkit-box-shadow: -3px 2px 0px 0px var(--Show-bottom-color);
    box-shadow: -3px 2px 0px 0px var(--Show-bottom-color);
}
.EvenRowtop {
    background-color: var(--Show-Top-bgcolor);
    color: var(--Show-Top-color);  
    border-radius: 24px 24px 0px 0px;
    width: 100%;
    height: auto;
}
.EvenRowbottom {
    color: var(--Show-bottom-color);
    border-radius: 0px 0px 30px 10px;
    width: 100%;
    padding-top:10px;
    padding-bottom:10px;
    height: auto;
}

.EvenRow3 {
    margin:6px;
    background-color: var(--NextShow-bgcolor);
    color: var(--textClair-color);  
  border-radius: 24px 24px 15px 15px;
    padding:2px;
    padding-bottom: 0px;
    width: 50%;
    height: auto;
}
.EvenRow3top {
    background-color: var(--Show-GrandCadre-color);
    color: var(--NextShow-bgcolor);  
    border-radius: 22px 22px 0px 0px;
    width: 100%;
    height: auto;
}




.nextshow {
    width: auto;
    overflow: auto;
    z-index:1500;
}

/* Scroll animations styles */
.lesShows {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--Show-GrandCadre-color); /* rgba(199, 155, 116, 1.0); */
  border-radius: 22px 22px 15px 15px;
}

.lesShows div {
  flex-grow: 1;
  text-align: center;
  opacity: 100;
}

.lesShows div h2 {
  font-size: 2em;
  font-weight: 500;
}

.lesShows div h3 {
  font-size: 1.3em;
  font-weight: 500;
}

.lesShows div h4 {
  font-size: 1.2em;
  font-weight: 500;
}
/*  Section Spectacle  */
/*  Section Spectacle  */
/***********************/



/***********************/
/*    POPUP Couriel    */
/*    POPUP Couriel    */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 40vw;
  background-color: var(--CouleurGrisFonce);
  color: var(--CouleurFondDuSiteweb);
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -20vw;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/*    POPUP Couriel    */
/*    POPUP Couriel    */
/***********************/


/*                                                   *
*             SITE WEB NORMAL                       *
*             SITE WEB NORMAL                      *
***************************************************
**************************************************
*************************************************
************************************************
***********************************************
**********************************************/







/* Media queries */
@media (max-width: 950px) {
    .navbar{
        height: 46px;
    }
    .navbar a {
        padding: 10px 16px;
        font-size: 20px;
        font-weight: 100;
    }

    body { 
        margin:0; 
        margin-top:46px;
    }
    .box1{
        margin-bottom: 0px;/*-6px;*/
        position: static;
        top: 46px;
        margin-top: 0px;
        left: 0;
    }

    .infolettre h2{
        font-size: 1.5em;
        font-weight: 50;
    }


    /****************************************************
    * Ajout d'un espace de 42px au dessus de la bio,     *
    * pour ne pas cacher l'image avec le menu en cliquant *
    * sur le lien BIO                                      */
    .trichebio{
        width:auto;
        height:42px;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/


    .LecteurBandCamp{
        width: 90%;
        height: auto;
        min-width: 50%; 
        max-width: 500px;
    }

    /***********************/
    /*    Vidéo YOUTUBE    */
    /*    Vidéo YOUTUBE    */
    .Youtube {
        width:100vw;
        margin-left: 0vw;
    }
    /*    Vidéo YOUTUBE    */
    /*    Vidéo YOUTUBE    */
    /***********************/


    .new-section {
        font-size: 3em;
        font-weight: 200;
    }
      
    .scroll-animations {
        display: block;
        text-align:center;
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }  
    .scroll-animations div {
        padding: 10px 10px;
        margin-top: -10px;
        text-align:center;
    }
    .scroll-animations div p {
        text-align:justify;
        text-align-last: center;
        vertical-align:top;
    }
    .scroll-animations div h3 {
        font-size:2.5em;
        font-weight: 300;
    }
    .scroll-animations div span {
        font-size: 4em;
        font-weight: 400;
        text-align:center;
    }
  
    .click-animations input,
    .click-animations textarea,
    .click-animations button {
        width: 80%;
    }
  
    .nextshow{width:auto;}  
    .EvenRow{width: 40%;}
    .EvenRowtop{width: 40%; height: auto;}
    .EvenRowbottom{width: 40%; padding-top:6px; padding-bottom:6px; height: auto;}
    .EvenRow3{padding-bottom: 0px; width: 90%; height: auto;}

    .lesShows{display: flex; width:90%;}
    .lesShows div {width:100%; height:auto;}
    .lesShows div h2 {font-size: 1.8em; font-weight: 500;}
    .lesShows div h3 {font-size: 1.2em; font-weight: 500;}
    .lesShows div h4 {font-size: 1em;font-weight: 500;}
    .leTier{width:100%;} 


    /***********************/
    /*    POPUP Couriel    */
    /*    POPUP Couriel    */
    .popup .popuptext {
      width: 80vw;
      margin-left: -40vw;
    }
    /*    POPUP Couriel    */
    /*    POPUP Couriel    */
    /***********************/
}






@media (max-width: 380px) {
    .navbar{
        height: 34px;
    }
    .navbar a {
        padding: 10px 10px;
        font-size: 14px;
        font-weight: 80;
    }

    body { 
        margin:0; 
        margin-top:34px;
    }

    .box1{
        margin-bottom: 0px;/*-6px;*/
        position: static;
        top: 34px;
        margin-top: 0px;
        left: 0;
    }


    .infolettre h2{
        font-size: 1.2em;
        font-weight: 40;
    }



    /****************************************************
    * Ajout d'un espace de 32px au dessus de la bio,     *
    * pour ne pas cacher l'image avec le menu en cliquant *
    * sur le lien BIO                                      */
    .trichebio{
        width:auto;
        height:32px;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/

    .LecteurBandCamp{
        width: 98%;
        height: auto;
        min-width: 50%; 
        max-width: 370px;
    }

    /***********************/
    /*    Vidéo YOUTUBE    */
    /*    Vidéo YOUTUBE    */
    .YoutubePetit {
        width:96vw;
        margin-left: 2vw;
    }
    /*    Vidéo YOUTUBE    */
    /*    Vidéo YOUTUBE    */
    /***********************/



    .new-section { 
        font-size: 2em; 
        font-weight: 150;
    } 
  
    .scroll-animations{text-align:center; display: block; width:100%; margin-left:auto; margin-right:auto;}
    .scroll-animations div { text-align:center; padding: 10px 10px; margin-top: -10px;}
    .scroll-animations div p { text-align:justify; text-align-last: center; vertical-align:bottom;}
    .scroll-animations div span { text-align:center; font-size: 4em; font-weight: 400;}
    .scroll-animations div h3 { font-size:2em; font-weight: 300;}
    
    .nextshow { width:auto;}
    
    .EvenRow{ width:40%;}
    .EvenRowtop { width: 40%; height: auto;}
    .EvenRowbottom { width: 40%; padding-top:8px; padding-bottom:4px;height: auto;}
    .EvenRow3 { width: 100%; height: auto;}

    .lesShows { display: flex; width:100%;}
    .lesShows div { width:100%; height:auto;}
    .lesShows div h2 { font-size: 1.4em; font-weight: 600;}
    .lesShows div h3 { font-size: 1em; font-weight: 600;}
    .lesShows div h4 { font-size: 0.8em; font-weight: 500;}
    .leTier{width:100%;} 



    /***********************/
    /*    POPUP Couriel    */
    /*    POPUP Couriel    */
    .popup .popuptext {
      width: 90vw;
      margin-left: -45vw;
    }
    /*    POPUP Couriel    */
    /*    POPUP Couriel    */
    /***********************/
}