/*
 * Thème temporaire Halloween, chargé par layouts/app.blade.php seulement quand
 * l'interrupteur « theme_halloween » (page Système) est allumé. CSS pur, posé
 * par-dessus app.css/custom.css : rien à recompiler, rien dans les PDF.
 * Volontairement discret : la charte SDA reste, seuls quelques éléments changent.
 * Tout est scopé sur body.theme-halloween. La citrouille (span.hw-citrouille,
 * posée par le layout) déclenche la frayeur de public/js/theme-halloween.js.
 */

/* Liseré de la barre de navigation en orange citrouille */
body.theme-halloween .navbar-sda::before {
  background: linear-gradient(90deg, #ff7a18 0%, #ffb347 60%, #0a3857 100%);
}

/* Citrouille à côté du logo, cliquable */
body.theme-halloween .hw-citrouille {
  display: inline-block;
  margin: 0 10px 0 -8px;
  font-size: 22px;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
  animation: hw-flicker 3s infinite;
  transition: transform .15s ease;
}
body.theme-halloween .hw-citrouille:hover { transform: scale(1.25) rotate(-8deg); }

/* Soulignement des liens et pastille utilisateur en orange */
body.theme-halloween .navbar-sda .navbar-nav .nav-link::after,
body.theme-halloween .navbar-sda .navbar-nav .nav-item.active > .nav-link::after { background: #ff7a18; }
body.theme-halloween .navbar-sda .nav-avatar {
  background: linear-gradient(135deg, #ff7a18, #c2410c);
}

/* Toile d'araignée ancrée en haut à gauche de la page, sous la barre :
   elle reste en haut et part avec le défilement */
body.theme-halloween::before {
  content: "";
  position: absolute;
  top: 53px; left: 0;
  width: 160px; height: 160px;
  pointer-events: none;
  z-index: 0;
  opacity: .25;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%230a3857' stroke-width='1'%3E%3Cpath d='M0 0L160 0M0 0L0 160M0 0L150 60M0 0L60 150M0 0L113 113M0 0L140 30M0 0L30 140'/%3E%3Cpath d='M40 0Q36 20 38 38Q20 36 0 40M80 0Q74 42 78 78Q42 74 0 80M120 0Q110 62 116 116Q62 110 0 120M160 0Q146 82 155 155Q82 146 0 160'/%3E%3C/svg%3E") no-repeat;
}

/* Araignée qui se balade sur la toile (points de passage sur les fils) */
body.theme-halloween::after {
  content: "🕷";
  position: absolute;
  top: 53px; left: 0;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
  animation: hw-balade 22s ease-in-out infinite;
}

@keyframes hw-balade {
  0%   { transform: translate(8px, 8px) rotate(0deg); }
  12%  { transform: translate(70px, 20px) rotate(70deg); }
  18%  { transform: translate(70px, 20px) rotate(70deg); }   /* pause */
  30%  { transform: translate(112px, 112px) rotate(45deg); }
  38%  { transform: translate(112px, 112px) rotate(45deg); } /* pause */
  52%  { transform: translate(40px, 124px) rotate(-30deg); }
  58%  { transform: translate(40px, 124px) rotate(-30deg); } /* pause */
  72%  { transform: translate(18px, 60px) rotate(-100deg); }
  80%  { transform: translate(18px, 60px) rotate(-100deg); } /* pause */
  100% { transform: translate(8px, 8px) rotate(0deg); }
}
@keyframes hw-flicker {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 179, 71, .9)); }
  45%      { filter: drop-shadow(0 0 1px rgba(255, 179, 71, .3)); }
  55%      { filter: drop-shadow(0 0 7px rgba(255, 122, 24, 1)); }
}

/* Frayeur au clic sur la citrouille (élément créé par theme-halloween.js).
   Pas de transform sur body : un body transformé devient le repère des éléments
   fixed, et le calque se centrait alors sur la page entière au lieu de l'écran. */
.hw-frayeur {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  color: #fff;
  cursor: pointer;
  animation: hw-noir .25s steps(2) 3, hw-fondu .5s ease 2s forwards;
}
.hw-frayeur .hw-araignee {
  /* taille bornée par la hauteur d'écran pour rester entière sur un portable */
  font-size: min(360px, 48vh);
  line-height: 1;
  filter: drop-shadow(0 0 40px rgba(255, 60, 0, .9));
  transform-origin: center;
  /* part toute petite du coin de la toile (haut gauche), bondit vers l'écran en grossissant, retombe */
  animation: hw-bond .9s cubic-bezier(.3, 1.8, .5, 1) both;
}
.hw-frayeur .hw-araignee span {
  display: inline-block;
  /* le tremblement est sur un élément enfant pour ne pas écraser le transform du bond */
  animation: hw-tremble .35s linear .9s 3;
}
.hw-frayeur .hw-cri {
  margin-top: 12px;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #ff3c00;
  text-shadow: 0 0 18px rgba(255, 60, 0, .8);
  animation: hw-surgit .4s ease .8s both;
}
@keyframes hw-surgit {
  from { transform: scale(.1) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes hw-bond {
  0%   { transform: translate(-45vw, -45vh) scale(.05) rotate(-60deg); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(2vw, 2vh) scale(1.2) rotate(15deg); }
  75%  { transform: translate(-1vw, -1vh) scale(.95) rotate(-6deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}
@keyframes hw-tremble {
  0%, 100% { transform: translate(0, 0); }
  20%  { transform: translate(-8px, 4px); }
  40%  { transform: translate(8px, -4px); }
  60%  { transform: translate(-6px, -6px); }
  80%  { transform: translate(6px, 6px); }
}
@keyframes hw-noir { from { background: #000; } to { background: #300; } }
@keyframes hw-fondu { to { opacity: 0; visibility: hidden; } }