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

/* Copyright discret en bas à droite */
.countdown-250 .copyright {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 11px;                 /* léger et discret */
  color: rgba(255,255,255,0.7);    /* blanc translucide pour rester doux */
  font-style: italic;              /* optionnel pour un effet raffiné */
}

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

  /* 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;
}

/* Variantes de thème (appliquées si l’élément a les deux classes) */
.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;
}

/* 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: 95%;                      /* Laisse une marge intérieure */
  height: 95%;
  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;
}

.autumn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.leaf {
  position: absolute;
  top: -10px;
  width: 10px; height: 10px;
  background: radial-gradient(circle, #ff8c00 0%, #8b4513 70%);
  border-radius: 30%;
  opacity: 0.9;
  animation: leavesFall linear infinite;
}

.leaf:nth-child(1) { left: 20%; animation-duration: 8s; }
.leaf:nth-child(2) { left: 40%; animation-duration: 6s; }
.leaf:nth-child(3) { left: 60%; animation-duration: 9s; }
.leaf:nth-child(4) { left: 80%; animation-duration: 7s; }
.leaf:nth-child(5) { left: 30%; animation-duration: 8s; }

@keyframes leavesFall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(260px) rotate(180deg); }
}

/* Thème */
.countdown-250.theme-automne {
  background: url("../../images/saisons/automne.jpg") center/cover no-repeat;
}