@charset "UTF-8";

/* Import des polices depuis le répertoire fonts */
@font-face {
  font-family: 'Chewy';
  src: url('../fonts/Chewy/Chewy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; /* Poids standard */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; /* Poids pour le texte en gras */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400; /* Italique standard */
  font-style: italic;
}

/* Style global */
html {
  /*background-color: #dfdedc;  Couleur de fond de la page */
	background: linear-gradient(
    to top,
    #6a7c61 0%,     /* vert sapin foncé */
    #2e5a4d 30%,    /* vert doux */
    #f5e9d4 100%    /* beige lumineux */
  );
}

/* Curseur main sur les zones réactives */
area {
  cursor: pointer;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Évite les défilements horizontaux */
  display: flex;
  flex-direction: column; /* Organise les éléments verticalement */
  align-items: center; /* Centre horizontalement tous les enfants */
}

h2, h1, .modal-content h2, .modal-content b {
	font-family: Chewy;
	
}

.close:hover,
.close:focus {
  color: #000; /* Change la couleur au survol ou au focus */
  text-decoration: none;
}

.modal-content p {
	font-family: Montserrat;
}

/* Titre principal */
#calendar-title {
  text-align: center;
  font-size: 2rem; /* Taille standard du titre */
  font-family: Chewy;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  animation: glow 2s infinite alternate; /* Ajoute un effet de lueur */
  margin: 20px auto; /* Ajoute un espace au-dessus et en dessous */
}

/* Animation pour un effet de "glow" */
@keyframes glow {
  0% {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), 0 0 10px #009195, 0 0 20px #009195;
  }
  100% {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), 0 0 20px #009195, 0 0 40px #009195;
  }
}

/* Logo */
.logo {
  position: relative; /* Positionne le logo dans le flux normal */
  display: block;
  margin: 5px auto; /* Ajoute un espacement suffisant autour du logo */
  max-width: 80px; /* Taille maximale du logo */
  height: auto; /* Maintient les proportions du logo */
}

/* Conteneur du calendrier */
#calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre horizontalement le contenu */
  justify-content: flex-start; /* Aligne le contenu en haut */
  margin: 5px auto; /* Ajoute un espacement autour du calendrier */
  max-width: 800px; /* Réduit la largeur maximale */
  padding: 1px;
}

/* Image du calendrier */
#calendar-container img {
  width: 100%;
  max-width: 800px; /* Réduit encore la taille du calendrier */
  height: auto; /* Maintient les proportions */
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}

.modal-content {
  position: relative; /* Définit la position de référence pour les enfants absolus */
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  text-align: center;
  animation: modalZoom 0.3s ease-out;
}

.modal-content span {
  position: absolute; /* Fixe la position par rapport à la modale */
  top: 10px; /* Distance par rapport au haut de la modale */
  right: 10px; /* Distance par rapport à la droite de la modale */
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
  z-index: 2; /* S'assure qu'elle est au-dessus du contenu de la modale */
}

/* Animation pour l'ouverture de la modale */
@keyframes modalZoom {
  0% {
    opacity: 0;
    transform: scale(0.8); /* Taille réduite au début */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Taille normale */
  }
}

/* Média queries */

/* Pour les écrans 1024x768 */
@media screen and (max-width: 1024px) {
  #calendar-title {
    font-size: 1.8rem; /* Réduit légèrement la taille du titre */
    margin: 10px auto; /* Ajoute un espace plus important */
	font-family: Chewy;
  }

  .logo {
    max-width: 70px; /* Réduit la taille du logo */
    margin-bottom: 5px; /* Ajoute un espace supplémentaire sous le logo */
  }

  #calendar-container {
    min-width: 800px; /* Réduit encore la taille du calendrier */
  }

  #calendar-container img {
    min-width: 800px; /* Réduit encore la taille de l'image du calendrier */
  }
}

/* Pour les écrans 768px ou moins */
@media screen and (max-width: 768px) {
  #calendar-title {
    font-size: 1.5rem; /* Taille plus petite pour le titre */
    margin: 10px auto; /* Moins d'espace autour */
	  font-family: Chewy;
  }

  .logo {
    max-width: 60px; /* Taille encore réduite */
    margin-bottom: 15px; /* Réduit l'espace sous le logo */
  }

  #calendar-container {
    min-width: 800px; /* Taille encore plus petite pour le calendrier */
  }

  #calendar-container img {
    min-width: 800px; /* Réduit encore la taille de l'image */
  }
}