/* ==========================================================
   BASE — L'île de Nessie (palette Retro + vert Nessie)
   ========================================================== */
:root {
  --rouge: #e9311a;
  --orange: #ed6335;
  --peche: #ecae7d;
  --sauge: #8db4ad;
  --canard: #026c80;
  --marine: #064c72;
  --creme: #f3ece2;
  --encre: #1d1a17;
  --nessie: #9bb55a;
  --nessie-clair: #e6e3ad;
  --ciel: #c8f1ec;
  --jaune: #f2b705;
  --ombre: 5px 5px 0 var(--encre);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--ciel);
  color: var(--encre);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
kbd {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em;
  font: 700 .78em 'Space Mono', monospace; background: #fff; color: var(--encre);
  border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; margin: 0 1px;
}
:focus-visible { outline: 3px dashed var(--rouge); outline-offset: 3px; }
::selection { background: var(--nessie); color: var(--encre); }

.view { position: fixed; inset: 0; display: none; overflow: hidden; }
.view.is-active { display: block; }
.view.scrollable { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--encre) transparent; }

/* apparition générique */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* lettres animées */
.word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; transform-origin: 50% 100%; }
.is-entering .char, .is-in .char { animation: charIn .8s var(--ease-back) both; animation-delay: calc(var(--i) * 40ms + 150ms); }
@keyframes charIn { from { opacity: 0; transform: translateY(70%) rotate(12deg) scale(.6); } }

/* ==========================================================
   CURSEUR NESSIE
   ========================================================== */
#cursor, #cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; display: none; }
.has-cursor #cursor, .has-cursor #cursor-ring { display: block; }
@media (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } }
.cursor-head {
  position: absolute; left: -3px; top: -18px; width: 46px; height: 34px;
  background: url('../img/Nessie.PNG') no-repeat; background-size: 152px 152px; background-position: -41px -18px;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.25));
  transform-origin: 6px 18px; transition: transform .25s var(--ease-back);
}
.cursor-hover .cursor-head { transform: rotate(-14deg) scale(1.15); }
.cursor-down .cursor-head { transform: scale(.82) rotate(8deg); }
#cursor-ring span {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--encre); border-radius: 50%; opacity: .35;
  display: grid; place-items: center; white-space: nowrap;
  font: 700 0px 'Space Mono', monospace; color: var(--encre);
  transition: width .35s var(--ease-back), height .35s var(--ease-back), margin .35s var(--ease-back), background .3s, opacity .3s, font-size .2s;
}
.cursor-hover #cursor-ring span { width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: .9; background: rgba(155,181,90,.25); border-color: var(--encre); }
.cursor-label #cursor-ring span { width: auto; min-width: 64px; height: 30px; margin: 22px 0 0 -10px; padding: 0 12px; border-radius: 99px; background: var(--jaune); font-size: 12px; opacity: 1; }
.cursor-out #cursor, .cursor-out #cursor-ring { opacity: 0; }
.click-splash { position: fixed; z-index: 9998; pointer-events: none; }
.click-splash i { position: absolute; width: 8px; height: 3px; border-radius: 3px; background: var(--rouge); transform: rotate(var(--a)) translateX(4px); animation: splash .55s var(--ease-out) forwards; }
.click-splash i:nth-child(even) { background: var(--nessie); }
@keyframes splash { to { transform: rotate(var(--a)) translateX(26px) scaleX(.2); opacity: 0; } }

/* ==========================================================
   CHARGEMENT
   ========================================================== */
#loader {
  --p: 0;
  position: fixed; inset: 0; z-index: 9000; overflow: hidden;
  background: linear-gradient(#bdf0ea, #eaf9f6 70%);
  transition: transform 1.1s cubic-bezier(.77, 0, .18, 1) .35s;
}
.loader-sky { position: absolute; inset: 0 0 auto; height: 60%; display: grid; place-content: center; text-align: center; gap: 14px; padding: 20px; }
.loader-title { display: grid; gap: 4px; animation: floatY 3s ease-in-out infinite; }
.loader-kicker { font: 400 13px 'Space Mono', monospace; letter-spacing: .25em; text-transform: uppercase; opacity: .7; }
.loader-title strong { font: 700 clamp(44px, 9vw, 120px)/.9 'Souvenir', serif; color: var(--rouge); letter-spacing: -.02em; text-shadow: 4px 4px 0 var(--encre); }
.loader-msg { font: 400 15px 'Space Mono', monospace; }
.loader-msg.is-in { animation: msgIn .4s var(--ease-back); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.loader-water {
  position: absolute; left: -2%; right: -2%; bottom: 0;
  height: calc(14vh + var(--p) * 34vh);
  background: linear-gradient(var(--canard), var(--marine));
}
.loader-wave { position: absolute; left: 0; bottom: 100%; width: 200%; height: 40px; fill: var(--canard); animation: wave 3.2s linear infinite; margin-bottom: -1px; }
.loader-wave-2 { fill: var(--sauge); opacity: .7; height: 30px; animation-duration: 5s; animation-direction: reverse; z-index: -1; bottom: calc(100% + 6px); }
@keyframes wave { to { transform: translateX(-50%); } }
.loader-nessie { position: absolute; left: calc(8% + var(--p) * 70%); bottom: calc(100% - 26px); width: clamp(90px, 13vw, 160px); animation: swim .9s ease-in-out infinite alternate; z-index: 2; }
.loader-nessie img { transform: scaleX(-1); }
@keyframes swim { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-12px) rotate(4deg); } }
.loader-pct { position: absolute; right: 6%; bottom: 20px; font: 700 clamp(48px, 10vw, 120px)/1 'Souvenir', serif; color: var(--creme); opacity: .9; }
.loader-pct::after { content: ''; }
#loader.is-done { transform: translateY(-105%); }
#loader.is-done .loader-water { height: 120vh; transition: height .6s cubic-bezier(.7, 0, .3, 1); }

@keyframes floatY { 50% { transform: translateY(-10px); } }

/* ==========================================================
   DOCK (son + nav)
   ========================================================== */
.dock { position: fixed; top: 14px; right: 14px; z-index: 500; display: flex; gap: 10px; align-items: center; }
.dock-btn, .dock-nav {
  background: var(--creme); border: 2.5px solid var(--encre); border-radius: 99px; box-shadow: 3px 3px 0 var(--encre);
}
.dock-btn { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; font-weight: 700; font-size: 13px; transition: transform .2s var(--ease-back), background .2s; }
.dock-btn:hover { transform: translate(-1px, -2px) rotate(-2deg); }
.dock-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.son-btn .ico-on, .son-btn.is-on .ico-off { display: none; }
.son-btn.is-on .ico-on { display: block; }
.son-btn.is-on { background: var(--nessie); }
.son-bars { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.son-btn.is-on .son-bars { display: flex; }
.son-bars i { width: 3px; background: var(--encre); border-radius: 2px; animation: bars .8s ease-in-out infinite alternate; }
.son-bars i:nth-child(2) { animation-delay: -.3s; } .son-bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes bars { from { height: 3px; } to { height: 14px; } }
.dock-nav { display: flex; padding: 3px; }
.dock-nav a { text-decoration: none; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 99px; transition: background .2s; }
.dock-nav a:hover { background: rgba(0,0,0,.08); }
.dock-nav a.is-active { background: var(--encre); color: var(--creme); }
@media (max-width: 640px) {
  .dock { top: 10px; right: 10px; gap: 6px; }
  .son-label { display: none; }
  .dock-nav a { padding: 6px 9px; font-size: 12px; }
}

/* ==========================================================
   TRANSITION
   ========================================================== */
#transition { position: fixed; inset: 0; z-index: 8000; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.tr-panel { background: var(--rouge); transform: translateY(105%); }
.tr-panel:nth-child(2) { background: var(--orange); }
.tr-panel:nth-child(3) { background: var(--canard); }
.tr-panel:nth-child(4) { background: var(--marine); }
#transition.is-in { pointer-events: all; }
#transition.is-in .tr-panel { transform: translateY(0); transition: transform .62s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--d) * 70ms); }
#transition.is-out .tr-panel { transform: translateY(-105%); transition: transform .62s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--d) * 70ms); }
.tr-panel:nth-child(1) { --d: 0; } .tr-panel:nth-child(2) { --d: 1; } .tr-panel:nth-child(3) { --d: 2; } .tr-panel:nth-child(4) { --d: 3; }
.tr-nessie { position: absolute; left: 50%; top: 50%; width: 140px; margin: -70px 0 0 -70px; opacity: 0; transform: scale(.3) rotate(-30deg); }
#transition.is-in .tr-nessie { opacity: 1; transform: scale(1) rotate(0); transition: all .5s var(--ease-back) .35s; }
#transition.is-out .tr-nessie { opacity: 0; transform: scale(.4) translateY(-60px) rotate(20deg); transition: all .35s ease-in; }

/* ==========================================================
   TOASTS
   ========================================================== */
#toasts { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 7000; display: grid; gap: 10px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--creme); border: 3px solid var(--encre); border-radius: 16px; box-shadow: var(--ombre);
  transform: translateY(-30px) scale(.9); opacity: 0; transition: all .5s var(--ease-back);
}
.toast.is-in { transform: none; opacity: 1; }
.toast.is-out { transform: translateY(-20px) scale(.95); opacity: 0; transition-duration: .3s; }
.toast strong { font: 700 17px/1.2 'Souvenir', serif; display: block; }
.toast p { font-size: 14px; margin-top: 3px; }
.toast-icone { font-size: 24px; line-height: 1; animation: spinPop 1s var(--ease-back); }
.toast-secret { background: var(--jaune); }
@keyframes spinPop { from { transform: scale(0) rotate(-180deg); } }

/* ==========================================================
   BOUTONS
   ========================================================== */
.btn-play {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 34px 20px 24px; border-radius: 22px;
  background: var(--rouge); color: var(--creme); text-decoration: none;
  font: 700 clamp(20px, 2.4vw, 28px)/1 'Souvenir', serif; letter-spacing: -.01em;
  border: 3px solid var(--encre); box-shadow: 7px 7px 0 var(--encre);
  transition: transform .35s var(--ease-back), box-shadow .2s;
  animation: wobble 3.5s ease-in-out infinite;
}
.btn-play:hover { animation-play-state: paused; box-shadow: 10px 10px 0 var(--encre); background: var(--orange); }
.btn-play:active { box-shadow: 2px 2px 0 var(--encre); }
.btn-play-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--creme); color: var(--rouge); font-size: 17px; padding-left: 3px; border: 3px solid var(--encre); transition: transform .4s var(--ease-back); }
.btn-play:hover .btn-play-ico { transform: rotate(360deg) scale(1.1); }
.btn-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite 1s; }
@keyframes shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 88% { rotate: 0deg; } 91% { rotate: -2.5deg; } 94% { rotate: 2deg; } 97% { rotate: -1deg; } }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 99px;
  font-weight: 700; text-decoration: none; background: var(--creme); border: 2.5px solid var(--encre);
  box-shadow: 4px 4px 0 var(--encre); transition: transform .3s var(--ease-back), box-shadow .2s, background .2s;
}
.btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); background: var(--nessie-clair); }
.btn-ghost span { transition: transform .3s var(--ease-back); }
.btn-ghost:hover span { transform: translateX(5px); }

/* ==========================================================
   ACCUEIL
   ========================================================== */
/* L'accueil reprend la charte "Rétro" d'Anthony (même DA que la page À propos)
   #e9311a #ed6335 #ecae7d #8db4ad #026c80 #064c72 sur crème #efe7dd */
#view-accueil {
  --r1: #e9311a; --r2: #ed6335; --r3: #ecae7d; --r4: #8db4ad; --r5: #026c80; --r6: #064c72;
  --encre: #064c72; --creme: #efe7dd; --nessie-clair: #ecae7d;
  background: #efe7dd; color: var(--r6);
}
.home-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* la grande arche, fenêtre sur l'île */
.home-arche {
  position: absolute; right: 4vw; top: 9vh; bottom: 0; width: min(44vw, 640px); overflow: hidden;
  border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #8db4ad 0%, #b9d0c6 55%, #efe7dd 100%);
  transform: translateY(40px); opacity: 0; transition: transform 1.2s var(--ease-out), opacity .8s;
}
#view-accueil.is-active .home-arche { transform: none; opacity: 1; }
.home-rayons { position: absolute; left: 50%; top: 32%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(236, 174, 125, .38) 0 6deg, transparent 6deg 15deg); animation: spin 90s linear infinite; }
.home-soleil {
  position: absolute; left: 50%; top: 32%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #e9311a 0 34%, #ed6335 34% 50%, #ecae7d 50% 66%, rgba(236, 174, 125, 0) 66%);
  animation: soleilRetro 6s ease-in-out infinite;
}
@keyframes soleilRetro { 50% { transform: translate(-50%, -50%) scale(1.04); } }
.home-bandes { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; display: grid; grid-template-rows: repeat(4, 1fr); }
.home-bandes i:nth-child(1) { background: #8db4ad; } .home-bandes i:nth-child(2) { background: #026c80; }
.home-bandes i:nth-child(3) { background: #064c72; } .home-bandes i:nth-child(4) { background: #e9311a; }
.home-ile { position: absolute; left: 50%; top: 40%; width: 84%; max-width: none; margin-left: -42%; transform: scale(1); transition: transform .6s var(--ease-out); filter: drop-shadow(0 26px 0 rgba(6, 76, 114, .18)); animation: ileFlotte 6s ease-in-out infinite; }
@keyframes ileFlotte { 50% { translate: 0 -12px; } }
/* vagues colorées en bas à gauche, comme sur la page À propos */
.home-vagues { position: absolute; left: -6vw; bottom: 46px; width: 44vw; display: grid; opacity: .9; }
.home-vagues i { height: 14px; border-radius: 0 99px 99px 0; transform-origin: left; animation: vague 4s ease-in-out infinite; }
.home-vagues i:nth-child(1) { background: #e9311a; width: 40%; } .home-vagues i:nth-child(2) { background: #ed6335; width: 52%; animation-delay: -.5s; }
.home-vagues i:nth-child(3) { background: #ecae7d; width: 64%; animation-delay: -1s; } .home-vagues i:nth-child(4) { background: #8db4ad; width: 76%; animation-delay: -1.5s; }
.home-vagues i:nth-child(5) { background: #026c80; width: 88%; animation-delay: -2s; } .home-vagues i:nth-child(6) { background: #064c72; width: 100%; animation-delay: -2.5s; }
@keyframes vague { 50% { transform: scaleX(.88); } }
.home-pastilles { position: absolute; left: 47vw; top: 12vh; display: flex; gap: 10px; }
.home-pastilles i { width: 30px; height: 42px; border-radius: 15px 15px 3px 3px; animation: floatY 3s ease-in-out infinite; }
.home-pastilles i:nth-child(1) { background: #e9311a; } .home-pastilles i:nth-child(2) { background: #8db4ad; animation-delay: -1s; } .home-pastilles i:nth-child(3) { background: #064c72; animation-delay: -2s; }
.cloud { position: absolute; width: 260px; height: 80px; border-radius: 99px; background: #fff; opacity: .85; filter: blur(2px); animation: drift linear infinite; z-index: 1; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 110px; height: 110px; left: 40px; top: -55px; }
.cloud::after { width: 80px; height: 80px; left: 130px; top: -35px; }
.cloud.c1 { top: 12%; animation-duration: 70s; animation-delay: -20s; }
.cloud.c2 { top: 70%; animation-duration: 95s; animation-delay: -60s; transform: scale(.7); }
.cloud.c3 { top: 38%; animation-duration: 120s; animation-delay: -5s; opacity: .55; }
.cloud.c4 { top: 86%; animation-duration: 80s; animation-delay: -40s; }
@keyframes drift { from { left: -320px; } to { left: 110vw; } }

.home-wrap { position: relative; z-index: 2; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 30px; padding: 72px clamp(20px, 6vw, 90px) 90px; }
.home-kicker { display: inline-flex; align-items: center; gap: 10px; font: 400 14px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border: 2px solid var(--encre); border-radius: 99px; background: var(--creme); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nessie); box-shadow: 0 0 0 0 var(--nessie); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(155,181,90,0); } 100% { box-shadow: 0 0 0 0 rgba(155,181,90,0); } }
.home-nom { margin: 14px 0 18px; display: grid; font: 700 clamp(48px, min(7vw, 11vh), 120px)/.86 'Souvenir', serif; letter-spacing: -.035em; }
.home-prenom { color: #064c72; }
.home-famille { color: #e9311a; padding-left: .4em; text-shadow: 3px 3px 0 #ed6335, 6px 6px 0 #ecae7d, 9px 9px 0 #8db4ad, 12px 12px 0 #026c80, 15px 15px 0 #064c72; }
.home-moi { display: flex; gap: 20px; align-items: flex-start; max-width: 600px; }
.home-photo { position: relative; flex: none; width: 96px; height: 116px; border-radius: 60px 60px 14px 14px; overflow: hidden; border: 3px solid var(--encre); background: var(--peche); box-shadow: 5px 5px 0 var(--encre); transform: rotate(-4deg); transition: transform .4s var(--ease-back); }
.home-photo:hover { transform: rotate(3deg) scale(1.05); }
.home-photo img { width: 100%; height: 100%; object-fit: cover; }
.home-photo-vide { display: none; position: absolute; inset: 0; place-items: center; text-align: center; font: 700 12px 'Space Mono', monospace; padding: 10px; }
.home-photo.is-vide img { display: none; }
.home-photo.is-vide .home-photo-vide { display: grid; }
.home-bio { font-size: clamp(15px, 1.15vw, 17px); }
.home-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* mode d'emploi du jeu */
.home-guide { margin: 20px 0 22px; max-width: 640px; padding: 12px 16px 14px; background: #fff; border: 3px solid var(--encre); border-radius: 20px; box-shadow: var(--ombre); }
.home-guide-titre { font: 700 13px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.home-guide-titre span { display: inline-block; animation: floatY 2s ease-in-out infinite; }
.home-guide ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-guide li { position: relative; display: grid; gap: 3px; align-content: start; padding: 9px 11px; border-radius: 14px; background: var(--creme); border: 2px dashed rgba(29, 26, 23, .35); }
.home-guide li b { font: 700 16px/1.15 'Souvenir', serif; }
.home-guide li small { font-size: 12.5px; line-height: 1.45; opacity: .85; }
.home-guide li kbd { font-size: 10px; height: 1.9em; min-width: 1.9em; border-bottom-width: 3px; }
.hg-num { position: absolute; right: -8px; top: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rouge); color: #fff; border: 2.5px solid var(--encre); font: 700 13px 'Space Mono', monospace; }
.home-guide li:nth-child(2) .hg-num { background: #8db4ad; } .home-guide li:nth-child(3) .hg-num { background: #026c80; }
#view-accueil .home-guide li { background: #f7f1e8; border-color: rgba(6, 76, 114, .3); }
#view-accueil .home-guide li b, #view-accueil .home-guide-titre { font-family: 'Souvenir', serif; }
#view-accueil .home-guide-titre { text-transform: none; letter-spacing: 0; font-size: 16px; color: #e9311a; }
#view-accueil .nessie-bulle strong { color: #ed6335; }
#view-accueil .dot { background: #ed6335; }
#view-accueil .home-marquee { background: #064c72; border-color: #064c72; }
#view-accueil .home-marquee span { color: #efe7dd; }
#view-accueil.is-entering .home-guide li { animation: popIn .6s var(--ease-back) both; animation-delay: calc(var(--i) * 120ms + 1s); }

.btn-ghost-txt { display: grid; line-height: 1.1; }
.btn-ghost-txt small { font: 400 11px 'Space Mono', monospace; opacity: .7; }
.home-revoir { margin-top: 18px; font: 700 12px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; opacity: .6; transition: opacity .2s, transform .3s var(--ease-back); }
.home-revoir:hover { opacity: 1; transform: rotate(-2deg); }

/* "clique-moi" sur Nessie, jusqu'au premier clic */
.nessie-perso { position: relative; }
.nessie-indice {
  position: absolute; left: 6%; top: 38%; padding: 4px 10px; border-radius: 99px; background: var(--jaune); border: 2.5px solid var(--encre);
  font: 700 12px 'Space Mono', monospace; rotate: -12deg; animation: floatY 1.6s ease-in-out infinite; pointer-events: none;
}
.nessie-perso.a-parle .nessie-indice { display: none; }

/* raccourcis vers les bâtiments */
.home-batiments { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; max-width: 420px; }
.home-batiments > span { width: 100%; text-align: center; font: 700 12px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.home-batiments a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 99px; text-decoration: none;
  background: var(--creme); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); font-weight: 700; font-size: 14px;
  transition: transform .3s var(--ease-back), background .2s; animation: popIn .6s var(--ease-back) both; animation-delay: calc(var(--i) * 80ms + 1.4s);
}
.home-batiments a::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 2px solid var(--encre); }
.home-batiments a small { font: 400 11px 'Space Mono', monospace; opacity: .6; }
.home-batiments a:hover { transform: translateY(-3px) rotate(-2deg); background: #fff; }
.home-liens a { text-decoration: none; font: 700 14px 'Space Mono', monospace; padding: 7px 14px; border: 2px solid var(--encre); border-radius: 99px; background: var(--creme); transition: all .3s var(--ease-back); animation: popIn .6s var(--ease-back) both; animation-delay: calc(var(--i) * 80ms + 900ms); }
.home-liens a:hover { background: var(--encre); color: var(--creme); transform: translateY(-3px) rotate(-3deg); }
@keyframes popIn { from { opacity: 0; transform: scale(.4); } }
.home-cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.home-nessie { position: relative; display: grid; justify-items: center; transition: transform .6s var(--ease-out); }
.nessie-perso { width: min(360px, 34vw); animation: floatNessie 4s ease-in-out infinite; transform-origin: 50% 100%; }
.nessie-perso img { filter: drop-shadow(8px 10px 0 rgba(29,26,23,.15)); transition: transform .3s var(--ease-back); }
.nessie-perso:hover img { transform: rotate(-4deg) scale(1.03); }
.nessie-perso.is-jump { animation: jump .8s var(--ease-out), floatNessie 4s ease-in-out infinite .8s; }
@keyframes floatNessie { 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes jump { 0% { transform: scale(1, 1); } 15% { transform: scale(1.15, .8); } 40% { transform: translateY(-90px) scale(.9, 1.12) rotate(-8deg); } 70% { transform: translateY(0) scale(1.12, .88); } 85% { transform: scale(.96, 1.04); } }
.nessie-ombre { width: 50%; height: 22px; margin-top: -24px; border-radius: 50%; background: rgba(29, 26, 23, .15); animation: ombre 4s ease-in-out infinite; }
@keyframes ombre { 50% { transform: scale(.8); opacity: .6; } }
.nessie-bulle { position: relative; max-width: 330px; padding: 16px 20px; margin-bottom: 18px; background: #fff; border: 3px solid var(--encre); border-radius: 24px; box-shadow: var(--ombre); animation: popIn .7s var(--ease-back) both 1.1s; }
.nessie-bulle::after { content: ''; position: absolute; left: 40%; bottom: -19px; width: 26px; height: 26px; background: #fff; border-right: 3px solid var(--encre); border-bottom: 3px solid var(--encre); transform: skewX(25deg) rotate(45deg); }
.nessie-bulle strong { font: 700 13px 'Space Mono', monospace; text-transform: uppercase; color: var(--nessie); letter-spacing: .1em; }
.nessie-bulle p { font-size: 15px; }
.nessie-bulle.is-pop { animation: bullePop .45s var(--ease-back); }
@keyframes bullePop { 0% { transform: scale(.85) rotate(-3deg); } }

.home-marquee { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--encre); color: var(--creme); overflow: hidden; border-top: 3px solid var(--encre); transform: rotate(-1deg) translateY(6px); transform-origin: left; }
.home-marquee div { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.home-marquee span { font: 700 18px/1 'Souvenir', serif; padding: 12px 0; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

#view-accueil.is-entering .home-kicker { animation: popIn .6s var(--ease-back) both .1s; }
#view-accueil.is-entering .home-moi { animation: slideUp .8s var(--ease-out) both .6s; }
#view-accueil.is-entering .home-cta { animation: slideUp .8s var(--ease-out) both .9s; }
#view-accueil.is-entering .home-nessie { animation: nessieIn 1.2s var(--ease-back) both .3s; }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } }
@keyframes nessieIn { from { opacity: 0; transform: translateY(120px) scale(.6) rotate(10deg); } }

@media (max-width: 860px) {
  .home-wrap { grid-template-columns: 1fr; padding-top: 80px; text-align: left; }
  .home-nessie { order: -1; }
  .nessie-perso { width: min(220px, 55vw); }
  .home-arche { left: 8vw; right: 8vw; width: auto; top: 70px; bottom: auto; height: 62vh; opacity: .9; }
  .home-vagues, .home-pastilles { display: none; }
}
@media (max-width: 640px) {
  .home-guide ol { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .home-moi { flex-direction: column; }
  .btn-play { padding: 16px 22px 16px 16px; }
}

/* ==========================================================
   JEU
   ========================================================== */
#view-jeu { background: var(--ciel); }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#game-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.b-label {
  position: absolute; left: 0; top: 0; display: grid; justify-items: center; pointer-events: none;
  padding: 6px 12px 7px; background: var(--creme); border: 2.5px solid var(--encre); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--encre); white-space: nowrap; transition: background .25s;
}
.b-label::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: inherit; border-right: 2.5px solid var(--encre); border-bottom: 2.5px solid var(--encre); transform: rotate(45deg); }
.b-label-lieu { font: 400 10px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.b-label-nom { font: 700 17px/1.1 'Souvenir', serif; }
.b-label.is-hot { background: var(--c); color: #fff; }
.b-label.is-hot .b-label-lieu { opacity: .9; }
.b-prompt {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; gap: 8px; align-items: center;
  padding: 7px 14px; border-radius: 99px; background: var(--encre); color: var(--creme); font-weight: 700; font-size: 14px;
  opacity: 0; scale: .5; transition: opacity .25s, scale .35s var(--ease-back); pointer-events: none;
}
.b-prompt kbd { animation: kbdBounce 1s ease-in-out infinite; }
.b-prompt.is-in { opacity: 1; scale: 1; pointer-events: auto; }
@keyframes kbdBounce { 50% { transform: translateY(-3px); } }
.roi-bulle {
  position: absolute; left: 0; top: 0; max-width: 270px; padding: 10px 14px 12px;
  background: #fff; border: 3px solid var(--encre); border-radius: 18px 18px 18px 4px; box-shadow: 4px 4px 0 var(--encre);
  opacity: 0; scale: .4; transform-origin: 20% 100%; transition: opacity .2s, scale .4s var(--ease-back);
}
.roi-bulle.is-in { opacity: 1; scale: 1; }
.roi-nom { display: inline-block; font: 700 11px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .1em; background: var(--jaune); padding: 1px 8px; border: 2px solid var(--encre); border-radius: 99px; margin-bottom: 4px; }
.roi-bulle p { font: 400 15px/1.35 'Souvenir', serif; min-height: 1.35em; }
.egg-mark {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center;
  font: 700 18px 'Souvenir', serif; color: var(--encre); background: var(--jaune); border: 2.5px solid var(--encre); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242,183,5,.6); animation: eggPulse 1.4s infinite; opacity: 0; transition: opacity .4s;
}
.egg-mark.is-in { opacity: 1; }
@keyframes eggPulse { 70% { box-shadow: 0 0 0 16px rgba(242,183,5,0); } 100% { box-shadow: 0 0 0 0 rgba(242,183,5,0); } }

.game-hud { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; align-items: center; z-index: 5; }
/* logo : Nessie qui sort de l'eau dans un médaillon */
.hud-logo {
  display: block; width: 56px; height: 56px; border-radius: 50%; text-decoration: none;
  box-shadow: 3px 3px 0 var(--encre); transition: transform .35s var(--ease-back);
}
.hud-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-logo:hover { transform: rotate(-8deg) scale(1.08); }
.logo-vague { animation: logoVague 3s linear infinite; }
.logo-vague-fond { animation-duration: 4.5s; animation-direction: reverse; }
@keyframes logoVague { to { transform: translateX(24px); } }
.logo-nessie { transform-origin: 32px 52px; animation: logoFlotte 2.6s ease-in-out infinite; }
@keyframes logoFlotte { 50% { transform: translateY(1.5px) rotate(-2deg); } }
.hud-logo:hover .logo-nessie { animation: logoSaute .6s var(--ease-back); }
@keyframes logoSaute { 40% { transform: translateY(-7px) rotate(4deg); } }
.hud-eggs { padding: 8px 14px; background: var(--creme); border: 2.5px solid var(--encre); border-radius: 99px; box-shadow: 3px 3px 0 var(--encre); font: 700 14px 'Space Mono', monospace; }
.hud-eggs small { font-weight: 400; opacity: .7; }
.hud-eggs-ico { color: var(--jaune); -webkit-text-stroke: 1px var(--encre); display: inline-block; animation: spin 6s linear infinite; }
.hud-eggs.is-pop { animation: hudPop .6s var(--ease-back); background: var(--jaune); }
/* compteur complet : version dorée */
.hud-eggs.is-complet {
  position: relative; overflow: hidden; color: #4a3200;
  background: linear-gradient(120deg, #f7d26a, #fff2b8 35%, #e8b53a 55%, #ffe58a 80%, #d9a22c);
  box-shadow: 3px 3px 0 var(--encre), 0 0 18px rgba(255, 205, 60, .7);
}
.hud-eggs.is-complet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); animation: shine 3s ease-in-out infinite; }
.hud-eggs.is-complet .hud-eggs-ico::before { content: '👑'; }
.hud-eggs.is-complet .hud-eggs-ico { font-size: 0; -webkit-text-stroke: 0; animation: none; }
.hud-eggs.is-complet .hud-eggs-ico::before { font-size: 15px; }

/* ---------- Cinématique du couronnement ---------- */
#view-jeu.en-cine .game-hud, #view-jeu.en-cine .quick, #view-jeu.en-cine .minimap-box, #view-jeu.en-cine .controls-hint, #view-jeu.en-cine #game-labels { opacity: 0; pointer-events: none; transition: opacity .5s; }
body:has(#view-jeu.en-cine) .dock { opacity: 0; pointer-events: none; transition: opacity .5s; }
.cine-roi { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.cine-bande { position: absolute; left: 0; right: 0; height: 12vh; background: #0d0b08; transition: transform .8s var(--ease-out); }
.cine-haut { top: 0; transform: translateY(-100%); box-shadow: 0 6px 30px rgba(0, 0, 0, .4); }
.cine-bas { bottom: 0; transform: translateY(100%); box-shadow: 0 -6px 30px rgba(0, 0, 0, .4); }
.cine-roi.is-in .cine-bande { transform: none; }
.cine-roi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(40, 20, 0, .45) 100%); opacity: 0; transition: opacity 1s; }
.cine-roi.is-in::before { opacity: 1; }
.cine-titre {
  position: absolute; left: 50%; bottom: calc(12vh + 22px); width: min(640px, calc(100vw - 32px)); text-align: center;
  transform: translate(-50%, 30px) scale(.9); opacity: 0; transition: transform .8s var(--ease-back), opacity .5s;
}
.cine-roi.is-pose .cine-titre { transform: translate(-50%, 0); opacity: 1; }
.cine-titre small { display: block; font: 700 13px 'Space Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: #ffe58a; text-shadow: 0 0 10px rgba(255, 200, 60, .8); }
.cine-titre strong {
  display: block; margin: 6px 0 8px; font: 700 clamp(30px, 5vw, 58px)/1 'Souvenir', serif; letter-spacing: -.01em;
  background: linear-gradient(100deg, #b8811c 0%, #ffe9a3 25%, #f2b705 45%, #fff6d0 55%, #d99a20 75%, #ffe9a3 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #2a1a00) drop-shadow(0 0 18px rgba(255, 200, 60, .55));
  animation: orBrille 2.6s linear infinite;
}
@keyframes orBrille { to { background-position: -220% 0; } }
.cine-titre p { font-weight: 700; color: #fff8e1; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

/* Nessie couronnée sur l'accueil */
.nessie-perso.is-roi img { filter: drop-shadow(0 0 16px rgba(255, 205, 60, .8)) drop-shadow(8px 10px 0 rgba(29,26,23,.15)); }
@keyframes hudPop { 30% { transform: scale(1.3) rotate(-6deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.quick { position: absolute; left: 14px; top: 84px; z-index: 5; width: 230px; transition: transform .5s var(--ease-back); }
.quick-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  background: var(--encre); color: var(--creme); border-radius: 14px; font: 700 14px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em;
}
.quick-toggle svg { transition: transform .4s var(--ease-back); }
.quick.is-ferme .quick-toggle svg { transform: rotate(-90deg); }
#quick-list { list-style: none; display: grid; gap: 6px; margin-top: 8px; transition: opacity .3s, transform .4s var(--ease-back); transform-origin: top; }
.quick.is-ferme #quick-list { opacity: 0; transform: scaleY(.3) translateY(-20px); pointer-events: none; }
#quick-list li { display: flex; gap: 6px; animation: quickIn .5s var(--ease-back) both; animation-delay: calc(var(--i) * 60ms + 300ms); }
@keyframes quickIn { from { opacity: 0; transform: translateX(-40px); } }
.quick-go {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left;
  background: var(--creme); border: 2.5px solid var(--encre); border-radius: 12px; box-shadow: 3px 3px 0 var(--encre);
  font: 700 16px/1.1 'Souvenir', serif; transition: transform .3s var(--ease-back), background .2s;
}
.quick-go small { display: block; font: 400 10px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.quick-go:hover { transform: translateX(6px); background: var(--c); color: #fff; }
.quick-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid var(--encre); }
.quick-walk { flex: none; width: 42px; display: grid; place-items: center; background: var(--creme); border: 2.5px solid var(--encre); border-radius: 12px; box-shadow: 3px 3px 0 var(--encre); transition: transform .3s var(--ease-back); }
.quick-walk:hover { transform: rotate(-8deg) scale(1.06); background: var(--nessie); }

.minimap-box { position: absolute; right: 14px; bottom: 14px; z-index: 5; padding: 6px; background: var(--creme); border: 3px solid var(--encre); border-radius: 16px; box-shadow: 4px 4px 0 var(--encre); }
#minimap { display: block; border-radius: 10px; background: var(--ciel); }
.zoom-btns { position: absolute; left: -46px; bottom: 0; display: grid; gap: 6px; }
.zoom-btns button { width: 38px; height: 38px; border-radius: 50%; background: var(--creme); border: 2.5px solid var(--encre); box-shadow: 2px 2px 0 var(--encre); font: 700 20px/1 'Archivo', sans-serif; transition: transform .25s var(--ease-back); }
.zoom-btns button:hover { transform: scale(1.12); background: var(--jaune); }

.controls-hint {
  position: absolute; left: 50%; bottom: 24px; z-index: 5; display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 14px 22px; background: rgba(243, 236, 226, .95); border: 3px solid var(--encre); border-radius: 18px; box-shadow: var(--ombre);
  font-size: 14px; opacity: 0; transform: translate(-50%, 30px) scale(.9); transition: all .6s var(--ease-back); pointer-events: none;
}
.controls-hint.is-in { opacity: 1; transform: translate(-50%, 0); }

#view-jeu.is-entering .game-hud, #view-jeu.is-entering .minimap-box { animation: popIn .6s var(--ease-back) both .3s; }

@media (max-width: 700px) {
  .quick { width: 190px; top: 76px; }
  .minimap-box { transform: scale(.75); transform-origin: right bottom; }
  .hud-eggs small { display: none; }
  .controls-hint { width: calc(100vw - 32px); font-size: 13px; }
}

/* ==========================================================
   MODE SANS JOUER
   ========================================================== */
#view-ile { background: var(--creme); }
#view-ile::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 1px 1px, rgba(29,26,23,.13) 1.2px, transparent 0) 0 0 / 22px 22px; pointer-events: none; }
.ov-head { position: relative; padding: 110px clamp(20px, 6vw, 90px) 40px; display: grid; gap: 14px; justify-items: start; max-width: 1100px; }
.ov-kicker { font: 400 13px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .2em; color: var(--rouge); }
.ov-titre { font: 700 clamp(46px, 8vw, 110px)/.9 'Souvenir', serif; letter-spacing: -.03em; }
.ov-intro { font-size: 18px; max-width: 560px; }
.ov-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px; padding: 30px clamp(20px, 6vw, 90px) 60px; }
.ov-card { position: relative; display: flex; flex-direction: column; border: 3px solid var(--encre); border-radius: 22px; box-shadow: 7px 7px 0 var(--encre); overflow: hidden; background: #fff; transition: transform .45s var(--ease-back), box-shadow .3s, opacity .8s var(--ease-out); }
.ov-card.is-in:hover { transform: translate(-4px, -8px) rotate(-1deg); box-shadow: 12px 14px 0 var(--encre); }
.ov-card-lien { position: absolute; inset: 0; z-index: 3; }
.ov-bat { height: 190px; overflow: hidden; display: grid; place-items: end center; background: var(--c); }
.ov-bat img { height: 112%; width: auto; max-width: none; translate: 0 5%; transition: transform .6s var(--ease-back); }
.ov-card:hover .ov-bat img { transform: translateY(-8px) scale(1.06); }
.ov-body { position: relative; display: grid; gap: 8px; padding: 20px 22px 24px; flex: 1; align-content: start; }
.ov-lieu { font: 400 12px 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.ov-nom { font: 700 34px/1 'Souvenir', serif; }
.ov-media { margin: 8px 0 4px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 2px solid currentColor; }
.ov-projet { font: 700 18px/1.2 'Archivo', sans-serif; }
.ov-resume { font-size: 14px; opacity: .85; }
.ov-entrer { justify-self: start; margin-top: 8px; padding: 8px 16px; border-radius: 99px; border: 2px solid currentColor; font-weight: 700; font-size: 14px; transition: all .3s var(--ease-back); }
.ov-card:hover .ov-entrer { background: var(--encre); color: #fff; border-color: var(--encre); padding-right: 22px; }
.ov-foot { position: relative; text-align: center; padding: 30px 20px 50px; font: 400 13px 'Space Mono', monospace; opacity: .7; }

/* Média vide (case à remplir) */
.media-vide {
  width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 12px, transparent 12px 24px);
  font: 700 13px/1.3 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .1em; opacity: .75;
}
.media-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.media-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}