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

    --blanc: #f4e6d9;                   /* blanc */
    --noir: #000000;
    --CouleurBlancCreme: #ffebd7 ;      /* blanc creme ffebd7 */ 
    --CouleurGrisFonce: #333;           /* gris foncé */ 
    --CouleurVertPale: #cdd7cd;         /* vert pale 5e7a6c */ 
    --CouleurVertFonce: #425445;        /* vert foncé */
    --CouleurBeigePale: #c79b74;        /* Beige pale c79b74 */
    --CouleurBeigeFonce: #a77f58;       /* Beige foncé a77f58 */
    --CouleurJaune: #FFFF00;            /* Jaune */
    --CouleurOrange: #ff6600;           /* Orange */
    --vert: #00ff00;                    /* Vert */
    --bleu: #d9e7f4;                    /* Bleu */
    /* 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;}
.fontSancreek{font-family:'Sancreek', cursive;}
.fontSatisfy{font-family:'Satisfy', cursive;}
.fontBaloo{font-family: 'Baloo Chettan 2', cursive;}
.fontLondrina{font-family: 'Londrina Solid', cursive;}

.fontMenu{ font-family: 'Lobster', cursive; }
.fontSpectacles{ font-family: 'Rajdhani', sans-serif; }
.fontTexte{font-family: 'Rajdhani', sans-serif;}
.fontNouvelles{ font-family: 'Rajdhani', sans-serif;}



a{color: var(--CouleurFontFonce);}
body {
    margin:0; 
    /*margin-top:55px;*/ 
    background-color:var(--CouleurGrisFonce);
    font-family: 'Satisfy', cursive;
    overflow-x: hidden;
    background-image: url("images/plcaccueil.jpg");
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-position: center 35px;

    /* ajout chatGPT 
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement
    align-items: center;        Centre le contenu verticalement */

}

#floating-img {
  transition: top 0.5s ease;
}


.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) ;}

.fondTransparent {
    color: var(--CouleurPale1); 
    /*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                                      */
    .tricheEspaceFonce{
        width:auto;
        height:55px;
        background-color:var(--CouleurFonce1);
    }
    .tricheEspacePale{
        width:auto;
        height:55px;
        background-color:var(--CouleurPale1);
    } 
    .tricheEspaceTransparent{
        width:auto;
        height:55px;
        background-color:transparent;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/



    /****************************************************
    *                                                    *
    *          BARRE de MENU en haut                      *
    *                                                      */
.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*overflow: hidden;*/
    background-color: var(--NavBarBgColor);
    z-index: 10000;
    /*height: 46px;*/
    display: flex;
    align-items: center;
    padding: 10px 10px;
    margin-right: 10px;
    justify-content: space-between;
}

.menu-links a {
  margin-left: 20px;
  /*float: right;*/
  /*display: block;*/
  background: var(--NavBarBgColor);
  color: var(--NavBarTextColor);
  /*text-align: center;*/
  padding: 0px 20px;
  text-decoration: none;
  font-size: 26px;
  font-weight: 200;
}

.menu-links a:hover {
  background: var(--NavBarTextColor);
  color: var(--NavBarBgColor);
}
.logomenu{
    position: fixed;
    margin-top: -54px;
    padding-left: 5px;
    height:50px;
    width:auto; 
    z-index:10000000005;
}

/* Burger caché par défaut */
.burger {
    display: none;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 20px;
    color: var(--NavBarTextColor);
}


.btnEcouter{
    width: 253px;
    padding-top: 70vh;
    margin: 0 auto;
}
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/







    /****************************************************
    *                                                    *
    *                                                     *
    *                                                      */

div#imgCenter { 
    margin: auto;
    width: 100%;
}
img.img100 { 
    max-width: 100%; 
    display: block;
}
img.img60 { 
    max-width: 60%; 
    display: block;
}
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/




    /****************************************************
    *    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: 'Lobster', cursive;
}
.titrepale{
    color: var(--CouleurPale1);
    font-family: 'Lobster', cursive;
}

.TexteWeb{ 
    font-size:1.5em; 
    font-weight:200; 
}



    /****************************************************
    *                                                    *
    *          section  AFFICHE LES INFOS DE SHOW         *
    *                                                      */
    /* Style du conteneur de l'iframe */
    .links {
      margin: 20px;
    }

    .links a {
      margin-right: 10px;
      cursor: pointer;
      text-decoration: none;
      color: var(--CouleurPale1);
    }

    /* Fond gris semi-transparent */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      display: none; /* Caché au départ */
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Conteneur du popup */
    #containerInfoShow {
      width: 80%;
      max-width: 1000px;
      height: 80%;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    iframe {
      flex: 1;
      border: none;
    }

    #closeBtn {
      padding: 10px;
      background-color: var(--CouleurPale1);
      color: var(--CouleurFonce1);
      border: none;
      cursor: pointer;
      font-weight: bold;
    }

    #closeBtn:hover {
      color: var(--CouleurPale1);
      background-color: var(--CouleurFonce1);
    }
    /*                                                     *
    *          section  AFFICHE LES INFOS DE SHOW         *
    *                                                    *
    ****************************************************/










    /****************************************************
    *                                                    *
    *          section  BAND CAMP                         *
    *                                                      */
    .BandCamp {
        color: var(--CouleurFonce1); 
        background-color: var(--CouleurPale1);
        /*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  */
.event-list {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.event-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /*border-bottom: 2px solid #F4E6D9;*/
  padding: 1rem 0;
}

.event-cell {
  padding: 0rem;
  height: auto;
}

/* Centrer le lien dans la colonne "Billet" */
.event-cell:nth-child(1) {
  width: 20%;
}
.event-cell:nth-child(2) {
  width: 30%;
}
.event-cell:nth-child(3) {
  width: 30%;
}
.event-cell:nth-child(4) {
  width: 15%;
  text-align: right;
}


.date{
    font-size: 2em;
    font-weight: 600;
}
.ville{
    font-size: 2em;
    font-weight: 1000;
}
.lieu{
    font-size: 1.7em;
    font-weight: 200;
}
.billet{
    font-size: 1.7em;
    font-weight: 100;
}
.ligne-separatrice {
    display: block;
    height: 1px;
    background-color: #F4E6D9;
    width: 100%;
    margin: 1rem auto;
}
/*  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) {
    .menu-links a {
        padding: 10px 16px;
        font-size: 20px;
        font-weight: 100;
    }
    .logomenu{
        margin-top: -42px;
        height:42px;
    }


  .menu-links {
    display: none;
    flex-direction: column;
    background: var(--CouleurFonce1);
    position: absolute;
    top: 60px;
    right: 0;
    width: 35%;
    height: auto;
    padding: 0px 20px 0px 0px;
    box-shadow: 5px 15px 15px rgba(0,0,0,0.5);
    border-bottom-left-radius: 10px; /* coin inférieur gauche arrondi */
  }

  .menu-links.active {
    display: flex;
  }

  .burger {
    display: block;
  }







    body { 
        margin:0; 
        margin-top:46px;
        background-image: url("images/plcaccueil950.jpg");
        background-size: auto 100vh;
        /*background-size: 100vw auto; */       
        background-repeat: no-repeat;

    }
    
    img.img60 { 
        max-width: 80%; 
        display: block;
    }


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


    /****************************************************
    * Ajout d'un espace de 10px au dessus de la bio,     *
    * pour ne pas cacher l'image avec le menu en cliquant *
    * sur le lien BIO                                      */
    .tricheEspaceFonce{
        height:50px;
    }
    .tricheEspacePale{
        height:50px;
    } 
    .tricheEspaceTransparent{
        height:50px;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/


    .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    */
    /***********************/





    /***************************/
    /*    section SPECTACLE    */
    /*    section SPECTACLE    */
    .event-row {
        flex-direction: column;
    }
    .event-cell {
        flex: 1 1 100%;
        width: 100% !important;
        text-align: center !important;
    }
    .ligne-separatrice {
        width: 80% !important;
    }
    /*    section SPECTACLE    */
    /*    section SPECTACLE    */
    /***************************/



    .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: 440px) {
    .navbar2{
        height: 34px;
    }
    .navbar2 a {
        padding: 10px 10px;
        font-size: 14px;
        font-weight: 80;
    }
    .logomenu{
        margin-top: -34px;
        height:30px;
    }

    body { 
        margin:0; 
        margin-top:34px;
        background-image: url("images/plcaccueil380.jpg");
        /*background-size: auto 100vh;*/
        background-size: 100vw auto;
        background-repeat: no-repeat;
    }

    img.img60 { 
        max-width: 90%; 
        display: block;
    }


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



    /****************************************************
    * Ajout d'un espace de 6px au dessus de la bio,     *
    * pour ne pas cacher l'image avec le menu en cliquant *
    * sur le lien BIO                                      */
    .tricheEspaceFonce{
        height:34px;
    }
    .tricheEspacePale{
        height:34px;
    } 
    .tricheEspaceTransparent{
        height:34px;
    }
    /*                                                     *
    *                                                     *
    *                                                    *
    ****************************************************/

    .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    */
    /***********************/
}


@media (max-height: 440px) {
    body { 
        margin:0; 
        margin-top:34px;
        background-image: url("images/plcaccueil.jpg");
        /*background-size: auto 100vh;*/
        background-size: 100vw auto;
        background-repeat: no-repeat;
    }
}