/* 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;
  /* écran plus allongé que la carte (téléphone couché) : la carte se rétrécit et des joues de bois comblent les côtés */
  --joue: 0px;
  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) calc(var(--bord-d) + var(--joue)) var(--bord-b) calc(var(--bord-g) + var(--joue));
  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 */
.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) - 100px);
  padding: 9px 18px;
  border-radius: 18px 14px 20px 12px;
  background: var(--verre);
  backdrop-filter: blur(6px);
  color: var(--parchemin);
  font: 400 clamp(0.95rem, 2.4vmin, 1.15rem)/1.35 var(--police-texte);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  transition: opacity 0.8s;
}
.indice.parti { opacity: 0; }

.commandes {
  position: absolute;
  z-index: 800;
  right: calc(var(--bord-d) + 12px);
  top: calc(var(--bord-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 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 scène : on est dans l'univers */
.scene {
  position: absolute;
  z-index: 850;
  inset: var(--bord-h) var(--bord-d) var(--bord-b) var(--bord-g);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--mer) 0%, var(--nuit) 78%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.scene.ouverte { opacity: 1; }
.scene-fond {
  position: absolute;
  inset: -6%;
  background: var(--fond) center / cover no-repeat;
  transform: scale(1.8);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* vignette : les bords s'assombrissent, comme une lumière posée au centre de l'univers */
.scene-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(16, 36, 46, 0) 30%, rgba(16, 36, 46, 0.7) 100%);
}
.scene.clair .scene-fond::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 243, 207, 0.15) 20%, rgba(59, 37, 22, 0.55) 100%);
}
.scene.ouverte .scene-fond { transform: scale(1); animation: respirer 9s 1.6s ease-in-out infinite; }
@keyframes respirer { 50% { transform: scale(1.05); } }
/* 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);
  -webkit-mask: radial-gradient(circle var(--rayon, 120px) at var(--lumx, 50%) var(--lumy, 50%), transparent 40%, #000 100%);
  mask: radial-gradient(circle var(--rayon, 120px) at var(--lumx, 50%) var(--lumy, 50%), transparent 40%, #000 100%);
  transition: -webkit-mask-position 0.2s, mask-position 0.2s;
}
.penombre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle var(--rayon, 120px) at var(--lumx, 50%) var(--lumy, 50%), rgba(255, 200, 110, 0.35), rgba(255, 200, 110, 0) 70%);
}
.lanterne-main {
  position: absolute;
  z-index: 3;
  left: var(--lumx, 50%);
  top: var(--lumy, 50%);
  width: var(--lanterne, 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; }
}

.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) */
.lecteur.feuilleter { width: min(96vw, 1180px); padding-top: 60px; }
.livre { width: min(100%, calc((92vh - 250px) * 2)); 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; }
.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)); 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; }
  .livre { width: min(100%, calc((96vh - 100px) * 2)); }
}
.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%; }
/* 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; }
.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.2em 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") center / 100% 100% 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; }
[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; }
}

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