/* Un tableau accroché au mur : le cadre en bois reste fixe, la mer glisse dessous.
 * Charte « Feutre & Lucioles » : feutre, laine, papier kraft, lumière de lucioles. */
:root {
  --nuit: #10242e;
  --mer: #2e6378;
  --parchemin: #f1e2c0;
  --noyer: #3b2516;
  --luciole: #ffd98a;
  --corail: #e07a6a;
  --mousse: #7c9a45;
  --liege: #b07a4a;
  --kraft: #c9a26b;
  --texte-doux: #bfb194;
  --verre: rgba(16, 36, 46, 0.72);

  --police-titre: "Fredericka the Great", Georgia, serif;
  --police-texte: "Andika", "Trebuchet MS", system-ui, sans-serif;

  /* épaisseur du cadre, proportionnelle au plus petit côté de l'écran */
  --bord: clamp(16px, 4.2vmin, 52px);
  --bord-h: calc(var(--bord) * 0.88);
  --bord-d: var(--bord);
  --bord-b: calc(var(--bord) * 0.74);
  --bord-g: var(--bord);

  color-scheme: dark;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--police-texte);
  overflow: hidden;
}

.tableau { position: relative; height: 100%; overflow: hidden; }

.carte {
  position: absolute;
  inset: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  background: var(--mer);
  transition: transform 0.75s cubic-bezier(0.6, 0, 0.9, 0.4), filter 0.75s ease-in;
}
.leaflet-container { background: var(--mer); font-family: var(--police-texte); outline: none; }
.leaflet-tile-pane { filter: brightness(0.8) saturate(0.92); transition: filter 0.8s; }

/* bouton de feutre : liège, couture au point avant */
.commandes button, .lecteur .fermer, .lecteur .jouer, .lecteur .ouvrir {
  border: 0;
  background: var(--liege);
  color: var(--parchemin);
  outline: 2px dashed rgba(241, 226, 192, 0.7);
  outline-offset: -6px;
  box-shadow: 0 4px 0 var(--noyer), 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.cadre {
  position: absolute;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  border-style: solid;
  border-width: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  border-image: url("cadre.jpg") 88 100 74 100 stretch;
}
.cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 calc(var(--bord) * 0.8) rgba(0, 0, 0, 0.55);
}

/* Les univers : ils respirent doucement pour inviter au clic */
.univers {
  cursor: pointer;
  animation: luire 4.4s ease-in-out infinite;
  animation-delay: var(--delai, 0s);
  transition: filter 0.3s, opacity 0.8s;
}
.univers:hover, .univers:focus-visible {
  animation-play-state: paused;
  filter: brightness(1.22) drop-shadow(0 0 18px rgba(255, 217, 138, 0.95));
  outline: none;
}
@keyframes luire {
  0%, 100% { filter: brightness(1.02) drop-shadow(0 0 2px rgba(255, 217, 138, 0.3)); }
  50% { filter: brightness(1.14) drop-shadow(0 0 13px rgba(255, 217, 138, 0.85)); }
}

/* Plongée : l'univers touché s'illumine, les autres s'éteignent, puis on traverse la matière */
.plongee .leaflet-tile-pane { filter: brightness(0.45) saturate(0.7); }
.plongee .univers:not(.choisi) { opacity: 0.25; animation: none; }
.plongee .univers.choisi { animation: none; filter: brightness(1.3) drop-shadow(0 0 26px rgba(255, 217, 138, 1)); }
.traverse .carte { transform: scale(4); filter: blur(10px) brightness(1.8); }

.leaflet-tooltip.etiquette {
  padding: 6px 16px 6px 22px;
  border: 0;
  border-radius: 3px;
  background: var(--kraft);
  color: var(--noyer);
  font: 400 1.15rem/1.25 var(--police-titre);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.leaflet-tooltip.etiquette::before { display: none; }

.indice {
  position: absolute;
  z-index: 960;
  left: 50%;
  bottom: calc(var(--bord-b) + 18px);
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: calc(100% - 2 * var(--bord) - 100px);
  padding: 9px 18px;
  border-radius: 18px 14px 20px 12px;
  background: var(--verre);
  backdrop-filter: blur(6px);
  color: var(--parchemin);
  font: 400 clamp(0.95rem, 2.4vmin, 1.15rem)/1.35 var(--police-texte);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  transition: opacity 0.8s;
}
.indice.parti { opacity: 0; }

.commandes {
  position: absolute;
  z-index: 800;
  right: calc(var(--bord-d) + 12px);
  top: calc(var(--bord-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.commandes button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 22px 18px 24px 16px;
  font: 700 1.6rem/1 var(--police-texte);
}
.commandes button:hover, .lecteur .jouer:hover, .lecteur .ouvrir:hover { background: #c08a58; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--luciole) !important; outline-offset: 3px !important; }

.lanterne {
  position: absolute;
  z-index: 961;
  left: calc(var(--bord-g) + 6px);
  bottom: calc(var(--bord-b) + 4px);
  width: clamp(56px, 11vmin, 84px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(255, 217, 138, 0.55));
  transition: transform 0.3s;
}
.lanterne img { display: block; width: 100%; }
.lanterne:hover { transform: rotate(-6deg); }

/* La scène : on est dans l'univers */
.scene {
  position: absolute;
  z-index: 850;
  inset: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--mer) 0%, var(--nuit) 78%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.scene.ouverte { opacity: 1; }
.scene-fond {
  position: absolute;
  inset: -6%;
  background: var(--fond) center / cover no-repeat;
  transform: scale(1.8);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* vignette : les bords s'assombrissent, comme une lumière posée au centre de l'univers */
.scene-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(16, 36, 46, 0) 30%, rgba(16, 36, 46, 0.7) 100%);
}
.scene.clair .scene-fond::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 243, 207, 0.15) 20%, rgba(59, 37, 22, 0.55) 100%);
}
.scene.ouverte .scene-fond { transform: scale(1); animation: respirer 9s 1.6s ease-in-out infinite; }
@keyframes respirer { 50% { transform: scale(1.05); } }
.scene-voile {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 243, 207, 0.9), rgba(255, 217, 138, 0.25) 40%, transparent 70%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.1s ease-out 0.1s;
}
.scene.ouverte .scene-voile { opacity: 0; }

.boussole {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  width: clamp(54px, 10vmin, 76px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.4s;
}
.boussole, .lanterne { border-radius: 50%; }
.boussole img { display: block; width: 100%; }
.boussole:hover { transform: rotate(-20deg); }

.scene h1 {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: calc(clamp(54px, 10vmin, 76px) + 24px);
  right: 20px;
  margin: 0;
  font: 400 clamp(1.3rem, 4.4vmin, 2.3rem)/1.12 var(--police-titre);
  color: var(--parchemin);
  text-align: right;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s 0.5s, transform 0.6s 0.5s;
}
.scene.ouverte h1 { opacity: 1; transform: none; }
.scene.clair h1 { color: var(--noyer); text-shadow: 0 1px 10px rgba(255, 243, 207, 0.7); }

.monde { position: absolute; inset: clamp(70px, 14vmin, 110px) 0 0; }
.objet-cadre {
  position: absolute;
  transform: scale(1.6);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s;
}
.scene.ouverte .objet-cadre { transform: none; opacity: 1; }
.objet {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 28px rgba(255, 217, 138, 0.35)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}

/* présentation « dessin » : on touche une partie du dessin */
.zones { list-style: none; margin: 0; padding: 0; }
.zone { position: absolute; }
.zone button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px dashed transparent;
  border-radius: 40% 34% 44% 30%;
  background: none;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.zone button:hover, .zone button:focus-visible {
  border-color: rgba(255, 243, 207, 0.9);
  background: rgba(255, 217, 138, 0.18);
  box-shadow: 0 0 26px rgba(255, 217, 138, 0.7), inset 0 0 20px rgba(255, 217, 138, 0.5);
}
.luciole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff3cf;
  box-shadow: 0 0 10px 5px rgba(255, 217, 138, 0.85), 0 0 26px 12px rgba(255, 217, 138, 0.35);
  opacity: 0;
  animation: scintiller 2.6s ease-in-out infinite;
  animation-delay: calc(1.4s + var(--i) * 0.4s);
}
@keyframes scintiller {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.15); }
}
.zone .etiquette-kraft { top: 60%; }

.galets { list-style: none; margin: 0; padding: 0; }
.galet {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.5s;
  transition-delay: calc(0.8s + var(--i) * 0.16s);
}
.scene.ouverte .galet { transform: translate(-50%, -50%); opacity: 1; }
.galet button {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: flotter 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.3s);
}
.galet img {
  display: block;
  width: var(--taille, 100px);
  transform: rotate(var(--penche));
  transition: transform 0.3s, filter 0.3s;
}
.galet button:hover img, .galet button:focus-visible img {
  transform: rotate(0) scale(1.1);
  filter: drop-shadow(0 0 16px rgba(255, 217, 138, 0.75));
}
@keyframes flotter {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

/* étiquette kraft : visible au survol, toujours visible au doigt */
.etiquette-kraft {
  position: absolute;
  left: 50%;
  top: 92%;
  width: max-content;
  max-width: 10em;
  padding: 5px 12px;
  border-radius: 3px;
  background: var(--kraft);
  color: var(--noyer);
  font: 700 0.95rem/1.2 var(--police-texte);
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) rotate(-3deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.galet button:hover .etiquette-kraft, .galet button:focus-visible .etiquette-kraft { opacity: 1; }
@media (hover: none) {
  [data-presentation="guirlande"] .etiquette-kraft { max-width: 7em; }
  .etiquette-kraft { opacity: 1; max-width: 8em; font-size: 0.82rem; padding: 3px 9px; }
}

.vide {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  width: min(80%, 26ch);
  margin: 0;
  color: var(--texte-doux);
  font: 400 1.15rem/1.4 var(--police-texte);
  text-align: center;
}

/* Le lecteur */
.lecteur {
  width: min(92vw, 640px);
  max-height: 92vh;
  box-sizing: border-box;
  padding: 26px 20px 30px;
  border: 0;
  border-radius: 28px 22px 30px 20px;
  background: radial-gradient(ellipse at 50% 30%, #234f60 0%, #0b1a21 85%);
  color: var(--parchemin);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  outline: 2px dashed rgba(241, 226, 192, 0.35);
  outline-offset: -10px;
}
.lecteur[open] { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lecteur::backdrop { background: rgba(5, 14, 18, 0.72); backdrop-filter: blur(4px); }
.lecteur form { position: absolute; right: 14px; top: 14px; margin: 0; z-index: 1; }
.lecteur .fermer {
  width: 46px;
  height: 46px;
  border-radius: 22px 18px 24px 16px;
  font: 400 1.8rem/1 var(--police-texte);
}
.lecteur h2 {
  margin: 0;
  max-width: 20ch;
  font: 400 clamp(1.5rem, 5vmin, 2.2rem)/1.15 var(--police-titre);
  text-align: center;
  text-wrap: balance;
}
.lecteur-corps { display: grid; place-items: center; max-width: 100%; }
.lecteur-corps video, .lecteur-corps > img:not(.galet-lecture) {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  border-radius: 10px;
  border: 6px solid var(--noyer);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.type-video, .type-image { padding-top: 70px; }
.galet-lecture { width: clamp(150px, 34vmin, 210px); filter: drop-shadow(0 0 0 rgba(255, 217, 138, 0)); }
.lecteur.joue .galet-lecture { animation: battre 1.8s ease-in-out infinite; }
@keyframes battre {
  50% { transform: scale(1.06) rotate(2deg); filter: drop-shadow(0 0 26px rgba(255, 217, 138, 0.7)); }
}
.lecteur-commandes { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lecteur input[type="range"] {
  width: 100%;
  height: 26px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  --avance: 0%;
}
.lecteur input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--luciole) var(--avance), rgba(241, 226, 192, 0.3) var(--avance));
}
.lecteur input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(241, 226, 192, 0.3); }
.lecteur input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--luciole); }
.lecteur input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff3cf;
  border: 2px solid var(--noyer);
}
.lecteur input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff3cf; border: 2px solid var(--noyer); }
.temps { margin: 0; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.lecteur .jouer {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 38px 34px 40px 32px;
  outline-offset: -8px;
}
.lecteur .jouer svg { width: 30px; height: 30px; }
.lecteur .ouvrir {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 24px 18px 26px 16px;
  font: 700 1.1rem/1 var(--police-texte);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .univers { animation: none; filter: drop-shadow(0 0 8px rgba(255, 217, 138, 0.7)); }
  .carte, .scene, .scene-fond, .scene-voile, .objet, .galet, .scene h1, .indice { transition: none; }
  .galet button, .scene.ouverte .scene-fond, .lecteur.joue .galet-lecture { animation: none; }
}

/* sur les fonds clairs (sable, terre, prairie), une ombre portée détache les galets */
.scene.clair .galet img { filter: drop-shadow(0 6px 10px rgba(59, 37, 22, 0.5)); }

/* présentation « lucioles » : chaque galet porte un halo de lumière */
[data-presentation="lucioles"] .galet::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 207, 0.7) 0%, rgba(255, 217, 138, 0.3) 35%, rgba(255, 217, 138, 0) 68%);
  animation: scintiller 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
  pointer-events: none;
}
[data-presentation="lucioles"] .galet button { animation-name: voleter; animation-duration: 7s; }
@keyframes voleter {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(6px, -8px); }
  50% { transform: translate(-4px, -12px); }
  75% { transform: translate(-7px, -3px); }
}

/* présentation « guirlande » : fil, ampoules, galets pendus */
.guirlande { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.guirlande path { fill: none; stroke: #d9cba9; stroke-width: 1.6; }
.guirlande .ampoule { fill: #fff3cf; filter: drop-shadow(0 0 5px rgba(255, 217, 138, 0.95)); animation: scintiller 3s ease-in-out infinite; animation-delay: calc(var(--k) * -0.37s); }
[data-presentation="guirlande"] .galet button { animation-name: balancer; transform-origin: 50% calc(-1 * var(--fil)); }
[data-presentation="guirlande"] .galet button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: 1.6px;
  height: var(--fil);
  background: #d9cba9;
}
@keyframes balancer {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* présentation « bulles » : le galet est pris dans une bulle */
[data-presentation="bulles"] .galet button {
  display: grid;
  place-items: center;
  width: calc(var(--taille) * 1.25);
  height: calc(var(--taille) * 1.25);
  border: 2px solid rgba(241, 226, 192, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(46, 99, 120, 0.18) 100%);
  box-shadow: inset -6px -8px 18px rgba(255, 255, 255, 0.12);
  animation-name: monter;
  animation-duration: 6.5s;
}
[data-presentation="bulles"] .galet img { width: calc(var(--taille) * 0.85); }
[data-presentation="bulles"] .etiquette-kraft { top: 96%; }
@keyframes monter {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(5px, -14px); }
  66% { transform: translate(-5px, -7px); }
}

@media (prefers-reduced-motion: reduce) {
  .luciole, .guirlande .ampoule, [data-presentation] .galet button, [data-presentation="lucioles"] .galet::before { animation: none; opacity: 1; }
  .objet-cadre { transition: none; }
}