:root {
  color-scheme: dark;
  --nuit: #0b0710;
  --ciel-haut: #22103a;
  --ciel-bas: #140a22;
  --colline: #1c1030;
  --surface: #1a1224;
  --texte: #f3eadf;
  --os: #e9dcc8;
  --lavande: #c4b5d6;
  --citrouille: #ff7a1a;
  --braise: #ffb347;
  --bave: #9be15d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --frisson: "Creepster", var(--serif);
  --rangee: 140px;  /* hauteur minimale d'une rangée ; elle s'étire pour remplir la largeur */
  --ecart: 4px;
}

@media (min-width: 640px) {
  :root { --rangee: 180px; --ecart: 6px; }
}

@media (min-width: 1200px) {
  :root { --rangee: 220px; }
}

/* Creepster, de Font Diner — licence SIL OFL 1.1 (polices/LICENCE-Creepster-OFL.txt) */
@font-face {
  font-family: "Creepster";
  src: url("polices/creepster-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html:has(.visionneuse[open]) { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texte);
  background: var(--nuit);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.definitions { position: absolute; }

/* En-tête : ciel de nuit, lune, chauves-souris, toile d'araignée et cimetière */

.entete {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 120px at 50% 100%, rgb(255 122 26 / 0.18), transparent 70%),
    linear-gradient(var(--ciel-haut), var(--ciel-bas) 70%, var(--nuit));
}

.entete::before,
.fond-nuit::before {  /* étoiles */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 31% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 56%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 24%, #fff 50%, transparent 51%);
  opacity: 0.55;
  animation: scintillement 5s ease-in-out infinite alternate;
}

.toile-araignee {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 19vw, 240px);
  overflow: visible;
}

.toile-araignee .fils {
  fill: none;
  stroke: rgb(232 222 245 / 0.3);
  stroke-width: 0.9;
}

.araignee { animation: descente 7s ease-in-out infinite; }
.fil-araignee { stroke: rgb(232 222 245 / 0.45); stroke-width: 0.8; }
.araignee ellipse, .araignee circle { fill: #3d2b52; }
.araignee .pattes { fill: none; stroke: #3d2b52; stroke-width: 1.6; stroke-linecap: round; }
.araignee .yeux { fill: #ff4d2e; }

.ciel {
  position: absolute;
  top: 0.75rem;
  right: 2%;
  width: clamp(140px, 24vw, 330px);
}

.ciel use { fill: #07040a; }
.battement {
  transform-box: fill-box;
  transform-origin: center;
  animation: battement 0.5s ease-in-out infinite alternate;
}
.vol { animation: vol 13s ease-in-out infinite; }
.vol-2 { animation-duration: 10s; animation-delay: -2s; }
.vol-3 { animation-duration: 15s; animation-delay: -4s; }
.vol-4 { animation-duration: 11s; animation-delay: -1s; }
.vol-2 .battement { animation-duration: 0.42s; }
.vol-4 .battement { animation-duration: 0.58s; }

/* La chauve-souris qui traverse l'écran : une lueur la garde visible sur les fonds sombres. */
.traversee {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: auto;
  filter: drop-shadow(0 0 3px rgb(255 122 26 / 0.7));
  pointer-events: none;
}

.traversee use { fill: #120a1c; }
.traversee .battement { animation-name: battement-souple; }  /* garde sa silhouette de chauve-souris */
.traversee.en-chasse .battement { animation-duration: 0.22s; }

/* Le curseur pendant que la chauve-souris le chasse : une image dessinée par galerie.js. */
.curseur-insecte,
.curseur-insecte * { cursor: var(--curseur-insecte) !important; }

/* Le rat marche sur le bord inférieur de l'écran. Il court de profil et, à l'arrêt, nous regarde de face. */
.rat {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgb(255 122 26 / 0.45));
  pointer-events: none;
}

.rat .face,
.rat.arrete .profil { display: none; }

.rat.arrete .face {
  display: inline;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rat-se-dresse 0.18s ease-out;
}

.rat .patte {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: rat-patte 0.17s ease-in-out infinite alternate;
}

.rat .patte-b { animation-delay: -0.17s; }
.rat .corps { animation: rat-sautille 0.17s ease-in-out infinite alternate; }

.rat .queue {
  transform-box: fill-box;
  transform-origin: 100% 40%;
  animation: rat-queue 0.34s ease-in-out infinite alternate;
}

.rat .tete {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: rat-penche 2.4s ease-in-out infinite;
}

.rat .yeux {
  transform-box: fill-box;
  transform-origin: center;
  animation: rat-cligne 2.2s linear infinite;
}

.rat .moustaches {
  transform-box: fill-box;
  transform-origin: center;
  animation: rat-moustaches 0.5s ease-in-out infinite alternate;
}

.titrage {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 6.5rem 1rem 0;
  text-align: center;
}

.surtitre {
  margin: 0 0 0.9rem;
  color: var(--bave);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--frisson);
  font-size: clamp(2rem, 9.5vw, 5.2rem);  /* « D'HALLOWEEN » doit tenir sur un écran de 320 px */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-wrap: balance;
  color: var(--citrouille);
  background: linear-gradient(#ffe08a, var(--braise) 35%, var(--citrouille) 70%, #d9480f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgb(255 122 26 / 0.45));
  animation: lueur 4s ease-in-out infinite;
}

h1 span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: 0.45em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--os);
  -webkit-text-fill-color: var(--os);
}

.intro {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  color: var(--lavande);
  text-wrap: pretty;
}

.intro strong {
  color: var(--braise);
  font-weight: 600;
}

.silhouette {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(90px, 13vw, 190px);
  margin-top: 1.5rem;
}

.colline-lointaine { fill: var(--colline); }
.decor { fill: var(--nuit); }
.decor .trait { fill: none; stroke: var(--nuit); stroke-width: 4; }
.decor .tronc { fill: none; stroke: var(--nuit); stroke-width: 10; stroke-linecap: round; }
.decor .branche { fill: none; stroke: var(--nuit); stroke-width: 4; stroke-linecap: round; }

.fenetres {
  fill: var(--braise);
  filter: drop-shadow(0 0 4px rgb(255 179 71 / 0.9));
  animation: vacillement 3s steps(1) infinite;
}

.citrouille { filter: drop-shadow(0 0 7px rgb(255 122 26 / 0.85)); }

/* Grille justifiée : chaque vignette grandit en proportion de son format,
   si bien que toutes les photos d'une rangée ont la même hauteur. */

.grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecart);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.5rem var(--ecart) 0;
}

.grille::after {
  content: "";
  flex-grow: 1000000; /* la dernière rangée garde sa hauteur au lieu de s'étirer */
}

.photo {
  position: relative;
  flex: var(--r) 1 calc(var(--r) * var(--rangee));
  aspect-ratio: var(--r);
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(255 122 26 / 0.12);
  transition: box-shadow 0.3s ease;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.sous-titre { display: none; }

@media (hover: hover) {
  .photo:hover {
    z-index: 1;
    box-shadow: 0 0 0 2px var(--citrouille), 0 0 28px rgb(255 122 26 / 0.5);
  }

  .photo:hover img {
    transform: scale(1.04);
    filter: brightness(1.12) saturate(1.1);
  }

  .sous-titre {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    overflow: hidden;
    padding: 1.6rem 0.75rem 0.6rem;
    color: var(--texte);
    background: linear-gradient(transparent, rgb(8 4 12 / 0.92));
    font-size: 0.8rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.3s ease, translate 0.3s ease;
    pointer-events: none;
  }

  .photo:hover .sous-titre,
  .photo:focus-visible .sous-titre {
    opacity: 1;
    translate: 0 0;
  }
}

.photo:focus-visible {
  outline: 3px solid var(--citrouille);
  outline-offset: 2px;
}

/* Pied de page */

.pied {
  padding: 3rem 1rem 3.5rem;
  color: var(--lavande);
  font-size: 0.875rem;
  text-align: center;
}

.pied p { margin: 0; }

.citrouilles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.citrouilles svg {
  width: 34px;
  height: 27px;
  filter: drop-shadow(0 0 8px rgb(255 122 26 / 0.8));
}

.citrouilles svg:nth-child(2) { width: 46px; height: 37px; }

.pied .signature { margin-top: 0.9rem; font-size: 0.8125rem; }
.signature a { color: var(--braise); text-underline-offset: 0.2em; }
.signature a:hover { color: var(--texte); }
.signature a:focus-visible { outline: 3px solid var(--citrouille); outline-offset: 2px; }

.souhait {
  margin-bottom: 0.4rem !important;
  color: var(--citrouille);
  font-family: var(--frisson);
  font-size: 2rem;
  letter-spacing: 0.04em;
}

/* Visionneuse plein écran */

.visionneuse {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--texte);
  background:
    radial-gradient(ellipse 60% 120px at 50% 100%, rgb(255 122 26 / 0.18), transparent 70%),
    linear-gradient(var(--ciel-haut), var(--ciel-bas) 70%, var(--nuit));
}

/* Le même décor que l'en-tête remplit tout l'espace autour de la photo. */
.fond-nuit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fond-nuit .ciel {
  top: 3.25rem;
  width: clamp(110px, 17vw, 240px);
}

.fond-nuit .silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}

.barre,
.scene,
.legende {
  position: relative;
  z-index: 1;
}

.visionneuse::backdrop { background: rgb(11 7 16 / 0.9); }

.visionneuse[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}

.visionneuse [hidden] { display: none !important; }

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.compteur {
  margin: 0;
  color: var(--braise);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.visionneuse button,
.visionneuse a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgb(255 255 255 / 0.08);
  cursor: pointer;
}

.visionneuse button:hover,
.visionneuse a:hover { background: rgb(255 122 26 / 0.25); }

.visionneuse button[aria-disabled="true"] {
  opacity: 0.4;
  background: rgb(255 255 255 / 0.08);
  cursor: default;
}

.visionneuse button:focus-visible,
.visionneuse a:focus-visible {
  outline: 3px solid var(--citrouille);
  outline-offset: 2px;
}

.visionneuse .recadrer {
  width: auto;
  margin-right: 0.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  color: #1a0d05;
  background: var(--citrouille);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.visionneuse .recadrer:hover { background: var(--braise); }

.visionneuse button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.diaporama .icone-pause,
.diaporama[aria-pressed="true"] .icone-lecture { display: none; }
.diaporama[aria-pressed="true"] .icone-pause { display: block; }

.plein-ecran .icone-sortir,
.plein-ecran[aria-pressed="true"] .icone-entrer { display: none; }
.plein-ecran[aria-pressed="true"] .icone-sortir { display: block; }

.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 0 0.5rem;
  touch-action: none;  /* le pincement et le glissement sont gérés par galerie.js */
}

.vue {  /* dimensions calculées par galerie.js */
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 60px rgb(255 122 26 / 0.12);
  cursor: crosshair;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.2s ease;
}

.vue.chargement { opacity: 0.85; }
.vue.anime { transition: opacity 0.2s ease, transform 0.22s ease; }

.zoomee .vue { cursor: grab; }
.zoomee .scene.saisie { cursor: grabbing; }
.visionneuse .scene.en-selection { cursor: crosshair; }

/* Rectangle tracé à la souris : ce qui l'entoure s'assombrit. */
.selection {
  position: absolute;
  border: 2px solid var(--citrouille);
  border-radius: 2px;
  background: rgb(255 122 26 / 0.12);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
  pointer-events: none;
}

/* Une fois zoomé, les flèches du clavier et le doigt déplacent la photo. */
.zoomee .precedente,
.zoomee .suivante { visibility: hidden; }

.astuce {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgb(255 122 26 / 0.5);
  border-radius: 999px;
  color: var(--texte);
  background: rgb(11 7 16 / 0.85);
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.astuce.visible { opacity: 1; }

.visionneuse .precedente,
.visionneuse .suivante {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  translate: 0 -50%;
  background: rgb(11 7 16 / 0.55);
}

.visionneuse .precedente { left: 0.75rem; }
.visionneuse .suivante { right: 0.75rem; }

.visionneuse .precedente svg,
.visionneuse .suivante svg { width: 28px; height: 28px; }

.legende {  /* un fond sombre, pour rester lisible au-dessus du décor */
  width: fit-content;
  min-height: 1.55em;
  margin: 0.4rem auto 0.7rem;
  padding: 0.25rem 1rem;
  border-radius: 8px;
  color: var(--os);
  background: rgb(11 7 16 / 0.72);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
  text-wrap: balance;
}

/* Plein écran : la photo seule, sur du noir. Les boutons n'apparaissent qu'un instant, par-dessus. */
.visionneuse.immersif { background: #000; }
.immersif .fond-nuit { display: none; }

.immersif .scene {
  position: absolute;
  inset: 0;
  padding: 0;
}

.immersif .vue {
  border-radius: 0;
  box-shadow: none;
}

.immersif .barre,
.immersif .legende {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  background: linear-gradient(rgb(0 0 0 / 0.7), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.immersif .barre { top: 0; }

.immersif .legende {
  bottom: 0;
  width: auto;
  margin: 0;
  padding: 2rem 1rem 1.25rem;
  border-radius: 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
}

.immersif.commandes .barre,
.immersif.commandes .legende,
.immersif:has(.barre :focus-visible) .barre {
  opacity: 1;
  pointer-events: auto;
}

.immersif:not(.commandes) .precedente,
.immersif:not(.commandes) .suivante { visibility: hidden; }

.immersif:not(.commandes) .scene,
.immersif:not(.commandes) .vue { cursor: none; }

@media (max-width: 639px) {
  .titrage { padding-top: 5.5rem; }

  /* Sur téléphone, on glisse du doigt ; les flèches restent pour les lecteurs d'écran. */
  .visionneuse .precedente,
  .visionneuse .suivante {
    width: 40px;
    height: 40px;
    background: rgb(11 7 16 / 0.35);
  }
  .visionneuse .precedente { left: 0.25rem; }
  .visionneuse .suivante { right: 0.25rem; }
  .scene { padding: 0; }
  .barre { padding-left: 0.75rem; gap: 0.5rem; }
  .actions { gap: 0.125rem; }
  .visionneuse .actions button,
  .visionneuse .actions a { width: 40px; height: 40px; }
  .visionneuse .actions .recadrer { display: none; }
  .legende { margin-inline: 0.5rem; font-size: 1rem; }
}

/* Téléphone à l'horizontale : le plus de place possible pour la photo. */
@media (max-height: 480px) {
  .barre { padding-block: 0.125rem; }
  .legende { margin-block: 0.2rem 0.3rem; font-size: 0.875rem; }
}

/* Animations */

@keyframes scintillement { to { opacity: 0.3; } }
@keyframes descente { 50% { translate: 0 22px; } }
@keyframes battement { to { transform: scaleY(0.45); } }
@keyframes battement-souple { to { transform: scaleY(0.72); } }
@keyframes rat-patte { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes rat-sautille { to { transform: translateY(-2px); } }
@keyframes rat-queue { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes rat-se-dresse { from { transform: scale(0.55, 0.6); } }
@keyframes rat-penche {
  0%, 30%, 100% { transform: rotate(0); }
  45%, 65% { transform: rotate(-9deg); }
}
@keyframes rat-cligne {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}
@keyframes rat-moustaches { to { transform: scaleY(0.82); } }
@keyframes vol { 50% { translate: 12px -9px; } }
@keyframes lueur { 50% { filter: drop-shadow(0 0 26px rgb(255 122 26 / 0.65)); } }
@keyframes vacillement {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.55; }
  43% { opacity: 1; }
  77% { opacity: 0.7; }
  79% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .photo:hover img { transform: none; }
}