/* —————————————————————————————————————————
   Countdown 250x250 — styles compacts et centrés
   Place in countdown-250.css
   ————————————————————————————————————————— */

/* Conteneur principal avec image de fond */
.countdown-250 {
  width: 250px;
  height: 250px;
  display: flex;              /* Flex pour centrer le contenu */
  align-items: center;        /* Centre verticalement */
  justify-content: center;    /* Centre horizontalement */

.countdown-250.theme-sapin {
  background: url("../images/noel/avent.gif") center/cover no-repeat;
}

.countdown-250.theme-guirlande {
  background: url("../images/noel/guirlande.jpg") center/cover no-repeat;
}

.countdown-250.theme-neige {
  background: url("../images/noel/neige.jpg") center/cover no-repeat;
}


  /* Coins et effets */
  border-radius: 20px;        /* Coins arrondis visibles */
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  border: 2px solid #ffffff22;
  color: #F7F9FC;
  font-family: system-ui, sans-serif;
  position: relative;         /* Nécessaire pour voile et neige */
  overflow: hidden;
}

/* Voile sombre pour lisibilité du texte */
.countdown-250::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* voile sombre transparent */
  border-radius: 20px;
  z-index: 0;
}

/* Panneau interne (au-dessus du voile) */
.c-panel {
  width: 92%;                 /* Laisse une marge intérieure */
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;        /* Centre horizontalement */
  justify-content: space-evenly; /* Répartit verticalement */
  text-align: center;
  position: relative;
  z-index: 1;                 /* Passe au-dessus du voile */
}

/* Ligne horizontale festive */
.c-line {
  display: flex;
  justify-content: center;
  align-items: flex-start;    /* chiffre au-dessus, label en dessous */
  gap: 4px;                   /* espace réduit entre les blocs */
}

/* Bloc chiffre + label */
.c-unit {
  display: flex;
  flex-direction: column;     /* chiffre au-dessus, mot complet en dessous */
  align-items: center;
  min-width: 46px;            /* largeur fixe pour stabilité */
}

/* Chiffres lumineux et stables */
.c-num {
  font-size: 1.4rem;          /* Compact mais lisible */
  font-weight: 800;
  color: #FFD700;             /* Or lumineux */
  text-shadow: 0 0 10px #FFD700aa, 0 0 20px #FF4500aa;
  font-variant-numeric: tabular-nums; /* Chiffres à largeur fixe */
  font-feature-settings: "tnum";      /* Compatibilité */
  display: inline-block;      /* Empêche le reflow */
  width: 2ch;                 /* Réserve la place pour 2 caractères */
  text-align: center;
  line-height: 1.2;
}

/* Labels sous les chiffres */
.c-tag {
  font-size: 0.65rem;
  color: #F0F0F0;
  margin-top: 2px;
  text-transform: capitalize; /* affiche Jour, Heure, etc. */
  letter-spacing: .05em;
}

/* Séparateurs façon guirlande */
.c-sep {
  font-size: 1.1rem;          /* légèrement réduit */
  color: #FF4500;             /* Rouge chaleureux */
  text-shadow: 0 0 6px #FF6347aa;
  align-self: center;         /* centre les deux-points verticalement */
}

/* Texte journalier */
.c-daily {
  font-size: 0.7rem;
  color: #FFD700;
  margin-top: 6px;
  text-shadow: 0 0 6px #FFD700aa;
}

/* Neige globale */
.snow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;       /* La neige ne bloque pas les clics */
  overflow: hidden;
  z-index: 2;                 /* Passe au-dessus du voile mais derrière le texte */
}

/* Flocons de neige */
.flake {
  position: absolute;
  top: -10px;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff 0%, #fff 60%, transparent 61%);
  border-radius: 50%;
  opacity: 0.9;
  animation: snowfall linear infinite;
}

/* Position et vitesse des flocons */
.flake:nth-child(1) { left: 20%; animation-duration: 6s; animation-delay: 0s; }
.flake:nth-child(2) { left: 40%; animation-duration: 8s; animation-delay: 2s; }
.flake:nth-child(3) { left: 60%; animation-duration: 7s; animation-delay: 1s; }
.flake:nth-child(4) { left: 80%; animation-duration: 9s; animation-delay: 3s; }
.flake:nth-child(5) { left: 10%; animation-duration: 5s; animation-delay: 1s; }
.flake:nth-child(6) { left: 30%; animation-duration: 6s; animation-delay: 2s; }
.flake:nth-child(7) { left: 50%; animation-duration: 7s; animation-delay: 0s; }
.flake:nth-child(8) { left: 70%; animation-duration: 8s; animation-delay: 4s; }

/* Animation de chute */
@keyframes snowfall {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  80%  { transform: translateY(240px) scale(1.1); opacity: 1; }
  100% { transform: translateY(260px) scale(1.1); opacity: 0; }
}