/********************************************/
/***                                      ***/
/***     CSS pour le site du BARLONE      ***/
/***                                      ***/
/********************************************/




:root {
	--col-fd-ecran:#186e7cff;	
	--col-fd-tab:#ffdf9bff;

}

@media (orientation: portrait) {
    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
  }
  body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: url("Pic/ModePaysage.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: var(--col-fd-ecran);
    z-index: 9999;
  }

  .main-content {
    display: none; /* cacher le contenu principal si en portrait */
  }
}


html,body {
            margin: 0;
            padding: 0;
            height: 100vh;
               max-width: 100%;        /* Ne pas dépasser la taille du conteneur */
               width: auto; 
            background-color: var(--col-fd-ecran);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            font-size:10px;
            }



.image-container {
    display: flex;
    align-items: center;        /* Centrage vertical */
    justify-content: center;    /* Centrage horizontal */
    height:100vh;              /* Hauteur de la fenêtre */
    width: auto; 
    margin: 0;
            }

.image-container-img {
    width: auto;             /* Maintenir les proportions */
    max-width: 100%;         /* Ne pas dépasser la taille du conteneur */
    height: 60%;             /* À l’échelle de la taille du conteneur */
    }
            
            
            


.image-area {
            height: 90vh;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--col-fd-ecran);}

.image-area img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;}

/* Logo en haut à droite */
        .logo {
            position: fixed;
            top: 0;
            left: 0;
            height: 20vh;
            padding: 10px;
            z-index: 10;}

.logo img {
            height: 100%;
            object-fit: contain;}


.container {
    position: relative;
    display: inline-block;
  }
  .overlay-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: var(--col-fd-tab);
    font-size:1.5rem;
    text-align: center;
    padding-bottom: 40px;
  }



/* Conteneur tableau centré verticalement et horizontalement */
.table-container {
    display: flex;
    align-items: center;        /* Centrage vertical */
    justify-content: center;    /* Centrage horizontal */
    height: 70vh;              /* Hauteur de la fenêtre */
    width: auto; 
    margin: 0;
    background-color: var(--col-fd-ecran);
    }
    


table {
    background-color: var(--col-fd-tab);     /*  fond du tableau */
    padding: 0px;
    border-radius: 8px;
    border-collapse: collapse;
    }

td {
            /*padding: 10px 10px;*/
            padding-left: 5px;
            padding-right: 5px;
            text-align: center;
            color: var(--col-fd-ecran);              
            font-size: 16px;
            border-bottom: none;
            }

tr:last-child td {
            border-bottom: none;}

td a {
    color: blue;            /* ✅ lien  */
    text-decoration: underline;}

td a:hover {
    color: var(--col-fd-ecran)        /* ✅ couleur au survol  */}

.TexteTab {
text-align: justify;
text-justify: inter-word;
font-size: 150%;
padding-top: 0px;
padding-bottom: 0px;
}


.grille {
	display: grid;
	align-items: center;
	grid-template-columns: 340px 300px;
	/*grid-template-rows: 20px 150px 150px 150px;*/
	grid-gap: 5px 5px;
	grid-template-areas: 
		"a b"
		"c d"
		"e f"
        "g h"
;
}
.item1 {
  grid-area: a;
  background-color: var(--col-fd-tab);
          padding: 5px;
}
.item2 {
  grid-area: b;
    background-color: #ffefcdff;
            padding: 5px;
}
.item3 {
	grid-area: c;
    background-color: var(--col-fd-tab);
        padding: 5px;

 }
.item4 {
  grid-area: d;
    background-color: #ffefcdff;
        padding: 5px;
 }
.item5 {
  grid-area: e;
  background-color: var(--col-fd-tab);
      padding: 5px;
}
.item6 {
  grid-area: f;
      background-color: #ffefcdff;
          padding: 5px;
}
.item7 {
  grid-area: g;
  background-color: var(--col-fd-tab);
      padding: 5px;
}
.item8 {
  grid-area: h;
      background-color: #ffefcdff;
          padding: 5px;
}




.grilleShows6 {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px;
	grid-gap: 5px 5px;
	grid-template-areas: 
		"a b c"
		"d e f"
;
}
.itemShows61 {
  grid-area: a;
  background-color: var(--col-fd-tab);
          padding: 5px;
}
.itemShows62 {
  grid-area: b;
    background-color: var(--col-fd-tab);
            padding: 5px;
}
.itemShows63 {
	grid-area: c;
    background-color: var(--col-fd-tab);
        padding: 5px;

 }
.itemShows64 {
  grid-area: d;
    background-color: var(--col-fd-tab);
        padding: 5px;
 }
.itemShows65 {
  grid-area: e;
  background-color: var(--col-fd-tab);
      padding: 5px;
}
.itemShows66 {
  grid-area: f;
      background-color: var(--col-fd-tab);
          padding: 5px;
}


.grilleShows8 {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px 100px 100px;
	grid-template-rows: 100px 100px;
	grid-gap: 5px 5px;
	grid-template-areas: 
		"a b c d"
		"e f g h"
;
}
.itemShows81 {
  grid-area: a;
  background-color: var(--col-fd-tab);
          padding: 5px;
}
.itemShows82 {
  grid-area: b;
    background-color: var(--col-fd-tab);
            padding: 5px;
}
.itemShows83 {
	grid-area: c;
    background-color: var(--col-fd-tab);
        padding: 5px;

 }
.itemShows84 {
  grid-area: d;
    background-color: var(--col-fd-tab);
        padding: 5px;
 }
.itemShows85 {
  grid-area: e;
  background-color: var(--col-fd-tab);
      padding: 5px;
}
.itemShows86 {
  grid-area: f;
      background-color: var(--col-fd-tab);
          padding: 5px;
}
.itemShows87 {
  grid-area: g;
  background-color: var(--col-fd-tab);
      padding: 5px;
}
.itemShows88 {
  grid-area: h;
      background-color: var(--col-fd-tab);
          padding: 5px;
}









/* Zone principale pour les 4 boutons centrés */
.center-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;}

.center-buttons a img {
    height: 40vh;               /* ✅ hauteur = 40% de l'écran */
    width: auto;                /* ✅ largeur proportionnelle à l'image */
    transition: transform 0.2s ease;}

.center-buttons a img:hover {
    transform: scale(.9);}

/* Images des 4 boutons centraux BAR*/
.b1 { background-image: url("Pic/Cocktails.png");}

.b1:hover { background-image: url("Pic/Cocktails2.png");}

.b2 { background-image: url("Pic/Alcools.png");}

.b2:hover { background-image: url("Pic/Alcools2.png");}

.b3 { background-image: url("Pic/Mocktails.png");}

.b3:hover { background-image: url("Pic/Mocktails2.png");}

.b4 { background-image: url("Pic/Softs.png");}

.b4:hover { background-image: url("Pic/Softs2.png");}

/* Images des 5 boutons centraux SHOWS*/
.b1 { background-image: url("Pic/Karaoke.png");}

.b2 { background-image: url("Pic/Cabaret.png");}

.b3 { background-image: url("Pic/Spectacle.png");}

.b4 { background-image: url("Pic/Expo.png");}

.b5 { background-image: url("Pic/Festival.png");}



/* Zone des 6 boutons droits      */
.buttons {
            position: fixed;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 5px;
            }

.buttons a {
            display: block;
            width: 100px;
            height: 50px;
            background-size: cover;
            background-position: center;
            transition: transform 0.2s ease;
            }

.buttons a:hover {
            transform: scale(1.1);}

/* Boutons avec image par défaut + survol */
        .btn1 {
            background-image: url("Pic/BoutonContact.png");}

.btn1:hover {
            background-image: url("Pic/BoutonContact2.png");}

.btn2 {
            background-image: url("Pic/BoutonInfo.png");}

.btn2:hover {
            background-image: url("Pic/BoutonInfo2.png");}

.btn3 {
            background-image: url("Pic/BoutonBar.png");}

.btn3:hover {
            background-image: url("Pic/BoutonBar2.png");}

.btn4 {
            background-image: url("Pic/BoutonMenus.png");}

.btn4:hover {
            background-image: url("Pic/BoutonMenus2.png");}

.btn5 {
            background-image: url("Pic/BoutonVisite.png");}

.btn5:hover {
            background-image: url("Pic/BoutonVisite2.png");}

.btn6 {
            background-image: url("Pic/BoutonShows.png");}

.btn6:hover {
            background-image: url("Pic/BoutonShows2.png");}




.marquee{
  /* Réglages */
  --gap: 2rem;      /* espace entre copies */
  --duration: 30s;  /* vitesse */
  color:#ffdf9bff;
  position: relative;
  overflow: hidden;     /* rien ne déborde visuellement */
  display: block;
  width: 100%;          /* n’occupe que la largeur du parent */
  max-width: 100%;
  height: 2.5em;        /* fixe la hauteur visible */
  line-height: 2.5em;   /* centre verticalement le texte (simple) */
  /*border: 1px solid #ccc;*/
  box-sizing: border-box;
  white-space: nowrap;
}

.marquee__track{
  /* 🔑 Retirée du flux : ne peut plus agrandir la page */
  position: absolute;
  top: 0;
  left: 0;

  display: inline-flex;
  gap: var(--gap);
  will-change: transform;
  animation: marquee-scroll var(--duration) linear infinite;
}

.marquee__copy{
  flex: 0 0 auto;
  white-space: nowrap;
  /* Optionnel : éviter le retour arrière visuel quand police variable */
  transform: translateZ(0);
}

/* Pause au survol (optionnel) */
.marquee:hover .marquee__track{
  animation-play-state: paused;
}

/* Défilement continu : on translate d’une demi-piste (2 copies -> 50%) */
@keyframes marquee-scroll{
  to { transform: translateX(-50%); }
}

/* Accessibilité : réduire l’animation si demandé */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}