/* Socle commun du site : couleurs du coucher de soleil, ciel animé, Évoli, visionneuse, langue. */
:root {
  --plum-950: #170D25;
  --plum-900: #22142F;
  --plum-800: #2F1B43;
  --plum-700: #45295D;
  --rose: #F27F91;
  --coral: #FF9668;
  --sun: #FFC870;
  --lilac: #D2AEEF;
  --text: #FFF4EB;
  --text-soft: #E8D3DE;
  --line: rgba(255, 236, 226, .18);
  --glass: rgba(42, 24, 62, .56);
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--plum-900); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  padding-inline: 20px; overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rose); color: var(--plum-950); }

/* Ciel */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #3A2259; pointer-events: none; }
.sky svg, .sky-grain, .sky-dusk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-grain { opacity: .1; mix-blend-mode: overlay; background-size: 180px; }
.sky-dusk { background: #190E2C; opacity: 0; }
.sky .drift-1 { animation: drift 70s ease-in-out infinite alternate; }
.sky .drift-2 { animation: drift 95s ease-in-out infinite alternate-reverse; }
.sky .drift-3 { animation: drift 120s ease-in-out infinite alternate; }
.sky .sun-glow { transform-box: fill-box; transform-origin: center; animation: glow 9s ease-in-out infinite; }
.sky .star { animation: twinkle 4s ease-in-out infinite; }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .8; transform: scale(1.06); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Lucioles */
.fireflies { position: absolute; inset: 0; }
.firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFE7A6; box-shadow: 0 0 10px 3px rgba(255, 214, 120, .55);
  animation: ff-move var(--d, 12s) ease-in-out infinite alternate, ff-blink 3.4s ease-in-out infinite; }
@keyframes ff-move { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 40px), var(--dy, -30px)); } }
@keyframes ff-blink { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }

/* Étincelles du curseur */
.spark { position: fixed; z-index: 90; pointer-events: none; width: var(--sz, 9px); height: var(--sz, 9px); background: var(--c, #FFC870);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: spark .85s ease-out forwards; }
@keyframes spark {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 20px))) scale(.2) rotate(140deg); }
}

/* Évoli sur le côté */
.trail { position: fixed; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 90px); bottom: 30px; width: 46px; z-index: 40; pointer-events: none; }
.trail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dotted rgba(255, 236, 226, .28); }
.eevee { position: absolute; left: 0; top: 0; width: 46px; height: 46px; will-change: transform; filter: drop-shadow(0 3px 6px rgba(20, 8, 30, .45)); }
.eevee svg { width: 100%; height: 100%; overflow: visible; }
.eevee .leg { transform-box: fill-box; transform-origin: 50% 10%; }
.eevee .tail { transform-box: fill-box; transform-origin: 10% 90%; animation: wag 2.4s ease-in-out infinite; }
.eevee .bob { transition: transform .2s; }
.eevee.walking .leg-a { animation: step .32s ease-in-out infinite alternate; }
.eevee.walking .leg-b { animation: step .32s ease-in-out infinite alternate-reverse; }
.eevee.walking .bob { animation: bob .16s ease-in-out infinite alternate; }
@keyframes step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes wag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }
.paw { position: absolute; width: 11px; height: 11px; left: 50%; margin-left: -5.5px; color: var(--sun); animation: pawfade 2.6s ease-out forwards; }
.paw svg { width: 100%; height: 100%; display: block; }
@keyframes pawfade { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: .9; transform: scale(1); } 100% { opacity: 0; } }
@media (max-width: 700px) {
  body { padding-right: 40px; }
  .trail { right: 4px; width: 32px; top: calc(env(safe-area-inset-top, 0px) + 76px); }
  .eevee { width: 32px; height: 32px; }
}

/* Bouton de langue */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: rgba(30, 16, 46, .4); }
.lang button { font: 600 .8rem var(--font-body); letter-spacing: .06em; color: var(--text-soft); background: none; border: 0; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--text); color: var(--plum-900); }
[data-i18n], [data-i18n-ph] { transition: opacity .22s ease; }
body.lang-fade [data-i18n] { opacity: 0; }

/* Apparition au défilement */
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-pre { opacity: 0; transform: translateY(28px); }

/* Visionneuse */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: rgba(18, 9, 28, .88); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.lb.open { opacity: 1; }
.lb figure { margin: 0; display: grid; gap: 12px; justify-items: center; min-width: 0; height: 100%; align-content: center; }
.lb img { max-height: calc(100vh - 160px); width: auto; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: scale(.94); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.lb.open img { transform: scale(1); }
.lb figcaption { color: var(--text-soft); font-size: .95rem; text-align: center; }
.lb button { background: rgba(255, 244, 235, .1); color: var(--text); border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.lb button:hover { background: rgba(255, 244, 235, .2); }
.lb .lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; }
@media (max-width: 600px) { .lb { grid-template-columns: 1fr; } .lb .lb-prev, .lb .lb-next { display: none; } }

/* Message du formulaire */
.form-note { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 200, 112, .14); border: 1px solid rgba(255, 200, 112, .35); font-size: .95rem; }

/* Logo : le dessin anthracite sur fond blanc devient clair sur le ciel */
.logo-light { filter: invert(1) brightness(1.05); mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}