@font-face {
  font-family: 'Frightmare';
  src:
    url('../style/Frightmare.woff2') format('woff2'),
    url('../style/Frightmare.woff') format('woff'),
    url('../style/Frightmare.otf') format('opentype'), /* fallback */
    url('../../style/Frightmare.otf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* largeur de référence commune à la bannière et aux sections */
:root { --banner-max: 700px; }

form#chimerForm {
  padding-bottom: 12vh;
}

div.logo { z-index: 999; }

#spiderweb-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: auto;
  z-index: 50;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}

#cemetery-overlay {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: auto;
  z-index: 50;
  pointer-events: none;
  opacity: 0.8 !important;
}

#dark-overlay {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  pointer-events: none;
  opacity: 0.5;
}

.cemetery-intro, .included-extra-section, .columns-wrapper {
  z-index: -1 !important;
}

button.halloween-btn {
  font-family: 'Frightmare', sans-serif;
  letter-spacing: 1px;
  font-size: 1.2em;
}

.flying-bat {
  position: fixed;
  width: 100px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

.fly-up {
  bottom: -100px;
  left: calc(10% + 80% * var(--rand));
  animation: flyUp 4s ease-in-out forwards;
}

.fly-diagonal {
  top: calc(10% + 80% * var(--rand));
  left: -100px;
  animation: flyDiagonal 4s ease-in-out forwards;
}

button.halloween-btn {
  padding: 1vw 2vw;
  margin: 4vw 0;
  background: #811c15;
  border: none;
  border-radius: 0.3vw;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

button.halloween-btn:hover {
  background: #811c1568;
  transform: scale(1.05);
  color:#333;
}

@keyframes flyUp {
  0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translateX(-20px) translateY(-25vh) rotate(-5deg); }
  50% { transform: translateX(20px) translateY(-50vh) rotate(5deg); }
  75% { transform: translateX(-15px) translateY(-75vh) rotate(-8deg); }
  100% { transform: translateX(10px) translateY(-100vh) rotate(12deg); opacity: 0; }
}

@keyframes flyDiagonal {
  0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translateX(25vw) translateY(-20px) rotate(5deg); }
  50% { transform: translateX(50vw) translateY(20px) rotate(-5deg); }
  75% { transform: translateX(75vw) translateY(-10px) rotate(8deg); }
  100% { transform: translateX(110vw) translateY(10px) rotate(-12deg); opacity: 0; }
}

@media screen and (min-width: 992px) {
  #cemetery-overlay { display: none !important; }
}

.form-section { min-height: 50vh; padding: 4vw 4vw 0 4vw; }

h3, h5 { padding-bottom: 4vw !important; }

h3 { color: #333 !important; font-weight: 500; }

p.comment { padding-top: 3vw; padding-bottom: 1vw; }

.grid-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.grid-fields label { display: flex; flex-direction: column; }

.stacked-fields label { display: block; margin-bottom: 1rem; }

.stacked-fields label small {
  display: block; color: #555; font-size: 0.85em; margin-top: 2px;
}

.stacked-fields { display: flex; flex-direction: column; gap: 1.2rem; }

.field-block { display: flex; flex-direction: column; max-width: 100%; }

.field-block label { margin-bottom: 0.3rem; font-weight: 500; }

.field-block small { color: #555; font-size: 0.85em; margin-bottom: 0.4rem; }

.field-block input, .field-block select {
  width: 100%; max-width: 100%; padding: 0.4rem; font-size: 1.8vw; box-sizing: border-box;
}

.grid-fields input:not([type="checkbox"]),
.grid-fields select,
.field-block input:not([type="checkbox"]),
.field-block select { width: 100%; }

.grid-fields input:not([type="checkbox"]),
.grid-fields select,
.field-block input:not([type="checkbox"]),
.field-block select {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.grid-fields input:not([type="checkbox"]):focus,
.grid-fields select:focus,
.field-block input:not([type="checkbox"]):focus,
.field-block select:focus {
  border: 2px solid #811c15;
  outline: none;
  box-shadow: 0 0 5px 2px #811c1547;
}

.grid-fields input:not([type="checkbox"]):valid,
.grid-fields select:valid,
.field-block input:not([type="checkbox"]):valid,
.field-block select:valid { background-color: #fdf5f5; }

input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background-color: #811c15; color: white;
}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fdf5f5 inset !important; }

.radio-group { display: flex; gap: 2rem; margin-top: 4vw; }

.custom-radio input[type="radio"] { display: none; }

.custom-radio { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.eyeball {
  display: inline-block; width: 24px; height: 24px;
  background-image: url('../img/events/empty-eyeball.svg');
  background-size: contain; background-repeat: no-repeat;
}

.custom-radio input[type="radio"]:checked + .eyeball {
  background-image: url('../img/events/full-eyeball.svg');
}

.hidden { display: none; }

.checkbox-group {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; width: fit-content; padding-left: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: 20px; height: 20px; appearance: none; -webkit-appearance: none;
  background-color: white; border: 2px solid #333; border-radius: 4px;
  cursor: pointer; position: relative; transition: background 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked {
  background-image: url('../img/events/blood.svg');
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-color: white; border-color: #811c15;
}

.checkbox-group label {
  display: flex; align-items: center; gap: 0.6rem; font-weight: normal; line-height: 1.4;
}

@media (min-width: 768px) {
  .grid-fields input, .grid-fields select, .field-block input, .field-block select { max-width: 100%; }
  .grid-fields label, .field-block { max-width: 100%; }
}

@media (max-width: 768px) {
  .grid-fields { grid-template-columns: 1fr; }
}

/* =========================
   SECTION INTRO/BANNIÈRE
   ========================= */
.cemetery-intro {
  background-color: rgba(255,255,255,.9);
  padding: 2vw;
  text-align: center; 
  position: relative;
}

.cemetery-intro .cemetery-container {
  width: 100%;
  margin: 0 auto;
}

.cemetery-banner {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.event-date {
  font-family: 'Frightmare', sans-serif;
  font-size: 8vw !important;
  color: #111;
  border: 0;
  display: block;
  width: 100%;
  text-align: center;
  margin: 1rem 0 4vw;
  padding-top: 0 !important;
  border-bottom: 2px solid #333;
  position: relative;
}

.event-date::after {
  content: "";
  display: block;
  height: 2px;
  background: #333;
  width: 100%;
  margin-top: .5rem;
}

.event-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
  align-items: flex-start;
  text-align: left;
}

.event-facts li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 2rem;
  color: #222;
}

.event-facts li img { width: 10vw; height: auto; }

/* =========================
   SECTION INCLUDED / EXTRA
   ========================= */
.halloween-title {
  font-family: 'Frightmare', sans-serif;
  font-size: 2.2rem;
  text-align: center;
  border-bottom: 1px solid #333;
  margin: 0 auto 1.5rem;
  padding-bottom: 0.2rem !important;
  width: fit-content;
}

.halloween-end {
  font-family: 'Frightmare', sans-serif;
  font-size: 8vw !important;
  color: #811c15 !important;
  text-align: center;
  padding-bottom: 0 !important;
  padding-top: 6vw;
}

.chimera-end {
  font-family: 'Frightmare', sans-serif;
  font-size: 5vw!important;
  text-align: center;
  border-bottom: 1px solid #333;
  margin: 0 auto 1.5rem;
  padding-bottom: 0.4rem;
  width: fit-content;
  animation: hauntedLaugh 3.5s infinite;
}

@keyframes hauntedLaugh {
  0%, 15%, 30%, 45%, 100% { color: #333; text-shadow: none; }
  5%, 20%, 35% { color: #811c15; text-shadow: 0 0 5px #811c15, 0 0 15px #811c15; }
  50%, 60%, 70%, 80% { color: #811c15; text-shadow: 0 0 10px #811c15, 0 0 25px #811c15; }
  90% { color: #333; text-shadow: none; }
}

.column ul { list-style: none; padding-left: 0; font-size: 1.15rem; line-height: 1.8; }
.column li { margin-bottom: 0.5rem; }

.icon-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; }
.icon-list li img { width: 1.6rem; height: auto; }

@media (max-width: 768px) {
  .column { flex: 1 1 100%; max-width: none !important; }
  .icon-list li { font-size: 0.95rem; }
  .icon-list li img { width: 1.1rem; }
}

.close-form {
  position: absolute; top: 0.5vw; right: 3vw; z-index: 10;
}

.close-form a {
  font-size: 2rem; text-decoration: none; color: #000; border-radius: 50%;
}

.popup {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url('../img/events/cemetery-form.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content h2 { color: #811c15; }

.popup-content {
  background: #1e0b0b;
  color: #FFFAFA;
  padding: 2rem;
  border: 1px solid #811c15;
  border-radius: 12px;
  box-shadow: 0 0 20px #811c15;
  max-width: 90%;
  text-align: center;
  font-family: "Creepster", cursive;
}

.popup-content button {
  font-family: 'Frightmare', sans-serif;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: #811c15;
  color: #FFFAFA;
  letter-spacing: 1.5px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

@keyframes animateSpider {
  0%   { top: -650px; }
  10%  { top: -380px; }
  20%  { top: -420px; }
  30%  { top: -390px; }
  40%  { top: -410px; }
  50%  { top: -388px; }
  60%  { top: -395px; }
  70%  { top: -385px; }
  80%  { top: -390px; }
  90%  { top: -384px; }
  100% { top: -386px; }
}

@keyframes spiderSwing {
  0%   { transform: translateX(-50%) rotate(0deg); }
  20%  { transform: translateX(-50%) rotate(3deg); }
  40%  { transform: translateX(-50%) rotate(-3deg); }
  60%  { transform: translateX(-50%) rotate(2deg); }
  80%  { transform: translateX(-50%) rotate(-2deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

.spider {
  position: absolute;
  top: -650px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  animation: animateSpider 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Balancement lent déclenché après la chute */
.spider.swinging {
  animation: animateSpider 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards,
             spiderSwing 4s ease-in-out infinite;
}

/* Spinner styles for the submit button */
.btn.loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8em;
  height: 0.8em;
  margin: -0.6em 0 0 -0.6em;
  border: 3px solid #333;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.form-section,
.cemetery-intro { width: 100%; box-sizing: border-box; }

.tooltip {
  position: relative;
  cursor: help;
  color: #811c15;
  text-decoration: underline dotted;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 10000;
  bottom: 125%; /* Position au-dessus du texte */
  left: 50%;
  margin-left: -150px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.85rem;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media screen and (min-width: 992px) {
  #spiderweb-overlay { opacity: 0.5 !important; }
  input, select, textarea { position: relative; z-index: 2; }
  div#section1.form-section { padding-top: 0 !important; }
  h1.event-title { padding-bottom: 0 !important; }
  .field-block label, .grid-fields label, .radio-group label { font-size: 1.5vw; }
  .radio-group { margin-top: 1.2vw; }
  .popup-content {
    max-width: 600px;
    min-width: 400px;
  }
.halloween-end { padding-top: 0; }
  .event-facts li img { width: 4vw; height: auto; }
  button.halloween-btn { margin: 1vw 0; }
}