@font-face {
  font-family: 'Windows';
  src: url('font/windows.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  background-image: url("walppaper.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  margin: 0;
  font-family: 'Windows', sans-serif;
  overflow:hidden

}

.container {
  display: flex;
  height: 100vh; /* Change de 100% à 100vh */
  min-height: 100vh; /* Ajoute un min-height pour sécurité */
  position:relative;
}

@property --y {
  syntax: "<percentage>";
  inherits : false;
  initial-value: -1%
}

.snowfall,
.snowfall::before,
.snowfall::after {
  position: absolute;
  inset : 0;
  content : '';
  overflow:hidden;
  pointer-events: none;
  /* background-image:
  radial-gradient(circle at 5%  calc(var(--y)*1),    #fff 3px,  transparent 6px),
  radial-gradient(circle at 65% calc(var(--y)*1.3),  #fff 2px,  transparent 4px),
  radial-gradient(circle at 30% calc(var(--y)*0.8),  #fff 2px,  transparent 4px),
  radial-gradient(circle at 90% calc(var(--y)*1.1),  #fff 3px,  transparent 6px),
  radial-gradient(circle at 45% calc(var(--y)*1.5),  #fff 1.5px, transparent 3px),
  radial-gradient(circle at 15% calc(var(--y)*0.6),  #fff 2.5px, transparent 5px),
  radial-gradient(circle at 75% calc(var(--y)*1.7),  #fff 1.8px, transparent 3.5px),
  radial-gradient(circle at 55% calc(var(--y)*1.2),  #fff 3px,  transparent 6px),
  radial-gradient(circle at 10% calc(var(--y)*1.4),  #fff 2px,  transparent 4px),
  radial-gradient(circle at 85% calc(var(--y)*0.9),  #fff 2.2px, transparent 5px); */
}

.snowfall {
  animation: snowfall 20s linear infinite;
  background-size: 30% 100%;
}

.snowfall::before {
  inset: -4rem 0 0;
  background-size:45% 100%;
  opacity: 0.7;
  animation: 
  snowfall 27s linear infinite,
  wind 27s ease-in-out infinite;

}

.snowfall::after {
  inset: -8rem 0 0;
  background-size:32% 100%;
  opacity: 0.8;
  animation: 
  snowfall 37s linear infinite,
  wind 47s ease-in-out infinite;
}

@keyframes snowfall {
  0% {
    --y: -1%;
  }
  100% {
    --y:101%;
  }
}

@keyframes wind {
  50% {
    translate: 200px;
  }
}

/* Style pour l'overlay du week-end */
.weekend-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekend-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}


.left, .right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Ajoute du padding pour éviter que ça colle aux bords */
  height: 100%;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* S'adapte automatiquement */
  grid-gap: 10px;
  width: 100%;
  max-width: 700px;
  align-content: center;
  padding: 10px;
}

.calendar a img {
  width: 80%; /* Prend toute la largeur de sa cellule */
  max-width: 100px; /* Limite la taille maximale */
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.calendar a img:hover {
  transform: scale(1.05);
}

.calendar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.calendar a span {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  font-family: 'Windows', sans-serif;
  font-size: larger;
  color: white;
  text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
     text-align: center;
}

.calendar a.locked, 
.calendar a.locked * {
  cursor: not-allowed;
}

.right {
  background-color: none;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}

/* Tous les contenus sont masqués sauf celui actif */
.content {
  display: none;
  text-align: center;
}

/* Affiche le contenu ciblé */
:target {
  display: block;
}

/* Message d'accueil visible au départ */
.visible {
  display: block;
}


.win2000-box {
  display: none;
  width: auto;
  max-width: calc(100% - 60px);
  min-width: 300px;
  border: 2px solid #000080;
  background-color: #c0c0c0;
  box-shadow: 4px 4px 0 #36363657, 2px 2px 5px rgba(0,0,0,0.3);
  font-family: 'Windows', sans-serif;
  color: black;
  position: fixed; /* Changé de absolute à fixed pour le drag */
  top: 10%;
  left: 50%;
  transform: translateX(-50%); /* Centre initialement */
  max-height: 100vh; 
  overflow: hidden;
}

.win2000-titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #808080;
  cursor: grab; /* Indique que c'est draggable */
  user-select: none; /* Empêche la sélection de texte pendant le drag */
}

.win2000-titlebar:active {
  cursor: grabbing;
}

.win2000-titlebar .close-btn {
  text-decoration: none;
  color: white;
  background-color: #c0c0c0;
  border: 1px solid #808080;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #404040;
}

.win2000-titlebar .close-btn:hover {
  background-color: #ff0000;
  color: white;
}

.win2000-content {
  background-color: #c0c0c0;
  padding: 15px;
  border-top: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  text-align: center; 
  font-size: 17px;
  justify-content: center; 
  align-items: center; 
}


.win2000-content.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  text-align: left;
}

.colonne1{
  border-right: 2px solid #808080;
}

.colonne2{
  /* 2 lignes */
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 15px; /* Espace entre les colonnes */
}

.ligne2 {
  position: relative;
}

.ligne1, .ligne2 {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre verticalement */
  align-items: center;     /* Centre horizontalement aussi */
}


.ligne2.pixelated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    #c0c0c0 0px,
    #a0a0a0 2px,
    #808080 4px,
    #a0a0a0 6px,
    #c0c0c0 8px
  );
  z-index: 10;
  opacity: 0.95;
}

/* Masquer l'overlay quand la classe est retirée */
.ligne2.revealed::before {
  display: none;
}

.colonne1 img, .colonne2 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.win2000-button {
  display: block;  /* Change de inline-block à block */
  padding: 4px 10px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Windows', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: black;
  background-color: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #404040;
  text-decoration: none;
  cursor: pointer;
  width: fit-content; /* S'adapte au contenu */
}

.win2000-button:hover {
  background-color: #dfdfdf;
}

/* .win2000-content img {
  width: 60%; 
  height: auto;
} */

/* Active uniquement la boîte ciblée */
:target.win2000-box {
  display: block;
  
}


/* Media queries pour petits écrans */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Empile gauche et droite sur mobile */
  }
  
  .left, .right {
    flex: none;
    width: 100%;
  }
  
  .calendar {
    grid-template-columns: repeat(3, 1fr); /* Force 4 colonnes sur mobile */
    max-width: 100%;
  }
  
  .calendar a img {
    width: 100%;
  }

   /* La fenêtre Windows se positionne en fixed sur mobile */
  .win2000-box {
    position: fixed; /* Change en fixed pour mobile */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre la fenêtre */
    margin: 0;
    max-width: calc(100vw - 40px); /* Utilise vw au lieu de % */
    max-height: calc(100vh - 40px);
    width: auto;
    z-index: 1000; /* Z-index très élevé */
  }
  
  .win2000-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .calendar {
    grid-gap: 5px; /* Réduit l'espace entre les cases */
  }
  
  .calendar a span {
    font-size: 0.9rem; /* Réduit la taille du texte */
  }
  
}

/* Pour très grands écrans */
@media (min-width: 1400px) {
  .calendar {
    max-width: 600px;
  }
}