/* Grand encart Halloween – accueil kittle.fr (v1.1.0) */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

.kh {
  --kh-night: #0d0710;
  --kh-plum: #2a0f2e;
  --kh-blood: #a3121c;
  --kh-blood-dark: #7a0b13;
  --kh-pumpkin: #f39a2b;
  --kh-bone: #f2e9dc;
  position: relative;
  box-sizing: border-box;
  margin: 0 0 1.5rem;
  overflow: hidden;
}
/* Ordinateur : même largeur que le carrousel et les blocs de l'accueil */
@media (min-width: 992px) {
  #wrapper > .kh { max-width: 930px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1200px) {
  #wrapper > .kh { max-width: 1110px; }
}

.kh__link,
.kh__link:hover,
.kh__link:focus {
  position: relative;
  display: block;
  min-height: 420px;
  color: var(--kh-bone);
  text-decoration: none;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(122, 20, 60, .45), transparent 60%),
    linear-gradient(180deg, var(--kh-night) 0%, var(--kh-plum) 70%, #1a0810 100%);
}
.kh__link:focus-visible { outline: 3px solid var(--kh-pumpkin); outline-offset: -3px; }

.kh__drips {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  width: 100%;
  height: 48px;
  fill: var(--kh-blood);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.kh__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kh__fog {
  position: absolute;
  left: -50%;
  bottom: 0;
  z-index: 1;
  width: 200%;
  height: 45%;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(220, 210, 230, .16), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgba(220, 210, 230, .12), transparent 50%),
    radial-gradient(ellipse at 90% 85%, rgba(220, 210, 230, .14), transparent 55%);
  animation: kh-fog 28s linear infinite;
  pointer-events: none;
}

.kh__content {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 4.2rem 2rem 2.5rem;
}
.kh__count {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(163, 18, 28, .85);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
}
.kh .kh__title {
  margin: 0 !important;
  font-family: 'Creepster', 'Chiller', fantasy, cursive !important;
  font-size: clamp(2.8rem, 7vw, 5.2rem) !important;
  font-weight: 400 !important;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: none !important;
  color: var(--kh-pumpkin) !important;
  text-shadow: 0 0 18px rgba(243, 154, 43, .55), 0 4px 0 var(--kh-blood-dark);
  animation: kh-flicker 6s infinite;
}
/* « DÉGUISEMENTS » en grand, lisible au premier coup d'œil */
.kh .kh__kicker {
  display: block;
  margin: .2rem 0 .1rem;
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 var(--kh-blood-dark), 0 0 22px rgba(0, 0, 0, .45);
}
.kh .kh__subtitle,
.kh .kh__note {
  font-family: inherit;
}
.kh__subtitle {
  max-width: 540px;
  margin: .6rem 0 1rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--kh-bone);
}
.kh__subtitle strong { color: var(--kh-pumpkin); }
.kh__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.kh__tags li {
  padding: 4px 12px;
  font-size: .85rem;
  color: var(--kh-bone);
  background: rgba(13, 7, 16, .55);
  border: 1px solid rgba(242, 233, 220, .3);
  border-radius: 999px;
}
.kh__cta {
  display: inline-block;
  padding: .9rem 1.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--kh-blood);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(163, 18, 28, .5);
  transition: background .2s ease, transform .2s ease;
}
.kh__link:hover .kh__cta { background: var(--kh-blood-dark); transform: translateY(-2px); }
.kh__note {
  margin: .8rem 0 0;
  font-size: .82rem;
  color: rgba(242, 233, 220, .75);
}

/* Petites animations */
.kh__bat { animation: kh-bat 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.kh__bat--2 { animation-duration: 2.6s; animation-delay: -.8s; }
.kh__bat--3 { animation-duration: 3.8s; animation-delay: -1.6s; }
.kh__win { animation: kh-win 5s steps(1) infinite; }
.kh__win--2 { animation-delay: -2.3s; }

@keyframes kh-fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes kh-bat {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(6px, -6px) scaleY(.7); }
  50% { transform: translate(12px, 0) scaleY(1); }
  75% { transform: translate(6px, 5px) scaleY(.75); }
}
@keyframes kh-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
  96% { opacity: .7; }
}
@keyframes kh-win { 0%, 80% { opacity: 1; } 85% { opacity: .2; } 90% { opacity: 1; } }

/* Téléphone : texte au premier plan, décor allégé */
@media (max-width: 767px) {
  .kh__link, .kh__link:hover, .kh__link:focus { min-height: 380px; }
  .kh__content { padding: 3.4rem 1rem 1.8rem; }
  .kh__scene { opacity: .55; }
  .kh__subtitle { font-size: 1rem; }
  .kh__cta { display: block; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kh__fog, .kh__title, .kh__bat, .kh__win { animation: none; }
  .kh__link:hover .kh__cta { transform: none; }
}