/* Thèmes du site : End (par défaut), Overworld, Nether et Sift.
   Chaque page définit les couleurs de l'End dans :root ; les autres thèmes les remplacent ici. */

:root{
  --accent-rgb:199,154,82;
  --accent-light:#ecd29f;
  --wave-1:#c79a52;
  --wave-2:#6be9ec;
  --wave-3:#9a4fb0;
  --gold-ink:#1a1408;
  --panel-hover:#201c3a;
  color-scheme:dark;
}

html[data-theme="overworld"]{
  /* nuit d'Overworld : ciel bleu nuit, accent émeraude (comme les émeraudes des villageois) */
  --bg:#0a1221;
  --panel:#121c32;
  --panel-hover:#18243f;
  --ink:#eef3fb;
  --muted:#a3b2cc;
  --gold:#4fd98f;
  --gold-ink:#04210f;
  --accent-rgb:79,217,143;
  --accent-light:#b5f5d1;
  --hero-text:rgba(238,243,251,0.92);
  --wave-1:#4fd98f;
  --wave-2:#6f8cff;
  --wave-3:#ffd27a;
}

html[data-theme="nether"]{
  --bg:#170b0a;
  --panel:#26110f;
  --panel-hover:#321612;
  --ink:#f7ebe4;
  --muted:#c9a69c;
  --gold:#ff7a2f;
  --gold-ink:#2a0c00;
  --accent-rgb:255,122,47;
  --accent-light:#ffb37d;
  --hero-text:rgba(247,235,228,0.92);
  --wave-1:#ff5a1f;
  --wave-2:#ffb347;
  --wave-3:#b3122e;
}

/* Overworld de jour : bleu ciel profond, accent vert prairie */
html[data-theme="overworld"][data-daytime="day"]{
  --bg:#0c1a29;
  --panel:#13263a;
  --panel-hover:#193049;
  --muted:#a7bfd3;
  --gold:#7fd65c;
  --gold-ink:#0c2006;
  --accent-rgb:127,214,92;
  --accent-light:#c9f2b4;
  --wave-1:#7fd65c;
  --wave-2:#6fb8ff;
  --wave-3:#ffe08a;
}
/* Overworld au lever et au coucher du soleil : violet chaud, accent orangé */
html[data-theme="overworld"][data-daytime="dusk"]{
  --bg:#171225;
  --panel:#211a33;
  --panel-hover:#2a2140;
  --muted:#c2b1c8;
  --gold:#ffa25c;
  --gold-ink:#2a1000;
  --accent-rgb:255,162,92;
  --accent-light:#ffd0a8;
  --wave-1:#ffa25c;
  --wave-2:#c07bff;
  --wave-3:#ff7f9f;
}
html[data-theme="overworld"]{transition:background-color 2s ease;}

/* Sift : ciel turquoise, prairie rose corail, arbres blancs, aurores */
html[data-theme="sift"]{
  --bg:#0a2326;
  --panel:#0f3136;
  --panel-hover:#143d43;
  --ink:#f0fbf9;
  --muted:#a6c9c6;
  --gold:#ff8f9a;
  --gold-ink:#3a0710;
  --accent-rgb:255,143,154;
  --accent-light:#ffc4cb;
  --hero-text:rgba(240,251,249,0.92);
  --wave-1:#ff8f9a;
  --wave-2:#5fe0cf;
  --wave-3:#c9a6ff;
}

/* les 3 bandes lumineuses restent propres à l'End : les autres thèmes ont leur propre décor */
html[data-theme] .wave{display:none;}

/* décor animé d'arrière-plan (dessiné par themes.js) */
.theme-particles{
  position:fixed; top:0; left:0; z-index:0; width:100%;
  /* hauteur maximale de l'écran : le décor ne bouge pas quand la barre d'adresse
     du navigateur mobile apparaît ou disparaît en défilant */
  height:100vh; height:100lvh;
  pointer-events:none;
}

/* curseur de thème en haut de page */
.theme-switch{
  /* placé en haut de la page et non de l'écran : il défile avec la page et ne recouvre jamais le contenu */
  position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:16px; z-index:40;
  display:grid; grid-template-columns:repeat(4, 1fr);
  padding:4px; border-radius:999px;
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  font-family:'Manrope', system-ui, sans-serif;
  animation:theme-switch-in .8s cubic-bezier(.2,.7,.2,1) .4s both;
}
@keyframes theme-switch-in{ from{ opacity:0; transform:translateY(-10px); } }
.theme-switch button{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px; border:none; border-radius:999px; background:none; cursor:pointer;
  font:700 0.8rem 'Manrope', system-ui, sans-serif; color:var(--muted); white-space:nowrap;
  transition:color .35s ease;
}
.theme-switch button:hover{color:var(--ink);}
.theme-switch button[aria-pressed="true"]{color:var(--gold-ink);}
.theme-switch button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.theme-swatch{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(255,255,255,0.25);
}
.theme-swatch[data-t="end"]{background:linear-gradient(135deg, #c79a52, #9a4fb0);}
.theme-swatch[data-t="overworld"]{background:linear-gradient(135deg, #4fd98f, #1d2f5e);}
.theme-swatch[data-t="nether"]{background:linear-gradient(135deg, #ffb347, #b3122e);}
.theme-swatch[data-t="sift"]{background:linear-gradient(135deg, #ff8f9a, #4fd1c5);}
.theme-switch-pill{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 4);
  border-radius:999px; background:var(--gold);
  box-shadow:0 0 18px rgba(var(--accent-rgb), 0.45);
  transform:translateX(calc(var(--pos, 0) * 100%));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), background-color .5s ease, box-shadow .5s ease;
}
/* l'apparition au chargement ne se rejoue pas quand la barre reprend sa place */
.theme-switch.is-settled:not(.is-floating){animation:none;}

/* plus bas dans la page : la barre revient flotter en haut de l'écran quand on remonte */
.theme-switch.is-floating{position:fixed; animation:bar-in .35s cubic-bezier(.2,.7,.2,1) both;}
.theme-switch.is-floating.is-leaving{animation:bar-out .3s ease both;}
@keyframes bar-in{ from{ opacity:0; transform:translateY(-130%); } }
@keyframes bar-out{ to{ opacity:0; transform:translateY(-130%); } }

/* bouton son, accroché à gauche du curseur de thème */
.theme-switch .sound-toggle{
  position:absolute; top:50%; right:calc(100% + 8px); translate:0 -50%;
  width:36px; height:36px; padding:0; border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  transition:color .3s ease, border-color .3s ease;
}
.theme-switch .sound-toggle:hover{color:var(--ink); border-color:rgba(var(--accent-rgb),0.45);}
.theme-switch .sound-toggle[aria-pressed="true"]{color:var(--gold);}
.theme-switch .sound-toggle svg{width:18px; height:18px;}
@media (max-width:640px){
  .theme-switch .sound-toggle{width:30px; height:30px; right:calc(100% + 5px);}
  .theme-switch .sound-toggle svg{width:15px; height:15px;}
}

@media (max-width:640px){
  .theme-switch{left:50%; right:auto; translate:-50% 0;}
  .theme-switch button{padding:7px 11px; font-size:0.74rem; gap:5px;}
  /* laisse la place au curseur au-dessus du lien « Retour à l'accueil » */
  body > header{padding-top:72px !important;}
}
@media (max-width:340px){
  .theme-switch button .theme-label{display:none;}
  .theme-switch button{padding:8px 13px;}
  .theme-swatch{width:12px; height:12px;}
}

/* onde lumineuse au changement de thème (animée par themes.js) */
.theme-wave{
  position:fixed; z-index:45; width:100px; height:100px; border-radius:50%;
  pointer-events:none; transform:translate(-50%,-50%) scale(0);
  border:2px solid rgba(var(--accent-rgb),0.55);
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.4);
}
.theme-wave.is-main{
  border-width:4px; border-color:rgba(var(--accent-rgb),0.9);
  box-shadow:0 0 50px rgba(var(--accent-rgb),0.7), inset 0 0 40px rgba(var(--accent-rgb),0.45);
}
.theme-wave-glow{
  position:fixed; z-index:44; width:100px; height:100px; border-radius:50%;
  pointer-events:none; transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, transparent 55%, rgba(var(--accent-rgb),0.35) 68%, transparent 72%);
  mix-blend-mode:screen;
}

/* changement de thème : le nouveau se dévoile en cercle depuis le curseur */
html.vt-theme::view-transition{background:none; animation:none;}
html.vt-theme::view-transition-old(root){animation:none;}
html.vt-theme::view-transition-new(root){animation:theme-reveal var(--theme-dur, 2.1s) cubic-bezier(.25,.6,.3,1) both;}
@keyframes theme-reveal{
  from{ clip-path:circle(0 at var(--theme-x, 90%) var(--theme-y, 30px)); }
  to{ clip-path:circle(var(--theme-r, 150vmax) at var(--theme-x, 90%) var(--theme-y, 30px)); }
}

@media (prefers-reduced-motion:reduce){
  .theme-switch, .theme-switch-pill, .theme-switch.is-floating, .theme-switch.is-floating.is-leaving{animation:none; transition:none;}
  html.vt-theme::view-transition-new(root){animation:none;}
}

/* message caché : la mélodie de la galerie vient du Prélude de Bach (affiché par sound.js) */
.prelude-toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:60;
  display:flex; align-items:flex-start; gap:12px;
  width:min(440px, calc(100% - 32px)); padding:14px 16px;
  border-radius:16px; border:1px solid rgba(var(--accent-rgb),0.45);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,0.45), 0 0 30px rgba(var(--accent-rgb),0.2);
  color:var(--ink); font:0.9rem/1.5 'Manrope', system-ui, sans-serif;
  opacity:0; transform:translate(-50%, 20px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}
.prelude-toast.is-visible{opacity:1; transform:translate(-50%, 0);}
.prelude-toast p{margin:0; color:var(--muted);}
.prelude-toast strong{color:var(--ink);}
.prelude-toast a{color:var(--gold); font-weight:700; text-decoration:none; white-space:nowrap;}
.prelude-toast a:hover{text-decoration:underline;}
.prelude-note{font-size:1.4rem; line-height:1; color:var(--gold); animation:prelude-note 1.6s ease-in-out infinite;}
@keyframes prelude-note{ 50%{ transform:translateY(-4px) rotate(-8deg); } }
.prelude-toast button{
  flex-shrink:0; margin-left:auto; width:26px; height:26px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.06); color:var(--muted); cursor:pointer; font-size:1rem; line-height:1;
}
.prelude-toast button:hover{color:var(--ink); background:rgba(255,255,255,0.12);}
@media (prefers-reduced-motion:reduce){
  .prelude-toast{transition:none;}
  .prelude-note{animation:none;}
}

/* mise en scène du Prélude de Bach (pilotée par sound.js via --stage, de 0 à 1) :
   la page s'assombrit, la galerie s'illumine et le décor se met à briller */
@property --stage{ syntax:'<number>'; inherits:true; initial-value:0; }
@property --spot-x{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; }
@property --spot-y{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; }
html{ transition:--stage 1.1s ease, --spot-x .6s cubic-bezier(.2,.7,.2,1), --spot-y .6s cubic-bezier(.2,.7,.2,1); }
/* projecteur relié à la souris : il la suit de près, avec juste un léger retard pour rester doux */
html.spot-mouse{ transition:--stage 1.1s ease, --spot-x .18s ease-out, --spot-y .18s ease-out; }
/* pénombre autour d'un projecteur qui suit l'image jouée, avec un léger halo coloré */
html::after{
  content:""; position:fixed; inset:0; z-index:30; pointer-events:none;
  background:
    radial-gradient(circle 420px at var(--spot-x) var(--spot-y), rgba(var(--accent-rgb),0.10), transparent 70%),
    radial-gradient(ellipse 75% 65% at var(--spot-x) var(--spot-y), transparent 30%, rgba(0,0,0,0.8));
  opacity:calc(var(--stage) * 0.9);
}
.stage-ripple{
  position:fixed; z-index:32; width:120px; height:120px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(var(--accent-rgb),0.8);
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.6), inset 0 0 18px rgba(var(--accent-rgb),0.4);
}
.stage-note{
  position:fixed; z-index:32; pointer-events:none; line-height:1;
  color:var(--accent-light);
  text-shadow:0 0 12px rgba(var(--accent-rgb),0.9), 0 0 2px rgba(255,255,255,0.8);
}
html.is-staging .gallery{position:relative; z-index:31;}
.gallery .shot{
  box-shadow:0 0 calc(var(--stage) * 40px) rgba(var(--accent-rgb), calc(var(--stage) * 0.55));
}
.gallery h2, .gallery .eyebrow{
  text-shadow:0 0 calc(var(--stage) * 24px) rgba(var(--accent-rgb), calc(var(--stage) * 0.9));
}
.ambient-bg, .theme-particles{
  filter:brightness(calc(1 + var(--stage) * 0.8)) saturate(calc(1 + var(--stage) * 0.5));
}
@media (prefers-reduced-motion:reduce){
  html{ transition:none; }
}

/* mode allégé (petites machines) : on retire les effets les plus coûteux pour la carte graphique */
html.lite .noise{display:none;}
html.lite .wave{filter:blur(28px); mix-blend-mode:normal; will-change:auto;}
html.lite *, html.lite *::before, html.lite *::after{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html.lite .ambient-bg, html.lite .theme-particles{filter:none !important;}
html.lite .theme-switch, html.lite .theme-switch .sound-toggle, html.lite .nav-links, html.lite .nav-toggle{
  background:var(--panel);
}

/* mode fixe (machines très lentes) : plus aucune animation ni transition, décor immobile */
html.static *, html.static *::before, html.static *::after{
  animation:none !important; transition:none !important;
}
html.static .wave{opacity:0.15;}
html.static .js .reveal, html.static .reveal{opacity:1 !important; transform:none !important;}

/* barre des pages du site, en haut à gauche */
.site-nav{
  position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); left:16px; z-index:40;
  font-family:'Manrope', system-ui, sans-serif;
  animation:theme-switch-in .8s cubic-bezier(.2,.7,.2,1) .3s both;
}
.site-nav.is-settled:not(.is-floating){animation:none;}
.site-nav.is-floating{position:fixed; animation:bar-in .35s cubic-bezier(.2,.7,.2,1) both;}
.site-nav.is-floating.is-leaving{animation:bar-out .3s ease both;}
.nav-links{
  display:flex; gap:2px; padding:4px; border-radius:999px;
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.nav-links a{
  display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  color:var(--muted); text-decoration:none; font-weight:700; font-size:0.8rem; white-space:nowrap;
  transition:color .25s ease, background-color .25s ease;
}
.nav-links a svg{width:15px; height:15px; color:var(--gold); flex-shrink:0;}
.nav-links a:hover{color:var(--ink); background:rgba(255,255,255,0.06);}
.nav-links a[aria-current="page"]{color:var(--ink); background:rgba(var(--accent-rgb),0.14);}
.nav-links a:focus-visible, .nav-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.nav-toggle{
  display:none; align-items:center; gap:8px; height:36px; padding:0 14px 0 11px; border-radius:999px; cursor:pointer;
  color:var(--ink); font:700 0.8rem 'Manrope', system-ui, sans-serif;
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  transition:border-color .25s ease, color .25s ease;
}
.nav-toggle svg{width:17px; height:17px;}
.nav-toggle:hover, .site-nav.is-open .nav-toggle{border-color:rgba(var(--accent-rgb),0.6); color:var(--gold);}

/* écran plus étroit : les liens se replient derrière le bouton « Menu », la liste s'ouvre juste en dessous */
@media (max-width:1040px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute; top:calc(100% + 10px); left:0;
    display:none; flex-direction:column; gap:2px; min-width:200px; padding:6px; border-radius:16px;
    background:color-mix(in srgb, var(--panel) 95%, transparent);
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
  }
  .site-nav.is-open .nav-links{display:flex; animation:menu-in .25s cubic-bezier(.2,.7,.2,1);}
  .nav-links a{padding:10px 12px; border-radius:10px; font-size:0.92rem;}
  .nav-links a svg{width:18px; height:18px;}
}
@keyframes menu-in{ from{ opacity:0; transform:translateY(-6px); } }
/* mobile : bouton menu réduit à son icône, à gauche de la barre des thèmes */
@media (max-width:640px){
  .site-nav{left:8px;}
  .nav-toggle{width:30px; height:30px; padding:0; justify-content:center;}
  .nav-toggle span{display:none;}
  .nav-toggle svg{width:15px; height:15px;}
  /* le bouton son passe à droite de la barre des thèmes pour laisser la gauche au menu */
  .theme-switch .sound-toggle{right:auto; left:calc(100% + 5px);}
}
/* les pages avec un lien « Retour à l'accueil » laissent la place aux barres du haut */
body > header{padding-top:76px !important;}

/* barres du haut : même hauteur pour tout (barre des pages, bouton menu, thèmes, bouton son),
   et un peu d'espace entre les thèmes pour que la pastille ne déborde pas sur le voisin */
:root{--bar-h:44px; --btn-h:34px; --bar-gap:4px;}
.theme-switch{height:var(--bar-h); gap:var(--bar-gap); align-items:center;}
.theme-switch button{height:var(--btn-h); padding:0 14px;}
.theme-switch-pill{
  top:4px; bottom:auto; height:var(--btn-h);
  width:calc((100% - 8px - 3 * var(--bar-gap)) / 4);
  transform:translateX(calc(var(--pos, 0) * (100% + var(--bar-gap))));
  box-shadow:0 0 10px rgba(var(--accent-rgb), 0.35);
}
.theme-switch .sound-toggle{width:var(--bar-h); height:var(--bar-h);}
.nav-toggle{height:var(--bar-h);}
.nav-links{height:var(--bar-h); align-items:center; gap:var(--bar-gap);}
.nav-links a{height:var(--btn-h); padding:0 14px;}
@media (max-width:1040px){
  .nav-links{height:auto; align-items:stretch;}
  .nav-links a{height:auto; padding:10px 12px;}
}
@media (max-width:640px){
  :root{--bar-h:38px; --btn-h:28px; --bar-gap:3px;}
  .theme-switch button{padding:0 10px;}
  .nav-toggle{width:var(--bar-h);}
}

/* lien « Retour à l'accueil » des pages secondaires : logo plus grand et lisible */
a.back{gap:12px; font-size:0.95rem;}
a.back img{width:48px; height:48px;}
@media (max-width:640px){
  a.back img{width:40px; height:40px;}
}