/*************************************** Décompte Printemps / Été ********************************************/
:root{
  --se-green:#2e7d32;
  --se-green2:#095228;
  --se-sun:#ffd166;
  --se-sky:#bfe9ff;
  --se-pink:#ff7aa8;
  --se-cream:#f8edd1;
  --se-text:#fff7fb;
}

.se-countdown{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:var(--se-text);
  background: linear-gradient(160deg, #1f7a3a, #0f5a2a 55%, #0c2b18);
  border-radius:24px;
  margin:20px;
  min-height:40px;
}

.se-countdown::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,209,102,.60) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(191,233,255,.50) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 82%, rgba(255,122,168,.35) 0 2px, transparent 3px);
  background-size:220px 220px, 260px 260px, 300px 300px;
}

.se-countdown .se-sub-white{ color:#f8f9fa; }

.se-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1200px;
  display:grid;
  gap:16px;
  justify-items:center;
  text-align:center;
  padding:20px;
}

.se-title{
 
  font-weight:800;
}

.se-sub{
  margin:0;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;
  width:min(100%, 900px);
}

.tile{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border-radius:20px;
  padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
}

.num{
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight:800;
}

.label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  opacity:.9;
}

.se-cta{
  margin-top: 6px;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1.2rem;
  border-radius:16px;
  background:#ffffff1a;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border:1px solid #ffffff35;
}
.se-cta:hover{ background:#ffffff28; }

.petal-canvas, .fx-canvas{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.se-sun{
  position:absolute;
  top:0; left:0;
  font-size: clamp(28px, 5vw, 52px);
  z-index:4;
  pointer-events:none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
}

@media (max-width:720px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}