@font-face {
  font-family: 'Gagalin';
  src: url('../Police/Gagalin-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BarberChop';
  src: url('../Police/BarberChop.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'VirusKiller';
  src: url('../Police/VirusKiller.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Définition des couleurs personnalisées utilisées dans tout le site */
:root {
  --blue-1: #e3f2fd;        /* Bleu très clair, évoque le ciel ou le vent */
  --blue-2: #bbdefb;        /* Bleu clair, évoque la mer */
  --blue-3: #64b5f6;        /* Bleu moyen, évoque la mer */
  --blue-4: #1565c0;        /* Bleu profond, évoque la mer */
  --green-1: #e8f5e9;       /* Vert très clair, évoque la nature */
  --green-2: #a5d6a7;       /* Vert clair, évoque la nature */
  --green-3: #4caf50;       /* Vert moyen, évoque la nature */
  --white: #ffffff;         /* Blanc pur */
  --gray-1: #f8f9fa;        /* Gris très clair */
  --gray-2: #e9ecef;        /* Gris clair */
  --gray-3: #6c757d;        /* Gris moyen */
  --dark: #212529;          /* Gris foncé, pour le texte principal */
}

/* Styles de base pour le corps de la page */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  margin-top: 135px;
  position: relative;
}

main {
  flex-grow: 1;
  margin-bottom: 20px;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/fondSiteLarge.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.3; /* Change cette valeur selon ton besoin */
  z-index: -1; /* Place l’image derrière le contenu */
}


.mainTitle{
  font-family: 'Gagalin', sans-serif;
}

/* Barre de navigation (navbar) */
.navbar {
  padding: 1rem 0;                  /* Espacement vertical */
  background-color: rgb(255, 255, 255, 0.6);
}
.navbar-brand {
  font-family: 'Gagalin', sans-serif;
  font-weight: 700;                 /* Texte en gras */
  font-size: 1.75rem;               /* Taille du logo/texte */
  color: black;                   /* Couleur du texte noir */
}
.nav-link {
  color: black !important;        /* Couleur du lien noir */
  font-weight: 500;                 /* Texte semi-gras */
  margin: 0 0.75rem;                /* Espacement horizontal entre les liens */
  transition: color 0.2s;           /* Animation douce au changement de couleur */
}
.nav-link:hover, .nav-link:focus {
  color: var(--gray-3) !important;  /* Changement de couleur au survol ou focus */
}
.nav-link.active {
  border-bottom: 2px solid black; /* Souligne l'onglet actif */
  font-weight: bold;                /* Texte en gras pour l'onglet actif */
}

#nav-webLink{
    font-size: 35px;
}

/* Conteneurs et sections principales */
.container {
  padding: 2rem 1rem;               /* Espacement interne pour les conteneurs */
}
h1, h2, h3, h4, h5 {
  color: var(--blue-4);             /* Titres en bleu profond */
  margin-bottom: 1.5rem;            /* Espacement sous les titres */
}
h1{
  margin: 20px;
}

/* Tableau de la billeterie */
#Billet-Table {
  border-radius: 8px;               /* Coins arrondis */
  overflow: hidden;                 /* Cache les débordements */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Ombre légère */
  margin-left: auto;
  margin-right: auto;                
}
#Billet-Table th, #Billet-Table td {
  padding: 1rem;                    /* Espacement interne des cellules */
  text-align: center;               /* Texte centré */
}

/* Pied de page (footer) */
footer {
  color: rgba(0, 0, 0, 0.4);        /* Texte gris foncé semi-transparent */
}
.Light-Blue-Bg {
  background-color: #8FB0C9;        /* Fond bleu clair personnalisé */
}
.Blue-Bg {
  background: linear-gradient(to bottom, #8FB0C9, #6F95AC); /* Dégradé bleu */
}
footer a:hover {
  color: rgba(0, 0, 0, 1) !important; /* Texte noir au survol */
  font-weight: bold !important;     /* Texte en gras au survol */
}
footer h5 {
  color: rgb(21, 101, 192, 0.7  );             /* Titres en bleu profond */
  font-weight: 600;                 /* Texte semi-gras */
  margin-bottom: 0.3rem;              /* Espacement sous les titres */
}
footer ul {
  padding-left: 0;                  /* Supprime la marge gauche par défaut */
}

/* Effets de survol et transitions */
a, .nav-link{
  transition: all 0.2s ease-in-out; /* Animation douce pour tous les liens et boutons */
}

img{
    box-shadow: 0 2px 8px rgba(0,0,0,0.8); /* Ombre légère */
}

.logoSpectacle{
    max-height: 400px;
}

.ImageProgrammation{
    width: 800px;
}

/* Bouton "nuage" blanc avec texte noir et ombres pour effet nuageux */
.cloud-button {
  background-color: var(--white);
  color: black;
  border-radius: 30px 50px 30px 50px;
  padding: 12px 40px;
  box-shadow: 0 8px 15px rgba(255, 255, 255, 0.8),
              0 0 10px 5px rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-family: 'BarberChop', cursive;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Effet au survol */
.cloud-button:hover,
.cloud-button:focus {
  background-color: #f0f0f0;
  color: #333;
  box-shadow: 0 12px 20px rgba(255, 255, 255, 1),
              0 0 15px 8px rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
  outline: none; /* Retirer le contour de focus par défaut */
}

/* Adaptations pour les petits écrans */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.5rem;              /* Taille du logo/texte réduite */
  }
  .nav-link {
    margin: 0 0.5rem;               /* Espacement horizontal réduit */
  }
  .logoSpectacle {
  max-height: 250px;
  }
  .ImageProgrammation{
      width: 350px;
  }
}