/* ==========================================================
   LE HALL DES POSSIBLES — V0.6.1
   Base du Hall + Table des Idées
   ========================================================== */

:root {
  color-scheme: dark;
  --nuit: #050705;
  --vert-porte-haut: #416348;
  --vert-porte-bas: #1d3624;
  --bois-clair: #4b301e;
  --or: #c9a45a;
  --lumiere: #ffe2a0;
  --texte: #f4ead5;
  --duree-ouverture: 1800ms;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--texte);
  background: var(--nuit);
}

button { font: inherit; }

.experience {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--nuit);
}

/* =========================
   LE SEUIL
   ========================= */

.seuil {
  position: absolute;
  inset: 0;
  z-index: 10;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: clamp(12px, 2.5vh, 24px);
  padding:
    max(22px, env(safe-area-inset-top))
    20px
    max(20px, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 50% 58%, rgba(69, 91, 66, 0.28), transparent 30%),
    radial-gradient(circle at 50% 45%, #1b261c 0%, #0c110d 52%, var(--nuit) 100%);
  transition: opacity 1000ms ease, visibility 1000ms step-end;
}

.seuil__ambiance {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .28;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.015) 8px),
    linear-gradient(rgba(255,255,255,.02), transparent 35%);
}

.seuil__texte {
  z-index: 5;
  max-width: 760px;
  transition: opacity 700ms ease, transform 900ms ease;
}

.seuil__titre {
  margin: 0 0 10px;
  font-size: clamp(.72rem, 2.5vw, .95rem);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .58;
}

.seuil__phrase {
  margin: 0;
  font-size: clamp(1.12rem, 4.8vw, 2rem);
  line-height: 1.45;
  text-shadow: 0 3px 18px rgba(0,0,0,.92);
}

.seuil__phrase span {
  display: block;
  margin-top: .45em;
}

.scene-porte {
  position: relative;
  align-self: center;
  width: min(58vw, 270px);
  aspect-ratio: 2 / 3;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.lueur-hall {
  position: absolute;
  inset: 4% 2% 0;
  z-index: 0;
  border-radius: 8px 8px 2px 2px;
  opacity: .08;
  transform: scale(.88);
  background: radial-gradient(circle at 50% 52%, #fff9d7 0 10%, #ffd78b 28%, rgba(221,139,55,.82) 52%, transparent 76%);
  filter: blur(8px);
  box-shadow: 0 0 42px 12px rgba(255,190,88,.18);
  transition: opacity 1200ms ease, transform 1800ms ease, filter 1800ms ease, box-shadow 1800ms ease;
}

.encadrement {
  position: absolute;
  inset: -12px;
  z-index: 3;
  pointer-events: none;
}

.encadrement__haut,
.encadrement__gauche,
.encadrement__droite {
  position: absolute;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 18%, rgba(0,0,0,.35)),
    var(--bois-clair);
  box-shadow: 0 8px 15px rgba(0,0,0,.55);
}

.encadrement__haut { top: 0; left: 0; width: 100%; height: 16px; }
.encadrement__gauche, .encadrement__droite { top: 0; width: 16px; height: 100%; }
.encadrement__gauche { left: 0; }
.encadrement__droite { right: 0; }

.porte {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  border: 0;
  border-radius: 4px 4px 1px 1px;
  transform-origin: left center;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 16%, rgba(255,255,255,.06) 50%, transparent 82%, rgba(0,0,0,.38)),
    linear-gradient(180deg, var(--vert-porte-haut), var(--vert-porte-bas));
  box-shadow:
    inset 0 0 0 3px rgba(15,26,17,.9),
    inset 0 0 28px rgba(0,0,0,.38),
    0 26px 46px rgba(0,0,0,.72);
  transition: transform var(--duree-ouverture) cubic-bezier(.62,.05,.28,.98), filter 500ms ease, box-shadow 500ms ease;
  touch-action: manipulation;
}

.porte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(0,0,0,.09) 35px, transparent 37px);
  mix-blend-mode: multiply;
}

.porte__panneau {
  position: absolute;
  left: 11%;
  width: 78%;
  height: 32%;
  border: 4px solid rgba(15,29,18,.68);
  box-shadow: inset 0 0 22px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.08);
}

.porte__panneau--haut { top: 8%; }
.porte__panneau--bas { bottom: 8%; }

.porte__poignee {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 10%;
  width: 28px;
  height: 62px;
  transform: translateY(-50%);
}

.porte__plaque {
  position: absolute;
  inset: 0 6px;
  border: 1px solid #5e431d;
  border-radius: 12px;
  background: linear-gradient(90deg, #6c4c20, var(--or), #745323);
  box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.35);
}

.porte__bouton {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 3px solid #68491d;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 30%, #ffe09b, var(--or) 40%, #6b4a1c 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.7);
  transition: transform 260ms ease;
}

.porte__lumiere {
  position: absolute;
  right: -3px;
  bottom: -8px;
  left: -3px;
  height: 13px;
  background: var(--lumiere);
  filter: blur(5px);
  box-shadow: 0 0 30px 12px rgba(255,199,94,.55);
  animation: respiration-lumiere 3.2s ease-in-out infinite;
}

.porte:hover, .porte:focus-visible { filter: brightness(1.06); }
.porte:focus-visible { outline: 3px solid #ead08e; outline-offset: 9px; }
.porte:active .porte__bouton { transform: translate(-50%,-50%) rotate(18deg) scale(.96); }

.seuil__invitation {
  z-index: 5;
  margin: 0;
  font-size: clamp(.72rem, 2.8vw, .92rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
  animation: invitation 2.8s ease-in-out infinite;
  transition: opacity 600ms ease, transform 700ms ease;
}

.seuil.is-opening .porte,
.seuil.is-crossing .porte {
  transform: rotateY(-78deg);
  pointer-events: none;
}

.seuil.is-opening .lueur-hall,
.seuil.is-crossing .lueur-hall {
  opacity: 1;
  transform: scale(2.4);
  filter: blur(18px);
  box-shadow: 0 0 110px 55px rgba(255,206,122,.82);
}

.seuil.is-opening .seuil__texte,
.seuil.is-crossing .seuil__texte,
.seuil.is-opening .seuil__invitation,
.seuil.is-crossing .seuil__invitation {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.seuil.is-crossing {
  transform: scale(1.12);
  filter: brightness(1.35);
  transition: transform 1300ms ease, filter 1000ms ease, opacity 1000ms ease;
}

.seuil.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
   LE HALL — V0.4
   ========================= */
.hall{position:absolute;inset:0;z-index:1;overflow:hidden;background:#090603;opacity:0;transform:scale(1.035);filter:brightness(2) blur(7px);transition:opacity 1300ms ease,transform 2200ms cubic-bezier(.2,.75,.3,1),filter 1800ms ease}
.hall.is-visible{opacity:1;transform:scale(1);filter:brightness(1) blur(0)}
.hall__panorama{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x;cursor:grab}
.hall__panorama::-webkit-scrollbar{display:none}.hall__panorama.is-dragging{cursor:grabbing}
.hall__scene{position:relative;width:max(100vw,calc(100svh * 1.5));height:100svh;overflow:hidden;background:#120b05}
.hall__image{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hall__voile{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 53%,rgba(3,2,1,.28) 100%),linear-gradient(180deg,rgba(0,0,0,.08),transparent 22%,transparent 82%,rgba(0,0,0,.22));opacity:0;transition:opacity 1800ms ease 800ms}.hall.is-visible .hall__voile{opacity:1}
.fire-glow{position:absolute;top:39%;width:11%;height:22%;pointer-events:none;border-radius:45%;background:radial-gradient(ellipse at 50% 65%,rgba(255,239,160,.78) 0 7%,rgba(255,151,35,.53) 18%,rgba(238,80,14,.18) 44%,transparent 72%);mix-blend-mode:screen;filter:blur(7px);animation:feu-v04 1.55s ease-in-out infinite alternate}
.fire-glow--left{left:39.7%;animation-delay:-.65s}.fire-glow--right{left:50.8%;animation-duration:1.8s}
.dog-breath{position:absolute;left:34.2%;top:50.5%;width:15.2%;height:18%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(255,184,92,.08),transparent 68%);animation:chien-v04 5.8s ease-in-out infinite}
.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:14px;touch-action:manipulation}
.hotspot:focus-visible{outline:3px solid rgba(241,205,126,.95);outline-offset:3px;background:rgba(244,196,91,.08)}
.hotspot:hover{background:radial-gradient(circle,rgba(255,215,130,.10),transparent 72%)}
.hotspot--enigme{left:1.5%;top:87%;width:18%;height:9%}.hotspot--livre{left:5%;top:57%;width:25%;height:21%}.hotspot--idees{left:1%;top:31%;width:35%;height:23%}.hotspot--agenda{left:12%;top:14%;width:19%;height:20%}.hotspot--escalier{left:27%;top:9%;width:15%;height:22%}.hotspot--boite{left:20%;top:28%;width:15%;height:22%}.hotspot--chien{left:32%;top:47%;width:22%;height:21%}.hotspot--cafe{left:42%;top:59%;width:31%;height:25%}.hotspot--bibliotheque{left:59%;top:7%;width:23%;height:36%}.hotspot--atelier{left:84%;top:8%;width:14%;height:33%}.hotspot--canape{left:65%;top:35%;width:27%;height:30%}.hotspot--souvenirs{left:85%;top:50%;width:13%;height:23%}.hotspot--malle{left:76%;top:68%;width:18%;height:25%}.hotspot--contacts{left:88%;top:83%;width:11%;height:14%}
.dialogue{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:rgba(4,3,2,.72);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s step-end}.dialogue.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
.dialogue__carte{position:relative;width:min(92vw,560px);max-height:min(78svh,660px);overflow:auto;padding:clamp(25px,5vw,42px);border:1px solid rgba(207,168,87,.72);border-radius:8px;background:linear-gradient(145deg,rgba(36,25,16,.98),rgba(13,10,7,.99));box-shadow:0 25px 90px rgba(0,0,0,.75),inset 0 0 45px rgba(166,111,39,.08);text-align:center}
.dialogue__fermer{position:absolute;right:12px;top:9px;width:38px;height:38px;border:0;background:transparent;color:#e7d5ae;font-size:1.7rem;cursor:pointer}.dialogue__titre{margin:0 0 16px;color:#e1bd72;font-size:clamp(1.35rem,4vw,2rem);font-weight:400}.dialogue__texte{margin:0;color:#f2e6cf;font-size:clamp(1rem,3.4vw,1.18rem);line-height:1.7}.dialogue__texte em{color:#d8bd84}.dialogue__sceau{display:block;margin:22px auto 0;width:44px;height:44px;border:1px solid #b99045;border-radius:50%;line-height:42px;color:#d7b364;font-size:.9rem}
.hall[data-moment="matin"]{filter:brightness(1.04) saturate(.98)}.hall[data-moment="jour"]{filter:brightness(1) saturate(1)}.hall[data-moment="soir"]{filter:brightness(.91) saturate(1.07) sepia(.05)}.hall[data-moment="nuit"]{filter:brightness(.74) saturate(.9) sepia(.08)}
@keyframes feu-v04{0%{opacity:.48;transform:scale(.92,.96) translateY(1%)}45%{opacity:.9;transform:scale(1.04,1.08) translateY(-1%)}100%{opacity:.62;transform:scale(.98,1.02)}}
@keyframes chien-v04{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.025) translateY(-.3%)}}
@keyframes respiration-lumiere{0%,100%{opacity:.45}50%{opacity:1}}@keyframes invitation{0%,100%{opacity:.52}50%{opacity:.88}}
@media(max-height:650px){.seuil{gap:9px;padding-top:12px;padding-bottom:12px}.scene-porte{width:min(37vh,220px)}.seuil__phrase{font-size:clamp(1rem,3.8vh,1.35rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.seuil__ambiance,.seuil__invitation,.fire-glow,.dog-breath{animation:none!important}.porte,.seuil,.hall,.hall__voile,.dialogue{transition-duration:180ms!important}}

/* ==========================================================
   LE HALL DES POSSIBLES — V0.6.1
   Table des Idées + identité du Seuil
   ========================================================== */

/* Le Seuil ne connaît qu'un seul temps : celui qu'il faut. */
.hall[data-moment="matin"],
.hall[data-moment="jour"],
.hall[data-moment="soir"],
.hall[data-moment="nuit"] { filter: none; }

.table-idees {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(4,3,2,.82);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s step-end;
}
.table-idees.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.table-idees__carte {
  position: relative;
  width: min(94vw, 820px);
  max-height: 91svh;
  overflow: auto;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(207,168,87,.72);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(38,27,18,.99), rgba(14,10,7,.995));
  box-shadow: 0 28px 100px rgba(0,0,0,.82), inset 0 0 60px rgba(166,111,39,.08);
  scrollbar-width: thin;
}
.table-idees__fermer {
  position: sticky;
  float: right;
  top: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(16,11,7,.78);
  color: #e7d5ae;
  font-size: 1.7rem;
  cursor: pointer;
}
.table-idees__entete { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.table-idees__entete h2 { margin: 10px 0 12px; color: #e1bd72; font-size: clamp(1.55rem, 5vw, 2.35rem); font-weight: 400; }
.table-idees__entete p { margin: 0; color: #f0e2c8; line-height: 1.7; }
.table-idees__sceau { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto; border: 1px solid #b99045; border-radius: 50%; color: #d7b364; }
.table-idees__form { display: grid; gap: 24px; }
.table-idees fieldset { margin: 0; padding: 20px; border: 1px solid rgba(201,164,90,.35); border-radius: 8px; }
.table-idees legend, .champ > span { color: #dfbf7d; line-height: 1.45; }
.champ { display: grid; gap: 9px; }
.champ input, .champ textarea, .champ-autre {
  width: 100%;
  border: 1px solid rgba(201,164,90,.35);
  border-radius: 6px;
  padding: 12px 13px;
  color: #f5ead5;
  background: rgba(7,6,4,.55);
  font: inherit;
}
.champ textarea { resize: vertical; min-height: 92px; }
.champ input:focus, .champ textarea:focus, .champ-autre:focus { outline: 2px solid rgba(225,189,114,.72); outline-offset: 2px; }
.champ-autre { margin-top: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choix label, .couleurs label { cursor: pointer; }
.choix input, .couleurs input { position: absolute; opacity: 0; pointer-events: none; }
.choix span {
  display: inline-block;
  padding: 9px 12px;
  border: 1px solid rgba(201,164,90,.28);
  border-radius: 999px;
  color: #eadcc2;
  background: rgba(255,255,255,.025);
  transition: .18s ease;
}
.choix input:checked + span { border-color: #d5ae61; background: rgba(201,164,90,.16); color: #fff1cf; box-shadow: inset 0 0 16px rgba(201,164,90,.08); }
.choix input:focus-visible + span, .couleurs input:focus-visible + span { outline: 2px solid #ead08e; outline-offset: 3px; }
.couleurs { display: grid; grid-template-columns: repeat(auto-fit,minmax(78px,1fr)); gap: 10px; margin-top: 10px; }
.pastille { display: grid; place-items: center; min-height: 54px; padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; font-size: .82rem; background: rgba(255,255,255,.025); transition: .18s ease; }
.couleurs input:checked + .pastille { border-color: #e2bd72; box-shadow: 0 0 0 2px rgba(226,189,114,.2), inset 0 0 18px rgba(255,255,255,.06); transform: translateY(-1px); }
.pastille[data-couleur="rouge"]{box-shadow:inset 0 -4px #7f2929}.pastille[data-couleur="orange"]{box-shadow:inset 0 -4px #a15e28}.pastille[data-couleur="jaune"]{box-shadow:inset 0 -4px #b79a3b}.pastille[data-couleur="vert"]{box-shadow:inset 0 -4px #426f45}.pastille[data-couleur="bleu"]{box-shadow:inset 0 -4px #3f6284}.pastille[data-couleur="violet"]{box-shadow:inset 0 -4px #674f84}.pastille[data-couleur="rose"]{box-shadow:inset 0 -4px #936071}.pastille[data-couleur="noir"]{box-shadow:inset 0 -4px #050505}.pastille[data-couleur="blanc"]{box-shadow:inset 0 -4px #d6d0c2}
.table-idees__actions { display: flex; justify-content: center; padding-top: 4px; }
.bouton-seuil { border: 1px solid #b99045; border-radius: 999px; padding: 12px 20px; color: #f6e8cb; background: linear-gradient(180deg, rgba(112,75,31,.42), rgba(56,37,18,.58)); cursor: pointer; }
.bouton-seuil:hover, .bouton-seuil:focus-visible { filter: brightness(1.12); outline: none; box-shadow: 0 0 0 3px rgba(225,189,114,.15); }
.bouton-seuil:disabled { cursor: default; opacity: .66; }
.table-idees__retour { min-height: 1.5em; margin: 0; text-align: center; color: #dbc186; line-height: 1.6; }

@media (max-width: 620px) {
  .table-idees__carte { padding: 22px 16px 28px; }
  .table-idees fieldset { padding: 16px 12px; }
  .choix { display: grid; grid-template-columns: 1fr 1fr; }
  .choix span { display: block; text-align: center; }
}

/* V0.6.1 — Le Hall accuse réception d'une idée */
.mail-flag {
  position: absolute;
  left: 30.6%;
  top: 34.2%;
  width: 1.15%;
  min-width: 7px;
  height: 7.5%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(58deg);
  transform-origin: 50% 92%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d2918, #a47a3f 55%, #4b311b);
  box-shadow: 0 2px 7px rgba(0,0,0,.65);
  transition: transform 900ms cubic-bezier(.2,.8,.25,1.18), opacity 500ms ease;
}
.mail-flag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 45%;
  width: 330%;
  aspect-ratio: 1.35;
  border-radius: 2px;
  background: linear-gradient(145deg, #8d342d, #54201d);
  box-shadow: inset 0 0 0 1px rgba(255,225,170,.18), 0 2px 5px rgba(0,0,0,.5);
}
.mail-flag.is-raised {
  opacity: .9;
  transform: rotate(-8deg);
}

.requete-book {
  position: absolute;
  left: 70.1%;
  top: 22.5%;
  width: 2.7%;
  min-width: 17px;
  height: 14%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-28%) rotate(2deg) scale(.82);
  transform-origin: bottom center;
  border-radius: 2px 3px 3px 2px;
  background: linear-gradient(90deg, #25160f 0 18%, #6f3f28 20% 78%, #2c190f 80% 100%);
  box-shadow: inset 1px 0 rgba(238,205,139,.22), 2px 4px 8px rgba(0,0,0,.6);
  transition: opacity 600ms ease 300ms, transform 1200ms cubic-bezier(.18,.8,.24,1.1) 200ms;
}
.requete-book::before {
  content: "AS";
  position: absolute;
  inset: 8% 0 auto;
  text-align: center;
  color: rgba(229,196,126,.72);
  font-size: clamp(5px,.65vw,10px);
  letter-spacing: .08em;
}
.requete-book span {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 600%;
  transform: translateX(-50%);
  color: rgba(234,214,174,.75);
  font-size: clamp(5px,.52vw,9px);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms ease 1.1s;
}
.requete-book.is-visible {
  opacity: .92;
  transform: translateY(0) rotate(2deg) scale(1);
}
.requete-book.is-visible span { opacity: .78; }

.champ-autre[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mail-flag, .requete-book, .requete-book span { transition: none !important; }
}

/* ==========================================================
   V0.6.1 — RESTAURATION DE LA DERNIÈRE BASE VALIDÉE
   Arche végétale + Atelier du Seuil + Table des Idées
   ========================================================== */

/* La scène restaurée a le ratio natif 3:2 (1536 × 1024). */
.hall__scene{width:max(100vw,calc(100svh * 1.5));height:100svh}

/* Hotspots recalés sur le Hall restauré. Aucun libellé visuel permanent. */
.hotspot--arche{left:13.5%;top:10%;width:19%;height:38%}
.hotspot--idees{left:0%;top:35%;width:20%;height:24%}
.hotspot--livre{left:0%;top:57%;width:27%;height:25%}
.hotspot--boite{left:21.5%;top:31%;width:14%;height:25%}
.hotspot--escalier{left:28%;top:12%;width:15%;height:27%}
.hotspot--chien{left:33%;top:48%;width:20%;height:19%}
.hotspot--cafe{left:42%;top:63%;width:36%;height:28%}
.hotspot--bibliotheque{left:65%;top:4%;width:27%;height:39%}
.hotspot--atelier{left:91%;top:7%;width:9%;height:39%}
.hotspot--canape{left:67%;top:36%;width:32%;height:34%}
.hotspot--souvenirs{left:91%;top:60%;width:9%;height:20%}
.hotspot--malle{left:82%;top:72%;width:18%;height:27%}
.hotspot--contacts{display:none}
.hotspot--agenda{display:none}

/* Énigme du Moment : présence discrète, sans recréer les anciennes bulles. */


/* Lueurs recalées sur les deux foyers de la scène restaurée. */
.fire-glow{top:39%;width:10%;height:20%}
.fire-glow--left{left:39.5%}
.fire-glow--right{left:52.5%}
.dog-breath{left:34%;top:49%;width:17%;height:18%}

/* Réaction locale de la boîte aux idées recalée sur la boîte restaurée. */
.mail-flag{left:31.3%;top:34%;height:7%}
.requete-book{left:71%;top:18%;height:15%}

@media (max-width:700px){
  .hotspot:hover{background:transparent}
}



/* ==========================================================
   V0.6.1 — LA COUPELLE DE LAIT
   Présence conditionnelle pour questions et inquiétudes.
   ========================================================== */
.hotspot--coupelle{left:48.5%;top:63.5%;width:7%;height:9%;border-radius:50%}
.hotspot--coupelle[hidden]{display:none!important}
.hotspot--coupelle:not([hidden])::after{content:"";position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1.8;transform:translate(-50%,-50%);border:1px solid rgba(224,211,174,.25);border-radius:50%;background:radial-gradient(ellipse at 50% 36%,rgba(245,239,210,.2) 0 42%,rgba(124,94,54,.22) 45% 64%,transparent 66%);opacity:.28;transition:opacity .25s ease,filter .25s ease}
.hotspot--coupelle:hover::after,.hotspot--coupelle:focus-visible::after{opacity:.72;filter:drop-shadow(0 0 7px rgba(235,216,164,.32))}

.coupelle{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:20px;background:rgba(4,3,2,.78);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s step-end}
.coupelle.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
.coupelle__carte{position:relative;width:min(92vw,590px);max-height:86svh;overflow:auto;padding:clamp(27px,5vw,44px);border:1px solid rgba(190,171,124,.54);border-radius:14px;background:linear-gradient(150deg,rgba(31,27,20,.99),rgba(12,10,8,.995));box-shadow:0 28px 100px rgba(0,0,0,.82),inset 0 0 60px rgba(211,193,143,.04);text-align:center}
.coupelle__fermer{position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#ddd0b4;font-size:1.7rem;cursor:pointer}
.coupelle__symbole{display:grid;place-items:center;width:52px;height:34px;margin:0 auto 8px;border:1px solid rgba(206,190,147,.48);border-radius:50%;color:#d8c9a5;background:radial-gradient(ellipse,rgba(244,236,204,.12),transparent 70%);font-size:1.15rem}
.coupelle h2{margin:10px 0 14px;color:#dfc789;font-size:clamp(1.45rem,5vw,2.1rem);font-weight:400}
.coupelle__intro{max-width:490px;margin:0 auto 26px;color:#ddcfb3;line-height:1.7}
.coupelle__form{display:grid;gap:20px;text-align:left}
.coupelle__form .table-idees__actions,.coupelle__form .table-idees__retour{text-align:center}
@media(prefers-reduced-motion:reduce){.coupelle,.hotspot--coupelle::after{transition:none!important}}


/* ==========================================================
   V0.6.1 — CONSOLIDATION DÉFINITIVE
   Table des Idées / Parole du Seuil / aucun cartouche de nommage
   ========================================================== */

/* Les hotspots restent interactifs mais ne génèrent plus aucun cartouche,
   étiquette ou bulle de nommage. */
.hotspot::before,
.hotspot::after {
  content: none !important;
  display: none !important;
}
.hotspot:hover { background: transparent; }

/* La Parole du Seuil : une véritable enveloppe de papier, laissée sur la table du Livre d’Or. */
.hotspot--parole {
  left: 26.4%;
  top: 75.2%;
  width: 9.2%;
  height: 6.4%;
  min-width: 74px;
  min-height: 46px;
  overflow: visible;
  border: 0;
  border-radius: 2px 3px 3px 2px;
  background:
    repeating-linear-gradient(8deg, rgba(91,65,39,.028) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 28% 16%, rgba(255,249,224,.48), transparent 36%),
    linear-gradient(165deg, #d8c5a0 0%, #c8ae7e 48%, #b28e5e 100%);
  box-shadow:
    0 3px 3px rgba(20,12,7,.34),
    0 9px 13px rgba(20,12,7,.28),
    inset 0 0 0 1px rgba(94,62,34,.28),
    inset 7px 5px 15px rgba(255,247,215,.18),
    inset -8px -6px 14px rgba(84,53,28,.12);
  transform: rotate(7deg) skewX(-.6deg);
  transform-origin: 50% 50%;
  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease;
}

/* Rabat : deux couches légèrement irrégulières pour éviter l'effet "icône". */
.hotspot--parole::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 1px 1px auto;
  height: 69%;
  pointer-events: none;
  clip-path: polygon(0 0,100% 0,52% 91%,48% 91%);
  background:
    repeating-linear-gradient(-7deg, rgba(73,49,28,.025) 0 1px, transparent 1px 5px),
    linear-gradient(170deg,#e0cfac 0%,#c8aa77 71%,#a98050 100%);
  filter: drop-shadow(0 1px 1px rgba(64,39,21,.32));
}

/* Sceau de cire petit, irrégulier et volontairement discret. */
.hotspot--parole::after {
  content: "AS" !important;
  display: grid !important;
  place-items: center;
  position: absolute;
  left: 51%;
  top: 57%;
  width: 19%;
  min-width: 15px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(-5deg);
  border: 0;
  border-radius: 48% 52% 45% 55% / 53% 46% 54% 47%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,193,156,.28) 0 7%, transparent 8%),
    radial-gradient(circle at 49% 46%, #8a342b 0 57%, #64251f 59% 78%, #451916 80% 100%);
  color: rgba(226,185,136,.72);
  box-shadow:
    0 1px 2px rgba(0,0,0,.45),
    inset 1px 1px 2px rgba(235,149,112,.16),
    inset -2px -2px 3px rgba(52,13,11,.28);
  font-size: clamp(5px,.52vw,8px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  pointer-events: none;
}
.hotspot--parole:hover,
.hotspot--parole:focus-visible {
  background:
    repeating-linear-gradient(8deg, rgba(91,65,39,.028) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 28% 16%, rgba(255,249,224,.52), transparent 36%),
    linear-gradient(165deg, #d8c5a0 0%, #c8ae7e 48%, #b28e5e 100%);
  filter: brightness(1.035);
  transform: rotate(6.2deg) skewX(-.6deg) translateY(-1px);
  box-shadow: 0 4px 4px rgba(20,12,7,.36),0 10px 15px rgba(20,12,7,.3),inset 0 0 0 1px rgba(94,62,34,.28);
}

/* Les réactions d'ambiance ne doivent jamais redevenir des cartouches de nommage. */
.hotspot--murmure::before,
.hotspot--murmure::after { content:none!important; display:none!important; }

@media(max-width:700px){
  .hotspot--parole{min-width:62px;min-height:39px}
}
@media(prefers-reduced-motion:reduce){
  .hotspot--parole{transition:none!important}
}


/* ==========================================================
   V0.6.1 — PAROLE DU SEUIL DANS LA BIBLIOTHÈQUE
   L'enveloppe fait désormais partie du décor lui-même.
   ========================================================== */
.hotspot--parole{
  left:80.4%;
  top:8.4%;
  width:7.2%;
  height:12.5%;
  min-width:44px;
  min-height:38px;
  border:0;
  border-radius:2px;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}
.hotspot--parole::before,.hotspot--parole::after{content:none!important;display:none!important}
.hotspot--parole:hover{background:transparent!important}
.hotspot--parole:focus-visible{outline:2px solid rgba(225,189,114,.62);outline-offset:3px;background:transparent!important}



/* ==========================================================
   V0.6.1 — CORRECTIF BIBLIOTHÈQUE / PAROLE DU SEUIL
   La zone des rayonnages ne doit jamais recouvrir l'enveloppe.
   ========================================================== */
.hotspot--bibliotheque{
  left:65%;
  top:21.5%;
  width:26%;
  height:21%;
}


/* ==========================================================
   V0.6.1 — PAROLE DU SEUIL : UN GESTE, PAS UNE INTERFACE
   ========================================================== */

.parole-geste{
  --parole-origin-x:0px;
  --parole-origin-y:0px;
  position:fixed;
  inset:0;
  z-index:55;
  display:grid;
  place-items:center;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  perspective:1400px;
  transition:opacity .35s ease,visibility .35s step-end;
}
.parole-geste.is-present{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .35s ease;
}
.parole-geste__ombre{
  position:absolute;
  inset:0;
  background:rgba(6,5,4,.20);
  backdrop-filter:blur(0);
  opacity:0;
  transition:opacity .75s ease,backdrop-filter .75s ease;
}
.parole-geste.is-centered .parole-geste__ombre{
  opacity:1;
  backdrop-filter:blur(1.5px);
}

.parole-geste__objet{
  position:relative;
  width:min(88vw,620px);
  height:min(78svh,700px);
  transform:
    translate(var(--parole-origin-x),var(--parole-origin-y))
    scale(.12)
    rotate(-4deg);
  transform-origin:center;
  transition:transform .78s cubic-bezier(.2,.72,.19,1),filter .7s ease;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
.parole-geste.is-centered .parole-geste__objet{
  transform:translate(0,0) scale(1) rotate(0deg);
  filter:drop-shadow(0 24px 35px rgba(0,0,0,.34));
}

/* Enveloppe centrale */
.parole-enveloppe{
  position:absolute;
  left:50%;
  top:50%;
  width:min(58vw,370px);
  aspect-ratio:1.55;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  transition:transform .65s ease,opacity .45s ease;
}
.parole-enveloppe__dos,
.parole-enveloppe__poche,
.parole-enveloppe__rabat{
  position:absolute;
  inset:0;
}
.parole-enveloppe__dos{
  border:1px solid rgba(98,72,43,.40);
  border-radius:3px;
  background:
    repeating-linear-gradient(7deg,rgba(70,48,27,.025) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 25% 14%,rgba(255,249,224,.50),transparent 40%),
    linear-gradient(160deg,#decba7,#c6a675 62%,#a78356);
  box-shadow:inset 0 0 26px rgba(91,58,31,.13),0 8px 18px rgba(0,0,0,.20);
}
.parole-enveloppe__poche{
  z-index:4;
  clip-path:polygon(0 28%,50% 66%,100% 28%,100% 100%,0 100%);
  background:
    linear-gradient(155deg,rgba(255,244,211,.20),transparent 38%),
    linear-gradient(165deg,#ceb68c 0%,#b18d5d 100%);
  border-radius:0 0 3px 3px;
  box-shadow:inset 0 -1px 0 rgba(72,47,27,.26);
}
.parole-enveloppe__rabat{
  z-index:6;
  height:66%;
  transform-origin:50% 0%;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:
    repeating-linear-gradient(-6deg,rgba(71,48,28,.024) 0 1px,transparent 1px 5px),
    linear-gradient(170deg,#e2d1ad,#c4a474 76%,#a58052);
  filter:drop-shadow(0 2px 1px rgba(56,34,18,.20));
  transition:transform .62s cubic-bezier(.34,.08,.18,1);
  backface-visibility:hidden;
}
.parole-enveloppe__sceau{
  position:absolute;
  z-index:8;
  left:50%;
  top:48%;
  display:grid;
  place-items:center;
  width:46px;
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-5deg);
  border-radius:48% 52% 46% 54% / 54% 46% 53% 47%;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,196,159,.24) 0 7%,transparent 8%),
    radial-gradient(circle,#88352d 0 58%,#64251f 60% 79%,#461916 81%);
  color:rgba(230,190,142,.74);
  font:700 10px/1 Georgia,serif;
  letter-spacing:.04em;
  box-shadow:0 2px 5px rgba(0,0,0,.38),inset 1px 1px 2px rgba(235,149,112,.15);
  transition:
    transform .55s cubic-bezier(.24,.75,.23,1),
    opacity .38s ease,
    filter .38s ease;
}
.parole-geste.is-unsealed .parole-enveloppe__sceau{
  transform:translate(58px,70px) rotate(24deg) scale(.82);
  opacity:.12;
  filter:blur(.3px);
}
.parole-geste.is-opened .parole-enveloppe__rabat{
  transform:rotateX(178deg);
  z-index:1;
}

/* La feuille naît réellement de l'enveloppe */
.parole-feuille{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:min(82vw,500px);
  height:min(70svh,610px);
  transform:
    translate(-50%,-23%)
    scale(.68,.14);
  transform-origin:50% 100%;
  opacity:0;
  overflow:hidden;
  border:1px solid rgba(101,74,43,.34);
  border-radius:2px;
  background:
    repeating-linear-gradient(4deg,rgba(75,55,32,.018) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 28% 12%,rgba(255,253,231,.65),transparent 43%),
    linear-gradient(172deg,#eadbb9 0%,#dbc49b 100%);
  color:#382b20;
  box-shadow:0 8px 24px rgba(0,0,0,.20),inset 0 0 34px rgba(100,71,36,.08);
  transition:
    transform .72s cubic-bezier(.2,.72,.2,1),
    opacity .35s ease,
    height .7s ease;
}
.parole-geste.is-paper-out .parole-feuille{
  opacity:1;
  transform:translate(-50%,-54%) scale(.84,.46);
  z-index:3;
}
.parole-geste.is-unfolded .parole-feuille{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  overflow:auto;
  z-index:10;
}
.parole-geste.is-paper-out .parole-enveloppe{
  transform:translate(-50%,68%) scale(.90);
}
.parole-geste.is-unfolded .parole-enveloppe{
  opacity:.28;
  transform:translate(-50%,88%) scale(.82);
}

.parole-feuille__pli{
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,65,39,.18),transparent);
  pointer-events:none;
}
.parole-feuille__pli--haut{top:33%}
.parole-feuille__pli--bas{top:66%}

.parole-feuille__contenu{
  min-height:100%;
  padding:clamp(28px,5vw,52px) clamp(24px,6vw,58px);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .55s ease .18s,transform .55s ease .18s,visibility .55s step-end;
}
.parole-geste.is-unfolded .parole-feuille__contenu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .55s ease .18s,transform .55s ease .18s,visibility 0s;
}
.parole-feuille__titre{
  margin:0 0 22px;
  color:#4b3523;
  font:400 clamp(1.45rem,5vw,2.15rem)/1.15 Georgia,serif;
}
.parole-feuille__texte{
  margin:0 auto 30px;
  max-width:38ch;
  color:#302419;
  font:clamp(1.05rem,3.6vw,1.28rem)/1.72 Georgia,serif;
}
.parole-feuille__reponse{
  display:grid;
  gap:12px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(92,65,37,.22);
}
.parole-feuille__reponse label{
  color:#59432d;
  font:italic .98rem/1.5 Georgia,serif;
}
.parole-feuille__reponse textarea{
  width:100%;
  min-height:104px;
  resize:vertical;
  padding:12px 4px 8px;
  border:0;
  border-bottom:1px solid rgba(82,59,35,.42);
  border-radius:0;
  outline:0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 28px,
      rgba(91,67,42,.12) 29px
    );
  color:#35271c;
  font:1rem/1.8 Georgia,serif;
}
.parole-feuille__reponse textarea::placeholder{color:rgba(83,63,42,.50)}
.parole-feuille__reponse textarea:focus{
  border-bottom-color:rgba(82,59,35,.72);
}
.parole-feuille__partager{
  justify-self:end;
  margin-top:6px;
  padding:7px 2px 4px;
  border:0;
  border-bottom:1px solid rgba(91,63,35,.40);
  background:transparent;
  color:#5a3d25;
  font:italic .98rem Georgia,serif;
  cursor:pointer;
}
.parole-feuille__partager:hover{border-bottom-color:#5a3d25}
.parole-feuille__partager:disabled{opacity:.55;cursor:default}
.parole-feuille__retour{
  min-height:1.35em;
  margin:2px 0 0;
  color:#75593b;
  font:italic .9rem/1.45 Georgia,serif;
  text-align:right;
}

/* Retour : les mêmes objets repartent, aucun "écran" ne se ferme. */
.parole-geste.is-returning .parole-feuille__contenu{
  opacity:0;
  transform:translateY(8px);
  transition-delay:0s;
}

@media(max-width:700px){
  .parole-geste__objet{width:94vw;height:82svh}
  .parole-enveloppe{width:min(72vw,330px)}
  .parole-feuille{
    width:min(91vw,480px);
    height:min(72svh,590px);
  }
  .parole-feuille__contenu{padding:30px 24px}
}
@media(prefers-reduced-motion:reduce){
  .parole-geste *,
  .parole-geste{transition-duration:.18s!important}
}


/* ----------------------------------------------------------
   Première lecture : l'invitation, et rien d'autre.
   ---------------------------------------------------------- */
.parole-feuille__invitation{
  position:absolute;
  inset:0;
  z-index:12;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:30px;
  padding:clamp(30px,7vw,70px);
  text-align:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s step-end;
}
.parole-geste.is-inviting .parole-feuille__invitation{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .5s ease,transform .5s ease,visibility 0s;
}
.parole-geste.is-accepted .parole-feuille__invitation{
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s step-end;
}
.parole-feuille__invitation-texte{
  max-width:26ch;
  margin:0;
  color:#3b2b1d;
  font:italic clamp(1.22rem,4.6vw,1.72rem)/1.62 Georgia,serif;
  letter-spacing:.008em;
  text-wrap:balance;
}
.parole-feuille__choix{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 24px;
  width:100%;
}
.parole-feuille__choix-bouton{
  padding:7px 2px 5px;
  border:0;
  border-bottom:1px solid rgba(83,59,34,.30);
  background:transparent;
  color:#60452d;
  font:italic clamp(.9rem,2.8vw,1rem)/1.35 Georgia,serif;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.parole-feuille__choix-bouton:hover,
.parole-feuille__choix-bouton:focus-visible{
  color:#382719;
  border-bottom-color:rgba(56,39,25,.70);
  outline:none;
}
.parole-feuille__choix-bouton--laisser{
  color:#7a674f;
  border-bottom-color:transparent;
}

@media(max-width:700px){
  .parole-feuille__invitation{gap:24px;padding:30px 24px}
  .parole-feuille__choix{flex-direction:column;align-items:center;gap:12px}
}


/* ==========================================================
   V0.6.1 — PAROLE DU SEUIL
   Mise en scène mobile affinée uniquement.
   Le principe et la séquence restent inchangés.
   ========================================================== */
@media(max-width:700px){

  .parole-geste__objet{
    width:96vw;
    height:78svh;
  }

  .parole-enveloppe{
    width:min(76vw,320px);
  }

  .parole-geste.is-paper-out .parole-enveloppe{
    opacity:1;
    transform:translate(-50%,46%) scale(.96);
  }

  .parole-geste.is-inviting .parole-feuille{
    width:min(82vw,350px);
    height:min(42svh,350px);
    transform:translate(-50%,-46%) scale(1);
    overflow:hidden;
    box-shadow:
      0 10px 24px rgba(0,0,0,.24),
      inset 0 0 28px rgba(100,71,36,.07);
  }

  .parole-feuille__invitation{
    gap:22px;
    padding:28px 26px 24px;
  }

  .parole-feuille__invitation-texte{
    max-width:23ch;
    font-size:clamp(1.06rem,4.8vw,1.34rem);
    line-height:1.55;
  }

  .parole-feuille__choix{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .parole-feuille__choix-bouton{
    min-height:38px;
    padding:7px 4px 5px;
    font-size:.94rem;
    line-height:1.25;
  }

  .parole-geste.is-unsealed .parole-enveloppe__sceau{
    transform:translate(34px,42px) rotate(18deg) scale(.86);
    opacity:.58;
    filter:none;
  }

  .parole-geste.is-unfolded .parole-feuille{
    width:min(91vw,480px);
    height:min(72svh,590px);
    transform:translate(-50%,-50%) scale(1);
    overflow:auto;
  }

  .parole-geste.is-unfolded .parole-enveloppe{
    opacity:.30;
    transform:translate(-50%,78%) scale(.84);
  }

  .parole-feuille__contenu{
    padding:30px 24px;
  }
}


/* ==========================================================
   V0.6.1 — ASMEP
   Présence quotidienne, jamais interactive.
   ========================================================== */

.asme-presence{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
}

/* Plaque sobre, patinée, sur le rebord du panier */
.asme-plaque{
  position:absolute;
  left:43.1%;
  top:63.35%;
  width:4.8%;
  min-width:54px;
  padding:.22em .35em .18em;
  transform:rotate(-2deg);
  border:1px solid rgba(58,37,19,.72);
  border-radius:2px;
  background:
    linear-gradient(165deg,rgba(235,206,144,.25),transparent 30%),
    linear-gradient(160deg,#83633d,#5d4328 62%,#3d2a19);
  box-shadow:
    0 2px 4px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(205,166,100,.12);
  color:rgba(222,191,135,.78);
  font:700 clamp(6px,.64vw,10px)/1 Georgia,serif;
  letter-spacing:.09em;
  text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  opacity:.78;
}

/* Carnet de santé rangé parmi les carnets d'une étagère basse */
.asme-carnet{
  position:absolute;
  left:71.7%;
  top:35.8%;
  width:4.6%;
  height:7.2%;
  min-width:42px;
  min-height:54px;
  padding:.32em .22em;
  transform:rotate(2deg);
  border:1px solid rgba(54,37,23,.58);
  border-radius:2px;
  background:
    linear-gradient(155deg,rgba(255,245,213,.15),transparent 38%),
    linear-gradient(145deg,#7f664d,#514033);
  box-shadow:0 2px 4px rgba(0,0,0,.26),inset 0 0 10px rgba(24,17,11,.18);
  color:rgba(226,209,175,.68);
  opacity:.78;
  overflow:hidden;
}
.asme-carnet__titre,
.asme-carnet__sous-titre{
  display:block;
  font-family:Georgia,serif;
  text-align:center;
}
.asme-carnet__titre{
  margin-top:.25em;
  font-size:clamp(5px,.46vw,7px);
  font-weight:700;
  letter-spacing:.08em;
}
.asme-carnet__sous-titre{
  margin-top:.5em;
  font-size:clamp(3.5px,.32vw,5px);
  line-height:1.15;
  font-style:italic;
}

/* Laisse discrètement suspendue près de la porte de l'Atelier */
.asme-laisse{
  position:absolute;
  left:94.2%;
  top:23.4%;
  width:.36%;
  height:17%;
  min-width:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#2a1d15,#513522 45%,#241811);
  box-shadow:0 1px 2px rgba(0,0,0,.34);
  transform:rotate(3deg);
  opacity:.62;
}
.asme-laisse::before{
  content:"";
  position:absolute;
  left:50%;
  top:-7%;
  width:210%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(122,91,57,.52);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(39,27,18,.45);
}
.asme-laisse::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2%;
  width:280%;
  height:20%;
  transform:translateX(-50%);
  border:2px solid rgba(59,38,24,.78);
  border-top:0;
  border-radius:0 0 50% 50%;
}

/* Légère marque d'usage autour de la gamelle déjà présente */
.asme-trace-gamelle{
  position:absolute;
  left:52.1%;
  top:59.7%;
  width:5.8%;
  height:3.2%;
  border-radius:50%;
  border-bottom:1px solid rgba(42,27,17,.20);
  transform:rotate(-4deg);
  opacity:.35;
}

/* Respiration : permanente, presque imperceptible */
.asme-vie__poitrine{
  position:absolute;
  left:39.2%;
  top:53.8%;
  width:8.6%;
  height:9.8%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(96,59,27,.12),transparent 68%);
  transform-origin:55% 65%;
  animation:asme-respire 5.9s ease-in-out infinite;
  mix-blend-mode:soft-light;
}

/* Oreille : micro-mouvement ponctuel */
.asme-vie__oreille{
  position:absolute;
  left:36.9%;
  top:54.0%;
  width:1.55%;
  height:3.8%;
  transform-origin:50% 100%;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(130deg,rgba(30,20,14,.40),rgba(89,56,27,.12));
  opacity:0;
}

/* Regard : deux reflets très brefs, sans chercher le Visiteur */
.asme-vie__regard{
  position:absolute;
  left:37.55%;
  top:57.95%;
  width:2.0%;
  height:.55%;
  opacity:0;
}
.asme-vie__regard::before,
.asme-vie__regard::after{
  content:"";
  position:absolute;
  top:0;
  width:3px;
  height:2px;
  border-radius:50%;
  background:rgba(190,146,82,.60);
  box-shadow:0 0 3px rgba(180,122,58,.30);
}
.asme-vie__regard::before{left:18%}
.asme-vie__regard::after{right:14%}

/* Soupir : un souffle très discret près du museau */
.asme-vie__souffle{
  position:absolute;
  left:37.1%;
  top:60.15%;
  width:3.2%;
  height:2.2%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(221,203,171,.16),transparent 68%);
  opacity:0;
  filter:blur(2px);
}

.asme-presence.is-ear .asme-vie__oreille{
  animation:asme-oreille 1.15s ease-in-out both;
}
.asme-presence.is-look .asme-vie__regard{
  animation:asme-regard 4.2s ease-in-out both;
}
.asme-presence.is-sigh .asme-vie__souffle{
  animation:asme-souffle 2.5s ease-out both;
}
.asme-presence.is-shift .asme-vie__poitrine{
  animation:asme-position 3.2s ease-in-out both,asme-respire 5.9s ease-in-out infinite 3.2s;
}

@keyframes asme-respire{
  0%,100%{transform:scale(1);opacity:.42}
  50%{transform:scale(1.045,1.025);opacity:.62}
}
@keyframes asme-oreille{
  0%,100%{transform:rotate(0deg);opacity:0}
  18%{opacity:.42}
  38%{transform:rotate(-9deg);opacity:.52}
  58%{transform:rotate(5deg);opacity:.46}
  82%{transform:rotate(0deg);opacity:.26}
}
@keyframes asme-regard{
  0%,100%{opacity:0;transform:translateX(0)}
  16%{opacity:.18}
  36%{opacity:.48;transform:translateX(1px)}
  65%{opacity:.38;transform:translateX(-1px)}
  84%{opacity:.10}
}
@keyframes asme-souffle{
  0%{opacity:0;transform:translate(0,0) scale(.65)}
  20%{opacity:.20}
  70%{opacity:.10;transform:translate(-7px,-4px) scale(1.25)}
  100%{opacity:0;transform:translate(-11px,-7px) scale(1.45)}
}
@keyframes asme-position{
  0%,100%{transform:translate(0,0) scale(1);opacity:.44}
  28%{transform:translate(1px,-1px) scale(1.025);opacity:.58}
  62%{transform:translate(-1px,0) scale(.99,1.02);opacity:.50}
}

@media(max-width:700px){
  .asme-plaque{
    min-width:34px;
    font-size:5px;
    padding:.18em .2em;
  }
  .asme-carnet{
    min-width:28px;
    min-height:38px;
  }
  .asme-carnet__titre{font-size:4px}
  .asme-carnet__sous-titre{font-size:3px}
  .asme-laisse{min-width:3px}
}

@media(prefers-reduced-motion:reduce){
  .asme-vie__poitrine,
  .asme-vie__oreille,
  .asme-vie__regard,
  .asme-vie__souffle{
    animation:none!important;
  }
}


/* ==========================================================
   V0.6.1 — ASMEP : nom découvert dans le décor
   Aucun traitement d'interface, aucun appel visuel.
   ========================================================== */

.asme-plaque{
  left:43.35%;
  top:63.55%;
  width:3.8%;
  min-width:42px;
  padding:.16em .22em .14em;
  transform:rotate(-2.8deg);
  border:1px solid rgba(67,43,23,.58);
  border-radius:1px;
  background:
    linear-gradient(165deg,rgba(206,168,103,.10),transparent 40%),
    linear-gradient(160deg,rgba(105,76,45,.78),rgba(65,45,28,.82));
  box-shadow:
    inset 0 0 0 1px rgba(192,151,88,.06),
    0 1px 2px rgba(0,0,0,.18);
  color:rgba(194,160,105,.58);
  font:700 clamp(5px,.48vw,7px)/1 Georgia,serif;
  letter-spacing:.07em;
  text-shadow:
    0 1px 0 rgba(24,15,9,.75),
    0 -1px 0 rgba(215,180,118,.06);
  opacity:.56;
}

.asme-carnet{
  opacity:.56;
}
.asme-carnet__titre{
  display:none!important;
}
.asme-carnet__sous-titre{
  margin-top:1.3em;
  font-size:clamp(3px,.27vw,4.4px);
  color:rgba(220,202,170,.48);
}

.asme-presence,
.asme-presence *{
  cursor:default!important;
  user-select:none;
  pointer-events:none!important;
}

/* V0.6.1 — derniers détails de cohérence
   Le nom d'ASMEP est désormais intégré au décor, jamais à l'interface. */
.asme-plaque,
.asme-carnet{
  display:none!important;
}


/* ==========================================================
   V0.6.1 — PC : MOUVEMENT DU REGARD
   Retour au cadrage d'origine.
   La cheminée reste le centre du Hall, entièrement dans le champ.
   Seul un très léger débordement horizontal est ajouté.
   ========================================================== */
@media (min-width: 901px) and (pointer: fine){

  .hall__panorama{
    width:100vw;
    height:100svh;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    cursor:grab;
  }

  .hall__panorama::-webkit-scrollbar{
    display:none;
  }

  .hall__panorama.is-dragging{
    cursor:grabbing;
  }

  /*
    104vw = seulement 4% de réserve latérale sur un écran large.
    Le Visiteur ne parcourt pas un panorama : il tourne légèrement le regard.
    La hauteur revient strictement à 100svh.
  */
  .hall__scene{
    width:max(104vw,calc(100svh * 1.5));
    height:100svh;
    margin-top:0;
    overflow:hidden;
    flex:none;
  }

  .hall__image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
}


/* ==========================================================
   V0.6.2 — ASMEP HABITE LE HALL
   Aucun "coin chien" : les traces sont réparties dans la pièce.
   Aucun élément n'est interactif.
   ========================================================== */

.asme-presence,
.asme-presence *{
  pointer-events:none!important;
  user-select:none;
  cursor:default!important;
}

/* Écusson de cuir cousu au panier — le nom appartient au couchage. */
.asme-ecusson{
  position:absolute;
  left:43.55%;
  top:62.9%;
  width:3.05%;
  min-width:34px;
  padding:.18em .25em .16em;
  transform:rotate(-3deg);
  border:1px solid rgba(45,27,16,.66);
  border-radius:3px 2px 3px 2px;
  background:
    linear-gradient(155deg,rgba(183,130,75,.16),transparent 38%),
    linear-gradient(150deg,#67462d,#422b1d 68%,#2e1e15);
  box-shadow:
    inset 0 0 0 1px rgba(211,160,98,.07),
    0 1px 2px rgba(0,0,0,.20);
  color:rgba(196,151,96,.58);
  font:700 clamp(4.5px,.42vw,6.5px)/1 Georgia,serif;
  letter-spacing:.08em;
  text-align:center;
  text-shadow:0 1px 0 rgba(18,10,7,.8);
  opacity:.72;
}
.asme-ecusson::before,
.asme-ecusson::after{
  content:"";
  position:absolute;
  top:50%;
  width:2px;height:2px;
  border-radius:50%;
  background:rgba(215,173,112,.34);
}
.asme-ecusson::before{left:3px}
.asme-ecusson::after{right:3px}

/* Balle oubliée près du canapé, loin du panier. */
.asme-balle{
  position:absolute;
  left:78.4%;
  top:72.7%;
  width:1.35%;
  min-width:12px;
  aspect-ratio:1;
  border-radius:50%;
  transform:rotate(17deg);
  background:
    radial-gradient(circle at 34% 28%,rgba(213,174,104,.24),transparent 22%),
    radial-gradient(circle,#744c2e 0 54%,#3b281d 70%,#251a13 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.34);
  opacity:.72;
}

/* Corde à moitié oubliée sous la petite table. */
.asme-corde{
  position:absolute;
  left:61.8%;
  top:84.4%;
  width:6.8%;
  height:1.15%;
  min-height:7px;
  transform:rotate(-8deg);
  border-radius:999px;
  background:
    repeating-linear-gradient(25deg,#6b5131 0 4px,#967044 4px 7px,#49351f 7px 10px);
  box-shadow:0 2px 3px rgba(0,0,0,.28);
  opacity:.52;
}
.asme-corde::before,
.asme-corde::after{
  content:"";
  position:absolute;
  top:50%;
  width:14%;
  aspect-ratio:1;
  transform:translateY(-50%);
  border:3px solid rgba(89,63,36,.72);
  border-radius:50%;
}
.asme-corde::before{left:-5%}
.asme-corde::after{right:-5%}

/* Laisse : reste près de la porte, mais encore plus discrète. */
.asme-laisse{
  opacity:.48;
}

/* Carnet de santé : rangé parmi les ouvrages, pas exposé. */
.asme-carnet-sante{
  position:absolute;
  left:72.4%;
  top:35.9%;
  width:2.5%;
  height:6.2%;
  min-width:22px;
  transform:rotate(1.5deg);
  border-radius:1px;
  background:
    linear-gradient(90deg,rgba(49,35,25,.78) 0 14%,rgba(111,83,59,.74) 15% 100%);
  box-shadow:1px 1px 2px rgba(0,0,0,.24);
  opacity:.50;
}
.asme-carnet-sante::after{
  content:"";
  position:absolute;
  left:28%;right:13%;top:28%;
  height:18%;
  border-top:1px solid rgba(221,204,171,.30);
  border-bottom:1px solid rgba(221,204,171,.18);
}

/* Boîte de croquettes rangée près de l'Atelier : objet de stockage, pas gamelle. */
.asme-croquettes{
  position:absolute;
  left:91.2%;
  top:53.8%;
  width:3.2%;
  height:6.5%;
  min-width:29px;
  border:1px solid rgba(50,34,22,.58);
  border-radius:2px 2px 3px 3px;
  transform:rotate(-1deg);
  background:
    linear-gradient(155deg,rgba(177,145,94,.10),transparent 35%),
    linear-gradient(90deg,#514233,#756047 58%,#46372a);
  box-shadow:0 2px 4px rgba(0,0,0,.26);
  opacity:.54;
}
.asme-croquettes::before{
  content:"";
  position:absolute;
  left:-5%;right:-5%;top:-7%;
  height:11%;
  border-radius:2px;
  background:#3c3026;
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}

/* La marque autour de l'eau reste légère : c'est un objet utilisé, pas signalé. */
.asme-trace-gamelle{
  opacity:.22;
}

@media(max-width:700px){
  .asme-ecusson{
    min-width:25px;
    font-size:3.8px;
  }
  .asme-balle{min-width:8px}
  .asme-carnet-sante{min-width:15px}
  .asme-croquettes{min-width:19px}
  .asme-corde{min-height:4px}
}


/* ==========================================================
   V0.6.2 — ASMEP EST UN HABITANT
   Dernière passe : rien n'est présenté, tout semble simplement vécu.
   ========================================================== */

/* L'écusson devient une couture du panier, pas une plaque posée dessus. */
.asme-ecusson{
  left:43.72%;
  top:63.18%;
  width:2.55%;
  min-width:28px;
  padding:.12em .18em .10em;
  border-color:rgba(38,23,14,.48);
  border-radius:4px 3px 4px 3px;
  background:
    linear-gradient(150deg,rgba(129,83,49,.72),rgba(59,37,24,.82));
  box-shadow:
    inset 0 0 0 1px rgba(196,139,79,.035),
    0 .5px 1px rgba(0,0,0,.14);
  color:rgba(183,132,79,.43);
  font-size:clamp(4px,.34vw,5.4px);
  letter-spacing:.055em;
  opacity:.58;
}
.asme-ecusson::before,
.asme-ecusson::after{
  width:1px;height:1px;
  background:rgba(205,154,93,.24);
}

/* Les affaires existent dans la pièce, mais aucune ne réclame le regard. */
.asme-balle{opacity:.46;filter:brightness(.82) saturate(.72)}
.asme-corde{opacity:.34;filter:brightness(.78) saturate(.68)}
.asme-laisse{opacity:.34}
.asme-carnet-sante{opacity:.34}
.asme-croquettes{opacity:.34}
.asme-trace-gamelle{opacity:.15}

/* La respiration reste le seul mouvement continu et demeure presque imperceptible. */
.asme-vie__poitrine{
  animation-duration:7.4s;
  opacity:.34;
}
.asme-presence.is-ear .asme-vie__oreille{opacity:.38}
.asme-presence.is-look .asme-vie__regard{opacity:.72}
.asme-presence.is-sigh .asme-vie__souffle{opacity:.72}

/* Rien dans la présence d'ASMEP ne peut devenir une interface. */
.asme-presence,
.asme-presence *{
  pointer-events:none!important;
  cursor:default!important;
  user-select:none!important;
}


/* ==========================================================
   V0.6.2 — ASMEP INDÉPENDANT DU DÉCOR
   Le chien est désormais composé de vrais calques visuels.
   ========================================================== */

.asme-habitant{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none!important;
}

.asme-corps,
.asme-tete{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
  transform-origin:center center;
  will-change:transform;
}

/* Position exacte dans la scène 1536x1024, exprimée en %. */
.asme-corps{
  left:33.5286%;
  top:48.8281%;
  width:18.5547%;
  height:auto;
  transform-origin:54% 66%;
  animation:asme-respiration-reelle 7.4s ease-in-out infinite;
}

.asme-tete{
  left:33.8542%;
  top:49.8047%;
  width:8.7891%;
  height:auto;
  transform-origin:58% 72%;
}

/* Les anciens faux effets du chien sont neutralisés. */
.asme-vie__poitrine,
.asme-vie__oreille,
.asme-vie__regard,
.asme-vie__souffle,
.asme-ecusson{
  display:none!important;
}

/* Respiration : le corps entier vit très légèrement. */
@keyframes asme-respiration-reelle{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.007,1.012)}
}

/* Mouvements ponctuels. Ils concernent désormais ASMEP lui-même. */
.asme-habitant.is-ear .asme-tete{
  animation:asme-tete-oreille 1.3s ease-in-out both;
}

.asme-habitant.is-look .asme-tete{
  animation:asme-tete-regard 4.4s ease-in-out both;
}

.asme-habitant.is-sigh .asme-corps{
  animation:
    asme-soupir-corps 2.8s ease-in-out both,
    asme-respiration-reelle 7.4s ease-in-out infinite 2.8s;
}

.asme-habitant.is-shift .asme-corps{
  animation:
    asme-change-position-corps 3.6s ease-in-out both,
    asme-respiration-reelle 7.4s ease-in-out infinite 3.6s;
}
.asme-habitant.is-shift .asme-tete{
  animation:asme-change-position-tete 3.6s ease-in-out both;
}

@keyframes asme-tete-oreille{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  28%{transform:translate(0,-1px) rotate(-1.2deg)}
  52%{transform:translate(1px,-1px) rotate(.7deg)}
}

@keyframes asme-tete-regard{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  18%{transform:translate(0,-2px) rotate(-1deg)}
  42%,68%{transform:translate(4px,-5px) rotate(2.2deg)}
  88%{transform:translate(1px,-1px) rotate(.4deg)}
}

@keyframes asme-soupir-corps{
  0%,100%{transform:scale(1)}
  28%{transform:scale(1.009,1.018)}
  62%{transform:scale(.997,.991)}
}

@keyframes asme-change-position-corps{
  0%,100%{transform:translate(0,0) scale(1)}
  30%{transform:translate(2px,-1px) scale(1.006,.997)}
  68%{transform:translate(-2px,1px) scale(.998,1.005)}
}
@keyframes asme-change-position-tete{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  30%{transform:translate(3px,-3px) rotate(1.6deg)}
  68%{transform:translate(-1px,1px) rotate(-.8deg)}
}

@media(max-width:700px){
  .asme-corps{animation-duration:7.8s}
}

@media(prefers-reduced-motion:reduce){
  .asme-corps,
  .asme-tete{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================
   V0.7 — LIVRE D'OR / OBJET RÉEL
   L'illustration validée est le Livre. Aucun panneau HTML n'est dessiné.
   ========================================================== */
body.livre-reel-ouvert{overflow:hidden}

.livre-reel-stage{
  position:fixed; inset:0; z-index:160;
  opacity:0; pointer-events:none;
  display:grid; place-items:center;
  background:rgba(7,5,3,0);
  transition:opacity .42s ease, background 1s ease;
  perspective:1800px;
}
.livre-reel-stage.is-visible{
  opacity:1; pointer-events:auto;
  background:rgba(7,5,3,.88);
}

.livre-reel{
  position:relative;
  width:min(100vw,1536px);
  aspect-ratio:3/2;
  max-height:100vh;
  transform:scale(.28) translate(-58%,34%);
  transform-origin:24% 78%;
  transition:transform 1.05s cubic-bezier(.18,.76,.18,1),filter .8s ease;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.48));
}
.livre-reel-stage.is-visible .livre-reel{
  transform:scale(1) translate(0,0);
}

.livre-reel__vue{
  position:absolute; inset:0;
  overflow:hidden;
}
.livre-reel__vue img{
  width:100%; height:100%; display:block; object-fit:contain;
  user-select:none; pointer-events:none;
}
.livre-reel__vue--visiteur{
  opacity:0; pointer-events:none;
  transition:opacity .22s ease .42s;
}
.livre-reel.is-writing .livre-reel__vue--artisan{opacity:0}
.livre-reel.is-writing .livre-reel__vue--visiteur{opacity:1;pointer-events:auto}

.livre-reel__laisser,
.livre-reel__refermer{
  position:absolute;
  border:0; background:transparent;
  color:rgba(38,28,21,.76);
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-style:italic;
  cursor:pointer;
  padding:3px 5px;
  text-shadow:0 .3px 0 rgba(0,0,0,.18);
}
.livre-reel__laisser{
  left:52%; top:89%;
  transform:translateX(-50%) rotate(-1deg);
  font-size:clamp(13px,1.35vw,20px);
}
.livre-reel__refermer{
  left:51%; top:88%;
  transform:translateX(-50%) rotate(-.8deg);
  font-size:clamp(13px,1.25vw,19px);
}
.livre-reel__laisser::after,
.livre-reel__refermer::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:currentColor;transition:left .22s ease,right .22s ease;
}
.livre-reel__laisser:hover::after,.livre-reel__laisser:focus-visible::after,
.livre-reel__refermer:hover::after,.livre-reel__refermer:focus-visible::after{left:3px;right:3px}

.livre-reel__ecriture{
  position:absolute;
  left:25.2%; top:13.5%;
  width:52.5%; height:68%;
  border:0; outline:0; resize:none;
  padding:1.5% 2%;
  background:transparent;
  color:#241b15;
  caret-color:#241b15;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(16px,2vw,30px);
  line-height:1.72;
  transform:rotate(-.25deg);
  overflow:auto;
}

/* Une feuille réelle traverse le livre pendant le changement de page. */
.livre-reel__tourne{
  position:absolute;
  left:25%; top:6.5%;
  width:58%; height:87%;
  opacity:0; pointer-events:none;
  transform-origin:95% 50%;
  border-radius:3% 2% 2% 4%;
  background:
    repeating-linear-gradient(0deg,rgba(80,55,30,.018) 0 1px,transparent 1px 4px),
    linear-gradient(100deg,#c9ad78,#e3ce9d 45%,#c4a56f);
  box-shadow:inset 15px 0 24px rgba(67,43,24,.18),0 8px 22px rgba(0,0,0,.18);
}
.livre-reel.is-turning .livre-reel__tourne{
  opacity:1;
  animation:livre-reel-page .82s cubic-bezier(.34,.72,.16,1) forwards;
}
@keyframes livre-reel-page{
  0%{transform:rotateY(0deg) skewY(0);filter:brightness(1)}
  48%{transform:rotateY(-86deg) skewY(-1deg);filter:brightness(.76)}
  100%{transform:rotateY(-178deg) skewY(0);filter:brightness(.94)}
}

/* La caméra s'approche du pupitre avant que le Livre prenne tout le regard. */
.hall__scene{
  transition:transform 1s cubic-bezier(.18,.76,.18,1),filter .85s ease,opacity .85s ease;
  transform-origin:18% 78%;
}
body.livre-reel-ouvert .hall__scene{
  transform:scale(1.22) translate(7%,-6%);
  filter:brightness(.58) blur(.7px);
  opacity:.28;
}
body.livre-reel-ouvert .hotspot{pointer-events:none!important}

.livre-reel-stage.is-closing{
  background:rgba(7,5,3,0);
}
.livre-reel-stage.is-closing .livre-reel{
  transform:scale(.28) translate(-58%,34%);
  transition-duration:.95s;
}

@media(max-width:700px){
  .livre-reel{
    width:153vw;
    max-height:none;
  }
  .livre-reel__laisser{left:51%;top:88.5%;font-size:13px}
  .livre-reel__refermer{font-size:13px}
  .livre-reel__ecriture{
    left:25.5%;top:14%;width:52%;height:66%;
    font-size:clamp(15px,4.1vw,20px);
  }
  body.livre-reel-ouvert .hall__scene{
    transform:scale(1.14) translate(3%,-3%);
  }
}
@media(prefers-reduced-motion:reduce){
  .livre-reel-stage,.livre-reel,.hall__scene{transition-duration:.01ms!important}
  .livre-reel.is-turning .livre-reel__tourne{animation-duration:.01ms!important}
}


/* ==========================================================
   V0.7 — LIVRE D'OR / VERSION SEUIL
   La seconde page reste une page du Livre, jamais un formulaire.
   ========================================================== */

.livre-reel__page-ecriture{
  position:absolute;
  left:24.5%;
  top:9.5%;
  width:55%;
  height:80%;
  color:#2a2019;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  transform:rotate(-.22deg);
}

.livre-reel__invitation-ecriture{
  width:88%;
  margin:0 auto 5.5%;
  font-size:clamp(13px,1.42vw,21px);
  line-height:1.55;
  text-align:center;
  color:rgba(42,32,25,.82);
}

.livre-reel__label{
  display:block;
  color:rgba(47,34,25,.76);
  font-size:clamp(11px,1.05vw,16px);
  line-height:1.35;
  font-style:italic;
}
.livre-reel__label span{
  font-size:.82em;
  opacity:.66;
}

.livre-reel__prenom{
  display:block;
  width:58%;
  height:7%;
  margin:.6% 0 3.2%;
  padding:0 .5%;
  border:0;
  border-bottom:1px solid rgba(75,53,34,.20);
  outline:0;
  background:transparent;
  color:#281d16;
  font:inherit;
  font-size:clamp(14px,1.5vw,22px);
  line-height:1.4;
  border-radius:0;
  box-shadow:none;
}

.livre-reel__label--trace{
  margin-bottom:.5%;
}

.livre-reel__ecriture{
  position:static;
  width:100%;
  height:48%;
  padding:.5% .5% 0;
  border:0;
  outline:0;
  resize:none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2.05em,
      rgba(77,55,37,.11) 2.08em 2.12em
    );
  color:#241b15;
  caret-color:#241b15;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(14px,1.7vw,25px);
  line-height:2.12;
  overflow:auto;
  border-radius:0;
  box-shadow:none;
}

.livre-reel__prenom:focus,
.livre-reel__ecriture:focus{
  background-color:rgba(118,83,47,.018);
}

.livre-reel__choix{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(24px,5vw,70px);
  transition:opacity .35s ease;
}

.livre-reel__deposer,
.livre-reel__plus-tard{
  position:relative;
  border:0;
  background:transparent;
  padding:4px 3px;
  color:rgba(52,37,27,.72);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(12px,1.2vw,18px);
  cursor:pointer;
}
.livre-reel__deposer::after,
.livre-reel__plus-tard::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:1px;
  background:currentColor;
  transition:left .22s ease,right .22s ease;
}
.livre-reel__deposer:hover::after,
.livre-reel__deposer:focus-visible::after,
.livre-reel__plus-tard:hover::after,
.livre-reel__plus-tard:focus-visible::after{
  left:2px;
  right:2px;
}

/* Aucun des deux choix n'est hiérarchisé visuellement. */
.livre-reel__deposer,
.livre-reel__plus-tard{
  opacity:.80;
}

.livre-reel__merci{
  position:absolute;
  left:7%;
  right:7%;
  bottom:7%;
  margin:0;
  text-align:center;
  opacity:0;
  visibility:hidden;
  color:rgba(46,33,24,.78);
  font-size:clamp(12px,1.25vw,18px);
  line-height:1.5;
  transition:opacity .5s ease,visibility .5s step-end;
}

.livre-reel.is-deposited .livre-reel__choix{
  opacity:0;
  pointer-events:none;
}
.livre-reel.is-deposited .livre-reel__merci{
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease .2s,visibility 0s;
}

/* Dernière page tournée avant la fermeture du Livre. */
.livre-reel.is-final-turn .livre-reel__tourne{
  opacity:1;
  animation:livre-reel-page-finale .82s cubic-bezier(.34,.72,.16,1) forwards;
}
@keyframes livre-reel-page-finale{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  48%{transform:rotateY(-86deg);filter:brightness(.76)}
  100%{transform:rotateY(-178deg);filter:brightness(.94)}
}

@media(max-width:700px){
  .livre-reel__page-ecriture{
    left:25%;
    top:10.5%;
    width:54%;
    height:78%;
  }
  .livre-reel__invitation-ecriture{
    width:94%;
    margin-bottom:5%;
    font-size:clamp(11px,3.25vw,15px);
    line-height:1.45;
  }
  .livre-reel__label{font-size:clamp(9px,2.6vw,12px)}
  .livre-reel__prenom{
    width:70%;
    font-size:clamp(12px,3.4vw,16px);
    margin-bottom:3%;
  }
  .livre-reel__ecriture{
    height:46%;
    font-size:clamp(12px,3.4vw,16px);
    line-height:2;
  }
  .livre-reel__choix{
    gap:20px;
    bottom:-1%;
  }
  .livre-reel__deposer,
  .livre-reel__plus-tard{
    font-size:clamp(10px,2.7vw,12px);
  }
  .livre-reel__merci{
    bottom:5%;
    font-size:clamp(10px,2.8vw,13px);
  }
}


/* ==========================================================
   V0.6.3 — AFFICHAGE PC
   Desktop uniquement : montrer davantage du Hall sans recadrer l'image.
   Le mobile reste inchangé.
   ========================================================== */
@media (min-width: 901px) and (pointer: fine){

  .hall__panorama{
    width:100vw;
    height:100svh;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    cursor:grab;
  }

  .hall__panorama::-webkit-scrollbar{
    display:none;
  }

  .hall__panorama.is-dragging{
    cursor:grabbing;
  }

  /*
    L'image 3:2 est affichée entière autant que possible.
    On privilégie la hauteur du viewport, avec une légère réduction
    pour laisser respirer les murs et les bords du Hall.
  */
  .hall__scene{
    width:calc(100svh * 1.5);
    height:100svh;
    max-width:none;
    flex:none;
    margin:0 auto;
    overflow:visible;
  }

  .hall__image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
  }

  /*
    Sur les écrans très larges, on garde une petite réserve horizontale :
    le Hall est déjà lisible au premier regard, le déplacement sert seulement
    à observer un peu plus précisément les extrémités.
  */
  @supports (width: min(100px, 100vw)){
    .hall__scene{
      width:min(calc(100svh * 1.5), 96vw);
      height:auto;
      aspect-ratio:3 / 2;
      align-self:center;
    }

    .hall__image{
      width:100%;
      height:100%;
      object-fit:contain;
    }
  }
}

/* Écrans PC plus petits / portables : conserver la pièce entière sans zoom. */
@media (min-width:901px) and (max-width:1366px) and (pointer:fine){
  .hall__scene{
    width:min(94vw, calc(100svh * 1.5));
  }
}


/* ==========================================================
   V0.7 — LIVRE D'OR : RETOUR À L'ESPRIT DU SEUIL
   Après « Laisser une trace », rien ne change sauf la page.
   ========================================================== */

/* Le changement de page ne doit jamais modifier la scène, la lumière ou le cadrage. */
.livre-reel.is-writing,
.livre-reel.is-returning-page{
  filter:none!important;
  transform:inherit;
}

/* Le stage reste exactement celui déjà ouvert : aucune transition de fond supplémentaire. */
.livre-reel-stage.is-page-transition{
  background:inherit!important;
  opacity:1!important;
}

/* Les deux vues occupent exactement le même Livre. */
.livre-reel__vue--artisan,
.livre-reel__vue--visiteur{
  position:absolute;
  inset:0;
  background:transparent!important;
}

/* La page visiteur apparaît uniquement à la fin du geste de page tournée. */
.livre-reel__vue--visiteur{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none!important;
}
.livre-reel.is-writing .livre-reel__vue--visiteur{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* La première page reste le même objet jusqu'à la moitié de la rotation. */
.livre-reel__vue--artisan{
  opacity:1;
  visibility:visible;
}
.livre-reel.is-writing .livre-reel__vue--artisan{
  opacity:0;
  visibility:hidden;
}

/* Une seule feuille physique traverse le Livre, sans panneau intermédiaire. */
.livre-reel__tourne{
  position:absolute;
  left:25%;
  top:6.5%;
  width:58%;
  height:87%;
  opacity:0;
  pointer-events:none;
  transform-origin:95% 50%;
  border-radius:3% 2% 2% 4%;
  background:
    repeating-linear-gradient(0deg,rgba(80,55,30,.018) 0 1px,transparent 1px 4px),
    linear-gradient(100deg,#c9ad78,#e3ce9d 45%,#c4a56f);
  box-shadow:
    inset 15px 0 24px rgba(67,43,24,.16),
    0 5px 14px rgba(0,0,0,.13);
  z-index:8;
}

.livre-reel.is-turning .livre-reel__tourne{
  opacity:1;
  animation:livre-page-vers-visiteur .84s cubic-bezier(.34,.72,.16,1) forwards;
}

.livre-reel.is-returning-page .livre-reel__tourne{
  opacity:1;
  animation:livre-page-vers-artisan .84s cubic-bezier(.34,.72,.16,1) forwards;
}

@keyframes livre-page-vers-visiteur{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  50%{transform:rotateY(-88deg);filter:brightness(.82)}
  100%{transform:rotateY(-178deg);filter:brightness(.96)}
}

@keyframes livre-page-vers-artisan{
  0%{transform:rotateY(-178deg);filter:brightness(.96)}
  50%{transform:rotateY(-88deg);filter:brightness(.82)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}

/* La page d'écriture appartient visuellement au papier du Livre. */
.livre-reel__page-ecriture{
  background:transparent!important;
  box-shadow:none!important;
}

/* Champs sans aucune enveloppe d'interface. */
.livre-reel__prenom,
.livre-reel__ecriture{
  background-color:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Les deux choix restent de simples inscriptions au bas de la page. */
.livre-reel__deposer,
.livre-reel__plus-tard{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Plus aucun message de confirmation superposé. */
.livre-reel__merci{
  display:none!important;
}