/* 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;
  --police-machine: "Special Elite", "Courier New", monospace;

  /* épaisseur du cadre, proportionnelle au plus petit côté de l'écran */
  --bord: clamp(22px, 5.8vmin, 72px);
  --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;
  background: linear-gradient(rgba(36, 16, 4, 0.55), rgba(36, 16, 4, 0.55)), url("fonds/bois-tableau.jpg") center / 900px #3e2410;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
}
/* le tableau remplit toute la fenêtre (ou tout le bloc Wix), quelles que soient ses proportions : jamais de bandes */

.carte {
  position: absolute;
  inset: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  box-shadow: 0 0 0 1px rgba(40, 22, 8, 0.7), 0 0 18px rgba(0, 0, 0, 0.6);
  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 */
.lecteur .fermer, .lecteur .jouer, .lecteur .ouvrir, .lecteur .tourner-page {
  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 */
/* décor posé sur les côtés de la carte très large (le hameau, téléphone couché) : couleurs adoucies et un peu passées
   pour qu'il se fonde dans la carte, avec une ombre légère */
.decor {
  filter: sepia(0.2) saturate(0.72) contrast(0.92) brightness(0.8) blur(0.3px) drop-shadow(2px 4px 6px rgba(40, 24, 8, 0.35));
  pointer-events: none;
}
/* la lueur de la lampe de l'algue sacrée : elle vacille doucement, comme une vieille ampoule */
.lueur-lampe { pointer-events: none; }
.lueur-lampe .halo { animation: vaciller-ampoule 5.5s ease-in-out infinite; transform-origin: 300px 145px; }
.lueur-lampe .cone { opacity: 0.7; animation: vaciller-cone 5.5s ease-in-out infinite; }
@keyframes vaciller-ampoule {
  0%, 100% { opacity: 0.85; scale: 1; }
  38% { opacity: 1; scale: 1.06; }
  44% { opacity: 0.6; scale: 0.96; }
  48% { opacity: 0.95; scale: 1.03; }
  72% { opacity: 0.8; scale: 0.99; }
}
@keyframes vaciller-cone {
  0%, 100% { opacity: 0.6; }
  38% { opacity: 0.8; }
  44% { opacity: 0.4; }
  48% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .lueur-lampe .halo, .lueur-lampe .cone { animation: none; }
}
/* sur ordinateur (« fondu ») : très passé, couleur du papier de la carte et à demi transparent, comme imprimé dedans,
   sans ombre (« mix-blend-mode » n'agirait pas : le calque de Leaflet est isolé des tuiles) */
.decor.fondu {
  opacity: 0.7;
  filter: sepia(0.9) saturate(0.85) contrast(0.78) brightness(0.86) blur(0.4px);
}
/* la vieille carte du Ha'Mot est la porte secrète d'un univers : elle ne brille pas, mais s'éclaire quand on la survole */
.decor.porte-secrete { pointer-events: auto; cursor: pointer; transition: filter 0.4s, opacity 0.4s; }
.decor.porte-secrete:hover, .decor.porte-secrete:focus-visible, .plongee .decor.porte-secrete.choisi {
  opacity: 1;
  outline: none;
  filter: sepia(0.15) brightness(1.08) drop-shadow(0 0 16px rgba(255, 217, 138, 0.9));
}
/* sous l'eau (la méduse) : sombre, bleutée, à demi transparente, ondulée par l'eau (filtre #sous-l-eau dans index.html) ;
   elle flotte doucement et sa lumière palpite comme celle des univers. « translate » et « rotate » s'ajoutent
   au placement de Leaflet (qui utilise « transform ») sans le déranger */
.decor.sous-marin {
  opacity: 0.78;
  animation: flotter-sous-l-eau 8s ease-in-out infinite, palpiter-eau 4.4s ease-in-out infinite;
}
@keyframes flotter-sous-l-eau {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50% { translate: 5px -12px; rotate: 1.5deg; }
}
@keyframes palpiter-eau {
  0%, 100% { filter: url(#sous-l-eau) sepia(0.35) hue-rotate(165deg) saturate(0.6) contrast(0.82) brightness(0.66) drop-shadow(0 0 3px rgba(150, 210, 230, 0.2)); }
  50% { filter: url(#sous-l-eau) sepia(0.35) hue-rotate(165deg) saturate(0.7) contrast(0.85) brightness(0.84) drop-shadow(0 0 14px rgba(160, 220, 240, 0.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .decor.sous-marin { animation: none; filter: sepia(0.35) hue-rotate(165deg) saturate(0.6) contrast(0.82) brightness(0.72); }
}
.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); }

/* étiquette de nom d'univers : une étiquette de bagage en papier kraft, pendue à sa ficelle ;
   écriture ronde et lisible, et les noms longs passent sur deux lignes équilibrées */
.leaflet-tooltip.etiquette {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  white-space: normal;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.45));
}
.leaflet-tooltip.etiquette::before { display: none; }
.etiquette-nom {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: min(12em, 64vw);
  padding: 15px 11px 6px;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%, 0 11px);
  background: radial-gradient(circle at 50% 7px, rgba(59, 37, 22, 0.85) 0 3px, #b98f5a 3.5px 5px, transparent 5.5px),
    linear-gradient(rgba(255, 246, 228, 0.32), rgba(255, 246, 228, 0.32)),
    url("fonds/vieux-papier.jpg") center / 260px, #ecd7b0;
  background-blend-mode: normal, normal, multiply, normal;
  color: #3b2516;
  font: 700 clamp(0.82rem, 1.8vmin, 0.95rem)/1.2 var(--police-texte);
  text-align: center;
  text-wrap: balance;
  translate: var(--decale, 0) 0;
  transform-origin: 50% 0;
  animation: pendre 0.7s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* la ficelle qui retient l'étiquette */
.leaflet-tooltip.etiquette::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 1.5px;
  height: 18px;
  background: #8a6a45;
  rotate: 8deg;
}
@keyframes pendre { from { rotate: -9deg; } to { rotate: 0deg; } }

.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) - 2 * clamp(56px, 11vmin, 84px) - 32px); /* sans passer sous le « ? » */
  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: 2px;
}
/* étiquettes en papier kraft avec « + » et « − » à l'encre, comme le bouton d'aide */
.commandes button {
  width: clamp(46px, 8.5vmin, 62px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s;
}
.commandes button img { display: block; width: 100%; }
.commandes button:nth-child(2) { rotate: 4deg; }
.commandes button:hover { transform: rotate(-6deg); }
.lecteur .jouer:hover, .lecteur .ouvrir:hover, .lecteur .tourner-page:not(:disabled):hover { background: #c08a58; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--luciole) !important; outline-offset: 3px !important; }

.aide {
  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 6px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s;
}
.aide img { display: block; width: 100%; }
.aide:hover { transform: rotate(-6deg); }
/* la valise aux trésors, à côté du « ? » : le compte est écrit à l'encre sur son étiquette de bagage */
.carnet-bouton {
  position: absolute;
  z-index: 961;
  left: calc(var(--bord-g) + 14px + clamp(56px, 11vmin, 84px));
  bottom: calc(var(--bord-b) + 6px);
  width: clamp(68px, 13vmin, 102px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--noyer);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s;
}
.carnet-bouton .valise { display: block; width: 100%; }
.carnet-bouton:hover { transform: rotate(-5deg); }
/* l'étiquette pend à la poignée : l'image est retournée pour que sa ficelle monte vers la poignée */
.carnet-etiquette { position: absolute; width: 60%; left: 58%; top: 4%; rotate: 10deg; transform-origin: 17% 0; pointer-events: none; }
.carnet-etiquette img { display: block; width: 100%; transform: scaleX(-1); }
.carnet-compte { position: absolute; left: 18%; right: 20%; top: 46%; text-align: center; white-space: nowrap; font: 700 clamp(0.56rem, 1.6vmin, 0.84rem)/1 "Special Elite", var(--police-texte); }
.carnet-compte small { font-size: 0.72em; opacity: 0.75; }
.carnet-bouton.nouveau { animation: tresor-trouve 1.6s ease-out; }
@keyframes tresor-trouve {
  0% { transform: scale(1); }
  15% { transform: scale(1.35) rotate(-10deg); filter: drop-shadow(0 0 14px var(--luciole)); }
  35% { transform: scale(1.1) rotate(6deg); }
  55% { transform: scale(1.22) rotate(-4deg); filter: drop-shadow(0 0 10px var(--luciole)); }
  100% { transform: scale(1); }
}
.lecteur.carnet { width: min(94vw, 720px); overflow-y: auto; padding: 26px 22px 24px; align-items: stretch; }
.carnet h2 { max-width: none; padding: 0 44px; }
.carnet-bilan { margin: 0; text-align: center; }
/* la valise ouverte : les objets des trésors trouvés y sont rangés ; touchés, ils rouvrent leur trésor */
.valise-ouverte { position: relative; width: min(100%, 72vh, 560px); margin: 0 auto; flex: none; }
.valise-ouverte > img { display: block; width: 100%; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); }
.objet-tresor {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -100%) rotate(var(--penche));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 4px rgba(40, 20, 5, 0.45));
  transition: transform 0.25s;
  animation: ranger 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}
.objet-tresor img { display: block; width: 100%; }
.objet-tresor:hover, .objet-tresor:focus-visible { transform: translate(-50%, -100%) rotate(0deg) scale(1.25); z-index: 2; }
.objet-tresor .nom {
  position: absolute; left: 50%; bottom: 100%; translate: -50% -4px; white-space: nowrap; padding: 3px 8px; border-radius: 6px;
  background: var(--liege); color: var(--parchemin); font: 400 0.75rem/1.2 var(--police-texte); opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.objet-tresor:hover .nom, .objet-tresor:focus-visible .nom { opacity: 1; }
@keyframes ranger { from { transform: translate(-50%, -160%) rotate(var(--penche)) scale(0.4); opacity: 0; } }
/* téléphone couché : la valise à gauche, le bilan et la liste à droite */
@media (max-height: 500px) {
  .lecteur.carnet[open] { width: 96vw; display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 18px; row-gap: 8px; padding: 14px 18px; }
  .lecteur.carnet[open] > * { grid-column: 2; }
  .lecteur.carnet[open] > form { grid-column: auto; }
  .lecteur.carnet .valise-ouverte { grid-column: 1; grid-row: 1 / span 6; width: calc(96vh - 40px); width: calc(96dvh - 40px); align-self: start; position: sticky; top: 0; }
  .carnet h2 { padding: 0 50px 0 0; text-align: left; font-size: 1.3rem; }
  .carnet-bilan, .carnet-sous-titre { text-align: left; font-size: 0.9rem; }
}
.carnet-sous-titre { margin: 6px 0 0; font: 400 1rem/1.2 var(--police-titre); opacity: 0.8; text-align: center; }
.carnet-univers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.carnet-univers h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font: 400 1.1rem/1.2 var(--police-titre); }
.carnet-univers h3 small { font: 700 0.95rem/1.2 var(--police-texte); color: var(--luciole); white-space: nowrap; }
.carnet-univers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.carnet-univers ul li.cache { padding: 5px 10px; border-radius: 8px; border: 1px dashed rgba(241, 226, 192, 0.35); color: rgba(241, 226, 192, 0.5); font-style: italic; font-size: 0.9rem; }
.carnet-univers .trouve { font: 400 0.95rem/1.2 var(--police-texte); padding: 5px 10px; border: 0; border-radius: 8px; background: var(--liege); color: var(--parchemin); cursor: pointer; }
.carnet-univers .trouve::before { content: "✦ "; color: var(--luciole); }
.carnet-univers .trouve:hover { background: #c08a58; }
.carnet-effacer { align-self: center; margin-top: 4px; border: 0; background: none; color: rgba(241, 226, 192, 0.6); font: 400 0.85rem/1.2 var(--police-texte); text-decoration: underline; cursor: pointer; }

/* La scène : on est dans l'univers */
.scene {
  position: absolute;
  z-index: 850;
  /* 2 px de plus sous le cadre en bois : sinon un fil de la carte (vert sous l'algue) dépasse au bord */
  inset: calc(var(--bord-h) - 2px) calc(var(--bord-d) - 2px) calc(var(--bord-b) - 2px) calc(var(--bord-g) - 2px);
  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); } }
/* grotte : la laine feutrée bouge à peine, comme soulevée par une respiration lente,
   et une lumière chaude glisse doucement dessus */
[data-univers="grotte"] .galet::before { display: none; } /* cailloux sans halo */
.scene.ouverte[data-univers="grotte"] .scene-fond { animation: laine 16s 1.6s ease-in-out infinite alternate; }
@keyframes laine {
  0% { transform: scale(1) rotate(0deg) translate(0, 0); }
  33% { transform: scale(1.035) rotate(0.5deg) translate(-0.6%, 0.4%); }
  66% { transform: scale(1.02) rotate(-0.4deg) translate(0.5%, -0.3%); }
  100% { transform: scale(1.045) rotate(0.3deg) translate(-0.3%, -0.5%); }
}
[data-univers="grotte"] .scene-fond::after {
  background:
    radial-gradient(ellipse 45% 40% at var(--lx, 40%) var(--ly, 45%), rgba(255, 236, 196, 0.35), rgba(255, 236, 196, 0) 70%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 243, 207, 0) 35%, rgba(72, 52, 34, 0.42) 100%);
}
.scene.ouverte[data-univers="grotte"] .scene-fond::after { animation: lueur 22s ease-in-out infinite alternate; }
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
@property --ly { syntax: "<percentage>"; inherits: false; initial-value: 45%; }
@keyframes lueur {
  0% { --lx: 35%; --ly: 40%; }
  50% { --lx: 62%; --ly: 52%; }
  100% { --lx: 45%; --ly: 64%; }
}
.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; }

.retour-carte {
  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;
}
.retour-carte, .aide { border-radius: 12px; }
.retour-carte img { display: block; width: 100%; }
.retour-carte:hover { transform: rotate(-6deg) scale(1.06); }

.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%; max-width: 15em; }

/* présentation « paysage » : un tableau entier, ses oiseaux qui bougent et ses boutons-cachettes */
[data-presentation="paysage"] .monde { inset: 0; }
/* le tableau se fond dans la même toile de lin écru : ni voile sombre ni respiration sur le fond, et ses bords s'effacent doucement */
[data-presentation="paysage"] .scene-fond::after { display: none; }
.scene.ouverte[data-presentation="paysage"] .scene-fond { animation: none; }
[data-presentation="paysage"] .objet {
  filter: none;
  -webkit-mask: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 97%, transparent);
  mask-composite: intersect;
}
/* le titre sur une étiquette de toile de jute, bien lisible sur le lin clair */
[data-presentation="paysage"] h1 {
  z-index: 3;
  left: auto;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - clamp(54px, 10vmin, 76px) - 64px);
  border-style: solid;
  border-width: 14px;
  border-image: url("icones/etiquette-jute.png") 22 fill / 14px round;
  padding: 2px 10px;
  color: var(--noyer);
  text-shadow: 0 0 6px rgba(250, 242, 222, 0.9), 0 1px 0 rgba(255, 248, 230, 0.8);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  rotate: -1.5deg;
}
/* lac : une phrase d'invitation remplace le titre, sans étiquette, et des touches de lumière miroitent sur l'eau */
.scene.phrase h1 {
  left: calc(clamp(54px, 10vmin, 76px) + 24px);
  right: calc(clamp(54px, 10vmin, 76px) + 24px);
  width: auto;
  max-width: none;
  border: 0;
  padding: 0;
  rotate: none;
  filter: none;
  top: 10px;
  text-align: center;
  font-size: clamp(1.05rem, 3.4vmin, 1.9rem);
  color: #f4f0dc;
  text-shadow: 0 0 10px rgba(12, 48, 56, 0.95), 0 2px 18px rgba(12, 48, 56, 0.8), 0 0 2px rgba(12, 48, 56, 1);
}
.scene.phrase h1 strong {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffd98a;
  white-space: nowrap;
}
.sans-lueur .cachette .luciole { display: none; }
[data-univers="aquarium"] .scene-fond { filter: brightness(0.75) saturate(1.25); } /* l'eau autour, assortie au tableau assombri */
.touche-lumiere {
  position: absolute;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 214, 0.75) 0%, rgba(214, 248, 230, 0.32) 35%, rgba(190, 240, 225, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: miroiter var(--duree, 6s) var(--delai, 0s) ease-in-out infinite;
}
@keyframes miroiter {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  45% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 0.6; transform: scale(0.95); }
}
/* cadre du voyage intérieur, jeu « encre » : la carte dans la pénombre, la lanterne et sa lumière */
[data-jeu] .oiseaux { z-index: 2; }
/* tableau qui remplit tout le cadre : pas de bords fondus, ce qui dépasse est rogné */
.monde.remplit { overflow: hidden; }
.monde.remplit.defile { overflow-x: auto; }
.monde.remplit .objet { -webkit-mask: none; mask: none; }
/* titre gardé pour les lecteurs d'écran seulement */
.scene.sans-titre h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
[data-univers="lanterne"] .scene-fond { filter: sepia(1) brightness(0.07); } /* autour de la carte, la nuit */
.penombre {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(12, 7, 3, 0.96);
}
.penombre-lueur {
  position: absolute;
  inset: 0;
}
.lanterne-main {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 55%;
  width: 40px;
  translate: -52% -104%; /* elle pend juste au-dessus de ce qu'elle éclaire */
  transform-origin: 52% 0;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255, 200, 110, 0.8));
  animation: balancer 3.2s ease-in-out infinite;
}
@keyframes balancer {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
[data-jeu="encre"] .cachette { opacity: 0; transition: opacity 0.35s; }
[data-jeu] .cachette.eteinte { pointer-events: none; }
/* là où se cache un trésor, l'encre invisible ne laisse qu'une lueur dorée */
.dessin-encre {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 92, 0.85) 0%, rgba(232, 160, 60, 0.45) 35%, rgba(232, 160, 60, 0) 70%);
  mix-blend-mode: multiply;
}
/* jeu « boussole » : la rose des vents à toucher, son aiguille farfelue et les croix rouges */
.rose-boussole {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  animation: appeler 2.4s ease-in-out infinite;
}
.rose-boussole.a-servi { animation: none; }
@keyframes appeler {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0); }
  50% { box-shadow: 0 0 26px 10px rgba(255, 217, 138, 0.75); }
}
.aiguille { display: block; width: 100%; height: 100%; transition: transform 3.1s cubic-bezier(0.17, 0.67, 0.3, 1.12); filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.35)); }
[data-jeu="boussole"] .cachette { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
[data-jeu="boussole"] .cachette.trouvee { opacity: 1; pointer-events: auto; animation: marquer 0.5s ease-out; }
@keyframes marquer { from { scale: 1.8; } }
[data-jeu="boussole"] .cachette button::before,
[data-jeu="boussole"] .cachette button::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 43%;
  width: 84%;
  height: 14%;
  border-radius: 3px 6px 4px 7px;
  background: #a8402f;
  box-shadow: 1px 2px 2px rgba(62, 40, 22, 0.5);
  rotate: 45deg;
}
[data-jeu="boussole"] .cachette button::after { rotate: -45deg; }
/* téléphone debout : le tableau garde une bonne taille et on le fait défiler du doigt */
.monde.defile { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.monde.defile::-webkit-scrollbar { display: none; }
/* le calque des oiseaux couvre le dessin : il laisse passer les clics vers les parties du dessin (navire, planète) */
.oiseaux { position: absolute; inset: 0; pointer-events: none; }
.oiseau, .cachette { pointer-events: auto; }
.oiseau { position: absolute; }
.oiseau img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 8px rgba(59, 37, 22, 0.35)); }
.oiseau-jaune { transform-origin: 50% 90%; animation: planer 4.2s ease-in-out infinite; }
.oiseau-rose { transform-origin: 62% 100%; animation: picorer 3.4s ease-in-out infinite; }
.oiseau-orange { transform-origin: 45% 100%; animation: sautiller 3.8s ease-in-out infinite 0.6s; }
.oiseau:hover, .oiseau:focus-within { animation-play-state: paused; }
@keyframes planer {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  30% { transform: translate(1.5%, -6%) rotate(2deg); }
  60% { transform: translate(-1%, -2%) rotate(-1deg); }
}
@keyframes picorer {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(9deg); }
  70% { transform: rotate(2deg); }
  74% { transform: rotate(10deg); }
  80% { transform: rotate(0); }
  20% { transform: rotate(-3deg) translateY(-1%); }
}
@keyframes sautiller {
  0%, 50%, 100% { transform: translateY(0) scale(1, 1); }
  54% { transform: translateY(0) scale(1.04, 0.94); }
  62% { transform: translateY(-14%) scale(0.97, 1.04) rotate(-3deg); }
  70% { transform: translateY(0) scale(1.05, 0.95); }
  76% { transform: translateY(0) scale(1, 1); }
  84% { transform: translateY(-6%) rotate(2deg); }
  90% { transform: translateY(0); }
}
.cachette {
  position: absolute;
  aspect-ratio: 1;
  translate: -50% -50%;
}
.cachette button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow 0.3s, background 0.3s;
}
.cachette .luciole { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.cachette button:hover, .cachette button:focus-visible {
  background: rgba(255, 217, 138, 0.18);
  box-shadow: 0 0 22px 6px rgba(255, 217, 138, 0.75);
}
.cachette button:hover .etiquette-kraft, .cachette button:focus-visible .etiquette-kraft { opacity: 1; }
.cachette .etiquette-kraft { top: 104%; z-index: 4; }
@media (hover: none) {
  .cachette .etiquette-kraft { opacity: 0; }
}

.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,
.zone button:hover .etiquette-kraft, .zone 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; }
}
/* au doigt, le titre caché dans le dessin (la voile du navire) reste secret : on le découvre en touchant */
@media (hover: none) {
  .zone .etiquette-kraft { opacity: 0; }
}

.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; }
.lecteur.type-livre { width: min(96vw, 1100px); padding-top: 66px; }
.type-livre .lecteur-corps { width: 100%; }
/* livre fait maison : deux pages côte à côte (une seule sur téléphone debout) */
/* la page qui tourne dépasse un instant du livre : sans cela, le cadre se mettait à défiler (barre + saut).
 * « visible » plutôt que « hidden » : sur iPhone (Safari), hidden cassait la 3D des pages (seule la page de droite restait) */
.lecteur.feuilleter { width: min(96vw, 1180px); padding-top: 60px; overflow: visible; }
.livre {
  width: min(100%, calc((92vh - 250px) * 2));
  width: min(100%, calc((92dvh - 250px) * 2)); /* dvh : hauteur sans les barres du navigateur (iPhone) */
  aspect-ratio: 2 / 1;
  margin: 0 auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}
.page-livre { background: #fff; }
.page-livre img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* livres à pages séparées (pages.json « marges ») : bord de papier blanc, plus étroit côté reliure, et ombre du pli */
.page-livre.avec-marges { box-sizing: border-box; background: #faf7f0; padding: 5% 3.5% 5% 6.5%; }
.page-livre.avec-marges.a-droite { padding: 5% 6.5% 5% 3.5%; }
.page-livre.avec-marges::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 13%; pointer-events: none; background: linear-gradient(to left, rgba(60, 45, 30, 0.28), rgba(60, 45, 30, 0.08) 40%, transparent); }
.page-livre.avec-marges.a-droite::after { right: auto; left: 0; background: linear-gradient(to right, rgba(60, 45, 30, 0.28), rgba(60, 45, 30, 0.08) 40%, transparent); }
/* une vraie double page : l'image file d'une page à l'autre (marge extérieure plus large, pour qu'elle reste carrée) */
.page-livre.avec-marges.double-page { padding-right: 0; padding-left: 10%; }
.page-livre.avec-marges.a-droite.double-page { padding-left: 0; padding-right: 10%; }
.page-livre.avec-marges.double-page::after { opacity: 0.35; }
.pages-commandes { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pages-commandes .temps { margin: 0; min-width: 5.5em; text-align: center; }
.lecteur .tourner-page {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 22px 18px 24px 16px;
  outline-offset: -6px;
}
.lecteur .tourner-page svg { width: 26px; height: 26px; }
.lecteur .tourner-page:disabled { opacity: 0.35; cursor: default; }
@media (orientation: portrait) {
  .livre { width: min(100%, calc(92vh - 250px)); width: min(100%, calc(92dvh - 250px)); aspect-ratio: 1; }
}
/* téléphone couché : peu de hauteur, on enlève le titre pour laisser la place au livre */
@media (max-height: 500px) {
  .lecteur.feuilleter { padding: 12px 70px 12px; gap: 8px; }
  .lecteur.feuilleter h2 { display: none; }
  .lecteur.feuilleter { max-height: 96vh; max-height: 96dvh; }
  .lecteur.feuilleter form { top: 8px; right: 8px; }
  .livre { width: min(100%, calc((96vh - 90px) * 2)); width: min(100%, calc((96dvh - 90px) * 2)); }
}
/* téléphone couché : la chanson se range en largeur (galet à gauche, titre et commandes à droite), sinon le bouton
   de lecture sortait en bas de l'écran */
@media (max-height: 500px) {
  .lecteur.type-son[open] { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 22px; row-gap: 6px; padding: 18px 28px; }
  .lecteur.type-son .lecteur-corps { grid-column: 1; grid-row: 1 / span 2; }
  .lecteur.type-son h2 { grid-column: 2; align-self: end; margin: 0; }
  .lecteur.type-son .lecteur-commandes { grid-column: 2; align-self: start; width: 100%; gap: 6px; }
  .lecteur.type-son .galet-lecture { width: clamp(90px, 32vh, 150px); }
}
.lecteur-corps iframe {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: min(calc(92vh - 260px), 640px);
  min-height: 260px;
  border: 6px solid var(--noyer);
  border-radius: 10px;
  background: #0b1a21;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.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) {
  .scene.ouverte[data-univers="grotte"] .scene-fond, .scene.ouverte[data-univers="grotte"] .scene-fond::after, .touche-lumiere, .lanterne-main, .rose-boussole, .etiquette-nom { animation: none; }
  .aiguille { transition: none; }
  .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, .scene.ouverte .scene-fond::after, .lecteur.joue .galet-lecture, .oiseau, .ver-luisant { 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 « essaim » : de petits points de lumière jaune-vert qui voltigent et clignotent, comme des vers luisants */
[data-presentation="essaim"] .galet button {
  display: grid;
  place-items: center;
  width: calc(var(--taille) * 0.55);
  height: calc(var(--taille) * 0.55);
  border-radius: 50%;
  animation: none;
}
.ver-luisant {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f6ffc4;
  box-shadow: 0 0 8px 4px rgba(214, 255, 110, 1), 0 0 26px 12px rgba(190, 240, 80, 0.7), 0 0 60px 28px rgba(170, 220, 60, 0.38), 0 0 110px 50px rgba(160, 210, 60, 0.16);
  animation: clignoter var(--clignote, 2.6s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
  transition: scale 0.3s;
}
@keyframes clignoter {
  0%, 100% { opacity: 1; scale: 1; }
  40% { opacity: 0.85; scale: 0.9; }
  55% { opacity: 0.25; scale: 0.6; }
  70% { opacity: 1; scale: 1.1; }
}
[data-presentation="essaim"] .galet button:hover .ver-luisant, [data-presentation="essaim"] .galet button:focus-visible .ver-luisant {
  animation-play-state: paused;
  opacity: 1;
  scale: 1.5;
}
[data-presentation="essaim"] .etiquette-kraft { top: 78%; }
/* le nom du trésor reste secret tant que la luciole n'est pas attrapée (au doigt, les étiquettes sont sinon toujours visibles) */
[data-presentation="essaim"] .galet button .etiquette-kraft { opacity: 0; }
[data-presentation="essaim"] .galet button:focus-visible .etiquette-kraft { opacity: 1; }
/* l'épuisette de la carte, qui suit la souris ou le doigt ; éclairée pour se voir sur la mer de nuit */
.epuisette {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 890;
  width: clamp(230px, 38vmin, 380px);
  pointer-events: none;
  transform-origin: 71.4% 26.6%;
  filter: brightness(1.9) saturate(0.8) drop-shadow(0 0 6px rgba(255, 244, 200, 0.45)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
  transition: opacity 0.2s;
}
.epuisette.rangee { opacity: 0; }
/* l'épuisette quitte le décor pour devenir l'outil : la souris est cachée sous le filet */
[data-presentation="essaim"] .objet-cadre { display: none; }
@media (pointer: fine) { .scene[data-presentation="essaim"], [data-presentation="essaim"] .galet button { cursor: none; } }
.luciole-prise { position: fixed; z-index: 891; pointer-events: none; animation: none; }

/* 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; }
}

/* présentation « étoiles » : étoiles de feutre qui scintillent dans le ciel ; le nom ne se découvre qu'en ouvrant */
[data-presentation="etoiles"] .galet img { width: calc(var(--taille) * (0.95 + 0.12 * var(--i))); max-width: calc(var(--taille) * 1.3); }
[data-presentation="etoiles"] .galet button { animation-name: briller; animation-duration: 4.5s; }
@keyframes briller {
  0%, 100% { transform: rotate(-4deg) scale(1); filter: drop-shadow(0 0 4px rgba(255, 217, 138, 0.3)); }
  50% { transform: rotate(4deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 217, 138, 0.8)); }
}

/* L'accueil : le billet de voyage et son composteur, posés sur la mer de laine */
.accueil {
  position: absolute;
  z-index: 970;
  inset: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vmin, 40px);
  padding-inline: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(16, 36, 46, 0.15) 30%, rgba(16, 36, 46, 0.75) 100%), url("fonds/mer-profonde.jpg") center / cover;
  box-shadow: inset 0 0 calc(var(--bord) * 0.8) rgba(0, 0, 0, 0.55);
  transition: opacity 0.9s ease;
}
.accueil.partie { opacity: 0; pointer-events: none; }
/* le mot de bienvenue : une feuille de vieux papier tapée à la machine, épinglée à côté du billet */
.accueil { flex-direction: row; flex-wrap: wrap; overflow-y: auto; }
.embarquement { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 4vmin, 40px); flex: 1 1 380px; max-width: 560px; }
.embarquement .billet { width: min(100%, 540px, 100vh); }
.embarquement .composteur { width: min(52%, 290px, 38vh); }
.lettre {
  position: relative;
  flex: 0 1 420px;
  margin: 0;
  padding: clamp(14px, 3vmin, 26px) clamp(16px, 3.4vmin, 30px);
  background: linear-gradient(rgba(255, 251, 240, 0.55), rgba(255, 251, 240, 0.55)), linear-gradient(170deg, rgba(255, 255, 255, 0.3), transparent 45%, rgba(90, 60, 30, 0.08)), url("fonds/vieux-papier.jpg") center / 420px, #f6eedb;
  color: #2b2018;
  font: 400 clamp(0.78rem, 2vmin, 0.98rem)/1.45 var(--police-machine);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  rotate: -1.5deg;
  border-radius: 2px;
}
/* la punaise qui tient la feuille */
.lettre::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3a08c, #b5452f 60%, #6d2416);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
}
.lettre p { margin: 0 0 0.7em; }
.lettre { container-type: inline-size; }
.lettre-bienvenue { white-space: nowrap; font: 400 min(1.35em, 4cqw)/1.2 var(--police-titre); color: #1f1208; -webkit-text-stroke: 0.6px #1f1208; }
/* « BOP ! », le nom du concert, dans sa police de tampon (Cache Tampon, fournie par amélie) */
.bop { font: 400 1.25em/1 "Cache Tampon", var(--police-machine); color: #8a1f12; white-space: nowrap; }
.lettre-soutien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.soutien {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 3px;
  background: var(--kraft);
  color: var(--noyer);
  font: 700 1em/1.2 var(--police-texte);
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  rotate: 2deg;
  transition: rotate 0.2s, scale 0.2s;
}
.soutien:hover, .soutien:focus-visible { rotate: -1deg; scale: 1.06; outline: 2px dashed var(--noyer); outline-offset: 2px; }
.lettre-embarquement { margin: 0.8em 0 0 !important; font: 400 1.5em/1.1 var(--police-titre); color: #6e1e10; -webkit-text-stroke: 0.7px #6e1e10; text-align: right; rotate: -2deg; }
.billet {
  position: relative;
  z-index: 1;
  width: min(82%, 540px, 100vh);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  container-type: inline-size;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4));
  animation: billet-flotte 5s ease-in-out infinite;
}
.billet > img { display: block; width: 100%; }
@keyframes billet-flotte {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50% { translate: 0 -6px; rotate: 1deg; }
}
.accueil.insere .billet { z-index: 3; animation: none; filter: none; }
.billet-texte {
  position: absolute;
  left: 10%;
  top: 14%;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2cqw;
  color: var(--noyer);
  text-align: left;
}
.billet-sur-titre { font: 700 2.1cqw/1 var(--police-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mer); }
.billet-titre { font: 400 5.5cqw/1 var(--police-titre); color: var(--noyer); white-space: nowrap; }
.billet-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 4cqw; margin-top: 2cqw; font: 400 3cqw/1.15 var(--police-machine); color: #2b2018; }
.billet-champs small { display: block; font: 400 1.8cqw/1.2 var(--police-texte); letter-spacing: 0.1em; text-transform: uppercase; color: #a8392a; }
.billet-talon {
  position: absolute;
  left: 78%;
  top: 16%;
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  color: var(--noyer);
  font: 400 1.7cqw/1.2 var(--police-texte);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.billet-numero { font: 400 5cqw/1 var(--police-titre); letter-spacing: 0; }
.composteur {
  position: relative;
  z-index: 2;
  width: min(52%, 290px, 38vh);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.composteur { container-type: inline-size; }
.composteur img { display: block; width: 100%; }
.composteur span {
  position: absolute;
  left: 31%;
  top: 55%;
  width: 38%;
  height: 16%;
  display: grid;
  place-items: center;
  /* lettres gravées dans le laiton : creux sombre, arête claire en dessous */
  color: #24180a;
  font: 400 5.6cqw/1.1 var(--police-machine);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 228, 160, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.composteur.broie { animation: broie 0.09s linear infinite; }
@keyframes broie {
  0%, 100% { transform: none; }
  25% { transform: translate(-2px, 1px) rotate(-0.6deg); }
  75% { transform: translate(2px, -1px) rotate(0.6deg); }
}
.composteur.broie img { filter: brightness(1.08) drop-shadow(0 0 14px rgba(255, 190, 90, 0.5)); }
.son-accueil {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 3px;
  background: var(--kraft);
  color: var(--noyer);
  font: 700 0.9rem/1.2 var(--police-texte);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: rotate(2deg);
  cursor: pointer;
}

/* arrivée sur la carte : une carte pliée tombe, se déplie en deux temps puis devient la vraie carte */
.confetti {
  position: absolute;
  z-index: 976;
  margin: -3px 0 0 -3px;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.depliage-zone {
  position: absolute;
  z-index: 972;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.depliage-zone.fondu { opacity: 0; }
.morceau {
  position: absolute;
  background-image: url("fonds/carte-entiere.jpg");
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.morceau span { position: absolute; inset: 0; }
.parchemin {
  position: absolute;
  transform-origin: 0 0;
  opacity: 0;
}
/* la carte imprimée sur un vieux papier : jaunie, tachée, assombrie sur les bords */
.parchemin .feuille {
  position: absolute;
  inset: 0;
  background: url("fonds/carte-entiere.jpg") no-repeat;
  filter: sepia(0.5) saturate(0.85) brightness(0.95);
  transition: filter 0.8s ease;
}
.parchemin .feuille::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(92, 56, 20, 0.6) 100%),
    url("fonds/vieux-papier.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: 0.75;
  box-shadow: inset 0 0 0 2px rgba(70, 40, 14, 0.5), inset 0 0 40px rgba(70, 40, 14, 0.55);
  transition: opacity 0.8s ease;
}
.parchemin.ouvert .feuille { filter: none; }
.parchemin.ouvert .feuille::after { opacity: 0.2; }
/* les rouleaux : un cylindre de vieux papier, dont on voit la spirale aux deux bouts */
.parchemin .rouleau {
  position: absolute;
  top: calc(var(--d) * 0.18);
  bottom: calc(var(--d) * 0.18);
  border-radius: calc(var(--d) * 0.12);
  background: url("icones/rouleau.png") center / 100% 100%;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
  transition: opacity 0.5s ease;
}
.parchemin .rouleau::before,
.parchemin .rouleau::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--d) * 0.36);
  border-radius: 50%;
  background: url("icones/rouleau-bout.png") center / 100% 100%;
}
.parchemin .rouleau::before { top: calc(var(--d) * -0.18); }
.parchemin .rouleau::after { bottom: calc(var(--d) * -0.18); }
.parchemin.ouvert .rouleau { opacity: 0; }
/* la ficelle de jute qui tient la carte roulée, et qui saute quand on la déroule */
.parchemin .lien {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 16px;
  translate: -50% -50%;
  background: url("icones/ficelle.png") left center / auto 100% repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.parchemin .lien::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  translate: -50% -36%;
  background: url("icones/noeud.png") center / contain no-repeat;
}
.parchemin.delie .lien { opacity: 0; transform: scaleX(1.6) translateY(-20px); }

.univers.eveil { animation: eveil 1.4s ease-out var(--eveil, 0s) both; }
@keyframes eveil {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 217, 138, 0)); }
  40% { filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 217, 138, 1)); }
  100% { filter: brightness(1.02) drop-shadow(0 0 2px rgba(255, 217, 138, 0.3)); }
}

@media (prefers-reduced-motion: reduce) {
  .billet, .composteur.broie, .univers.eveil { animation: none; }
}

/* présentation « tableau » (l'espace de l'algue sacrée) : le tableau noir de l'école, ses craies et son éponge */
@font-face { font-family: "laCartoonerie"; src: url("polices/laCartoonerie.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Cache Tampon"; src: url("polices/CacheTampon.ttf") format("truetype"); font-display: swap; }
[data-presentation="tableau"] .objet-cadre { display: none; }
/* l'ardoise prend toute la place sous le titre */
[data-presentation="tableau"] .monde { top: clamp(58px, 10vmin, 84px); }
.scene.ouverte[data-presentation="tableau"] .scene-fond { animation: none; filter: blur(6px) brightness(0.55); }
.ardoise {
  --craie: #f4f1e8;
  position: absolute;
  inset: 0 max(10px, 2%) 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s 0.3s, transform 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.scene.ouverte .ardoise { opacity: 1; transform: none; }
.ardoise[hidden] { display: none; }
.ardoise-cadre {
  position: relative;
  flex: 1;
  min-height: 0;
  --bois: clamp(14px, 2.4vmin, 24px);
  /* cadre dans le bois du grand navire : montants debout à gauche et à droite, traverses en haut et en bas */
  border: var(--bois) solid transparent;
  border-radius: 5px;
  background:
    url("fonds/ardoise.jpg") padding-box center / cover,
    url("fonds/bois-tableau-v.jpg") border-box left top / var(--bois) auto repeat-y,
    url("fonds/bois-tableau-v.jpg") border-box right top / var(--bois) auto repeat-y,
    url("fonds/bois-tableau.jpg") border-box left top / auto var(--bois) repeat-x,
    url("fonds/bois-tableau.jpg") border-box left bottom / auto var(--bois) repeat-x,
    #8a5a2e;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(40, 22, 8, 0.7), inset 0 0 0 2px rgba(40, 22, 8, 0.55), inset 0 0 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.ardoise-toile { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ardoise-texte {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0.6em 0.9em;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--craie);
  caret-color: var(--craie);
  font: 400 clamp(1.25rem, 3.6vmin, 2rem) / 1.3 "Schoolbell", "Comic Sans MS", cursive;
  text-shadow: 0 0 1px currentColor, 0 0 6px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.ardoise.clavier .ardoise-texte { pointer-events: auto; cursor: text; }
.ardoise.clavier .ardoise-toile { cursor: text; }
.ardoise-consigne, .ardoise-parti {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1em;
  color: rgba(244, 241, 232, 0.55);
  font: 700 clamp(1.3rem, 4.4vmin, 2.6rem) / 1.2 "Cabin Sketch", "Schoolbell", cursive;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  transition: opacity 0.4s;
}
.ardoise-consigne.cachee, .ardoise-parti.visible ~ .ardoise-consigne, .ardoise.annonce .ardoise-consigne { opacity: 0; }
.ardoise-parti {
  color: #f6dc7a;
  background: rgba(20, 30, 26, 0.72);
  opacity: 0;
}
.ardoise-parti.visible { opacity: 1; }
.ardoise.essuie .ardoise-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 30%, rgba(222, 230, 224, 0.28) 45%, rgba(222, 230, 224, 0.12) 55%, transparent 70%) -100% 0 / 200% 100% no-repeat;
  animation: essuyer 0.7s ease-in-out;
  pointer-events: none;
}
@keyframes essuyer { to { background-position: 100% 0; } }

/* le rebord en bois où sont posées les craies et l'éponge */
.rebord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: -6px clamp(-10px, -1vmin, -4px) 0;
  padding: 10px 14px 8px;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(rgba(255, 230, 190, 0.25), rgba(60, 30, 10, 0.3)), url("fonds/bois-tableau.jpg") center / 600px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}
/* on laisse la place du bouton d'aide, posé en bas à gauche */
.rebord { padding-left: calc(clamp(56px, 11vmin, 84px) + 6px); }
.ardoise-note { padding-left: calc(clamp(56px, 11vmin, 84px) - 10px); }
.craies { display: flex; gap: 8px; align-items: flex-end; }
.craie {
  width: 46px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 4px 6px 6px 4px;
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.08) 0 1px, transparent 2px) 0 0 / 7px 5px,
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.12)), var(--c, #f4f1e8);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transform: rotate(-4deg);
  transition: transform 0.25s;
}
.craie:nth-child(2) { --c: #f6dc7a; transform: rotate(3deg); }
.craie:nth-child(3) { --c: #f3a9b9; transform: rotate(-2deg); }
.craie:nth-child(4) { --c: #9fd3e6; transform: rotate(5deg); }
.craie[aria-pressed="true"] { transform: translateY(-7px) rotate(-14deg) scale(1.08); box-shadow: 0 9px 8px rgba(0, 0, 0, 0.35); }
.outil-ardoise {
  display: grid;
  min-width: 46px;
  padding: 3px 8px 2px;
  border: 0;
  border-radius: 4px;
  background: url("fonds/vieux-papier.jpg") center / 200px, var(--kraft);
  background-blend-mode: multiply;
  color: var(--noyer);
  font: 700 1.15rem/1 var(--police-texte);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.outil-ardoise small { font-size: 0.62rem; font-weight: 400; }
.outil-ardoise[aria-pressed="true"] { background-color: #f1d9a9; outline: 2px solid var(--noyer); }
/* la gomme d'écolier : rose d'un côté, bleue de l'autre */
.gomme {
  width: 52px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.08)), linear-gradient(90deg, #f0a3a8 0 58%, #7fa9d6 58%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
  color: rgba(80, 30, 30, 0.75);
  font: 700 0.62rem/24px var(--police-texte);
  text-align: center;
  cursor: pointer;
  transform: rotate(-3deg);
  transition: transform 0.25s;
}
.gomme[aria-pressed="true"] { transform: translateY(-6px) rotate(-12deg) scale(1.08); box-shadow: 0 9px 8px rgba(0, 0, 0, 0.35); }
.ardoise.gommer .ardoise-toile { cursor: cell; }
.eponge {
  width: 64px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: radial-gradient(circle, rgba(120, 80, 10, 0.35) 0 1.5px, transparent 2.5px) 0 0 / 9px 8px,
    radial-gradient(circle, rgba(120, 80, 10, 0.25) 0 1px, transparent 2px) 4px 4px / 11px 9px,
    linear-gradient(#f2cf5b 0 66%, #6f8a4a 66%);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.25s;
}
.eponge:hover, .eponge:focus-visible { transform: rotate(-6deg) translateY(-2px); }
.envoyer-ardoise {
  padding: 7px 16px 6px 34px;
  border: 0;
  clip-path: polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%);
  background: radial-gradient(circle at 17px 50%, rgba(59, 37, 22, 0.85) 0 3px, #b98f5a 3.5px 5px, transparent 5.5px),
    linear-gradient(rgba(255, 246, 228, 0.32), rgba(255, 246, 228, 0.32)), url("fonds/vieux-papier.jpg") center / 220px, #ecd7b0;
  background-blend-mode: normal, normal, multiply, normal;
  color: #3b2516;
  font: 700 clamp(0.92rem, 2vmin, 1.05rem)/1.2 var(--police-texte);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
  cursor: pointer;
  transition: transform 0.25s;
}
.envoyer-ardoise:hover, .envoyer-ardoise:focus-visible { transform: rotate(-2deg) scale(1.04); }
.ardoise-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.ardoise-mail input {
  width: min(17em, 60vw);
  padding: 4px 8px;
  border: 1px solid rgba(201, 162, 107, 0.7);
  border-radius: 4px;
  background: rgba(20, 30, 26, 0.6);
  color: #f4f1e8;
  font: 400 0.85rem/1.2 var(--police-texte);
}
.ardoise-mail input::placeholder { color: rgba(244, 241, 232, 0.5); }
.ardoise-note {
  margin: 0;
  color: rgba(244, 241, 232, 0.75);
  font: 400 0.8rem/1.2 var(--police-texte);
  text-align: center;
}
@media (max-width: 560px) {
  .rebord { gap: 8px 10px; padding-top: 8px; padding-bottom: 6px; }
  .craie { width: 30px; height: 11px; }
  .craies { gap: 6px; }
  .eponge { width: 48px; height: 26px; }
  .envoyer-ardoise { padding: 6px 10px 5px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ardoise.essuie .ardoise-cadre::after { animation: none; }
}
/* le titre de l'algue sacrée, en lettres gribouillées de cahier d'écolier, un peu de travers */
[data-univers="algue"] h1 {
  top: 10px;
  font: 400 clamp(1.5rem, 5vmin, 2.8rem)/1.1 "laCartoonerie", "Cabin Sketch", cursive;
  color: #f6dc7a;
  letter-spacing: 0.02em;
  rotate: -2deg;
}

/* la boussole « Case départ » : une douce lueur au survol, comme les univers */
.leaflet-interactive.case-depart { cursor: pointer; transition: fill-opacity 0.3s; fill: #ffd98a; }
.leaflet-interactive.case-depart:hover, .leaflet-interactive.case-depart:focus-visible { fill-opacity: 0.14; outline: none; }

/* présentation « rivière » (l'embouchure de l'enfant du dedans) : rivière de laine, tourbillon de fils, bateaux en papier */
[data-presentation="riviere"] .objet-cadre { display: none; }
.riviere { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s 0.3s; }
.scene.ouverte .riviere { opacity: 1; }
.riviere svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.riviere path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.riviere .lit { fill: rgba(8, 26, 34, 0.5); stroke: none; filter: blur(5px); transform: translate(2px, 5px); }
.riviere .eau { fill: url(#tissu-riviere); stroke: none; }
.riviere .franges { stroke: #8fc2b8; stroke-width: 0.9px; opacity: 0.85; }
.riviere .fils-libres { stroke: rgba(160, 205, 196, 0.7); stroke-width: 0.8px; }
/* points de couture au fil de coton crème, avec leur petite ombre */
.riviere .points { stroke: #f3ead2; stroke-width: 1.6px; filter: drop-shadow(0.6px 0.8px 0 rgba(30, 40, 40, 0.55)); }
.riviere .fil { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.3px; stroke-dasharray: 70 40 20 50; animation: couler calc(4s + var(--f) * 0.9s) linear infinite; }
@keyframes couler { to { stroke-dashoffset: -190; } }
/* le tourbillon de laine cardée tourne d'un bloc (le grain de la laine n'est dessiné qu'une fois) */
.riviere .spirale { position: absolute; animation: tourbillonner 16s linear infinite; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); mix-blend-mode: screen; }
.riviere .meche { opacity: 0.62; }
.riviere .duvet { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2px; stroke-dasharray: 90 30 40 60 20 50; }
.riviere .duvet[style*="--n:1"], .riviere .duvet[style*="--n:3"] { stroke-dasharray: 50 70 120 40; stroke-width: 0.9px; }
.riviere .fil-blanc { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1px; stroke-dasharray: 46 8 4 8; }
@keyframes tourbillonner { to { transform: rotate(-360deg); } }
.tourbillon-coeur {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0.85;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
  mask: radial-gradient(closest-side, #000 55%, transparent);
  animation: tourbillonner 22s linear infinite;
  pointer-events: none;
}
.bateaux { list-style: none; margin: 0; padding: 0; }
.bateau { position: absolute; left: 0; top: 0; width: var(--bateau, 110px); will-change: transform; }
.bateau.loin { pointer-events: none; }
.bateau button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s;
}
.bateau button:hover, .bateau button:focus-visible { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(255, 217, 138, 0.9)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); outline: none; }
.bateau img { display: block; width: 100%; }
/* le nom du contenu, tapé à la machine à écrire sur la coque */
.nom-bateau {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 54%;
  bottom: 9%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #3b2516;
  font: 400 clamp(0.62rem, 1.45vmin, 0.78rem) / 1 var(--police-machine);
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
/* le bateau touché s'envole vers le milieu, puis sa feuille se déplie : le lecteur devient la feuille de papier */
.bateau-vol { position: fixed; z-index: 2000; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
.lecteur.papier {
  /* la vraie feuille froissée (fonds/papier-froisse.jpg), teintée de la couleur du bateau, et les deux plis du pliage */
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(90, 64, 40, 0.12) 50%, rgba(255, 255, 255, 0.3) calc(50% + 1px), transparent calc(50% + 3px)),
    linear-gradient(transparent calc(50% - 1px), rgba(90, 64, 40, 0.1) 50%, rgba(255, 255, 255, 0.25) calc(50% + 1px), transparent calc(50% + 3px)),
    url("fonds/papier-froisse.jpg") center / cover,
    var(--papier, #f1e6cc);
  background-blend-mode: normal, normal, multiply, normal;
  color: var(--noyer);
  border-radius: 2px;
  outline: none;
  transform-origin: 50% 50%;
}
.lecteur.papier h2 { color: var(--noyer); text-shadow: none; }
.lecteur.papier[open] { animation: deplier 0.9s cubic-bezier(0.25, 0.8, 0.3, 1); }
@keyframes deplier {
  0% { transform: perspective(1200px) rotateX(86deg) scale(0.5, 0.5); opacity: 0.4; }
  45% { transform: perspective(1200px) rotateX(0deg) scale(0.5, 1); opacity: 1; }
  70% { transform: perspective(1200px) rotateY(-12deg) scale(1.02, 1); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .riviere .fil, .riviere .spirale, .tourbillon-coeur, .lecteur.papier[open] { animation: none; }
}

/* téléphone debout : le billet prend presque toute la largeur pour que son texte reste lisible */
@media (orientation: portrait) and (max-width: 600px) { .billet { width: 96%; } .accueil { padding-inline: 8px; } }

/* téléphone couché : peu de hauteur, le rebord et la case d'adresse se font tout petits pour laisser la place au tableau */
@media (max-height: 520px) {
  .ardoise { gap: 3px; bottom: 4px; }
  .rebord { flex-wrap: nowrap; gap: 8px; padding-top: 5px; padding-bottom: 4px; }
  .craies { gap: 5px; }
  .craie { width: 30px; height: 10px; }
  .outil-ardoise { min-width: 36px; padding: 2px 6px 1px; font-size: 0.95rem; }
  .gomme { width: 44px; height: 20px; line-height: 20px; }
  .eponge { width: 44px; height: 22px; }
  .envoyer-ardoise { padding: 4px 10px 4px 26px; font-size: 0.85rem; white-space: nowrap; }
  .ardoise-mail { flex-wrap: nowrap; font-size: 0.72rem; }
  .ardoise-mail input { padding: 2px 6px; font-size: 0.75rem; }
}

/* accueil : la feuille ne passe pas sous « Mettre la musique » ; téléphone couché : feuille et billet côte à côte */
.accueil { padding-block: 44px 16px; }
@media (max-height: 520px) and (orientation: landscape) {
  .accueil { flex-wrap: nowrap; gap: 14px; padding-block: 10px; }
  .lettre { flex: 1 1 54%; font-size: 0.68rem; line-height: 1.35; padding: 10px 14px; }
  .lettre p { margin-bottom: 0.45em; }
  .embarquement { flex: 1 1 40%; gap: 10px; }
  .embarquement .composteur { width: min(46%, 30vh); }
  .son-accueil { top: 6px; right: 6px; font-size: 0.75rem; }
}

/* téléphone debout : la feuille se resserre pour que le billet et le composteur tiennent dessous */
@media (max-width: 500px) and (orientation: portrait) {
  .lettre { font-size: 0.72rem; line-height: 1.35; }
  .lettre p { margin-bottom: 0.5em; }
}

/* le logo de la Baraque à Plume, collé comme un autocollant : il ramène à l'accueil du site */
.logo-bap { position: absolute; z-index: 3; top: 10px; left: 12px; width: clamp(58px, 11vmin, 104px); rotate: -6deg; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); transition: rotate 0.25s, scale 0.25s; }
.logo-bap img { display: block; width: 100%; }
.logo-bap:hover, .logo-bap:focus-visible { rotate: 0deg; scale: 1.08; outline: none; }
@media (max-height: 520px) and (orientation: landscape) { .logo-bap { top: 6px; left: 6px; width: 48px; } }
@media (orientation: portrait) and (max-width: 600px) { .accueil { padding-top: calc(clamp(58px, 11vmin, 104px) + 18px); } }

/* le vieux satellite qui traverse la carte de temps en temps (au-dessus de la carte, sous le cadre) */
.satellite {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 800;
  pointer-events: none;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.45)) brightness(0.92);
}

/* invitation à tourner le téléphone tenu droit */
.tourner {
  position: absolute;
  z-index: 700;
  left: 50%;
  bottom: calc(var(--bord-b) + 66px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 2 * var(--bord) - 70px);
  box-sizing: border-box;
  border-style: solid;
  border-width: 14px;
  border-image: url("icones/etiquette-jute.png") 22 fill / 14px round;
  padding: 0 6px;
  background: none;
  color: var(--noyer);
  font: 400 clamp(0.95rem, 4vw, 1.1rem)/1.25 var(--police-texte);
  text-align: left;
  text-shadow: 0 0 6px rgba(250, 242, 222, 0.9);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  cursor: pointer;
  animation: tourner-arrivee 0.6s ease-out both;
}
.tourner svg { flex: none; width: 34px; height: 34px; animation: tourner-pivot 2.4s ease-in-out infinite; }
.tourner.partie { opacity: 0; transition: opacity 0.5s; }
@keyframes tourner-arrivee { from { opacity: 0; transform: translateY(14px); } }
@keyframes tourner-pivot { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .tourner, .tourner svg { animation: none; } }
@media (prefers-reduced-motion: reduce) { .carnet-bouton.nouveau, .objet-tresor { animation: none; } }
.carnet-bouton[hidden] { display: none; }

/* Le Ha'Mot : la vieille carte entière, sur la terre ; au Manoir des Mots-vides, les pages des enfants */
[data-univers="hamot"] .objet {
  -webkit-mask: none;
  mask: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}
.lieu { position: absolute; aspect-ratio: 1; translate: -50% -50%; }
.lieu button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow 0.3s, background 0.3s;
}
.lieu button:hover, .lieu button:focus-visible {
  background: rgba(255, 217, 138, 0.2);
  box-shadow: 0 0 26px 8px rgba(255, 217, 138, 0.7);
}
.lieu button:hover .etiquette-kraft, .lieu button:focus-visible .etiquette-kraft { opacity: 1; }
.lieu .etiquette-kraft { top: 100%; z-index: 4; max-width: 13em; }
@media (hover: none) {
  .lieu .etiquette-kraft { display: none; } /* au doigt, le nom écrit sur la vieille carte suffit */
}
/* la fenêtre du manoir : on est dedans, dans le vieux salon d'amélie (assets/source/manoir.jpg). Le titre sous la corniche,
   les pages épinglées sur le papier peint violet (de 18 à 64 % de la hauteur de la photo), les boutons sur les boiseries */
/* la fenêtre remplit tout l'écran : le cadre en bois de la carte s'efface derrière celui de la photo (le haut et les côtés
   de son encadrement, 34 et 36 px dans fonds/manoir-interieur.jpg, étirés tout autour) */
.lecteur.paquet {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: max(12px, 3.4vh) max(12px, 3.6vh) 0;
  border-width: max(12px, 3.4dvh) max(12px, 3.6dvh) 0;
  border-image: url("fonds/manoir-interieur.jpg") 34 36 0 36 stretch;
  background-origin: padding-box;
  background-clip: padding-box;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: #3a2433 url("fonds/manoir-interieur.jpg") center / cover;
  color: var(--parchemin);
  outline: 0;
  box-shadow: inset 0 0 calc(var(--bord) * 0.8) rgba(0, 0, 0, 0.45);
}
.lecteur.paquet::backdrop { background: none; backdrop-filter: none; }
.lecteur.paquet[open] { gap: 0; }
.lecteur.paquet form { right: 2.5%; top: 2.5%; }
/* le titre sur une étiquette de toile de jute, accrochée à la corniche */
.paquet h2 {
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: calc(100% - 130px);
  margin-top: 1.2%;
  border-style: solid;
  border-width: 12px;
  border-image: url("icones/etiquette-jute.png") 22 fill / 12px round;
  padding: 0 10px;
  color: var(--noyer);
  font-size: clamp(1.1rem, 3.2vmin, 1.8rem);
  text-shadow: 0 0 6px rgba(250, 242, 222, 0.9);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  rotate: -1deg;
}
.paquet .paquet-bilan {
  flex: 0 0 auto;
  max-width: min(80%, 720px);
  margin: 3.5% 0 0;
  font-size: clamp(0.85rem, 2.2vmin, 1.05rem);
  text-shadow: 0 1px 4px rgba(20, 8, 16, 0.95), 0 0 12px rgba(20, 8, 16, 0.8);
}
/* dans le manoir, le texte de chaque pièce repose sur un voile sombre, pour se lire sur la photo */
.paquet[data-scene]:not([data-scene=""]) .paquet-bilan {
  /* le texte de la pièce laisse passer le doigt : on touche les portes et les objets à travers */
  pointer-events: none;
  padding: 8px 16px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(20, 10, 6, 0.62), rgba(20, 10, 6, 0.42));
  backdrop-filter: blur(2px);
}
/* le couloir : sur un écran large, le texte se range à droite, vers la fenêtre, pour laisser la perspective dégagée */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) and (min-height: 560px) {
  .paquet[data-scene="couloir"] .paquet-bilan { align-self: flex-end; max-width: min(30%, 420px); margin-right: 4%; text-align: left; text-wrap: pretty; }
  /* les autres pièces : le texte se pose dans un coin calme de la photo */
  .paquet:is([data-scene="galerie-cadres"], [data-scene="salon-cheminee"], [data-scene="cuisine"], [data-scene="salle-de-bain"], [data-scene="grenier"], [data-scene="chambre"]) .paquet-bilan {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    max-width: min(30%, 420px);
    margin: 0;
    text-align: left;
    text-wrap: pretty;
  }
  .paquet[data-scene="galerie-cadres"] .paquet-bilan { right: 4%; bottom: 14%; }
  .paquet[data-scene="salon-cheminee"] .paquet-bilan { right: 4%; top: 17%; }
  .paquet[data-scene="cuisine"] .paquet-bilan { left: 4%; top: 17%; }
  .paquet[data-scene="salle-de-bain"] .paquet-bilan { right: 4%; top: 27%; }
  .paquet[data-scene="grenier"] .paquet-bilan { left: 4%; top: 17%; }
  .paquet[data-scene="chambre"] .paquet-bilan { right: 4%; bottom: 14%; }
}
@media (max-width: 480px) { .paquet[data-scene]:not([data-scene=""]) .paquet-bilan { max-width: 88%; padding: 6px 10px; } }
/* le mur : ce qui ne tient pas sur le papier peint se fait défiler */
.paquet-corps {
  flex: 1 1 auto;
  min-height: 0;
  width: 84%;
  overflow-y: auto;
  padding: 14px 0 8px;
  justify-content: flex-start;
  scrollbar-width: thin;
}
/* les boutons, posés sur les boiseries */
.paquet-commandes { flex: 0 0 31%; margin-top: auto; align-items: center; align-content: center; }
.paquet-bilan { margin: 0; text-align: center; text-wrap: balance; white-space: pre-line; }
.paquet-bilan:empty { display: none; }
.paquet-corps { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.paquet-corps:empty { display: none; }
.paquet-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bouton-paquet {
  padding: 10px 18px;
  border: 0;
  border-radius: 14px 11px 15px 10px;
  background: var(--liege);
  color: var(--parchemin);
  font: 700 1rem/1.2 var(--police-texte);
  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.25);
  cursor: pointer;
}
.bouton-paquet:hover { background: #c08a58; }
.bouton-paquet.retour-paquet { background: #8a6a4a; }

/* le mur du manoir : les pages des enfants épinglées de travers sur le papier peint */
.mur-manoir {
  list-style: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 22px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 40%), 1fr));
  gap: 22px 16px;
}
.mur-manoir li { rotate: var(--penche); }
.mur-manoir[data-taille="petite"] { grid-template-columns: repeat(auto-fill, minmax(min(100px, 30%), 1fr)); gap: 18px 12px; }
.mur-manoir[data-taille="mini"] { grid-template-columns: repeat(auto-fill, minmax(min(72px, 22%), 1fr)); gap: 14px 8px; }
.mur-manoir[data-taille="petite"] .feuille-lignee.petite {
  padding: 3px 8px 6px 18px;
  background: linear-gradient(90deg, transparent 13px, rgba(214, 86, 86, 0.55) 13px 14px, transparent 14px), repeating-linear-gradient(#fffdf6 0 17px, #cfdbe6 17px 18px);
  font-size: 0.72rem;
  line-height: 18px;
}
.mur-manoir[data-taille="mini"] .feuille-lignee.petite {
  padding: 2px 6px 4px 13px;
  background: linear-gradient(90deg, transparent 9px, rgba(214, 86, 86, 0.55) 9px 10px, transparent 10px), repeating-linear-gradient(#fffdf6 0 13px, #cfdbe6 13px 14px);
  font-size: 0.56rem;
  line-height: 14px;
}
.mur-manoir[data-taille="mini"] .page-epinglee::before { width: 10px; height: 10px; margin-left: -5px; top: -5px; }
.page-epinglee {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s;
}
.page-epinglee:hover, .page-epinglee:focus-visible { transform: scale(1.04) rotate(1deg); }
/* la punaise */
.page-epinglee::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -7px;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3a28f, #b5523b 60%, #6e2a1b);
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
}
/* une page lignée, écrite à la main */
.feuille-lignee {
  box-sizing: border-box;
  color-scheme: light;
  padding: 5px 14px 10px 30px; /* le texte posé sur les lignes */
  background:
    linear-gradient(90deg, transparent 22px, rgba(214, 86, 86, 0.55) 22px 23px, transparent 23px),
    repeating-linear-gradient(#fffdf6 0 23px, #cfdbe6 23px 24px);
  color: #23324a;
  font: 400 1rem/24px "Schoolbell", var(--police-texte);
  box-shadow: 0 4px 10px rgba(59, 37, 22, 0.4);
}
.feuille-lignee p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.feuille-lignee .signature { text-align: right; }
.feuille-lignee.petite { aspect-ratio: 0.8; font-size: 0.9rem; overflow: hidden; -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent); }
.feuille-lignee.grande {
  width: min(100%, 640px);
  min-height: 8em;
  padding: 6px 22px 16px 58px;
  background:
    linear-gradient(90deg, transparent 42px, rgba(214, 86, 86, 0.55) 42px 44px, transparent 44px),
    repeating-linear-gradient(#fffdf6 0 31px, #cad7e4 31px 32px);
  font-size: 1.25rem;
  line-height: 32px;
}

/* la page blanche : une feuille lignée où l'on écrit */
.page-blanche {
  flex: 0 0 auto;
  width: min(100%, 640px);
  min-height: 9.5em;
  box-sizing: border-box;
  padding: 6px 18px 10px 54px;
  border: 0;
  border-radius: 4px;
  color-scheme: light;
  background:
    linear-gradient(90deg, transparent 40px, rgba(214, 86, 86, 0.55) 40px 42px, transparent 42px),
    repeating-linear-gradient(#fffdf6 0 31px, #cad7e4 31px 32px);
  background-attachment: local;
  color: #23324a;
  font: 400 1.25rem/32px "Schoolbell", var(--police-texte);
  box-shadow: 0 6px 16px rgba(59, 37, 22, 0.35);
  resize: vertical;
}
.page-blanche:focus { outline: 3px solid var(--luciole); outline-offset: 2px; }
.note-page label { padding: 2px 8px; border-radius: 6px; background: rgba(30, 12, 24, 0.6); }
.note-page { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 0.9rem; }
.note-page input { color-scheme: light; padding: 6px 10px; border: 1px solid rgba(59, 37, 22, 0.4); border-radius: 8px; background: #fffdf6; color: var(--noyer); font: inherit; min-width: min(240px, 70vw); }
.etat-page { margin: 0; min-height: 1.3em; font-weight: 700; text-align: center; }
@media (max-height: 500px) {
  .page-blanche { min-height: 5em; }
  .paquet .paquet-bilan { margin-top: 1%; }
  .paquet-commandes { flex-basis: 26%; }
}

/* La Développeuse (le Ha'Mot) : cachée dans le O de HA'MOT ; un billet cacheté donne l'énigme */
.lieu-o button { border-radius: 50%; }
.lieu-o.trouvee button { animation: o-trouve 1.3s ease-out forwards; }
.lieu-o.trouvee::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: url("univers/developpeuse-sortie.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  animation: sortir-du-o 1.3s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes o-trouve {
  0% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.9); background: rgba(255, 217, 138, 0.6); }
  100% { box-shadow: 0 0 40px 30px rgba(255, 217, 138, 0); background: rgba(255, 217, 138, 0); }
}
@keyframes sortir-du-o {
  0% { transform: scale(0.1); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(3.2) translateY(-12%); opacity: 1; }
}
.lieu-enigme { z-index: 3; aspect-ratio: 1.3; animation: voleter 46s ease-in-out infinite; }
/* son vol sur la vieille carte (en % de la carte), en évitant le titre ; attrapé, il se pose là où il est */
@keyframes voleter {
  0%, 100% { left: 29.5%; top: 41%; }
  12% { left: 47%; top: 30%; }
  24% { left: 68%; top: 40%; }
  36% { left: 80%; top: 62%; }
  48% { left: 62%; top: 82%; }
  60% { left: 40%; top: 70%; }
  72% { left: 18%; top: 78%; }
  84% { left: 14%; top: 56%; }
}
.lieu-enigme.attrape { animation-play-state: paused; }
.lieu-enigme.attrape .billet-cachete { animation: none; }
.ouvre-a-gauche .enigme { left: auto; right: 50%; translate: 15% 0; }
.ouvre-en-haut .enigme { top: auto; bottom: 110%; }

.lieu-enigme .billet-cachete {
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 52%, #c43c2c 0 17%, #8e2418 19%, transparent 21%),
    linear-gradient(160deg, transparent 49%, rgba(120, 80, 40, 0.35) 50%, transparent 51%),
    linear-gradient(20deg, transparent 49%, rgba(120, 80, 40, 0.35) 50%, transparent 51%),
    #f1e2bd;
  box-shadow: 1px 3px 5px rgba(59, 37, 22, 0.5);
  rotate: -8deg;
  transform-origin: 50% 50%;
  animation: battre 0.5s ease-in-out infinite alternate;
}
/* il bat des ailes comme un papillon de papier */
@keyframes battre {
  0% { transform: rotate(-10deg) scaleX(1) translateY(0); }
  100% { transform: rotate(7deg) scaleX(0.72) translateY(-12%); }
}
.lieu-enigme .billet-cachete:hover, .lieu-enigme .billet-cachete:focus-visible {
  background-color: #fff3d2;
  box-shadow: 0 0 18px 6px rgba(255, 217, 138, 0.8);
}
.enigme {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 110%;
  width: min(17em, 60vw);
  translate: -15% 0;
  margin: 0;
  padding: 10px 14px;
  border-radius: 3px;
  background: #f6ead0 linear-gradient(rgba(255, 255, 255, 0.4), transparent);
  color: #3b2516;
  font: 400 clamp(0.8rem, 1.6vmin, 1rem)/1.35 "Schoolbell", var(--police-texte);
  box-shadow: 0 6px 14px rgba(59, 37, 22, 0.45);
  rotate: 1.5deg;
}
.enigme[hidden] { display: none; }
.enigme ol { margin: 0; padding: 0; list-style: none; }
.enigme li { animation: indice 0.8s ease-out; }
.enigme li + li { margin-top: 4px; }
@keyframes indice { from { opacity: 0; transform: translateY(-4px); } }
.autre-indice {
  display: block;
  margin: 8px auto 0;
  padding: 3px 10px;
  border: 1px dashed #8a6a4a;
  border-radius: 10px;
  background: #ead8b0;
  color: #3b2516;
  font: inherit;
  cursor: pointer;
  animation: indice 0.8s ease-out;
}
.autre-indice[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lieu-enigme, .lieu-enigme .billet-cachete { animation: none; }
}

/* devant la machine : la photo, le bouton rouge, la feuille qui sort du rouleau, le Polaroid qui sort par devant */
/* la machine attend dans une autre pièce du manoir : le salon vert à la cheminée (assets/source/manoir-cheminee.jpg) */
.lecteur.paquet[data-scene="developpeuse"] {
  border-image-source: url("fonds/manoir-cheminee.jpg");
  background-image: url("fonds/manoir-cheminee.jpg");
}
.paquet[data-scene="developpeuse"] > :not(.feu, form, .socle-sablier, .sur-photo, .sorties, .glisser-piece) { position: relative; z-index: 1; }
.paquet[data-scene="developpeuse"] > form { z-index: 2; }
/* le feu qui crépite : les flammes ondulent depuis leur pied, la lueur vacille, des étincelles s'envolent */
.feu { position: absolute; z-index: 0; pointer-events: none; }
.feu .flammes { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 90%; animation: danser 1.7s ease-in-out infinite alternate; }
.feu .flammes.deux { opacity: 0.5; mix-blend-mode: screen; filter: brightness(1.25) blur(0.5px); animation: danser-encore 1.15s ease-in-out infinite alternate; }
@keyframes danser {
  0% { transform: scale(1, 1) skewX(0); }
  20% { transform: scale(1.02, 1.06) skewX(2deg); }
  45% { transform: scale(0.99, 0.95) skewX(-1.5deg); }
  70% { transform: scale(1.01, 1.05) skewX(1deg); }
  100% { transform: scale(1, 0.98) skewX(-2.5deg); }
}
@keyframes danser-encore {
  0% { transform: scale(0.98, 1.04) skewX(-2deg); }
  50% { transform: scale(1.03, 0.97) skewX(2.5deg); }
  100% { transform: scale(1, 1.08) skewX(-1deg); }
}
.feu .lueur {
  position: absolute;
  inset: -70% -110% -30%;
  background: radial-gradient(closest-side, rgba(255, 170, 70, 0.32), rgba(255, 120, 40, 0.12) 60%, transparent);
  mix-blend-mode: screen;
  animation: vaciller 2.3s steps(1) infinite;
}
@keyframes vaciller {
  0% { opacity: 0.85; } 12% { opacity: 1; } 21% { opacity: 0.7; } 33% { opacity: 0.95; } 48% { opacity: 0.8; }
  57% { opacity: 1; } 69% { opacity: 0.75; } 81% { opacity: 0.9; } 92% { opacity: 1; }
}
.feu .etincelle {
  position: absolute;
  left: var(--x);
  top: 35%;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 0.3em 0.1em rgba(255, 160, 60, 0.9);
  opacity: 0;
  animation: crepiter 2.6s var(--d) ease-out infinite;
}
@keyframes crepiter {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--dx), -6em); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .feu .flammes, .feu .lueur, .feu .etincelle { animation: none; }
}
/* pas de titre dans la pièce de la machine (il reste pour les lecteurs d'écran) */
.paquet[data-scene="developpeuse"] > h2 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.paquet[data-scene="developpeuse"] .paquet-bilan { margin-top: max(5.5%, 44px); }
.paquet[data-scene="developpeuse"] .paquet-corps { width: 94%; padding-top: 4px; }
.paquet[data-scene="developpeuse"] .paquet-corps:has(.developpeuse) { overflow: hidden; }
.developpeuse {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.sortie-rouleau {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, 520px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sortie-rouleau:empty { flex: 0 0 0; }
.machine {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: min(42dvh, 330px);
  aspect-ratio: 900 / 1013;
}
.developpeuse:not(.a-cote) .machine { height: min(52dvh, 400px); }
.machine img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); user-select: none; -webkit-user-select: none; }
.bouton-rouge {
  position: absolute;
  left: 12.9%;
  top: 53%;
  width: 11%;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.bouton-rouge:not(:disabled) { animation: bouton-appelle 1.6s ease-in-out infinite; }
.bouton-rouge:disabled { cursor: default; }
.bouton-rouge:focus-visible { outline: 3px solid var(--luciole); }
@keyframes bouton-appelle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 70, 0.7); }
  50% { box-shadow: 0 0 14px 7px rgba(255, 90, 70, 0.55); }
}
.flash {
  position: absolute;
  left: 45.5%;
  top: 50.4%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 250, 225, 0.6) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.en-marche .machine { animation: secouer 0.9s linear; }
.en-marche .flash { animation: eclair 0.9s ease-out; }
@keyframes secouer {
  0%, 100% { transform: none; }
  10%, 30%, 50%, 70% { transform: translate(-1.5%, 0.5%) rotate(-0.8deg); }
  20%, 40%, 60%, 80% { transform: translate(1.5%, -0.5%) rotate(0.8deg); }
}
@keyframes eclair {
  0%, 55% { opacity: 0; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}
/* la feuille tapée à la machine : elle glisse de derrière la machine et se pose à côté */
.feuille-machine {
  box-sizing: border-box;
  width: min(92%, 460px);
  max-height: 100%;
  overflow-y: auto;
  padding: 10px 16px 14px;
  border-top: 8px solid var(--famille);
  /* un papier jauni, taché, dans l'esprit de la machine */
  background:
    radial-gradient(ellipse at 25% 15%, rgba(255, 248, 225, 0.55), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(150, 100, 40, 0.2), transparent 32%),
    radial-gradient(circle at 10% 92%, rgba(150, 100, 40, 0.14), transparent 25%),
    linear-gradient(#efdfb6, #e4cf9c);
  color: #33240f;
  color-scheme: light;
  box-shadow: inset 0 0 22px rgba(120, 78, 28, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  scrollbar-width: thin;
}

.feuille-machine .famille { margin: 0; color: color-mix(in srgb, var(--famille) 80%, #3b2516); font: 700 0.75rem/1.2 var(--police-texte); text-transform: uppercase; letter-spacing: 0.06em; }
.feuille-machine h3 { margin: 2px 0 6px; font: 400 clamp(1.1rem, 3vmin, 1.5rem)/1.15 var(--police-titre); }
.feuille-machine .consigne { margin: 0; min-height: 3em; font: 400 clamp(0.85rem, 2.3vmin, 1.05rem)/1.4 var(--police-machine); white-space: pre-line; }
.lue .feuille-machine { cursor: auto; }
/* sortie du rouleau, la feuille se décale à côté de la machine, entière */
.developpeuse.a-cote .sortie-rouleau { margin: 0 0 14px; }
.a-cote .feuille-machine { rotate: -1.5deg; animation: decaler 1.2s cubic-bezier(0.25, 0.8, 0.4, 1); }
@keyframes decaler { from { translate: 0 75%; } }
@media (min-width: 700px) and (min-height: 601px), (orientation: portrait) and (min-width: 700px) {
  .developpeuse.a-cote { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 5%; }
  .developpeuse.a-cote .sortie-rouleau { flex: 0 1 460px; height: 100%; margin: 0; align-items: center; }
  .a-cote .feuille-machine { width: 100%; rotate: 1.5deg; }
  @keyframes decaler { from { translate: -85% 0; } }
}
@media (max-width: 699px) and (orientation: portrait) {
  .developpeuse.a-cote .machine { height: min(26dvh, 210px); }
}
.petit-paquet { padding: 7px 13px; font-size: 0.9rem; }
.bouton-paquet[aria-pressed="true"] { background: #6f8a3c; }
/* la carte surprise : un Polaroid qui sort par devant, tout brun, puis se développe */
.polaroid {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: min(250px, 62vw, 40dvh);
  margin: 0;
  padding: 7% 7% 0;
  box-sizing: border-box;
  background: #f1e6cc;
  color: #2e2218;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%;
  transform: translate(-50%, 10%) scale(0.25);
  opacity: 0;
}
.surprise .polaroid { animation: ejecter 1.6s cubic-bezier(0.3, 1, 0.5, 1) forwards; }
.polaroid.rangee { display: none; }
@keyframes ejecter {
  0% { transform: translate(-50%, 0) scale(0.25); opacity: 1; }
  35% { transform: translate(-50%, 40%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -12%) scale(1) rotate(-3deg); opacity: 1; }
}
.polaroid .photo { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 50% 40%, #cfe0e6, #7a9aa8); }
.polaroid .photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.surprise .polaroid .photo img { animation: developper 4.2s ease-in forwards; }
.polaroid .photo::after { content: ""; position: absolute; inset: 0; background: #3b2a1c; opacity: 0; pointer-events: none; }
.surprise .polaroid .photo::after { animation: voile 4.2s ease-in forwards; }
@keyframes developper {
  0% { filter: sepia(1) brightness(0.3) blur(3px); }
  60% { filter: sepia(0.6) brightness(0.8) blur(1px); }
  100% { filter: none; }
}
@keyframes voile { 0% { opacity: 1; } 100% { opacity: 0; } }
.polaroid figcaption {
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  text-align: center;
  white-space: pre-line;
  font: 400 clamp(0.85rem, 2.4vmin, 1.1rem)/1.2 "Schoolbell", var(--police-texte);
  opacity: 0;
}
.surprise .polaroid figcaption { animation: voile 1.5s 2.6s ease-in reverse forwards; }
@media (prefers-reduced-motion: reduce) {
  .surprise .polaroid { animation-duration: 0.01s; }
  .surprise .polaroid .photo img, .surprise .polaroid .photo::after, .surprise .polaroid figcaption { animation-duration: 0.01s; animation-delay: 0s; }
}
/* les joueurs */
.joueurs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; counter-reset: joueur; }
.joueurs input { color-scheme: light; width: 9em; padding: 7px 10px; border: 1px solid rgba(59, 37, 22, 0.4); border-radius: 8px; background: #fffdf6; color: var(--noyer); font: inherit; }
.reglage-joueurs { display: flex; gap: 8px; }
.paquet[data-scene="developpeuse"] .developpeuse:has(+ .joueurs) .machine { height: min(30dvh, 240px); }
/* le rappel de la consigne, au-dessus du sablier ou de la page blanche */
.rappel-consigne {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(100%, 640px);
  margin: 0;
  padding: 8px 14px;
  border-left: 5px solid var(--liege);
  background: linear-gradient(#efdfb6, #e4cf9c);
  color: #2e2218;
  font: 400 0.95rem/1.35 var(--police-machine);
  white-space: pre-line;
  max-height: 7.5em;
  overflow-y: auto;
}
.rappel-consigne strong { font-family: var(--police-texte); }
/* le sablier d'amélie (outils/fabriquer_sablier.py) : dans son verre coulent des petites lettres */
.sablier {
  position: relative;
  flex: 0 1 auto;
  height: 96%;
  min-height: 0;
  aspect-ratio: 600 / 1027;
  container-type: inline-size;
}
.sablier img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)); }
/* les deux bulbes du verre (en % de la photo), où s'entassent les lettres */
.bulbe {
  position: absolute;
  left: 22.5%;
  width: 42.5%;
  height: 26.5%;
  overflow: hidden;
}
.bulbe.haut { top: 19%; clip-path: polygon(50% 0, 80% 2%, 95% 12%, 100% 30%, 97% 50%, 85% 70%, 65% 88%, 54% 100%, 46% 100%, 35% 88%, 15% 70%, 3% 50%, 0 30%, 5% 12%, 20% 2%); }
.bulbe.bas { top: 50.6%; clip-path: polygon(46% 0, 54% 0, 65% 12%, 85% 30%, 97% 50%, 100% 70%, 95% 88%, 80% 98%, 50% 100%, 20% 98%, 5% 88%, 0 70%, 3% 50%, 15% 30%, 35% 12%); }
.tas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  color: #2a180c;
  font: 700 7cqw/0.8 var(--police-machine);
  letter-spacing: -0.08em;
  text-shadow: 0 0 2px rgba(255, 240, 210, 0.7);
}
.tas span { display: inline-block; rotate: var(--r); }
.bulbe.haut .tas { height: 82%; }
.bulbe.bas .tas { height: 0; }
.coule .bulbe.haut .tas { animation: vider var(--duree) linear forwards; }
.coule .bulbe.bas .tas { animation: remplir var(--duree) linear forwards; }
@keyframes vider { to { height: 0; } }
@keyframes remplir { to { height: 70%; } }
/* les lettres qui tombent par le goulot */
.chute { position: absolute; left: 43.7%; top: 45%; width: 0; height: 30%; }
.lettre-chute {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% 0;
  color: #2a180c;
  font: 700 7cqw/1 var(--police-machine);
  text-shadow: 0 0 2px rgba(255, 240, 210, 0.7);
  animation: tomber 1s ease-in forwards;
}
@keyframes tomber {
  to { transform: translateY(calc(var(--chute, 54) * 1cqw)) rotate(200deg); opacity: 0.6; }
}
/* posé sur le miroir doré (placé par carte.js) */
.socle-sablier {
  position: absolute;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  background: radial-gradient(closest-side, rgba(255, 232, 180, 0.8), rgba(255, 205, 130, 0.4) 55%, transparent);
}
/* la page est partie : elle s'envole, pliée, et le message s'affiche en grand */
.page-envolee { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: auto 0; }
.page-envolee p {
  max-width: min(90%, 560px);
  margin: 0;
  padding: 14px 22px;
  background: linear-gradient(#efdfb6, #e4cf9c);
  color: #33240f;
  font: 400 clamp(1.1rem, 3vmin, 1.5rem)/1.35 "Schoolbell", var(--police-texte);
  text-align: center;
  box-shadow: inset 0 0 18px rgba(120, 78, 28, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
  rotate: -1deg;
  animation: indice 0.6s ease-out;
}
.feuille-volante {
  width: 46px;
  height: 34px;
  background:
    linear-gradient(160deg, transparent 49%, rgba(120, 80, 40, 0.4) 50%, transparent 51%),
    linear-gradient(20deg, transparent 49%, rgba(120, 80, 40, 0.4) 50%, transparent 51%),
    #fffdf6;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
  animation: s-envoler 2.2s ease-in forwards;
}
@keyframes s-envoler {
  0% { transform: translate(0, 30px) rotate(0); opacity: 1; }
  30% { transform: translate(-30px, -10px) rotate(-12deg); }
  60% { transform: translate(40px, -50px) rotate(10deg); opacity: 1; }
  100% { transform: translate(140px, -160px) rotate(25deg) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .feuille-volante { animation: none; opacity: 0; } }
.paquet-corps.sous-le-miroir { justify-content: flex-end; }
/* toutes les lettres sont tombées : le sablier sursaute */
.sablier.fini { animation: sursauter 0.14s linear 8 alternate; }
@keyframes sursauter { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@media (prefers-reduced-motion: reduce) { .sablier.fini { animation: none; } }
.vu-seulement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reste-sablier { margin: 0; font: 700 1.2rem/1.2 var(--police-texte); text-shadow: 0 1px 4px rgba(20, 8, 16, 0.95); }
/* téléphone couché : la feuille se pose à côté de la machine */
@media (orientation: landscape) and (max-height: 600px) {
  .developpeuse { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 0; }
  .sortie-rouleau, .developpeuse.a-cote .sortie-rouleau { flex: 1 1 0; height: 100%; margin: 0 0 0 3%; align-items: center; justify-content: flex-start; }
  .machine, .developpeuse:not(.a-cote) .machine { height: min(100%, 60dvh); }
  .feuille-machine { padding: 8px 14px 10px; }
  @keyframes decaler { from { translate: -85% 0; } }
  .paquet[data-scene="developpeuse"] .developpeuse:has(+ .joueurs) .machine { height: min(100%, 28dvh); }
  /* le miroir prend toute la hauteur : la consigne se met à gauche */
  .paquet-corps.sous-le-miroir { justify-content: center; align-items: flex-start; }
  .sous-le-miroir .rappel-consigne { width: 36%; max-height: 100%; font-size: 0.8rem; }
}

/* la visite du manoir : les portes à pousser sur la photo, et les étiquettes pour revenir (en haut à gauche) */
.porte-piece {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}
.porte-piece:hover, .porte-piece:focus-visible {
  outline: 0;
  background: rgba(255, 217, 138, 0.18);
  box-shadow: 0 0 26px 6px rgba(255, 217, 138, 0.55);
}
.porte-piece span {
  position: absolute;
  left: 50%;
  bottom: 6%;
  translate: -50% 0;
  white-space: nowrap;
  border-style: solid;
  border-width: 8px;
  border-image: url("icones/etiquette-jute.png") 22 fill / 8px round;
  padding: 0 4px;
  color: var(--noyer);
  font: 400 clamp(0.75rem, 1.9vmin, 1rem)/1.2 var(--police-titre);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  rotate: -2deg;
  pointer-events: none;
}
.sorties {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 92%;
  margin-top: 6px;
}
.sorties button {
  border-style: solid;
  border-width: 9px;
  border-image: url("icones/etiquette-jute.png") 22 fill / 9px round;
  padding: 0 6px;
  background: none;
  color: var(--noyer);
  font: 700 clamp(0.8rem, 2vmin, 1rem)/1.2 var(--police-texte);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
  cursor: pointer;
}
.sorties button:hover, .sorties button:focus-visible { filter: drop-shadow(0 0 8px rgba(255, 217, 138, 0.9)); outline: 0; }

/* ---------- le manoir de Sapajou : les jeux des pièces ---------- */
/* au-dessus de ce qui est posé sur la photo, mais sans bloquer les doigts là où il n'y a rien */
.paquet > h2, .paquet > .paquet-bilan, .paquet > .paquet-corps, .paquet > .paquet-commandes { position: relative; z-index: 3; }
.paquet > .paquet-corps, .paquet > .paquet-commandes { pointer-events: none; }
/* dans les pièces de Sapajou, les boutons se serrent en bas pour laisser la place au jeu */
.paquet:not([data-scene="developpeuse"]) .paquet-commandes { flex: 0 0 auto; margin: auto 0 max(12px, 2.5%); padding-top: 8px; }
.paquet-corps > *, .paquet-commandes > * { pointer-events: auto; }
.sur-photo { position: absolute; z-index: 2; }
/* la pièce plus large que l'écran (téléphone debout) : on la fait glisser */
.paquet.glissante { touch-action: pan-y; }
.glisser-piece {
  display: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 34px;
  height: 64px;
  translate: 0 -50%;
  border: 0;
  border-radius: 10px;
  background: rgba(59, 37, 22, 0.55);
  color: var(--parchemin);
  font: 700 2rem/1 var(--police-texte);
  cursor: pointer;
}
.glisser-piece.gauche { left: 4px; }
.glisser-piece.droite { right: 4px; }
.paquet.glissante > .glisser-piece { display: block; }

/* ce qu'on fouille (livres, oreiller…) : rien ne se voit, sauf au survol ; ce qui n'est pas le bon se secoue */
.cachette, .ingredient, .cadre-texte, .radio, .mousse {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.cachette:hover, .cachette:focus-visible, .ingredient:hover, .ingredient:focus-visible, .radio:hover, .radio:focus-visible {
  outline: 0;
  background: rgba(255, 217, 138, 0.14);
  box-shadow: 0 0 22px 4px rgba(255, 217, 138, 0.45);
}
/* sur une photo de pièce, la cachette suit exactement sa boîte (pas de centrage ni de carré comme dans les univers) */
.sur-photo.cachette { translate: none; aspect-ratio: auto; }
.cachette.rate { animation: secouer 0.4s; }
@keyframes secouer { 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
.cachette.scintille { animation: scintiller 1.6s ease-in-out infinite; }
@keyframes scintiller {
  50% { background: rgba(255, 217, 138, 0.22); box-shadow: 0 0 26px 8px rgba(255, 217, 138, 0.75); }
}
.cachette.trouve { background: rgba(255, 230, 160, 0.4); box-shadow: 0 0 40px 16px rgba(255, 217, 138, 0.9); }

/* la galerie : dans chaque cadre, le prénom (ou le dessin) de l'enfant */
.cadre-texte { display: grid; place-items: center; overflow: hidden; transition: box-shadow 0.3s; }
.cadre-texte span {
  max-width: 92%;
  color: #3b2516;
  font: 400 min(calc(var(--h) * 0.2), calc(var(--l) * 0.13))/1.1 var(--police-titre);
  overflow-wrap: normal;
  hyphens: auto;
  text-align: center;
  background: rgba(241, 226, 192, 0.86);
  padding: 4% 6%;
  rotate: -2deg;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.cadre-texte img { width: 86%; height: 86%; object-fit: contain; }
.cadre-texte:hover, .cadre-texte:focus-visible { outline: 0; box-shadow: 0 0 24px 6px rgba(255, 217, 138, 0.7); }

/* le livre magique : fermé (on le touche pour l'ouvrir), puis ouvert sur l'encadré et le bouton rouge */
.livre-magique {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, max(240px, calc((100dvh - 250px) * 1.34)), 900px);
  container-type: inline-size;
}
.livre-magique img { display: block; width: 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }
.livre-magique.ferme { width: min(70%, max(200px, calc((100dvh - 270px) * 1.34)), 560px); }
.livre-magique .couverture { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; animation: arriver 0.7s ease-out; }
.livre-magique .couverture:hover img, .livre-magique .couverture:focus-visible img { filter: drop-shadow(0 0 22px rgba(255, 217, 138, 0.85)); }
@keyframes arriver { from { scale: 0.4; opacity: 0; rotate: -8deg; } }
.livre-magique.ouvert { animation: ouvrir-livre 0.6s ease-out; }
@keyframes ouvrir-livre { from { scale: 0.92 1; opacity: 0.4; } }
.livre-magique .encadre {
  position: absolute;
  left: 17.3%;
  top: 50.6%;
  width: 27.6%;
  height: 20.4%;
  overflow-y: auto;
  color: #4a2a14;
  rotate: 3.5deg;
  font: 400 calc(1.45cqw * var(--zoom, 1))/1.35 "Courier New", Courier, monospace;
  white-space: pre-line;
  scrollbar-width: thin;
}
.livre-magique .encadre h3 { margin: 0 0 0.4em; font: 700 calc(1.6cqw * var(--zoom, 1))/1.2 "Courier New", Courier, monospace; text-transform: uppercase; letter-spacing: 0.04em; }
.livre-magique .encadre p { margin: 0; }
/* le titre du livre, écrit sur la page à droite des engrenages */
.livre-magique .titre-livre {
  position: absolute;
  left: 34.3%;
  top: 17%;
  width: 14%;
  margin: 0;
  color: #4a2a14;
  font: 400 2.7cqw/1.15 var(--police-titre);
  text-align: center;
  rotate: 3deg;
}
.livre-magique .livre-dessin { position: relative; }
.livre-magique .feuille-livre { display: contents; }
.livre-magique .griffonnages {
  display: none;
  position: absolute;
  left: 18.5%;
  top: 52%;
  width: 25.5%;
  height: 17.5%;
  rotate: 3.5deg;
  overflow: visible;
  fill: none;
  stroke: #4a2a14;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.livre-magique.en-marche .griffonnages path { stroke-dasharray: 100; animation: griffonner 0.6s ease-out backwards; }
@keyframes griffonner { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.livre-magique.en-marche .encadre { animation: fremir 0.25s 3; }
@keyframes fremir { 50% { translate: 0.5px -0.5px; } }
.bouton-rouge-livre {
  position: absolute;
  left: 59.2%;
  top: 66.6%;
  width: 8.6%;
  height: 11.5%;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 70, 0) 55%, rgba(255, 120, 90, 0.0) 70%);
  cursor: pointer;
  animation: appeler 2.2s ease-in-out infinite;
}
@keyframes appeler { 50% { box-shadow: 0 0 22px 8px rgba(255, 110, 80, 0.55); } }
.bouton-rouge-livre:active, .livre-magique.en-marche .bouton-rouge-livre { scale: 0.9; animation: none; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5); }
.bouton-rouge-livre:disabled { cursor: default; }

/* le salon à la cheminée : le transistor, et les notes qui s'envolent quand il est allumé */
.radio .note { position: absolute; top: 10%; left: 40%; opacity: 0; color: #ffe7a8; font-size: calc(var(--h) * 0.35); text-shadow: 0 0 8px rgba(255, 200, 100, 0.9); pointer-events: none; }
.radio.allumee { box-shadow: 0 0 30px 8px rgba(255, 210, 120, 0.55); }
.radio.allumee .note { animation: chanter 3s ease-out infinite; }
.radio.allumee .note.deux { left: 65%; animation-delay: 1s; }
.radio.allumee .note.trois { left: 20%; animation-delay: 2s; }
@keyframes chanter { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 1em -3.2em; rotate: 20deg; } }
.radio:not(.allumee) { animation: scintiller 2.4s ease-in-out infinite; }
.emissions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(30, 18, 10, 0.72);
  border-radius: 14px;
}
.emissions p { margin: 0; text-align: center; }
a.bouton-paquet { display: inline-block; text-decoration: none; }

/* la salle de bain : le miroir embué, et la mousse qui éclate pour montrer la pièce sans mousse dessous */
.miroir-embue { touch-action: none; cursor: crosshair; border-radius: 2px; filter: blur(1.2px); }
.mousse { overflow: visible; }
.mousse .dessous {
  position: absolute;
  inset: 0;
  background: url("fonds/manoir/salle-de-bain-sans-mousse.jpg") no-repeat;
  opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, #000 60%, transparent);
  transition: opacity 0.5s;
  pointer-events: none;
}
.mousse.eclatee .dessous { opacity: 1; }
.mousse.eclatee { cursor: default; }
.mousse:not(.eclatee):hover, .mousse:not(.eclatee):focus-visible { outline: 0; filter: drop-shadow(0 0 10px rgba(180, 220, 255, 0.9)); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent); }
/* la bulle de savon et son poème : elle monte de la mousse, se balance, et éclate quand on la touche */
.bulle-poeme {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: min(70dvh, 90vw, 600px);
  height: min(65.5dvh, 84.2vw, 561px);
  margin: auto;
  padding: 0;
  border: 0;
  background: url("univers/bulle-poeme.webp") center / contain no-repeat;
  filter: drop-shadow(0 12px 22px rgba(30, 40, 60, 0.35));
  container-type: size;
  cursor: pointer;
  animation: bulle-monte 1.6s cubic-bezier(0.2, 0.8, 0.3, 1) both, bulle-flotte 5s ease-in-out 1.6s infinite;
}
.bulle-poeme p {
  position: absolute;
  left: 17%;
  top: 27%;
  width: 62%;
  height: 54%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b2731;
  font: 400 min(7.5cqw, calc(52cqh / (var(--lignes) * 1.25)))/1.25 var(--police-titre);
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
}
.bulle-poeme.eclate { animation: bulle-eclate 0.42s ease-out forwards; }
/* le temps du poème, le texte de la pièce s'efface pour laisser la bulle seule */
.paquet:has(.bulle-poeme:not(.eclate)) .paquet-bilan { visibility: hidden; }
@keyframes bulle-monte {
  from { translate: 0 45%; scale: 0.15; opacity: 0; }
  40% { opacity: 1; }
  to { translate: 0 0; scale: 1; }
}
@keyframes bulle-flotte {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -2.5%; rotate: 1.5deg; }
}
@keyframes bulle-eclate {
  to { scale: 1.25; opacity: 0; filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) { .bulle-poeme, .bulle-poeme.eclate { animation: none; } }

/* la chambre : la couverture de l'histoire, puis la lecture en ligne */
.couverture-histoire { padding: 0; border: 0; background: none; cursor: pointer; animation: arriver 0.6s ease-out; }
.couverture-histoire img { display: block; max-height: max(110px, calc(100dvh - 360px)); max-width: 100%; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55); }
.histoire-chambre { flex: 1 1 auto; width: 100%; min-height: 50dvh; border: 0; border-radius: 8px; background: #fbf6ea; }
.paquet-corps:has(.histoire-chambre) { overflow: hidden; width: 94%; }

/* le salon violet : l'histoire de Sapajou, le voyage à inventer, le détecteur */
.histoire-sapajou, .voyage-sapajou {
  box-sizing: border-box;
  width: min(100%, 640px);
  padding: 18px 22px;
  border-radius: 4px;
  background: #f4ead2;
  color: #2f2016;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  line-height: 1.5;
}
.histoire-sapajou h3 { margin: 0 0 10px; font: 400 1.35rem/1.2 var(--police-titre); text-align: center; color: #5a2a4a; }
.histoire-sapajou p { margin: 0 0 0.7em; }
.histoire-sapajou .a-suivre { font-style: italic; text-align: center; color: #5a2a4a; font-weight: 700; }
.voyage-sapajou p { margin: 0 0 12px; }
.voyage-sapajou label { display: block; font-weight: 700; margin-bottom: 4px; }
.voyage-sapajou input, .voyage-sapajou textarea { color-scheme: light; box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid #b59a72; border-radius: 6px; background: #fffaf0; color: #2f2016; -webkit-text-fill-color: #2f2016; font: inherit; }
.voyage-sapajou ::placeholder { color: #9a8468; -webkit-text-fill-color: #9a8468; }
/* la valise de Sapajou : du cuir, deux sangles, et dedans des étiquettes de bagage */
.valise-sapajou {
  box-sizing: border-box;
  width: min(100%, 620px);
  max-height: 100%;
  overflow-y: auto;
  padding: 16px 20px 18px;
  border: 3px solid #4a2c17;
  border-radius: 14px;
  background: radial-gradient(ellipse at 30% 20%, #9a6338, #6e4022 70%);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.15), 0 12px 26px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin;
  animation: arriver 0.5s ease-out;
}
.valise-sapajou .coffre { display: block; width: min(100%, 260px); margin: -4px auto 4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
/* le coffre posé dans le salon (déjà teinté aux couleurs de la pièce, outils/fabriquer_livre_magique.py) : son ombre
   sur le parquet ; il s'éclaire au survol */
.valise-piece { padding: 0; border: 0; background: none; cursor: pointer; }
.valise-piece::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -10%;
  bottom: -9%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 8, 3, 0.8), rgba(15, 8, 3, 0.4) 55%, transparent);
  filter: blur(6px);
}
.valise-piece img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(-4px 3px 6px rgba(15, 8, 3, 0.45));
  transition: filter 0.3s, scale 0.3s;
}
.valise-piece:hover img, .valise-piece:focus-visible img { filter: brightness(1.25) drop-shadow(0 0 16px rgba(255, 217, 138, 0.8)); scale: 1.03; }
.valise-piece:focus-visible { outline: 0; }
.bouton-paquet.sur-petit-ecran { display: none; }
@media (max-width: 700px) { .bouton-paquet.sur-petit-ecran { display: inline-block; } }
.valise-sapajou h3 { margin: 4px 0 10px; color: #f6e7c4; font: 400 1.25rem/1.2 var(--police-titre); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.valise-sapajou h3 + ul { margin-bottom: 14px; }
.valise-sapajou ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.etiquette-voyage {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 15em;
  padding: 8px 12px 8px 22px;
  border-radius: 4px 12px 12px 4px;
  background: #e9d6a8;
  color: #3a2716;
  font-size: 0.9rem;
  line-height: 1.25;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  rotate: var(--penche, -1.5deg);
}
.etiquette-voyage:nth-child(2n) { --penche: 1.8deg; }
.etiquette-voyage:nth-child(3n) { --penche: -0.6deg; }
.etiquette-voyage::before { content: ""; position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #6e4022; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.etiquette-voyage strong { font: 400 1.1rem var(--police-titre); }
.valise-vide { color: #f6e7c4; font-style: italic; text-align: center; }
.detecteur { position: relative; flex: 0 0 auto; width: min(65%, max(110px, calc((100dvh - 380px) * 0.62)), 290px); container-type: inline-size; }
.detecteur img { display: block; width: 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }
.detecteur .ampoule { position: absolute; left: 41.8%; top: 0.5%; width: 9.6%; height: 7%; border-radius: 45% 45% 30% 30%; pointer-events: none; }
.detecteur.ecoute .ampoule { animation: clignoter 0.35s steps(1) infinite; }
.detecteur.ding .ampoule { background: radial-gradient(closest-side, rgba(255, 245, 180, 0.95), rgba(255, 210, 90, 0.4) 70%, transparent); box-shadow: 0 0 30px 12px rgba(255, 220, 120, 0.7); }
@keyframes clignoter { 50% { background: radial-gradient(closest-side, rgba(255, 245, 180, 0.95), transparent); box-shadow: 0 0 24px 10px rgba(255, 220, 120, 0.6); } }
.detecteur .aiguille {
  position: absolute;
  left: 47.8%;
  top: 40.5%;
  width: 1.2%;
  height: 18%;
  border-radius: 50% 50% 2px 2px;
  background: linear-gradient(#b0342a, #5a1a12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%;
  rotate: -60deg;
  pointer-events: none;
}
.detecteur.ecoute .aiguille { animation: affoler 0.5s ease-in-out infinite alternate; }
.detecteur.ding .aiguille { rotate: 38deg; transition: rotate 0.4s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes affoler { 0% { rotate: -70deg; } 35% { rotate: 25deg; } 60% { rotate: -20deg; } 100% { rotate: 60deg; } }
.detecteur .mot-entrant {
  position: absolute;
  left: 100%;
  top: 52%;
  color: #fff6d8;
  font: 700 5cqw/1 var(--police-titre);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.detecteur.ecoute .mot-entrant { animation: avaler 1.6s ease-in forwards; }
@keyframes avaler { 0% { opacity: 1; translate: 30% -50%; scale: 1; } 100% { opacity: 0; translate: -100% -50%; scale: 0.15; } }
.detecteur .confettis { position: absolute; left: 96%; top: 52%; pointer-events: none; }
.detecteur .confettis i {
  position: absolute;
  width: 0.7em;
  height: 0.35em;
  background: #d8b46a;
  opacity: 0;
  font-size: 2cqw;
}
.detecteur .confettis i:nth-child(3n) { background: #c9a98a; }
.detecteur .confettis i:nth-child(4n) { background: #f2e3b0; border-radius: 50%; width: 0.4em; height: 0.4em; }
.detecteur.ding .confettis i { animation: jaillir 1.4s var(--d) ease-out forwards; }
@keyframes jaillir {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--l)) rotate(540deg); }
}
.verdict {
  flex: 0 0 auto;
  max-width: min(92%, 460px);
  margin: 0;
  padding: 0.8em 1em;
  background: #efe0b4;
  color: #3a2a18;
  font: 400 1rem/1.35 "Courier New", Courier, monospace;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  rotate: -1.5deg;
  opacity: 0;
}
.verdict.sorti { animation: sortir-papier 0.8s 0.3s ease-out forwards; }
@keyframes sortir-papier { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
.paquet-corps:has(.detecteur) { gap: 6px; }


/* la cuisine : les sortes de plats, le nom du plat, les garnitures ; on touche la cuisine pour ajouter un ingrédient */
.fourneau-mots {
  box-sizing: border-box;
  width: min(100%, 680px);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(40, 24, 14, 0.78);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.choix-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.choix-plats button {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--parchemin);
  color: var(--noyer);
  font: 700 0.85rem/1.3 var(--police-texte);
  cursor: pointer;
}
.choix-plats.garnitures button { background: #d9c7a0; font-weight: 400; }
.choix-plats button:hover, .choix-plats button:focus-visible { background: #ffe3a3; outline: 0; }
.nom-plat { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 2px solid #b07a4a; border-radius: 8px; background: #fffaf0; color: #2c1d12; font: 700 1.05rem var(--police-texte); }
.aide-cuisine { margin: 0; font-size: 0.85rem; text-align: center; }
.ingredient span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(241, 226, 192, 0.95);
  color: var(--noyer);
  font: 700 0.8rem/1.3 var(--police-texte);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ingredient:hover span, .ingredient:focus-visible span { opacity: 1; }
.ingredient.pris span { animation: montrer-nom 1.2s; }
.ingredient.pris { animation: pris 0.5s; }
@keyframes montrer-nom { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pris { 50% { background: rgba(255, 230, 160, 0.45); box-shadow: 0 0 22px 8px rgba(255, 217, 138, 0.8); } }
.paquet[data-scene="cuisine"] .paquet-commandes { flex: 0 0 auto; margin: auto 0 12px; }
.paquet[data-scene="cuisine"] .paquet-corps { flex: 0 1 auto; }
.menu-cuisine {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 440px);
  padding: 26px 34px 22px;
  border: 4px double #6b4a2c;
  outline: 1px solid #6b4a2c;
  outline-offset: -12px;
  background: radial-gradient(ellipse at 50% 40%, #fbf3df 30%, #ead9b4);
  color: #3a2716;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  rotate: -1.2deg;
  animation: arriver 0.6s ease-out;
}
.menu-cuisine p { margin: 0; }
.menu-cuisine .maison { font: 400 0.75rem Georgia, serif; letter-spacing: 0.3em; text-transform: uppercase; color: #8a6a4a; }
.menu-cuisine h3 { margin: 4px 0 2px; font: 400 1.9rem/1.1 var(--police-titre); }
.menu-cuisine .adresse { font: italic 0.85rem Georgia, serif; color: #8a6a4a; }
.menu-cuisine .fleuron { margin: 6px 0 2px; color: #6b4a2c; }
.menu-cuisine .service { margin: 12px 0 2px; font: 400 0.72rem Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a4a; }
.menu-cuisine .plat { font: italic 700 1.15rem/1.3 Georgia, serif; }
.menu-cuisine .chef { margin-top: 16px; font: 400 1.15rem "Schoolbell", cursive; color: #4a2a14; }
.menu-cuisine .chef input {
  width: 9em;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px dashed #8a6a4a;
  background: none;
  color: inherit;
  font: inherit;
}
.menu-cuisine .chef input:focus { outline: 0; border-bottom-style: solid; }
.menu-cuisine .bon-appetit { margin-top: 8px; font: 400 1.25rem var(--police-titre); }
@media (max-width: 480px) {
  .menu-cuisine { padding: 18px 20px 14px; }
  .menu-cuisine h3 { font-size: 1.6rem; }
  .menu-cuisine .service { margin-top: 8px; }
  .menu-cuisine .plat { font-size: 1.05rem; }
  .menu-cuisine .chef { margin-top: 10px; }
  .menu-cuisine .chef input { width: 7em; }
}
/* téléphone couché : le menu en version resserrée */
@media (max-height: 500px) {
  .menu-cuisine { width: min(100%, 640px); padding: 6px 24px; outline-offset: -8px; }
  .menu-cuisine .maison, .menu-cuisine .adresse, .menu-cuisine .fleuron, .menu-cuisine .bon-appetit { display: none; }
  .menu-cuisine h3 { margin: 0; font-size: 1.2rem; }
  .menu-cuisine .service { margin-top: 3px; font-size: 0.6rem; }
  .menu-cuisine .plat { font-size: 0.92rem; line-height: 1.2; }
  .menu-cuisine .chef { margin-top: 4px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cachette.scintille, .radio:not(.allumee), .radio.allumee .note, .bouton-rouge-livre, .detecteur.ecoute .aiguille, .detecteur.ecoute .ampoule { animation: none; }
}
/* petit livre (téléphone) : le livre reste visible, griffonné ; le titre et la consigne s'écrivent sur une feuille dessous */
@container (max-width: 560px) {
  .livre-magique .griffonnages { display: block; }
  .livre-magique .feuille-livre {
    display: block;
    margin-top: 10px;
    padding: 8px 12px 10px;
    background: #f1e6c8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: #4a2a14;
  }
  .livre-magique .titre-livre, .livre-magique .encadre {
    position: static;
    width: auto;
    height: auto;
    rotate: none;
    overflow: visible;
  }
  .livre-magique .titre-livre { margin-bottom: 6px; font-size: 1.15rem; }
  .livre-magique .encadre { font-size: calc(0.8rem * var(--zoom, 1)); }
  .livre-magique .encadre h3 { font-size: calc(0.85rem * var(--zoom, 1)); }
  .livre-magique .encadre:has(h3:empty) { display: none; }
}
/* téléphone couché : la feuille à côté du livre */
@media (max-height: 500px) {
  .livre-magique.ouvert { display: flex; align-items: center; gap: 12px; width: min(100%, 560px); }
  .livre-magique.ouvert .livre-dessin { flex: 0 0 min(48%, calc((100dvh - 205px) * 1.34)); }
  .livre-magique.ouvert .feuille-livre { flex: 1 1 auto; margin-top: 0; }
  .livre-magique.ouvert .titre-livre { margin-bottom: 2px; font-size: 1rem; }
  .livre-magique.ouvert .encadre { max-height: calc(100dvh - 240px); overflow: hidden; }
}
/* écran bas (téléphone couché) : le verdict à côté du détecteur */
@media (max-height: 500px) {
  .paquet-corps:has(.detecteur) { flex-direction: row; justify-content: center; align-items: center; }
  .verdict { font-size: 0.85rem; max-width: 45%; }
}
.paquet .paquet-bilan { user-select: none; }
/* les noms des pièces n'apparaissent qu'au survol (demande d'amélie) ; au doigt, les portes luisent doucement de temps en temps */
.porte-piece span { opacity: 0; transition: opacity 0.25s; }
.porte-piece:hover span, .porte-piece:focus-visible span { opacity: 1; }
@media (hover: none) {
  .porte-piece { animation: porte-luit 4s ease-in-out infinite; }
  .porte-piece:nth-of-type(2n) { animation-delay: 1.3s; }
  .porte-piece:nth-of-type(3n) { animation-delay: 2.6s; }
}
@keyframes porte-luit { 0%, 70%, 100% { box-shadow: none; } 85% { box-shadow: 0 0 22px 5px rgba(255, 217, 138, 0.5); } }
@media (prefers-reduced-motion: reduce) { .porte-piece { animation: none; } }

/* La Développeuse qui tourne (salon vert) : 4 faces, une lettre cachée sur chacune, un mot à taper, un Polaroid du couloir */
.paquet[data-scene="developpeuse"] .paquet-corps:has(.tournante) { overflow: visible; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.paquet[data-scene="developpeuse"]:has(.tournante) .glisser-piece { display: none; }
.paquet[data-scene="developpeuse"]:has(.tournante) .paquet-commandes { flex: 0 0 auto; min-height: 52px; margin-bottom: max(14px, 3%); }
.paquet[data-scene="developpeuse"]:has(.tournante) .paquet-bilan { z-index: 3; }
.tournante {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2dvh, 18px);
}
.rouleau-mot {
  display: flex;
  gap: 0.35em;
  padding: 0.25em 0.8em;
  background: linear-gradient(#f4ead2, #e4d4b0);
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 -3px 6px rgba(120, 90, 50, 0.25);
  rotate: -1deg;
  font: 400 clamp(1.4rem, 4.5vmin, 2.2rem)/1 var(--police-machine);
  color: #2f2016;
}
.case-mot {
  width: 1.1em;
  height: 1.3em;
  display: grid;
  place-items: center;
  border-bottom: 2px solid rgba(47, 32, 22, 0.55);
}
.rouleau-mot.rate { animation: secouer 0.6s linear; }
.rouleau-mot.juste { box-shadow: 0 0 18px 6px rgba(255, 220, 140, 0.75), 0 4px 10px rgba(0, 0, 0, 0.45); }
.plateau-machine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 24px);
  perspective: 1400px;
  max-width: 100%;
}
.machine-tournante {
  position: relative;
  height: min(42dvh, 400px);
  max-width: min(72vw, 640px);
  touch-action: pan-y;
}
.machine-tournante img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6));
  user-select: none;
  -webkit-user-select: none;
}
.tourner-machine {
  flex: 0 0 auto;
  width: clamp(40px, 6vmin, 56px);
  aspect-ratio: 1;
  border: 2px solid #c9a86a;
  border-radius: 50%;
  background: rgba(40, 24, 14, 0.75);
  color: #f4ead2;
  font-size: clamp(1.3rem, 3.5vmin, 1.8rem);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.tourner-machine:hover, .tourner-machine:focus-visible { background: rgba(90, 56, 26, 0.9); outline: none; }
/* la lettre cachée : à l'encre, presque effacée, elle luit de temps en temps */
.lettre-cachee {
  position: absolute;
  translate: -50% -50%;
  padding: 0.1em 0.25em;
  border: 0;
  background: none;
  color: rgba(52, 30, 16, 0.72);
  font: 400 clamp(1.1rem, 3.6vmin, 1.9rem)/1 var(--police-machine);
  cursor: pointer;
  animation: lettre-luit 3.5s ease-in-out infinite;
}
.lettre-cachee:focus-visible { outline: 2px solid var(--luciole); }
@keyframes lettre-luit {
  0%, 80%, 100% { text-shadow: none; }
  88% { text-shadow: 0 0 10px rgba(255, 230, 160, 0.95), 0 0 2px #fff6d8; }
}
.lettre-envolee {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  color: #2f2016;
  font: 400 2rem/1 var(--police-machine);
  text-shadow: 0 0 10px rgba(255, 230, 160, 0.95);
}
.clavier-lettres { display: flex; gap: clamp(8px, 2vw, 16px); min-height: clamp(44px, 7vmin, 60px); }
.touche-lettre {
  width: clamp(44px, 7vmin, 60px);
  aspect-ratio: 1;
  border: 3px solid #8a6b3a;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f6ecd2, #d9c49a);
  color: #2f2016;
  font: 400 clamp(1.3rem, 3.6vmin, 1.8rem)/1 var(--police-machine);
  box-shadow: 0 4px 0 #4a3420, 0 6px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.touche-lettre:disabled { opacity: 0.45; cursor: default; }
.touche-lettre:not(:disabled):active { translate: 0 3px; box-shadow: 0 1px 0 #4a3420, 0 2px 6px rgba(0, 0, 0, 0.5); }
.bouton-rouge-machine {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.bouton-rouge-machine:not(:disabled) { animation: bouton-appelle 1.6s ease-in-out infinite; }
.bouton-rouge-machine:disabled { cursor: default; }
.flash-machine {
  position: absolute;
  left: 41%;
  top: 32%;
  width: 40%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 250, 225, 0.6) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.tournante.en-marche .machine-tournante { animation: secouer 0.9s linear; }
.tournante.en-marche .flash-machine { animation: eclair 0.9s ease-out; }
/* le Polaroid sort de sous la machine, se pose devant en penchant, et se développe */
.polaroid-couloir {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: min(40dvh, 280px, 60vw);
  container-type: inline-size;
  padding: clamp(10px, 2dvh, 16px) clamp(10px, 2dvh, 16px) 0;
  border: 0;
  background: #f7f3ea;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  rotate: -5deg;
  animation: polaroid-sort 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.photo-dessous .polaroid-couloir { width: min(30dvh, 280px, 62vw); rotate: 3deg; }
.photo-dessous .machine-tournante { height: min(26dvh, 220px); }
.photo-dessous .clavier-lettres { display: none; }
.photo-cle {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  /* un vieux papier kraft éclairé au centre, avec un grain de lin, pour que la clé sombre se détache */
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 244, 220, 0.45), rgba(255, 244, 220, 0) 55%, rgba(70, 42, 20, 0.45) 100%),
    repeating-linear-gradient(0deg, rgba(90, 60, 30, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 60, 30, 0.06) 0 1px, transparent 1px 4px),
    url("fonds/vieux-papier.jpg") center / 260%,
    #cfae7e;
  filter: brightness(0.12) sepia(1) blur(4px);
  transition: filter 4.2s ease-in 0.6s;
}
.photo-cle img {
  width: 82%;
  max-width: none;
  rotate: -38deg;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6));
}
.polaroid-couloir .legende-polaroid {
  display: block;
  padding: 0.5em 0 0.7em;
  color: #3b2516;
  font: 400 6.6cqi/1.1 var(--police-titre);
  text-align: center;
  white-space: nowrap;
}
.polaroid-couloir.revele .photo-cle { filter: none; }
/* la clé développée invite à la toucher : elle luit et frétille */
.polaroid-couloir.developpee .photo-cle img { animation: cle-appelle 2.2s ease-in-out infinite; }
@keyframes cle-appelle {
  0%, 100% { scale: 1; rotate: -38deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); }
  15% { rotate: -32deg; }
  30% { rotate: -42deg; }
  45% { rotate: -38deg; }
  60% { scale: 1.06; filter: drop-shadow(0 0 14px rgba(255, 220, 140, 0.95)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); }
}
/* sur la page vieillie, la consigne s'écrit à l'encre, sans voile */
.paquet[data-scene="developpeuse"]:has(.tournante) .paquet-bilan {
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  color: #3b2516;
  text-shadow: none;
  font: 400 clamp(1rem, 2.6vmin, 1.4rem)/1.45 var(--police-machine);
  max-width: min(calc(100% - 120px), 760px);
}
.polaroid-couloir.developpee { animation: polaroid-sort 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both, polaroid-appelle 2s ease-in-out 1.4s infinite; }
@keyframes polaroid-sort {
  from { translate: -40% 0; scale: 0.3; opacity: 0; }
  30% { opacity: 1; }
  to { translate: 0 0; scale: 1; }
}
@keyframes polaroid-appelle {
  0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 22px 8px rgba(255, 225, 150, 0.6); }
}
@media (max-width: 700px) and (orientation: portrait) {
  .machine-tournante { height: auto; width: min(68vw, 360px); max-height: 38dvh; }
}
@media (max-height: 520px) {
  .tournante { flex-direction: row; flex-wrap: wrap; }
  .machine-tournante { height: min(52dvh, 260px); }
  .polaroid-couloir { width: min(56dvh, 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .lettre-cachee, .bouton-rouge-machine, .polaroid-couloir, .polaroid-couloir.developpee, .polaroid-couloir.developpee .photo-cle img { animation: none; }
}

/* téléphone : le texte de la pièce s'efface après le temps de lecture ; « Relire le texte » le rappelle */
.paquet .paquet-bilan { transition: opacity 1.2s ease; }
.paquet.texte-efface .paquet-bilan { opacity: 0; }
.relire-texte, .masquer-texte { display: none; }
/* « Masquer le texte » se range juste sous le texte */
.paquet.texte-masquable:not(.texte-efface) .masquer-texte {
  display: block;
  position: relative;
  z-index: 4;
  align-self: center;
  margin-top: 6px;
  padding: 4px 12px;
  border: 1.5px solid #c9a86a;
  border-radius: 999px;
  background: rgba(40, 24, 14, 0.78);
  color: #f4ead2;
  font: 400 0.8rem/1.2 var(--police-texte);
  cursor: pointer;
}
.paquet.texte-efface .relire-texte {
  display: block;
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border: 1.5px solid #c9a86a;
  border-radius: 999px;
  background: rgba(40, 24, 14, 0.78);
  color: #f4ead2;
  font: 400 0.85rem/1.2 var(--police-texte);
  cursor: pointer;
  animation: arriver 0.5s ease-out;
}