/* ==========================================================================
   Délikat' — édition Halloween
   Chargée après style.css : on redéfinit les couleurs (nuit, os, citrouille)
   et on ajoute le décor (lune, brume, chauves-souris, araignée, toiles, braises).
   ========================================================================== */

:root {
  --paper: #16121a;          /* nuit */
  --white: #1f1824;          /* velours */
  --taupe: #2a1d31;          /* aubergine */
  --taupe-deep: #f2a65a;     /* ambre lisible sur fond sombre */
  --taupe-soft: #3a2a40;
  --champagne: #e8793a;      /* citrouille */
  --champagne-light: #f6c38b;
  --champagne-deep: #f08c45;
  --ink: #f1e9dc;            /* os */
  --ink-82: rgba(241, 233, 220, 0.86);
  --ink-64: rgba(241, 233, 220, 0.7);
  --ink-40: rgba(241, 233, 220, 0.42);
  --ink-08: rgba(241, 233, 220, 0.08);
  --ink-04: rgba(241, 233, 220, 0.05);
  --line: rgba(241, 233, 220, 0.13);

  --pumpkin: #e8793a;
  --pumpkin-hot: #ff9a4d;
  --night-deep: #0e0b11;
  --candle: rgba(255, 170, 80, 0.55);
  color-scheme: dark;
}

::selection { background: var(--pumpkin); color: var(--night-deep); }

body {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(120, 60, 140, 0.18), transparent 60%),
    var(--paper);
}

/* ---------- Boutons : citrouille, lueur de bougie au survol ---------- */
.btn {
  --btn-bg: var(--pumpkin);
  --btn-fg: var(--night-deep);
  font-weight: 600;
}
.btn::before { background: linear-gradient(105deg, transparent 20%, rgba(255, 230, 190, 0.55) 45%, rgba(255, 255, 255, 0.2) 55%, transparent 80%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(255, 170, 80, 0.4), 0 10px 30px -8px var(--candle); animation: candle 1.6s ease-in-out infinite; }
}
@keyframes candle {
  0%, 100% { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(255, 170, 80, 0.4), 0 10px 30px -8px rgba(255, 170, 80, 0.55); }
  45% { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(255, 170, 80, 0.5), 0 12px 36px -6px rgba(255, 150, 60, 0.75); }
  70% { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(255, 170, 80, 0.35), 0 8px 26px -10px rgba(255, 170, 80, 0.45); }
}
.btn--ghost,
.btn--ghost-light,
.hero .btn--ghost,
.cta .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(241, 233, 220, 0.45);
  animation: none;
}
@media (hover: hover) {
  .btn--ghost:hover,
  .btn--ghost-light:hover,
  .hero .btn--ghost:hover,
  .cta .btn--ghost:hover { background: rgba(232, 121, 58, 0.12); box-shadow: inset 0 0 0 1px var(--pumpkin); animation: none; }
}
.btn--light { --btn-bg: var(--pumpkin); --btn-fg: var(--night-deep); }

/* Focus lisible partout sur fond sombre */
:focus-visible { outline-color: var(--pumpkin-hot); }
.hero :focus-visible,
.cta :focus-visible,
.site-header:not(.is-scrolled) :focus-visible { outline-color: var(--pumpkin-hot); }

/* ---------- En-tête ---------- */
.site-header::before { background: rgba(22, 18, 26, 0.86); box-shadow: 0 1px 0 var(--line); }
.nav__link::after { background: var(--pumpkin); }

/* ---------- Héros : nuit, lune et brume ---------- */
.hero {
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(255, 196, 120, 0.1), transparent 60%),
    linear-gradient(180deg, #1b1320 0%, #2a1d31 70%, #2e2034 100%);
}
.hero::before { opacity: 0.5; }
.hero__lead,
.hero .today,
.cta__text,
.cta__alt { color: var(--ink); }
.hero__kicker { color: var(--champagne-light); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.15rem 0.6rem 0.15rem 0.45rem;
  border-radius: var(--pill);
  background: rgba(232, 121, 58, 0.16);
  box-shadow: inset 0 0 0 1px rgba(232, 121, 58, 0.5);
  color: var(--champagne-light);
  font-size: var(--fs-14);
  vertical-align: 0.1em;
}
.hero-badge svg { width: 14px; height: 14px; }
.today__dot { background: var(--pumpkin); box-shadow: 0 0 0 4px rgba(232, 121, 58, 0.2); }
.today[data-state="open"] .today__dot { background: #7fcf8a; box-shadow: 0 0 0 4px rgba(127, 207, 138, 0.2); }

.moon {
  position: absolute;
  top: calc(var(--header-base, 72px) + 8px);
  right: max(4vw, calc((100vw - var(--container)) / 2 - 40px));
  width: clamp(110px, 10vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 38% 36%, #fdf6e6 0%, #f1dcb2 55%, #dcbc86 100%);
  box-shadow: inset -12px -10px 26px rgba(150, 110, 60, 0.28), 0 0 70px 8px rgba(255, 214, 150, 0.16), 0 0 180px 50px rgba(255, 190, 110, 0.07);
  opacity: 0.9;
  z-index: 0;
}
.js .moon { opacity: 0; transform: translateY(20px); }
.is-loaded .moon { opacity: 0.8; transform: none; transition: opacity 2s ease 0.4s, transform 2.4s var(--ease-out) 0.4s; }
.hero__grid { z-index: 1; }

.fog {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 60px;
  height: 180px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background:
    radial-gradient(60% 60% at 20% 60%, rgba(220, 205, 235, 0.22), transparent 70%),
    radial-gradient(50% 70% at 70% 70%, rgba(220, 205, 235, 0.18), transparent 70%),
    radial-gradient(40% 60% at 45% 80%, rgba(220, 205, 235, 0.16), transparent 70%);
  filter: blur(18px);
  animation: fog 26s ease-in-out infinite alternate;
}
.fog--2 { bottom: 40px; opacity: 0.4; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes fog { from { transform: translateX(-4%); } to { transform: translateX(6%); } }

/* Chauves-souris */
.bats { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bat {
  position: absolute;
  left: -60px;
  width: 44px;
  color: #0b080d;
  opacity: 0;
  animation: bat-fly 16s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 130, 0.15));
}
.bat svg { display: block; width: 100%; animation: bat-flap 0.28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.bat:nth-child(1) { top: 16%; animation-delay: 1.5s; }
.bat:nth-child(2) { top: 30%; width: 30px; animation-delay: 6s; animation-duration: 19s; }
.bat:nth-child(3) { top: 10%; width: 36px; animation-delay: 11s; animation-duration: 14s; }
@keyframes bat-fly {
  0% { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
  4% { opacity: 1; }
  25% { transform: translate(28vw, -40px) rotate(6deg); }
  50% { transform: translate(55vw, 30px) rotate(-6deg); }
  75% { transform: translate(82vw, -20px) rotate(5deg); }
  96% { opacity: 1; }
  100% { transform: translate(110vw, 10px) rotate(-3deg); opacity: 0; }
}
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* Araignée suspendue : descend au chargement, balance, remonte au survol */
.spider {
  position: absolute;
  top: var(--header-base, 72px);
  left: calc(50% + 7px);
  z-index: 3;
  width: 36px;
  transform-origin: 50% 0;
  animation: spider-sway 5s ease-in-out infinite;
  pointer-events: none;
}
.spider__thread {
  display: block;
  width: 1px;
  height: var(--drop, 115px);
  margin: 0 auto;
  background: linear-gradient(rgba(241, 233, 220, 0.1), rgba(241, 233, 220, 0.45));
  transition: height 1.4s var(--ease-out);
}
.js .spider__thread { height: 0; }
.is-loaded .spider__thread { height: var(--drop, 115px); transition-delay: 1.6s; }
.spider.is-climbing .spider__thread { height: 24px; transition-duration: 0.6s; transition-delay: 0s; }
.spider svg { display: block; width: 36px; margin-top: -2px; color: #0b080d; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.spider .spider__eye { fill: var(--pumpkin-hot); }
@keyframes spider-sway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }

/* Toiles d'araignée dans les coins */
.web {
  position: absolute;
  width: clamp(120px, 16vw, 220px);
  color: rgba(241, 233, 220, 0.16);
  pointer-events: none;
  z-index: 1;
}
.web--tl {
  top: var(--header-base, 72px);
  left: 0;
  width: min(180px, calc((100vw - var(--container)) / 2 + var(--gutter) - 12px));
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 78%);
  mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 78%);
}
@media (max-width: 1279px) { .web--tl { display: none; } }
.web--tr { top: 0; right: 0; transform: scaleX(-1); }
.web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Braises qui suivent la souris */
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* Bandeau défilant : séparateur en citrouille */
.hero__band { --band-line: rgba(232, 121, 58, 0.55); background: rgba(10, 8, 12, 0.35); }
.marquee__item { color: var(--ink); }
.marquee__item::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: var(--pumpkin);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c.2-1.6 1-2.8 2.4-3.5l.6 1c-1 .6-1.5 1.4-1.6 2.6 4.8.2 7.6 3.4 7.6 7.4 0 4.3-3.3 7.5-8.9 7.5S3 17.8 3 13.5C3 9.4 5.9 6.2 12 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c.2-1.6 1-2.8 2.4-3.5l.6 1c-1 .6-1.5 1.4-1.6 2.6 4.8.2 7.6 3.4 7.6 7.4 0 4.3-3.3 7.5-8.9 7.5S3 17.8 3 13.5C3 9.4 5.9 6.2 12 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.marquee-toggle { background: #2a1d31; color: var(--ink); box-shadow: 0 0 0 1px rgba(241, 233, 220, 0.3) inset, -24px 0 24px 4px #2a1d31; }
@media (hover: hover) { .marquee-toggle:hover { background: #3a2a40; } }

/* Photos : cadre sombre, lueur au survol */
.hero__photo { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 121, 58, 0.25); }
.shot__button { border-color: var(--line); transition: box-shadow 0.5s var(--ease-out), border-color 0.4s; }
@media (hover: hover) {
  .shot__button:hover { border-color: rgba(232, 121, 58, 0.6); box-shadow: 0 0 0 1px rgba(232, 121, 58, 0.35), 0 18px 40px -16px rgba(255, 140, 60, 0.45); }
}
.shot__tag { background: rgba(22, 18, 26, 0.85); color: var(--ink); }
.shot__tag--after { background: var(--pumpkin); color: var(--night-deep); }
.price-block,
.map { border-color: var(--line); }

/* Titres de section : légère lueur */
.section-title,
.panel__title,
.cta__title { text-shadow: 0 0 28px rgba(232, 121, 58, 0.18); }

/* Tarifs */
.price__leader { background-image: radial-gradient(circle, rgba(241, 233, 220, 0.35) 0.8px, transparent 1.2px); }
.tab[aria-selected="true"] { color: var(--champagne-light); }
.tabs__indicator { background: var(--pumpkin); }

/* Puces sélectionnées, badges, icônes */
.chip[aria-pressed="true"],
.choice input:checked + span { background: rgba(232, 121, 58, 0.14); border-color: var(--pumpkin); color: var(--champagne-light); box-shadow: inset 0 0 0 1px var(--pumpkin); }
.choice input:checked + span .swatch { box-shadow: 0 0 0 2px var(--night-deep), 0 0 0 3px rgba(232, 121, 58, 0.6); }
.hours tr.is-today th::after { background: var(--pumpkin); color: var(--night-deep); }
.faq__item[open] .faq__icon { background: var(--pumpkin); border-color: var(--pumpkin); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--night-deep); }
@media (hover: hover) { a.contact-item:hover .contact-item__icon { background: var(--pumpkin); border-color: var(--pumpkin); color: var(--night-deep); } }
.icon-btn { background: var(--white); color: var(--ink); }
@media (hover: hover) { .icon-btn:hover { background: var(--taupe-soft); } }
.check input { accent-color: var(--pumpkin); }

/* Champs */
.input { border-color: rgba(241, 233, 220, 0.4); background: #140f18; color: var(--ink); }
.input::placeholder { color: rgba(241, 233, 220, 0.6); }
@media (hover: hover) { .input:hover { border-color: rgba(241, 233, 220, 0.6); } }
.input:focus { border-color: var(--pumpkin); background: #1a1420; box-shadow: 0 0 0 3px rgba(232, 121, 58, 0.25); }
.form-error { background: #3b1a14; color: #ffd2c2; box-shadow: inset 0 0 0 1px rgba(255, 140, 110, 0.4); }

/* Plan : version nuit */
.map iframe { filter: invert(0.9) hue-rotate(180deg) sepia(0.25) saturate(1.2) brightness(0.9) contrast(0.95); }
@media (hover: hover) { .map:hover iframe { filter: invert(0.9) hue-rotate(180deg) saturate(1.4) brightness(1); } }
.map__pin { background: var(--pumpkin); box-shadow: 0 0 0 6px rgba(232, 121, 58, 0.25); }

/* Avis */
.quote::before { color: var(--pumpkin); }
.stars__base { color: #3a2a40; }

/* Appel final : aubergine, braises qui montent */
.cta { background: linear-gradient(180deg, #2a1d31, #1d1423); }
.cta .link { color: var(--champagne-light); }
.cta__mark { opacity: 0.1; }
.rising-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rising-embers span {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pumpkin-hot);
  box-shadow: 0 0 8px 2px rgba(255, 150, 60, 0.6);
  opacity: 0;
  animation: rise 9s linear infinite;
}
.rising-embers span:nth-child(1) { left: 12%; animation-delay: 0s; }
.rising-embers span:nth-child(2) { left: 28%; animation-delay: 2.5s; animation-duration: 11s; }
.rising-embers span:nth-child(3) { left: 46%; animation-delay: 5s; }
.rising-embers span:nth-child(4) { left: 63%; animation-delay: 1.2s; animation-duration: 12s; }
.rising-embers span:nth-child(5) { left: 81%; animation-delay: 3.8s; }
.rising-embers span:nth-child(6) { left: 92%; animation-delay: 7s; animation-duration: 10s; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(18px, -45vh); }
  90% { opacity: 0.6; }
  100% { transform: translate(-12px, -90vh); opacity: 0; }
}

/* Pied de page */
.site-footer { background: var(--night-deep); }

/* Barre mobile */
.mobile-bar { background: rgba(14, 11, 17, 0.94); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 121, 58, 0.3); }

/* Cartes cadeaux : styles de nuit */
.giftcard {
  --gc-bg: var(--pumpkin);
  --gc-fg: var(--night-deep);
  --gc-soft: rgba(14, 11, 17, 0.9);
  --gc-line: rgba(14, 11, 17, 0.35);
  background: radial-gradient(120% 90% at 85% 10%, #f59a55, var(--pumpkin) 55%, #d86c2d);
}
.giftcard--creme {
  --gc-fg: #1d1423; --gc-soft: rgba(29, 20, 35, 0.8); --gc-line: rgba(232, 121, 58, 0.7);
  background: radial-gradient(120% 90% at 85% 10%, #fffaf0, #efe4d2);
}
.giftcard--noir {
  --gc-fg: var(--champagne-light); --gc-soft: rgba(246, 195, 139, 0.8); --gc-line: rgba(232, 121, 58, 0.55);
  background: radial-gradient(120% 90% at 85% 10%, #3a2440, #16121a 65%);
}
.giftcard__message { color: var(--ink); border-left-color: var(--pumpkin); }
.swatch--taupe { background: var(--pumpkin); }
.swatch--creme { background: #efe4d2; }
.swatch--noir { background: #16121a; box-shadow: inset 0 0 0 2px var(--pumpkin); }

/* Accessibilité : moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .bats, .embers, .rising-embers, .fog { display: none; }
  .spider { animation: none; }
  .btn:hover { animation: none; }
}
@media (max-width: 860px) {
  .spider { left: auto; right: 18px; }
  .web--tl { display: none; }
  .moon { width: 110px; top: calc(var(--header-base, 64px) + 4px); right: 12px; opacity: 0.55; }
  .is-loaded .moon { opacity: 0.55; }
}
@media print {
  .moon, .fog, .bats, .spider, .web, .embers, .rising-embers { display: none !important; }
}

/* Titres du pied de page (le « blanc » d'origine est devenu sombre) */
.footer-title { color: var(--ink); }

/* Petits écrans : la lune se fait discrète au-dessus du titre, les araignées ne masquent pas le texte.
   La pastille « Édition Halloween » devient une simple citrouille : le surtitre tient sur une ligne et la photo du haut reste entière. */
@media (max-width: 640px) {
  .moon { width: 64px; top: calc(var(--header-base, 64px) + 2px); right: 6px; }
  .spider,
  .hdeco.hdeco--spider { display: none; }
  .hero-badge { font-size: 0; gap: 0; padding: 0.3rem; margin-left: 0.45rem; vertical-align: -0.2em; }
}
/* Très petits écrans : la lune passerait sous la citrouille, on s'en passe */
@media (max-width: 349px) { .moon { display: none; } }

/* Monogramme plus discret : il ne concurrence plus le bouton d'appel */
.is-loaded .hero__monogram { opacity: 0.45; }

/* Champ en erreur : framboise, bien distinct du focus citrouille */
.input[aria-invalid="true"],
.input[aria-invalid="true"]:hover,
.input[aria-invalid="true"]:focus { border-color: #ff5c7a; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.3); outline-color: #ff5c7a; }

/* Fenêtres (visionneuse, mentions, conditions) : fond assombri et bord visible */
.lightbox::backdrop, .legal::backdrop { background: rgba(8, 6, 10, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox, .legal { box-shadow: 0 0 0 1px rgba(232, 121, 58, 0.35), 0 40px 90px -20px rgba(0, 0, 0, 0.9); }

/* Impression : on revient aux couleurs claires d'origine (la carte cadeau garde son style de nuit) */
@media print {
  :root { color-scheme: light; --paper: #f6f1ea; --white: #fffdfa; --taupe: #a89484; --taupe-deep: #6f5d51; --taupe-soft: #e4d9ce; --champagne-deep: #8f6f36; --ink: #1f1b18; --ink-82: rgba(31, 27, 24, 0.82); --ink-64: rgba(31, 27, 24, 0.66); --ink-40: rgba(31, 27, 24, 0.4); --ink-08: rgba(31, 27, 24, 0.08); --ink-04: rgba(31, 27, 24, 0.04); --line: #e7dfd4; }
  .section-title, .panel__title, .cta__title { text-shadow: none; }
  .hero__kicker, .hero-badge, .tab[aria-selected="true"] { color: var(--ink); }
  body.thanks-page .print-area { --ink: #1f1b18; --ink-64: rgba(31, 27, 24, 0.66); color: #1f1b18; }
}

/* ==========================================================================
   Décor dans toute la page
   ========================================================================== */

/* Citrouilles et bougies posées sur le filet des titres de section */
.section-head { position: relative; }
.hdeco {
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  transform: translateY(-100%);
  pointer-events: none;
}
.hdeco--right { right: clamp(0px, 4vw, 48px); }
.js .hdeco { opacity: 0; }
.hdeco.is-in { opacity: 1; animation: deco-pop 0.9s var(--ease-out) both; }
@keyframes deco-pop {
  0% { opacity: 0; transform: translateY(-100%) translateY(14px) scale(0.85); }
  60% { opacity: 1; transform: translateY(-100%) translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: translateY(-100%); }
}

/* Citrouille-lanterne : lueur qui vacille, se dandine et s'illumine au survol */
.lantern {
  display: block;
  width: var(--s, 48px);
  height: auto;
  margin-bottom: -2px;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px rgba(255, 150, 60, 0.35));
  animation: lantern-glow 3.2s ease-in-out infinite;
  transition: transform 0.4s var(--ease-out);
}
.lantern--plain { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); animation: none; }
.lantern:nth-child(2) { animation-delay: -1.3s; }
@keyframes lantern-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 150, 60, 0.35)) brightness(1); }
  40% { filter: drop-shadow(0 0 12px rgba(255, 160, 70, 0.6)) brightness(1.08); }
  55% { filter: drop-shadow(0 0 5px rgba(255, 150, 60, 0.3)) brightness(0.96); }
}
@media (hover: hover) {
  .lantern:hover { animation: lantern-wiggle 0.7s ease-in-out, lantern-glow 3.2s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255, 170, 80, 0.85)) brightness(1.15); }
}
.lantern.is-wiggling { animation: lantern-wiggle 0.7s ease-in-out; }
@keyframes lantern-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  45% { transform: rotate(6deg); }
  70% { transform: rotate(-3deg); }
}

/* Bougies : flamme qui danse */
.candle { display: block; width: 23px; height: auto; margin-bottom: -1px; overflow: visible; }
.candle__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flame 1.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(255, 190, 90, 0.9));
}
.candle:nth-child(2) .candle__flame { animation-duration: 1.1s; animation-delay: -0.4s; }
.candle:nth-child(3) .candle__flame { animation-duration: 1.7s; animation-delay: -0.8s; }
@keyframes flame {
  0% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
  30% { transform: scale(0.94, 1.08) skewX(3deg); }
  60% { transform: scale(1.04, 0.95) skewX(-4deg); opacity: 0.9; }
  100% { transform: scale(0.97, 1.05) skewX(2deg); opacity: 1; }
}

/* Petite araignée accrochée au filet de « Bon à savoir » */
.hdeco--spider {
  left: 58%;
  flex-direction: column;
  align-items: center;
  transform: none;
  transform-origin: 50% 0;
  animation: spider-sway 4.5s ease-in-out infinite;
}
.hdeco--spider.is-in { animation: spider-sway 4.5s ease-in-out infinite; }
.hdeco--spider svg { width: 26px; color: #0b080d; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.hspider__thread { width: 1px; height: 0; background: linear-gradient(rgba(241, 233, 220, 0.15), rgba(241, 233, 220, 0.5)); transition: height 1.6s var(--ease-out); }
.hdeco--spider.is-in .hspider__thread { height: 46px; }

/* Fantôme qui sort de derrière la carte cadeau (l'aperçu est déjà « sticky », donc positionné) */
.ghost {
  position: absolute;
  top: 0;
  right: 14%;
  z-index: -1;
  width: 74px;
  opacity: 0.94;
  transform: translateY(40%) rotate(0deg);
  transition: transform 0.9s var(--ease-out);
  filter: drop-shadow(0 0 18px rgba(230, 215, 255, 0.35));
}
.gift__preview.ghost-peek .ghost { transform: translateY(-62%) rotate(-8deg); }
@media (hover: hover) {
  .gift__preview:hover .ghost { transform: translateY(-62%) rotate(-8deg); animation: ghost-float 2.4s ease-in-out 0.9s infinite; }
}
@keyframes ghost-float { 50% { transform: translateY(-70%) rotate(-5deg); } }

/* Feuilles d'automne qui tombent doucement */
#avantages, #avis { position: relative; }
.leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#avantages .container, #avis .container { position: relative; z-index: 1; }
.leaves i {
  position: absolute;
  top: -40px;
  width: 22px; height: 22px;
  background: #c8552a;
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 4.2 3-2-.6 3.6 3.8-.6-2 3.2 3.2 1.4-3.6 1.6.8 2.2-3.4-.6L12 22l-1.8-7.6-3.4.6.8-2.2-3.6-1.6 3.2-1.4-2-3.2 3.8.6-.6-3.6 3 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 4.2 3-2-.6 3.6 3.8-.6-2 3.2 3.2 1.4-3.6 1.6.8 2.2-3.4-.6L12 22l-1.8-7.6-3.4.6.8-2.2-3.6-1.6 3.2-1.4-2-3.2 3.8.6-.6-3.6 3 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: leaf-fall 14s linear infinite;
}
.leaves i:nth-child(1) { left: 6%; animation-delay: 0s; }
.leaves i:nth-child(2) { left: 18%; animation-delay: 4s; background: #e8793a; width: 16px; height: 16px; animation-duration: 17s; }
.leaves i:nth-child(3) { left: 34%; animation-delay: 9s; background: #a3401a; }
.leaves i:nth-child(4) { left: 52%; animation-delay: 2s; background: #d9a441; width: 18px; height: 18px; animation-duration: 16s; }
.leaves i:nth-child(5) { left: 68%; animation-delay: 7s; }
.leaves i:nth-child(6) { left: 82%; animation-delay: 11s; background: #e8793a; width: 14px; height: 14px; animation-duration: 19s; }
.leaves i:nth-child(7) { left: 93%; animation-delay: 5s; background: #a3401a; animation-duration: 15s; }
@keyframes leaf-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.55; }
  25% { transform: translate(30px, 25vh) rotate(90deg); }
  50% { transform: translate(-20px, 50vh) rotate(200deg); }
  75% { transform: translate(35px, 75vh) rotate(290deg); }
  92% { opacity: 0.45; }
  100% { transform: translate(0, 100vh) rotate(380deg); opacity: 0; }
}

/* Toile fine dans l'angle des blocs de tarifs */
.price-block { position: relative; }
.price-block::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f1e9dc' stroke-opacity='.28' stroke-width='.8'%3E%3Cpath d='M64 0L20 0M64 0L28 22M64 0L42 36M64 0L64 44M64 0L50 30'/%3E%3Cpath d='M34 0Q44 8 42 12Q50 12 52 18Q58 18 64 20M46 0Q52 4 51 8Q56 8 57 11Q61 11 64 12M24 0Q36 12 33 17Q44 20 45 27Q54 27 64 30'/%3E%3C/svg%3E") top right / contain no-repeat;
  border-top-right-radius: var(--radius-m);
}

/* Silhouette nocturne en haut du pied de page */
.site-footer { position: relative; }
.skyline {
  position: absolute;
  left: 0;
  top: 1px;
  width: 100%;
  height: clamp(70px, 9vw, 150px);
  transform: translateY(-100%);
  pointer-events: none;
}
.skyline__lanterns svg { filter: drop-shadow(0 0 8px rgba(255, 150, 60, 0.6)); }
.skyline__lanterns svg:first-child { animation: lantern-glow 3s ease-in-out infinite; }

@media (max-width: 860px) {
  .hdeco { transform: translateY(-100%) scale(0.8); transform-origin: 100% 100%; }
  .hdeco.is-in { animation: none; opacity: 1; }
  .hdeco--spider { left: auto; right: 30%; transform: none; }
  .ghost { width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdeco { opacity: 1 !important; animation: none !important; }
  .lantern, .candle__flame, .hdeco--spider, .skyline__lanterns svg { animation: none !important; }
  .hspider__thread { height: 46px; }
  .leaves { display: none; }
  .ghost { transition: none; }
}
@media print {
  .hdeco, .ghost, .leaves, .skyline, .price-block::after { display: none !important; }
}
.bat-flight path { transform-box: fill-box; transform-origin: 50% 40%; animation: bat-flap 0.14s ease-in-out infinite alternate; }

/* Feuilles et araignée plus visibles */
.leaves i { width: 30px; height: 30px; }
.leaves i:nth-child(2) { width: 24px; height: 24px; }
.leaves i:nth-child(4) { width: 26px; height: 26px; }
.leaves i:nth-child(6) { width: 22px; height: 22px; }
@keyframes leaf-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.75; }
  25% { transform: translate(40px, 25vh) rotate(90deg); }
  50% { transform: translate(-25px, 50vh) rotate(200deg); }
  75% { transform: translate(45px, 75vh) rotate(290deg); }
  92% { opacity: 0.6; }
  100% { transform: translate(0, 100vh) rotate(380deg); opacity: 0; }
}
.hdeco--spider svg { width: 38px; }
.hdeco--spider.is-in .hspider__thread { height: 64px; }
@media (prefers-reduced-motion: reduce) { .hspider__thread { height: 64px; } }

/* ==========================================================================
   Toiles d'araignée dans les sections
   ========================================================================== */
.section { position: relative; }
.section > .container { position: relative; z-index: 1; }

.web--sec {
  position: absolute;
  z-index: 0;
  width: clamp(140px, 17vw, 250px);
  color: rgba(241, 233, 220, 0.17);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 40%, transparent 80%);
  mask-image: radial-gradient(circle at 0 0, #000 40%, transparent 80%);
  animation: web-breeze 9s ease-in-out infinite;
  transition: color 0.8s;
}
.web--small { width: clamp(100px, 11vw, 160px); }
/* Chaque coin : on retourne la toile, le fondu part toujours de l'angle */
.web--c-tl { top: 0; left: 0; transform-origin: 0 0; }
.web--c-tr { top: 0; right: 0; transform: scaleX(-1); transform-origin: 100% 0; --flip: scaleX(-1); }
.web--c-bl { bottom: 0; left: 0; transform: scaleY(-1); transform-origin: 0 100%; --flip: scaleY(-1); }
.web--c-br { bottom: 0; right: 0; transform: scale(-1, -1); transform-origin: 100% 100%; --flip: scale(-1, -1); }
@keyframes web-breeze {
  0%, 100% { transform: var(--flip, scale(1)) rotate(0deg); }
  50% { transform: var(--flip, scale(1)) rotate(1.2deg) scale(1.01); }
}
/* La toile capte la lumière quand on passe sur la section (à la souris : au doigt, l'effet resterait collé) */
@media (hover: hover) { .section:hover .web--sec { color: rgba(246, 195, 139, 0.26); } }

/* Grande toile ronde suspendue dans la marge des questions */
.orbweb {
  position: absolute;
  top: 0;
  left: max(8px, calc((100vw - var(--container)) / 2 - 150px));
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(120px, 11vw, 170px);
  color: rgba(241, 233, 220, 0.2);
  pointer-events: none;
  transform-origin: 50% 0;
  animation: spider-sway 7s ease-in-out infinite;
}
.orbweb__thread { width: 1px; height: clamp(60px, 9vw, 130px); background: linear-gradient(rgba(241, 233, 220, 0.05), rgba(241, 233, 220, 0.35)); }
.orbweb svg { width: 100%; height: auto; margin-top: -4px; }
@media (max-width: 1500px) { .orbweb { display: none; } }

/* Coin du plan */
.map { position: relative; }
.web--map {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: 110px;
  color: rgba(241, 233, 220, 0.4);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 85%);
  mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 85%);
}

/* Petites toiles au coin de quelques photos */
.web--shot {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 34%;
  max-width: 120px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 85%);
  mask-image: radial-gradient(circle at 0 0, #000 45%, transparent 85%);
  transition: opacity 0.5s;
}
.web--shot-tl { left: 0; }
.web--shot-tr { right: 0; transform: scaleX(-1); }
@media (hover: hover) { .shot__button:hover .web--shot { opacity: 0.35; } }

@media (max-width: 860px) {
  .web--sec { width: 120px; }
  .web--small { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .web--sec, .orbweb { animation: none; }
}
@media print {
  .web--sec, .orbweb, .web--map, .web--shot { display: none !important; }
}

/* Toiles plus visibles */
.web--sec {
  width: clamp(180px, 22vw, 320px);
  color: rgba(241, 233, 220, 0.3);
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 96%);
  mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 96%);
}
.web--sec path { stroke-width: 1.15; }
.web--small { width: clamp(130px, 14vw, 200px); }
@media (hover: hover) { .section:hover .web--sec { color: rgba(246, 195, 139, 0.42); } }
.orbweb { color: rgba(241, 233, 220, 0.34); }
.web--shot {
  width: 44%;
  max-width: 150px;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.web--shot path { stroke-width: 1.4; }
.web--map { width: 140px; color: rgba(241, 233, 220, 0.6); }
@media (max-width: 860px) {
  .web--sec { width: 150px; }
  .web--small { width: 110px; }
}

/* Grande toile ronde : dans la colonne vide sous le titre des questions */
.faq { position: relative; }
.orbweb {
  display: flex;
  top: clamp(90px, 8vw, 120px);
  left: clamp(0px, 3vw, 40px);
  width: clamp(150px, 15vw, 210px);
  color: rgba(241, 233, 220, 0.36);
}
.orbweb__thread { height: clamp(50px, 6vw, 90px); }
@media (max-width: 860px) { .orbweb { display: none; } }

/* Correctif : les toiles retournées pivotent autour de leur centre (sinon elles sortent de l'écran) */
.web--c-tr,
.web--c-bl,
.web--c-br { transform-origin: 50% 50%; }

/* ==========================================================================
   Éléments ajoutés au site (octobre 2026), passés aux couleurs de la nuit
   ========================================================================== */

/* Reflet au toucher sur les liens : citrouille plutôt que taupe */
html { -webkit-tap-highlight-color: rgba(232, 121, 58, 0.22); }

/* Les toiles des coins ondulent (rotation) : sans cette coupe, elles élargissaient la page de quelques pixels */
.section { overflow-x: clip; }

/* Idées de cadeau : comme les puces de montant, la citrouille marque le choix */
@media (hover: hover) { .gift-idea:hover { border-color: rgba(232, 121, 58, 0.6); } }
.gift-idea[aria-pressed="true"] { background: rgba(232, 121, 58, 0.14); border-color: var(--pumpkin); color: var(--champagne-light); box-shadow: inset 0 0 0 1px var(--pumpkin); }
.gift-idea[aria-pressed="true"] .gift-idea__price { color: var(--champagne-light); }

/* Case Instagram de la galerie : même lueur au survol que les photos */
@media (hover: hover) {
  .gallery__more:hover { border-color: rgba(232, 121, 58, 0.6); box-shadow: 0 0 0 1px rgba(232, 121, 58, 0.35), 0 18px 40px -16px rgba(255, 140, 60, 0.45); }
}

/* Photos des univers (bande défilante) : cadre de nuit, vignette affichée cerclée de citrouille */
.showcase__frame { box-shadow: 0 22px 46px -26px rgba(0, 0, 0, 0.85); }
.showcase__track { scrollbar-color: rgba(232, 121, 58, 0.55) transparent; }
.showcase__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--pumpkin), 0 0 16px -2px rgba(255, 140, 60, 0.55); }
@media (hover: hover) { .showcase__thumb:not([aria-current="true"]):hover { box-shadow: 0 0 0 1px rgba(232, 121, 58, 0.6); } }
/* focus clavier sur une vignette : couleur os, sinon il se confondrait avec le cercle citrouille de la photo affichée */
.showcase__thumb:focus-visible { outline-color: var(--ink); }
/* pastille compteur « 2 / 12 » et flèches : de nuit, comme les étiquettes avant/après (le blanc d'origine rendait l'os illisible) */
.showcase__bar { background: rgba(22, 18, 26, 0.85); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(232, 121, 58, 0.35); }
@media (hover: hover) { .showcase__arrow:not(:disabled):hover { background: rgba(232, 121, 58, 0.2); } }
.showcase__arrow:active:not(:disabled) { background: rgba(232, 121, 58, 0.28); }

/* Contraste élevé (Windows) : les sélections reprennent les couleurs du système, pas la citrouille */
@media (forced-colors: active) {
  .tabs__indicator { background: Highlight; }
  .chip[aria-pressed="true"],
  .gift-idea[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .gift-idea[aria-pressed="true"] .gift-idea__price { color: HighlightText; }
}

/* Boutons Instagram / Facebook de la galerie : fond de nuit plein, la toile du coin passe derrière leur texte */
#realisations .gallery-foot .btn--ghost { --btn-bg: var(--paper); }
@media (hover: hover) { #realisations .gallery-foot .btn--ghost:hover { background: linear-gradient(rgba(232, 121, 58, 0.12), rgba(232, 121, 58, 0.12)) var(--paper); } }
/* Avis : toile du coin plus petite, elle ne touche plus la note sous le score ni l'invitation à faire glisser */
#avis .web--c-bl { width: clamp(80px, 13vw, 190px); }

/* Albums de « Réalisations » : même lueur citrouille que les photos, toile au coin de quelques couvertures */
@media (hover: hover) {
  .album__open:hover .album__cover { box-shadow: 10px -10px 0 -1px var(--white), 10px -10px 0 0 rgba(232, 121, 58, 0.45), 0 18px 40px -16px rgba(255, 140, 60, 0.45); }
  .album__open:hover .web--shot { opacity: 0.35; }
}
.album__open:focus-visible .album__cover { outline-color: var(--pumpkin); }
.album__cover .web--shot { border-top-right-radius: var(--radius-m); }