@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap');

#xmas1{
  --xmas-bg-1:#071b2d;
  --xmas-bg-2:#0b3141;
  --xmas-bg-3:#124936;
  --xmas-card:rgba(255,255,255,.105);
  --xmas-card-border:rgba(255,255,255,.20);
  --xmas-gold:#f3d27a;
  --xmas-gold-soft:#fff0bd;
  --xmas-white:#fff;
  --xmas-muted:rgba(255,255,255,.84);
  --xmas-shadow:0 22px 54px rgba(0,0,0,.30);

  position:relative;
  color:var(--xmas-white);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#xmas1,
#xmas1 *{
  box-sizing:border-box;
}

/* ---------------------------------------------------------
   SCENE — Noël nocturne, magique mais propre
   --------------------------------------------------------- */

#xmas1 .scene{
  position:relative;
  width:min(1080px,100%);
  margin:1.25rem auto;
  padding:clamp(20px,3.4vw,38px);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,231,155,.18),transparent 31%),
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.08),transparent 24%),
    radial-gradient(circle at 92% 16%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(145deg,var(--xmas-bg-1) 0%,var(--xmas-bg-2) 48%,var(--xmas-bg-3) 100%);
  box-shadow:var(--xmas-shadow);
}

/* petites étoiles fixes, très discrètes */
#xmas1 .scene::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(circle at 9% 16%,rgba(255,255,255,.95) 0 1px,transparent 1.7px),
    radial-gradient(circle at 19% 29%,rgba(255,255,255,.60) 0 1px,transparent 1.7px),
    radial-gradient(circle at 31% 11%,rgba(255,255,255,.85) 0 1px,transparent 1.7px),
    radial-gradient(circle at 43% 25%,rgba(255,255,255,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 57% 12%,rgba(255,255,255,.92) 0 1px,transparent 1.7px),
    radial-gradient(circle at 71% 26%,rgba(255,255,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 83% 10%,rgba(255,255,255,.88) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 30%,rgba(255,255,255,.58) 0 1px,transparent 1.7px);
}

#xmas1 .scene > *{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------- */

#xmas1 header{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  margin:0 0 1.35rem;
  padding:1.05rem 1rem 1.15rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

#xmas1 header::before{
  content:"";
  display:block;
  width:74px;
  height:3px;
  margin:0 auto .22rem;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--xmas-gold),transparent);
  box-shadow:0 0 15px rgba(243,210,122,.28);
}

/* IMPORTANT : aucun fond CMS sur le H2 */
#xmas1 h2,
#xmas1 [data-headline],
#xmas1 [data-greeting] h2{
  background:transparent !important;
}

#xmas1 [data-headline]{
  display:block;
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(1.75rem,3.6vw,2.8rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.035em;
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
  text-wrap:balance;
}

#xmas1 [data-subtitle]{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  color:var(--xmas-muted);
  font-size:clamp(.92rem,1.6vw,1.04rem);
  font-weight:600;
  line-height:1.5;
  text-wrap:balance;
}

/* ---------------------------------------------------------
   COMPTE À REBOURS
   --------------------------------------------------------- */

#xmas1 [data-countdown]{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.6vw,16px);
  width:100%;
  margin:0 auto;
}

#xmas1 .unit{
  --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f3d27a"><circle cx="12" cy="12" r="3"/></svg>');

  position:relative;
  min-width:0;
  overflow:hidden;
  padding:1.02rem .75rem .95rem;
  border:1px solid var(--xmas-card-border);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055)),
    rgba(5,18,29,.14);
  box-shadow:
    0 10px 24px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

#xmas1 .unit:hover{
  transform:translateY(-3px);
  border-color:rgba(243,210,122,.43);
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.11);
}

#xmas1 .unit::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  margin:0 auto .58rem;
  color:var(--xmas-gold);
  background:currentColor;
  opacity:.94;
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.20));
}

#xmas1 .unit::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 34%);
}

#xmas1 .unit span{
  position:relative;
  z-index:1;
  display:block;
  margin:0;
  text-align:center;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(2.35rem,5.4vw,3.35rem);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  line-height:.94;
  letter-spacing:-.055em;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.24);
}

#xmas1 .unit small{
  position:relative;
  z-index:1;
  display:block;
  margin-top:.55rem;
  text-align:center;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--xmas-gold-soft);
  opacity:.96;
}

#xmas1 .unit.days{
  --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f3d27a"><path d="M12 2l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7z"/></svg>');
}

#xmas1 .unit.hours{
  --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f3d27a"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 4.5V12l3.7 2.1-.75 1.3L11.5 13V6.5z"/></svg>');
}

#xmas1 .unit.minutes{
  --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f3d27a"><circle cx="12" cy="12" r="9.5"/><path d="M12 7v5l3 1.8" fill="none" stroke="%23071b2d" stroke-width="1.7" stroke-linecap="round"/></svg>');
}

#xmas1 .unit.seconds{
  --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f3d27a"><rect x="5" y="4" width="14" height="16" rx="2.5"/><path d="M9 8h6M9 12h6M9 16h3" stroke="%23071b2d" stroke-width="1.5" stroke-linecap="round"/></svg>');
}

/* ---------------------------------------------------------
   MODE NOËL
   --------------------------------------------------------- */

#xmas1 [data-greeting]{
  margin-top:.9rem;
  padding:1.25rem 1rem;
  border:1px solid rgba(243,210,122,.22);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
}

#xmas1 [data-greeting] h2{
  margin:0 0 .35rem;
  padding:0;
  text-align:center !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--xmas-gold-soft) !important;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}

#xmas1 [data-greeting] p{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,.92);
  font-weight:600;
}

/* Ancien footer décoratif : inutile */
#xmas1 footer{
  display:none !important;
}

/* ---------------------------------------------------------
   NEIGE / LUEURS
   --------------------------------------------------------- */

#xmas1 .snow,
#xmas1 .twinkles{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#xmas1 .snow{z-index:0;}
#xmas1 .twinkles{z-index:0;}

#xmas1 .flake{
  position:absolute;
  top:-8%;
  color:#fff;
  opacity:.68;
  text-shadow:0 0 7px rgba(255,255,255,.30);
  animation:xmasFall linear infinite;
}

#xmas1 .twinkle{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.12) 62%,transparent 72%);
  opacity:.48;
  animation:xmasTwinkle 3.8s ease-in-out infinite;
}

@keyframes xmasFall{
  to{transform:translate3d(10px,110vh,0) rotate(360deg);}
}

@keyframes xmasTwinkle{
  0%,100%{transform:scale(.65);opacity:.18;}
  50%{transform:scale(1.15);opacity:.72;}
}

.hidden{
  display:none !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:900px){
  #xmas1 [data-countdown]{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:767px){
  #xmas1 .scene{
    width:100%;
    margin:1rem auto;
    padding:14px;
    border-radius:22px;
  }

  #xmas1 header{
    margin-bottom:12px;
    padding:.9rem .75rem 1rem;
    border-radius:17px;
  }

  #xmas1 [data-headline]{
    font-size:clamp(1.55rem,7.4vw,2.15rem);
  }

  #xmas1 [data-subtitle]{
    font-size:.9rem;
  }

  #xmas1 [data-countdown]{
    gap:10px;
  }

  #xmas1 .unit{
    padding:.9rem .55rem .82rem;
    border-radius:17px;
  }

  #xmas1 .unit::before{
    width:19px;
    height:19px;
    margin-bottom:.48rem;
  }

  #xmas1 .unit span{
    font-size:clamp(2rem,10.5vw,2.65rem);
  }

  #xmas1 .unit small{
    margin-top:.48rem;
    font-size:.67rem;
    letter-spacing:.085em;
  }
}

@media (prefers-reduced-motion:reduce){
  #xmas1 .flake,
  #xmas1 .twinkle,
  #xmas1 .unit{
    animation:none !important;
    transition:none !important;
  }
}