/* La Maison des Sorciers
   Palette tirée des murs de la maison. Thème unique, sombre. */

:root {
  --nuit: #16110D;
  --nuit-2: #211913;
  --nuit-3: #2C221A;
  --velin: #E9DFC8;
  --velin-ombre: #CDBC9A;
  --encre: #2A1D15;
  --encre-douce: #5E4A3C;
  --moutarde: #C8911F;
  --moutarde-vive: #E1AA3A;
  --pourpre: #7A2230;
  --canard: #2D5A5C;
  --taupe: #5A4A40;
  --gris-velin: #B9AA90;

  --f-titre: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --f-capitales: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --f-texte: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --f-main: "La Belle Aurore", "Snell Roundhand", "Apple Chancery", cursive;

  --gouttiere: clamp(16px, 4vw, 48px);
  --ronge-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='5' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='16' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='384' height='284' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
  --ronge-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='20' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='9' y='9' width='382' height='282' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
  --ronge-poche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='5' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='22' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='14' width='380' height='340' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
  --ronge-cuir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='5' seed='5' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='5' y='5' width='390' height='290' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --taches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 -1.6 .9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--velin);
  font-family: var(--f-texte);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--moutarde-vive); outline-offset: 3px; }


.papier {
  background-color: #eadcbc;
  background-image: radial-gradient(ellipse 75% 70% at 50% 48%, rgba(0,0,0,0) 55%, rgba(125,80,30,.2) 100%), url("textures/papier.jpg");
  background-size: 100% 100%, 520px auto;
  background-blend-mode: normal, multiply;
  color: var(--encre);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--moutarde);
  color: var(--nuit);
  border: 1px solid var(--moutarde);
  border-radius: 2px;
  padding: 11px 20px;
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s;
}
.btn:hover { background: var(--moutarde-vive); border-color: var(--moutarde-vive); }
.btn:active { transform: translateY(1px); }
.btn-ligne { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-ligne:hover { background: var(--encre); color: var(--velin); border-color: var(--encre); }

/* ---------- L'enveloppe (animée au scroll) ---------- */
.papier-env {
  background-color: #e2cd9c;
  background-image: url("textures/papier.jpg");
  background-size: 480px auto;
  background-blend-mode: multiply;
}
.ouverture { position: relative; height: 470svh; z-index: 2; pointer-events: none; }
.ouverture .scene { pointer-events: auto; }
.scene.traversee { pointer-events: none; }
html:not(.js) .ouverture { display: none; }
.scene {
  position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 2;
  display: grid; place-items: center;
  background:
    radial-gradient(55% 45% at 50% 50%, rgba(200,145,31,.16), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, var(--nuit-2), var(--nuit) 70%);
}
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .45; mix-blend-mode: overlay;
}
.env {
  position: relative;
  width: min(94vw, 74vh * 1.45, 1040px);
  aspect-ratio: 16 / 11;
  container-type: inline-size;
  transform: rotate(-7deg);
  will-change: transform;
  z-index: 1;
}
@media (max-width: 640px) { .env { width: 96vw; } }
.face-dos { position: absolute; inset: 0; }

.dos-fond { position: absolute; inset: 0; z-index: 1; border-radius: 4px; background-color: #A98B57; box-shadow: 0 40px 90px rgba(0,0,0,.65), inset 0 30px 50px rgba(0,0,0,.35); }
.lettre-sortie {
  position: absolute; left: 5%; right: 5%; top: 5%; bottom: 6%;
  z-index: 2; border-radius: 2px;
  display: grid; place-items: center; align-content: center; gap: 1.2cqw; text-align: center;
  will-change: transform;
}
.ls-lieu { font-family: var(--f-capitales); letter-spacing: .14em; font-size: 2.6cqw; color: var(--pourpre); }
.ls-titre { font-family: var(--f-titre); font-size: 7.4cqw; line-height: 1.05; color: var(--encre); text-wrap: balance; }
.ls-orn { width: 20cqw; height: 1.6cqw; background:
  radial-gradient(circle, var(--moutarde) .45cqw, transparent .5cqw) center / 1.6cqw 1.6cqw no-repeat,
  linear-gradient(var(--moutarde), var(--moutarde)) left center / 8cqw 1px no-repeat,
  linear-gradient(var(--moutarde), var(--moutarde)) right center / 8cqw 1px no-repeat; }
.poche {
  position: absolute; inset: 0; border-radius: 4px;
  clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%);
  background-color: #DCC692;
  z-index: 3;
}
.poche::before, .poche::after { content: ""; position: absolute; inset: 0; }
.poche::before { background: linear-gradient(to top right, rgba(90,60,20,.14), transparent 50%); clip-path: polygon(0 0, 50% 53%, 0 100%); }
.poche::after { background: linear-gradient(to top left, rgba(90,60,20,.2), transparent 55%); clip-path: polygon(100% 0, 50% 53%, 100% 100%); }
.rabat {
  position: absolute; left: 0; right: 0; top: 0; height: 57%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  background-color: #E6D2A2;
  z-index: 4;
}
.rabat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(90,60,20,.18)); }
.sceau {
  position: absolute; left: 50%; top: 56%;
  width: 25cqw; height: 25cqw;
  transform: translate(-50%, -50%) rotate(8deg);
  z-index: 5; overflow: visible;
}
.sceau-ombre { filter: blur(6px); }
.demi { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }

.indice-scroll {
  position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(233,223,200,.5); border-radius: 14px; z-index: 2;
}
.indice-scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px;
  background: var(--velin); animation: molette 1.8s ease-in-out infinite;
}
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }


/* ---------- En-tête ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) var(--gouttiere) 12px;
  background: linear-gradient(to bottom, rgba(22,17,13,.85), rgba(22,17,13,0));
  transition: background .4s;
}
.hdr.plein { background: rgba(22,17,13,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(233,223,200,.08); }
.hdr-nom { font-family: var(--f-titre); font-size: clamp(18px, 4.6vw, 22px); text-decoration: none; white-space: nowrap; }
.btn-reserver { padding: 9px 16px; font-size: 13px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: -100svh;
  z-index: 0;
  height: max(560px, min(100svh, 980px));
  overflow: hidden;
  isolation: isolate;
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 42% 40%;
}
@keyframes approche { to { transform: scale(1); } }
.bougie {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --x: 50%; --y: 38%; --r: 1;
  background: radial-gradient(
    calc(380px * var(--r)) calc(380px * var(--r)) at var(--x) var(--y),
    rgba(22,17,13,0) 0%,
    rgba(22,17,13,.18) 30%,
    rgba(22,17,13,.72) 70%,
    rgba(22,17,13,.9) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--nuit) 0%, rgba(22,17,13,.55) 22%, transparent 48%);
}
.hero-texte {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: clamp(36px, 8vh, 90px);
  z-index: 2;
}
.surtitre {
  font-family: var(--f-capitales); letter-spacing: .16em; font-size: clamp(14px, 3.6vw, 17px);
  color: var(--moutarde-vive); margin-bottom: 10px;
}
.hero h1 {
  font-family: var(--f-titre);
  font-size: clamp(54px, 13.5vw, 150px);
  line-height: .86;
  letter-spacing: -.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.hero h1 em { display: block; font-style: italic; color: var(--velin); padding-left: .55em; }

/* ---------- Titres de section ---------- */
.section-tete { text-align: center; margin-bottom: clamp(32px, 6vw, 64px); }
.section-tete h2 {
  font-family: var(--f-titre);
  font-size: clamp(40px, 8vw, 76px);
  line-height: 1;
}
.section-tete h2::after {
  content: ""; display: block; width: 90px; height: 12px; margin: 18px auto 0;
  background:
    radial-gradient(circle, var(--moutarde) 3px, transparent 3.5px) center / 12px 12px no-repeat,
    linear-gradient(var(--moutarde), var(--moutarde)) left center / 36px 1px no-repeat,
    linear-gradient(var(--moutarde), var(--moutarde)) right center / 36px 1px no-repeat;
}

/* ---------- Lettre ---------- */
.lettre-section { padding: clamp(56px, 10vw, 120px) var(--gouttiere); display: grid; place-items: center; }
.lettre {
  width: min(100%, 620px);
  padding: clamp(32px, 7vw, 64px);
  transform: rotate(-.8deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  display: grid; gap: 24px;
  border-radius: 2px;
}
.lettre h2 { font-family: var(--f-titre); font-size: clamp(30px, 6vw, 42px); color: var(--pourpre); }
.a-venir {
  border: 1.5px dashed rgba(42,29,21,.35);
  padding: 44px 20px; text-align: center;
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce);
}
.signature { font-family: var(--f-main); font-size: 44px; color: var(--pourpre); justify-self: end; line-height: 1; transform: rotate(-4deg); }

/* ---------- Grimoire : un seul livre ---------- */
.grimoire { position: relative; height: calc(var(--unites, 8) * 80svh + 100svh); }
.grimoire-colle {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center;
  padding: calc(64px + env(safe-area-inset-top)) var(--gouttiere) 76px;
  overflow: hidden;
}
.grimoire-titre { font-family: var(--f-titre); font-size: clamp(34px, 6vw, 58px); line-height: 1; margin-bottom: clamp(24px, 3.4vh, 38px); }

.livre {
  --h: min(calc(100svh - 190px), 860px);
  position: relative;
  height: var(--h);
  width: min(calc(var(--h) * 1.44), 94vw);
  perspective: 2600px;
}
.livre-cadre { position: relative; display: grid; place-items: center; filter: drop-shadow(0 34px 44px rgba(0,0,0,.6)); }
.livre-cadre::before {
  /* reliure en cuir usé */
  content: ""; position: absolute; inset: -26px -30px; z-index: 0;
  background:
    linear-gradient(90deg, transparent 46%, rgba(0,0,0,.5) 50%, transparent 54%),
    radial-gradient(90% 80% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%),
    radial-gradient(40% 30% at 20% 85%, rgba(200,150,100,.16), transparent 70%),
    radial-gradient(35% 25% at 85% 12%, rgba(200,150,100,.12), transparent 70%),
    url("textures/cuir.jpg") center / 760px auto,
    #9c5433;
  background-blend-mode: normal, normal, screen, screen, overlay, normal;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 30px rgba(215,160,110,.22);
  -webkit-mask: var(--ronge-cuir) 0 0 / 100% 100% no-repeat;
  mask: var(--ronge-cuir) 0 0 / 100% 100% no-repeat;
  border-radius: 16px 11px 18px 13px / 13px 18px 11px 16px;
}
.livre-cadre:has(.livre.simple)::before { inset: -16px -12px; background-image: none, radial-gradient(90% 80% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%), none, none, url("textures/cuir.jpg"); }
.livre {
  z-index: 1;
  /* tranche des pages, visible sous la page ouverte */
  box-shadow: 1px 2px 0 #dccaa5, 2px 3px 0 #b7a079, 3px 5px 0 #d6c39c, 4px 6px 0 #a58e68, 5px 8px 0 #cdb892,
             -1px 2px 0 #dccaa5, -2px 3px 0 #b7a079, -3px 5px 0 #d6c39c, -4px 6px 0 #a58e68, -5px 8px 0 #cdb892;
}
.livre:not(.simple)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 90px; margin-left: -45px; z-index: 60;
  pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(90deg, transparent, rgba(90,55,20,.12) 35%, rgba(50,28,10,.38) 50%, rgba(90,55,20,.12) 65%, transparent);
}
.livre.simple { width: min(94vw, calc(var(--h) * .74)); }

.page-fixe, .feuillet {
  position: absolute; top: 0; bottom: 0; width: 50%;
}
.page-fixe { z-index: 0; }
.page-fixe.gauche { left: 0; }
.page-fixe.droite, .feuillet { left: 50%; }
.livre.simple .page-fixe, .livre.simple .feuillet { left: 0; width: 100%; }

.feuillet { transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.recto, .verso {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.verso { transform: rotateY(180deg); }
.feuillet .ombre-tour { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to right, rgba(42,29,21,.35), rgba(42,29,21,0) 60%); }

.face-page {
  position: absolute; inset: 0;
  padding: clamp(18px, 3.2vh, 40px) clamp(18px, 2.6vw, 42px);
  display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px);
}
.cote-g { border-radius: 6px 0 0 3px / 3px 0 0 8px; box-shadow: inset -40px 0 50px -40px rgba(42,29,21,.55), inset 0 0 26px rgba(110,70,30,.28); }
.cote-d { border-radius: 0 3px 7px 0 / 0 8px 3px 0; box-shadow: inset 40px 0 50px -40px rgba(42,29,21,.55), inset 0 0 26px rgba(110,70,30,.28); }
.livre.simple .cote-d, .livre.simple .cote-g { border-radius: 4px; box-shadow: inset 26px 0 34px -30px rgba(42,29,21,.5); }

.folio { font-family: var(--f-capitales); letter-spacing: .14em; font-size: 14px; color: var(--encre-douce); }
.face-page h3 { font-family: var(--f-titre); font-size: clamp(30px, 4.6vh, 50px); line-height: 1.02; color: var(--pourpre); }
.face-texte { justify-content: center; padding-left: clamp(24px, 4vw, 64px); }
.recit {
  font-family: var(--f-titre); font-style: italic; font-size: clamp(17px, 2.2vh, 21px); line-height: 1.45;
  color: var(--encre-douce); max-width: 34ch;
}
.livre.simple .recit { font-size: 16px; line-height: 1.38; }
.notes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.notes li {
  font-family: var(--f-main); font-size: clamp(22px, 3.4vh, 31px); line-height: 1.5; color: var(--encre);
  padding-left: 30px; position: relative;
}
.notes li::before { content: ""; position: absolute; left: 0; top: .72em; width: 20px; height: 1.5px; background: var(--encre-douce); transform: rotate(-6deg); }

.face-photo { justify-content: center; padding-inline: clamp(14px, 1.8vw, 28px); }
.livre:not(.simple) .face-photo .cadre img { aspect-ratio: 4 / 5; }
.tirage { filter: drop-shadow(0 9px 12px rgba(42,29,21,.38)); transform: rotate(var(--rot, -1deg)); flex: 0 1 auto; min-height: 0; }
.cadre {
  margin: 0; position: relative;
  padding: 0; /* la photo prend tout le cadre, les bords rongés la découpent directement */
  -webkit-mask: var(--ronge-1) 0 0 / 100% 100% no-repeat;
  mask: var(--ronge-1) 0 0 / 100% 100% no-repeat;
}
.cadre.ronge-b { -webkit-mask-image: var(--ronge-2); mask-image: var(--ronge-2); }

.cadre img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: opacity .3s; }
.vignettes { display: flex; flex-wrap: wrap; gap: 8px; }
.vignette {
  width: clamp(48px, 7vh, 72px); aspect-ratio: 3 / 2; padding: 0; border: 0; cursor: pointer; background: none;
  box-shadow: 0 0 0 1px rgba(42,29,21,.3); opacity: .55; transition: opacity .25s, box-shadow .25s;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette:hover { opacity: .85; }
.vignette.actif { opacity: 1; box-shadow: 0 0 0 2px var(--pourpre); }
.livre.simple .face-page { justify-content: flex-start; }
.livre.simple .face-page h3 { font-size: clamp(26px, 7.4vw, 38px); }
.livre.simple .notes { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.livre.simple .notes li { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.35; padding-left: 18px; }
.livre.simple .notes li::before { width: 11px; }
.livre.simple .cadre img { aspect-ratio: 16 / 10; }

/* Page de fin : la pièce secrète glissée dans une pochette */
.face-cachette { justify-content: center; align-items: center; }
.face-cachette h3 { align-self: flex-start; }
.cachette { position: relative; width: min(86%, 400px); margin-top: 4px; }
.livre.simple .cachette { width: min(80%, 290px); }
.cachette .cadre img { aspect-ratio: 4 / 5; object-position: 12% 50%; }
.etiquette {
  position: absolute; left: 30%; right: -8%; top: 44%;
  padding: 16px 18px 18px;
  background: #efe0bd url("textures/papier.jpg") 0 0 / 300px auto; background-blend-mode: multiply;
  -webkit-mask: var(--ronge-1) 0 0 / 100% 100% no-repeat; mask: var(--ronge-1) 0 0 / 100% 100% no-repeat;
  transform: rotate(-7deg);
  filter: drop-shadow(0 4px 5px rgba(42,29,21,.35));
}
.etiquette p { font-family: var(--f-main); font-size: clamp(21px, 3vh, 28px); line-height: 1.1; color: #2f1c0e; text-align: center; }
.scotch-e {
  position: absolute; width: 58px; height: 20px; background: rgba(240,232,205,.62);
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.scotch-e1 { left: -18px; top: 6px; transform: rotate(-38deg); }
.scotch-e2 { right: -14px; bottom: 4px; transform: rotate(-40deg); }
.cachette-sceau { position: absolute; left: 22%; top: 50%; width: 22%; height: auto; transform: translate(-50%, -50%) rotate(-14deg); overflow: visible; filter: drop-shadow(2px 4px 4px rgba(40,10,5,.45)); }
.credit-page { font-size: 13px; color: var(--encre-douce); text-decoration: none; }
.credit-page:hover { text-decoration: underline; }
.mot-final { font-family: var(--f-main); font-size: clamp(28px, 4.4vh, 40px); color: var(--encre); text-align: center; line-height: 1.2; }
.face-fin { justify-content: center; align-items: center; text-align: center; gap: 22px; }

/* Artefacts cachés */
.artefact {
  position: absolute; width: 38px; height: 38px; padding: 3px;
  border: 0; background: none; cursor: pointer; z-index: 3;
  color: rgba(94,74,60,.6); transition: color .3s, transform .3s;
}
/* toujours cliquable : au-dessus de la photo, des vignettes et du texte de sa page, avec une zone de clic plus large */
.artefact { z-index: 50; translate: 0 0 2px; touch-action: manipulation; }
.artefact::before { content: ""; position: absolute; inset: -10px; }
.artefact svg { width: 100%; height: 100%; fill: currentColor; }
.artefact .creux { fill: var(--velin); }
.artefact .plume { fill: none; stroke: var(--velin); stroke-width: 1.3; }
.artefact .liquide { fill: rgba(45,90,92,.45); }
.artefact .bulle { fill: var(--velin); }
.artefact .manche { fill: rgba(42,29,21,.5); }
.artefact:hover { color: var(--pourpre); transform: rotate(-10deg) scale(1.18); }
.artefact.trouve { pointer-events: none; animation: envol .9s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes envol {
  30% { transform: scale(1.8); color: var(--moutarde); filter: drop-shadow(0 0 12px var(--moutarde-vive)); }
  100% { transform: scale(.4) translateY(-80px); opacity: 0; }
}


/* ---------- Inventaire ---------- */
.inventaire {
  padding: clamp(60px, 10vw, 120px) var(--gouttiere);
  background: linear-gradient(var(--nuit), var(--nuit-2) 30%, var(--nuit-2) 70%, var(--nuit));
}
.chiffres {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px;
}
.chiffres div { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 4px; }
.chiffres dd { margin: 0; font-family: var(--f-titre); font-size: clamp(60px, 14vw, 96px); line-height: .9; color: var(--moutarde-vive); font-variant-numeric: lining-nums; }
.chiffres dt { font-family: var(--f-capitales); letter-spacing: .1em; font-size: 15px; color: var(--gris-velin); max-width: 16ch; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(6, 1fr); } }
.equipements {
  list-style: none; padding: 0; margin: clamp(48px, 8vw, 80px) auto 0; max-width: 820px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 40px;
}
.equipements li {
  font-size: 19px; padding: 10px 0 10px 30px; position: relative;
  border-bottom: 1px solid rgba(233,223,200,.1);
}
.equipements li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px;
  background: var(--moutarde); transform: translateY(-50%) rotate(45deg);
}

/* ---------- Registre ---------- */
.registre { padding: clamp(60px, 10vw, 120px) var(--gouttiere); }
.note-globale {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  margin: calc(clamp(32px, 6vw, 64px) * -.4) 0 clamp(40px, 7vw, 72px);
}
.note-chiffre { font-family: var(--f-titre); font-size: clamp(64px, 12vw, 100px); line-height: 1; color: var(--moutarde-vive); }
.note-sur { font-family: var(--f-titre); font-size: 30px; color: var(--gris-velin); }
.note-source { flex-basis: 100%; text-align: center; font-family: var(--f-capitales); letter-spacing: .12em; font-size: 15px; color: var(--gris-velin); }
.courrier {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 48px); align-items: start;
  padding-inline: 6px;
}
.mot {
  position: relative; color: #2b2a33;
  padding: 34px 28px 24px;
  transform: rotate(var(--r));
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 18px 34px rgba(0,0,0,.45);
  transition: transform .4s cubic-bezier(.3,.1,.2,1);
}
.mot:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.mot:nth-child(2) { margin-top: 40px; }
.mot:nth-child(4) { margin-top: -10px; }
.mot-texte { font-size: 22px; line-height: 1.4; }
.mot-signe { margin-top: 14px; text-align: right; font-size: 30px; line-height: 1; }
.mot-source { text-align: right; font-family: var(--f-capitales); letter-spacing: .1em; font-size: 13px; opacity: .6; margin-top: 4px; }

/* papier ligné d'écolier */
.mot-ligne {
  background:
    linear-gradient(90deg, transparent 38px, rgba(200,60,60,.45) 38px 39.5px, transparent 39.5px),
    repeating-linear-gradient(transparent 0 30px, rgba(70,110,170,.28) 30px 31px),
    #f7f3e8;
  background-position: 0 0, 0 14px, 0 0;
  padding-left: 54px; color: #1f2a55;
  font-family: "Kalam", "Comic Sans MS", cursive;
}
.mot-ligne .mot-texte { font-size: 19px; line-height: 31px; }
/* papier kraft */
.mot-kraft {
  background: #c29a68 url("textures/kraft.jpg") 0 0 / 420px auto; background-blend-mode: multiply;
  color: #2a1a10; font-family: "Caveat", cursive;
  clip-path: polygon(0 2%, 6% 0, 18% 1.5%, 33% 0, 51% 1%, 70% 0, 88% 1.2%, 100% 0, 99% 30%, 100% 62%, 99% 100%, 72% 98.6%, 44% 100%, 20% 98.8%, 0 100%, 1% 64%);
}
.mot-kraft .mot-texte { font-size: 25px; line-height: 1.25; }
.mot-kraft .mot-signe { font-size: 36px; }
/* papier quadrillé déchiré */
.mot-carreaux {
  background:
    linear-gradient(rgba(60,120,140,.18) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(60,120,140,.18) 1px, transparent 1px) 0 0 / 22px 22px,
    #fbfaf4;
  color: #3a2a55; font-family: "Shadows Into Light Two", cursive;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 94% 98%, 86% 100%, 77% 97.5%, 66% 99.5%, 55% 97%, 43% 100%, 33% 97.8%, 21% 99.6%, 11% 97.4%, 0 99.5%);
}
.mot-carreaux .mot-texte { font-size: 22px; }
/* carte postale ancienne */
.mot-carte {
  background: linear-gradient(90deg, transparent 58%, rgba(60,40,20,.35) 58% calc(58% + 1px), transparent calc(58% + 1px)), url("textures/papier.jpg") 0 0 / 460px auto, #ecdcbc; background-blend-mode: normal, multiply;
  color: #3b2616; font-family: "Homemade Apple", cursive;
  padding-right: 34px;
}
.mot-carte .mot-texte { font-size: 15px; line-height: 1.9; max-width: 56%; }
.mot-carte .mot-signe { font-size: 22px; text-align: left; }
.mot-carte .mot-source { text-align: left; }

.scotch {
  position: absolute; top: -12px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(235,225,190,.55); box-shadow: 0 1px 2px rgba(0,0,0,.15);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 0, 97% 50%, 100% 100%, 90% 90%, 84% 100%, 0 100%, 3% 50%);
}
.scotch-d { left: auto; right: -16px; transform: rotate(38deg); }
.punaise {
  position: absolute; top: 10px; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #e7a2a2, #9c2b35 60%, #5e1620);
  box-shadow: 2px 4px 5px rgba(0,0,0,.4);
}
.timbre {
  position: absolute; top: 18px; right: 20px; width: 62px; height: 74px;
  background:
    radial-gradient(circle, transparent 3px, #efe2c6 3.5px) -5px -5px / 10px 10px,
    linear-gradient(#b98a3a, #b98a3a) 6px 6px / 50px 62px no-repeat,
    #efe2c6;
  box-shadow: inset 0 0 0 6px #efe2c6;
  outline: 1px dashed rgba(60,40,20,.25); transform: rotate(4deg);
}
.timbre::after {
  content: "MS"; position: absolute; inset: 6px; display: grid; place-items: center;
  font-family: var(--f-titre); font-size: 22px; color: #efe2c6;
  background: radial-gradient(circle at 50% 40%, #c79b4a, #8d6425);
}

/* ---------- Règles ---------- */
.regles-section { padding: clamp(40px, 8vw, 100px) var(--gouttiere); display: grid; place-items: center; }
.regles {
  width: min(100%, 720px);
  padding: clamp(32px, 6vw, 60px);
  transform: rotate(.6deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  border-radius: 2px;
}
.regles { position: relative; }
.regles-surtitre { text-align: center; font-family: var(--f-capitales); letter-spacing: .18em; font-size: 14px; color: var(--encre-douce); }
.regles h2 { font-family: var(--f-titre); font-size: clamp(36px, 6.5vw, 54px); color: var(--pourpre); text-align: center; margin: 6px 0 30px; }
.articles { list-style: none; margin: 0; padding: 0; counter-reset: art; display: grid; gap: 0; }
.articles li {
  counter-increment: art; position: relative;
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 14px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid rgba(42,29,21,.16);
}
.articles li::before {
  content: "Art. " counter(art, upper-roman);
  grid-row: 1 / span 2;
  font-family: var(--f-capitales); letter-spacing: .06em; font-size: 15px; color: var(--pourpre);
}
.articles h3 { font-family: var(--f-titre); font-size: clamp(21px, 3.6vw, 26px); line-height: 1.15; color: var(--encre); }
.articles p { font-size: 17px; color: var(--encre-douce); }
.regles-signe { margin-top: 22px; text-align: right; font-family: var(--f-main); font-size: 38px; color: var(--pourpre); transform: rotate(-4deg); }
.regles::after {
  content: ""; position: absolute; left: clamp(20px, 6vw, 60px); bottom: 26px; width: 74px; height: 74px;
  background: radial-gradient(circle at 36% 30%, #b8404f, #8a2636 40%, #5e1622 80%);
  border-radius: 47% 53% 50% 50% / 52% 48% 54% 46%;
  box-shadow: 0 5px 10px rgba(0,0,0,.35), inset 0 -4px 8px rgba(0,0,0,.35), inset 0 0 0 11px rgba(0,0,0,.08), inset 0 0 0 13px rgba(255,160,160,.12);
  transform: rotate(-10deg);
}

/* ---------- Accès ---------- */
.acces { padding: clamp(60px, 10vw, 110px) var(--gouttiere) 0; }
.acces-carte { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; }
.carte-cadre {
  width: 100%; padding: 10px 10px 14px; transform: rotate(-.8deg);
  background: #efe0bd url("textures/papier.jpg") 0 0 / 400px auto; background-blend-mode: multiply;
  -webkit-mask: var(--ronge-2) 0 0 / 100% 100% no-repeat; mask: var(--ronge-2) 0 0 / 100% 100% no-repeat;
}
.carte-cadre { position: relative; }
.carte-sceau { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; overflow: visible; filter: drop-shadow(2px 5px 4px rgba(40,10,5,.5)); }
.carte-cadre iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; border: 0; }

/* ---------- Questions ---------- */
.questions { padding: clamp(60px, 10vw, 110px) var(--gouttiere); }
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid rgba(233,223,200,.14); }
.faq details { border-bottom: 1px solid rgba(233,223,200,.14); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--f-titre); font-size: clamp(21px, 4.6vw, 25px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-texte); font-size: 26px; color: var(--moutarde); transition: transform .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--gris-velin); max-width: 60ch; }

/* ---------- Final ---------- */
.final {
  padding: clamp(80px, 14vw, 160px) var(--gouttiere);
  text-align: center; display: grid; justify-items: center; gap: 30px;
  background: radial-gradient(60% 70% at 50% 60%, rgba(200,145,31,.16), transparent 70%);
}
.final h2 { font-family: var(--f-titre); font-size: clamp(54px, 12vw, 120px); line-height: .95; }
.btn-grand { padding: 18px 34px; font-size: 16px; }

.pied {
  padding: 36px var(--gouttiere) calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(233,223,200,.1);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; align-items: baseline;
  font-size: 15px; color: var(--gris-velin);
}
.pied-nom { font-family: var(--f-titre); font-size: 19px; color: var(--velin); }
.pied a { color: var(--velin); }

/* ---------- Quête ---------- */
.quete {
  position: fixed; left: var(--gouttiere); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s, transform .5s;
}
.quete.visible { opacity: 1; transform: none; pointer-events: auto; }
.quete-bouton {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 14px 6px 8px;
  background: rgba(22,17,13,.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200,145,31,.4); border-radius: 30px;
}
.slot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.slot svg { width: 23px; height: 23px; fill: none; stroke: rgba(233,223,200,.45); stroke-width: 1.3; transition: fill .4s, stroke .4s; }
.slot svg .creux, .slot svg .plume, .slot svg .liquide, .slot svg .bulle, .slot svg .manche { fill: none; stroke: none; }
.slot.plein svg { fill: var(--moutarde-vive); stroke: var(--moutarde-vive); }
.slot.plein svg .creux { fill: var(--nuit); }
.slot.plein { animation: pop .6s ease; }
@keyframes pop { 40% { transform: scale(1.5); } }
.quete-compte { font-family: var(--f-capitales); letter-spacing: .08em; font-size: 15px; color: var(--velin); font-variant-numeric: tabular-nums; margin-left: 4px; }
.quete-info {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  width: max-content; max-width: min(80vw, 320px);
  background: var(--velin); color: var(--encre); padding: 11px 14px; border-radius: 3px;
  font-size: 16px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.quete-info::after { content: ""; position: absolute; left: 26px; top: 100%; border: 7px solid transparent; border-top-color: var(--velin); }
.quete.info .quete-info { opacity: 1; transform: none; }
@media (hover: hover) { .quete:hover .quete-info { opacity: 1; transform: none; } } /* au doigt, le survol resterait collé */

.recompense {
  border: 0; padding: clamp(28px, 6vw, 48px); max-width: min(92vw, 440px); width: 100%;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.7); border-radius: 3px;
}
.recompense::backdrop { background: rgba(10,7,5,.75); backdrop-filter: blur(3px); }
.recompense[open] { display: grid; gap: 14px; animation: parchemin .6s cubic-bezier(.3,.1,.2,1); }
@keyframes parchemin { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.recompense h2 { font-family: var(--f-titre); font-size: clamp(32px, 7vw, 42px); color: var(--pourpre); }
.recompense-code { font-family: var(--f-capitales); font-size: clamp(28px, 7vw, 36px); letter-spacing: .12em; border: 1.5px dashed rgba(42,29,21,.45); padding: 12px 8px; margin-top: 6px; }
.recompense-valeur { font-size: 18px; color: var(--encre-douce); }
.recompense-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.fermer { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--encre-douce); }


/* ---------- Son ---------- */
.son {
  position: fixed; right: var(--gouttiere); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(22,17,13,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(233,223,200,.25);
  transition: border-color .3s;
}
.son:hover { border-color: var(--moutarde); }
.son svg { width: 24px; height: 24px; fill: none; stroke: var(--velin); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.son .hp { fill: var(--velin); }
.son .barre { opacity: 0; stroke: var(--moutarde-vive); stroke-width: 2.2; }
.son[aria-pressed="true"] .ondes { opacity: 0; }
.son[aria-pressed="true"] .barre { opacity: 1; }

/* ---------- Curseur baguette ---------- */
.poussiere, .baguette { display: none; }
html.baguette-active, html.baguette-active * { cursor: none !important; }
html.baguette-active .poussiere {
  display: block; position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 2147483646; /* au-dessus du calendrier Lodgify, ajouté en fin de page */
}
html.baguette-active .baguette {
  display: block; position: fixed; left: 0; top: 0; width: 92px; height: 92px;
  pointer-events: none; z-index: 2147483647;
  filter: drop-shadow(3px 6px 5px rgba(0,0,0,.45));
  will-change: transform;
}

/* ============================================================
   Direction « Heaven's Vault » : fond noir profond, lumière chaude,
   interface très discrète, typo gravée + texte fin, glyphes lumineux.
   ============================================================ */
:root {
  --nuit: #050403;
  --nuit-2: #0d0a07;
  --or: #e7b75a;
  --or-pale: #f6dfa4;
  --f-grave: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-fin: "Lato", "Helvetica Neue", Arial, sans-serif;
}
body { background: #000; font-family: var(--f-fin); font-weight: 300; }

/* En-tête : une fine barre noire, rien de plus */
.hdr, .hdr.plein {
  background: rgba(0,0,0,.92); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(231,183,90,.12);
  padding-top: max(9px, env(safe-area-inset-top)); padding-bottom: 9px;
}
.hdr-nom { font-family: var(--f-grave); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }

/* Boutons : contour doré fin, pas d'aplat */
.btn {
  background: transparent; color: var(--or-pale);
  border: 1px solid rgba(231,183,90,.7); border-radius: 999px;
  font-family: var(--f-fin); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  padding: 9px 20px;
}
.btn:hover { background: rgba(231,183,90,.14); border-color: var(--or); color: #fff; }
.btn-grand { padding: 14px 34px; font-size: 14px; }
.papier .btn, .recompense .btn { color: var(--pourpre); border-color: rgba(122,34,48,.6); }
.papier .btn:hover, .recompense .btn:hover { background: rgba(122,34,48,.1); color: var(--pourpre); }
.btn-ligne { color: var(--encre); border-color: rgba(42,29,21,.5); }

/* Hero : l'image se fond dans le noir, logo gravé centré en haut */
.hero { height: max(620px, min(100svh, 1000px)); }
.bougie { background: radial-gradient(calc(420px * var(--r)) calc(420px * var(--r)) at var(--x) var(--y), rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.82) 100%); }
.hero::after { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.7) 18%, transparent 45%), linear-gradient(to bottom, rgba(0,0,0,.55), transparent 22%); }
.hero-texte { top: clamp(84px, 13vh, 150px); bottom: auto; text-align: center; display: grid; justify-items: center; gap: 18px; }
.logo { display: grid; justify-items: center; gap: 4px; color: #fbf1d8; text-shadow: 0 2px 30px rgba(0,0,0,.7); }
.logo-l1, .logo-l2 { font-family: var(--f-grave); font-weight: 400; line-height: .95; letter-spacing: .04em; text-transform: uppercase; }
.logo-l1 { font-size: clamp(40px, 8.4vw, 104px); }
.logo-l2 { font-size: clamp(34px, 7vw, 86px); }
.logo-filet { display: flex; align-items: center; gap: 14px; width: min(78vw, 560px); }
.logo-filet i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(251,241,216,.8)); }
.logo-filet i:last-child { background: linear-gradient(270deg, transparent, rgba(251,241,216,.8)); }
.logo-filet b { font-family: "Noto Sans Symbols", serif; font-weight: 400; font-size: clamp(14px, 1.8vw, 20px); letter-spacing: .5em; color: var(--or-pale); text-shadow: 0 0 8px rgba(255,200,110,.9), 0 0 22px rgba(231,160,60,.6); }
.hero-lieu { font-family: var(--f-fin); font-weight: 700; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .32em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.8); }

/* Glyphes lumineux entre les sections */
.glyphes {
  text-align: center; padding-block: clamp(40px, 7vw, 90px);
  font-family: "Noto Sans Symbols", serif; font-size: clamp(22px, 3vw, 34px); letter-spacing: .7em;
  color: #fff3d2;
  text-shadow: 0 0 6px rgba(255,220,150,.95), 0 0 18px rgba(240,170,70,.75), 0 0 42px rgba(220,140,40,.45);
  animation: lueur 5s ease-in-out infinite;
}
@keyframes lueur { 50% { opacity: .72; text-shadow: 0 0 5px rgba(255,220,150,.8), 0 0 14px rgba(240,170,70,.55), 0 0 30px rgba(220,140,40,.3); } }

/* Titres de section : gravés, sans ornement dessiné */
.section-tete h2, .grimoire-titre { font-family: var(--f-grave); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(28px, 4.6vw, 48px); color: #fbf1d8; }
.section-tete h2::after { display: none; }

/* Inventaire : rangées image / texte */
.inventaire { background: #000; padding-block: clamp(20px, 5vw, 60px); }
.rangee { max-width: 1100px; margin: 0 auto clamp(48px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.rangee img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.rangee-texte { display: grid; gap: 8px; max-width: 42ch; }
.rangee-texte h3 { font-family: var(--f-fin); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-top: 14px; }
.rangee-texte h3:first-child { margin-top: 0; }
.rangee-texte p { font-size: 17px; line-height: 1.6; color: #cfc6b4; }
@media (min-width: 900px) {
  .rangee { grid-template-columns: 1.6fr 1fr; gap: 48px; }
  .rangee.inverse { grid-template-columns: 1fr 1.6fr; }
  .rangee.inverse img { order: 2; }
  .rangee.inverse .rangee-texte { justify-self: end; text-align: right; }
}

/* Note façon distinction */
.laurier { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -10px 0 clamp(40px, 7vw, 72px); color: #fbf1d8; }
.laurier-branche { width: 46px; height: 108px; }
.laurier-branche.droite { transform: scaleX(-1); }
.laurier .note-globale { margin: 0; display: grid; justify-items: center; gap: 0; }
.note-chiffre { font-family: var(--f-grave); color: #fbf1d8; font-size: clamp(46px, 7vw, 68px); }
.note-sur { font-family: var(--f-fin); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fbf1d8; }
.note-source { font-family: var(--f-fin); font-style: italic; font-weight: 300; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--or); flex-basis: auto; }

/* Questions, accès, pied : typographie fine */
.faq summary { font-family: var(--f-fin); font-weight: 300; font-size: clamp(19px, 3.6vw, 23px); }
.faq summary::after { color: var(--or); font-weight: 300; }
.faq details p { font-size: 17px; color: #bdb4a2; }
.final h2 { font-family: var(--f-grave); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(38px, 7vw, 76px); }
.final { background: radial-gradient(50% 60% at 50% 60%, rgba(231,160,60,.12), transparent 70%); }
.pied { border-top-color: rgba(231,183,90,.12); font-size: 14px; }
.pied-nom { font-family: var(--f-grave); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.pied a { color: var(--or); }

/* Quête et son : très discrets */
.quete-bouton { background: rgba(0,0,0,.8); border-color: rgba(231,183,90,.35); }
.son { background: rgba(0,0,0,.8); border-color: rgba(231,183,90,.35); }
.quete-info { font-family: var(--f-fin); font-weight: 400; }

/* Enveloppe : fond noir pur avec halo chaud */
.scene { background: radial-gradient(55% 50% at 50% 50%, rgba(231,160,60,.14), transparent 70%), #000; }
.scene::after { opacity: .25; }

/* ============================================================
   Direction « carte ancienne » : parchemin taché, encre sépia,
   bannières de ruban, cartouche bordeaux, rivières de texte.
   ============================================================ */
:root {
  --parchemin: #e6d6b3;
  --encre-carte: #3a2618;
  --encre-claire: #6d5238;
  --bordeaux: #6b1c22;
  --f-calli: "IM Fell English", Georgia, serif;
  --f-corps: "Alegreya", Georgia, serif;
}
body {
  background: #d9c59c url("textures/parchemin.jpg") 0 0 / 2400px auto repeat;
  color: var(--encre-carte);
  font-family: var(--f-corps); font-weight: 400;
}
main > section:not(.ouverture):not(.grimoire) { position: relative; }
/* plis de la carte */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 45;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 14px), rgba(90,60,30,.07) calc(33.3% - 2px), rgba(255,250,235,.22) 33.3%, rgba(90,60,30,.05) calc(33.3% + 3px), transparent calc(33.3% + 16px)),
    linear-gradient(90deg, transparent calc(66.6% - 14px), rgba(90,60,30,.07) calc(66.6% - 2px), rgba(255,250,235,.22) 66.6%, rgba(90,60,30,.05) calc(66.6% + 3px), transparent calc(66.6% + 16px));
  mix-blend-mode: multiply;
}
.titre-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bannières */
.banniere { width: min(92vw, 620px); margin: 0 auto; }
.banniere-svg { display: block; width: 100%; height: auto; overflow: visible; filter: url(#tremble); }
.encre-trait path { stroke: var(--encre-carte); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ban-corps { fill: #efe3c6; }
.ban-queue { fill: #dcc9a2; }
.ban-pli { fill: #b99f74; }
.ban-volute { fill: none; }
.ban-texte { font-family: var(--f-capitales); font-size: 30px; letter-spacing: .12em; fill: var(--encre-carte); }
.section-tete { margin-bottom: clamp(24px, 4vw, 48px); }
.grimoire-colle .banniere { width: min(60vw, 480px); margin-bottom: clamp(8px, 1.6vh, 18px); }
.final .banniere { width: min(80vw, 520px); }

/* en-tête */
.hdr, .hdr.plein {
  background: rgba(230,214,179,.9) url("textures/parchemin.jpg") 0 0 / 1600px auto;
  box-shadow: 0 1px 0 rgba(58,38,24,.55), 0 4px 0 -2px rgba(58,38,24,.25);
}
.hdr-nom { font-family: var(--f-capitales); color: var(--encre-carte); letter-spacing: .12em; }

/* boutons à l'encre */
.btn, .papier .btn, .recompense .btn {
  background: transparent; color: var(--encre-carte);
  border: 1.5px solid var(--encre-carte); border-radius: 2px;
  font-family: var(--f-capitales); font-weight: 400; font-size: 15px; letter-spacing: .12em; text-transform: none;
  box-shadow: 2px 2px 0 rgba(58,38,24,.25);
}
.btn:hover, .papier .btn:hover, .recompense .btn:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: #f3e6c8; }

/* hero façon page de titre de carte */
.hero.hero-carte { height: auto; min-height: 100svh; overflow: visible; isolation: auto; display: grid; justify-items: center; align-content: start; gap: 6px; padding: calc(70px + env(safe-area-inset-top)) var(--gouttiere) 40px; }
.hero.hero-carte::after { display: none; }
.hero-carte .hero-texte { position: relative; inset: auto; display: grid; justify-items: center; gap: 2px; text-align: center; }
.presente { font-family: var(--f-capitales); font-size: clamp(16px, 2.2vw, 22px); letter-spacing: .08em; color: var(--encre-carte); line-height: 1.4; }
.calli { font-family: var(--f-calli); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1.25em; }
.hero-scene { position: relative; width: min(94vw, 1060px); margin-top: 14px; }
.hero-photo {
  position: relative; overflow: hidden;
  padding: 10px 10px 14px; background: #efe0bd url("textures/papier.jpg") 0 0 / 380px auto; background-blend-mode: multiply;
  -webkit-mask: var(--ronge-2) 0 0 / 100% 100% no-repeat; mask: var(--ronge-2) 0 0 / 100% 100% no-repeat;
}
.hero-photo img { position: static; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 42% 45%; transform: none; animation: none; }
.hero-carte .bougie { inset: 10px 10px 14px; background: radial-gradient(calc(520px * var(--r)) calc(520px * var(--r)) at var(--x) var(--y), rgba(20,10,5,0) 0%, rgba(20,10,5,.06) 40%, rgba(20,10,5,.32) 100%); }
.cartouche {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(62%, 560px); aspect-ratio: 1.75 / 1;
  display: grid; place-items: center; text-align: center;
  filter: drop-shadow(0 10px 18px rgba(30,10,5,.45));
}
.cartouche::before, .cartouche::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cartouche::before {
  background:
    radial-gradient(60% 60% at 45% 40%, rgba(150,40,45,.5), transparent 70%),
    url("textures/papier.jpg") 0 0 / 300px auto,
    var(--bordeaux);
  background-blend-mode: normal, multiply, normal;
  -webkit-mask: var(--ronge-cuir) 0 0 / 100% 100% no-repeat; mask: var(--ronge-cuir) 0 0 / 100% 100% no-repeat;
}
.cartouche::after { inset: 7%; border: 0; background: transparent; box-shadow: none; outline: none;
  background-image: linear-gradient(#0000, #0000); }
.cartouche h1 {
  position: relative; z-index: 1; display: grid; justify-items: center; line-height: .95;
  font-family: var(--f-capitales); font-weight: 400; color: #f1e2c2; letter-spacing: .06em;
  font-size: clamp(22px, 4.6vw, 54px); text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.cartouche h1 .calli { text-transform: none; font-size: .9em; }
.cartouche h1 .petit { font-size: .55em; letter-spacing: .2em; margin: .1em 0; }

/* rivières de texte */
.riviere { height: clamp(130px, 15vw, 190px); overflow: hidden; opacity: .8; }
.riviere svg { width: 100%; height: 100%; display: block; }
.riv-texte { font-family: var(--f-capitales); font-size: 13px; letter-spacing: .12em; fill: var(--encre-carte); }
.riv-2 { font-size: 11px; opacity: .7; }

/* sections sur parchemin */
.section-tete h2::after { display: none; }
.inventaire { background: transparent; }
.rangee img { border-radius: 0; padding: 9px 9px 13px; background: #efe0bd url("textures/papier.jpg") 0 0 / 380px auto; background-blend-mode: multiply; -webkit-mask: var(--ronge-1) 0 0 / 100% 100% no-repeat; mask: var(--ronge-1) 0 0 / 100% 100% no-repeat; box-shadow: none; }
.rangee-texte h3 { font-family: var(--f-capitales); font-weight: 400; font-size: 20px; letter-spacing: .08em; text-transform: none; color: var(--bordeaux); }
.rangee-texte p { font-family: var(--f-corps); font-size: 19px; color: var(--encre-carte); }
.laurier, .laurier .note-chiffre, .laurier .note-sur { color: var(--encre-carte); }
.note-source { color: var(--bordeaux); font-family: var(--f-calli); }
.mot { box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 12px 22px rgba(58,38,24,.28); }
.lettre, .regles { box-shadow: 0 1px 0 rgba(58,38,24,.3), 0 16px 30px rgba(58,38,24,.28); }
.faq, .faq details { border-color: rgba(58,38,24,.3); }
.faq summary { font-family: var(--f-corps); font-weight: 400; color: var(--encre-carte); }
.faq summary::after { color: var(--bordeaux); }
.faq details p { color: var(--encre-claire); font-family: var(--f-corps); }
.final { background: transparent; }
.final h2 { color: var(--encre-carte); }
.pied { color: var(--encre-claire); border-top: 1px solid rgba(58,38,24,.35); }
.pied-nom { color: var(--encre-carte); }
.pied { flex-direction: column; align-items: center; gap: 6px; text-align: center; } /* une ligne par élément */
.pied p { margin: 0; }
.pied a { color: var(--bordeaux); }
.quete-bouton, .son { background: rgba(230,214,179,.92); border-color: rgba(58,38,24,.55); }
.slot svg { stroke: rgba(58,38,24,.5); }
.slot.plein svg { fill: var(--bordeaux); stroke: var(--bordeaux); }
.slot.plein svg .creux { fill: #e6d6b3; }
.quete-compte { color: var(--encre-carte); }
.son svg { stroke: var(--encre-carte); }
.son .hp { fill: var(--encre-carte); }
.son .barre { stroke: var(--bordeaux); }
.quete-info { background: #f3e7cc; border: 1px solid rgba(58,38,24,.4); }
.quete-info { font-family: var(--f-titre); font-size: 15px; line-height: 1.35; text-transform: none; font-variant: normal; letter-spacing: 0; max-width: min(78vw, 280px); }
.acces-carte .carte-cadre { transform: rotate(-.6deg); }
.livre-cadre { filter: drop-shadow(0 26px 34px rgba(58,38,24,.45)); }


/* ============================================================
   Ajustements V6 : bouton flottant, hero plein écran, livre plus réel,
   lettre, registre façon livre d'or.
   ============================================================ */
/* bouton Réserver flottant, sans barre */
.hdr, .hdr.plein {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: var(--gouttiere); left: auto;
  background: none; box-shadow: none; padding: 0; display: block;
}
.hdr .btn-reserver {
  background: #efe2c4 url("textures/parchemin.jpg") 0 0 / 900px auto;
  font-size: 16px; padding: 11px 22px;
  box-shadow: 0 6px 16px rgba(30,15,5,.35), 2px 2px 0 rgba(58,38,24,.35);
}
.hdr .btn-reserver:hover { background: var(--bordeaux); color: #f3e6c8; }

/* hero : photo plein écran, titre gravé, fondu vers le parchemin */
.hero { height: max(620px, min(100svh, 1000px)); -webkit-mask-image: linear-gradient(#000 76%, transparent 100%); mask-image: linear-gradient(#000 76%, transparent 100%); }
.hero::after { background: linear-gradient(to bottom, rgba(10,5,2,.5), rgba(10,5,2,0) 38%); }
.hero .bougie { background: radial-gradient(calc(460px * var(--r)) calc(460px * var(--r)) at var(--x) var(--y), rgba(10,5,2,0) 0%, rgba(10,5,2,.12) 38%, rgba(10,5,2,.5) 80%, rgba(10,5,2,.66) 100%); }
.hero-texte { top: clamp(70px, 12vh, 140px); }

/* le fond ne bouge pas pendant que les pages tournent.
   iOS ignore « background-attachment: fixed » : le parchemin est posé sur un calque fixe à la place. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #d9c59c url("textures/parchemin.jpg") 0 0 / 2400px auto repeat;
}
.grimoire-colle { background: none; }

/* ---- livre plus vrai ---- */
/* tranche des pages : épaisseur visible des deux côtés */
.livre::before {
  content: ""; position: absolute; top: 4px; bottom: -7px; left: -9px; right: -9px; z-index: -1;
  background:
    repeating-linear-gradient(90deg, #e9dab8 0 1px, #cdb88f 1px 2px, #e2d1ab 2px 3px) left / 9px 100% no-repeat,
    repeating-linear-gradient(90deg, #e9dab8 0 1px, #cdb88f 1px 2px, #e2d1ab 2px 3px) right / 9px 100% no-repeat,
    repeating-linear-gradient(0deg, #e9dab8 0 1px, #c9b389 1px 2px) bottom / 100% 7px no-repeat;
  border-radius: 4px;
}
.livre { box-shadow: none; }
.livre-cadre::before { -webkit-mask: none; mask: none; border-radius: 10px 12px 12px 10px; inset: -24px -30px -30px; }
/* signet en ruban */
.livre-cadre::after {
  content: ""; position: absolute; left: 51%; bottom: -58px; width: 16px; height: 70px; z-index: 70;
  background: linear-gradient(90deg, #5a1419, #8a2630 45%, #5a1419);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
  transform: rotate(4deg); transform-origin: top center;
}
.livre-cadre:has(.livre.simple)::after { display: none; }
/* texte imprimé dans le papier */
.face-page h3, .face-page .recit, .face-page .folio { mix-blend-mode: multiply; }
.face-page .folio { border-bottom: 1px solid rgba(58,38,24,.35); padding-bottom: 6px; align-self: stretch; }
.recit::first-letter { float: left; font-family: var(--f-capitales); font-style: normal; font-size: 3.1em; line-height: .8; padding: 4px 6px 0 0; color: var(--bordeaux); }
.notes li { mix-blend-mode: multiply; color: #3a2618; }
.tirage { filter: drop-shadow(0 3px 4px rgba(42,29,21,.35)); }
.feuillet .ombre-tour { background: linear-gradient(to right, rgba(40,22,8,.45), rgba(40,22,8,.1) 45%, rgba(255,245,220,.25) 80%, rgba(40,22,8,.2)); }

/* rivières : une seule histoire, deux lignes */
.riv-texte { font-size: 15px; }
.riv-2 { font-size: 15px; opacity: .85; }

/* lettre de la gardienne */
.lettre-corps { display: grid; gap: 14px; font-family: var(--f-calli); font-style: italic; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.55; color: var(--encre-carte); }
.lettre-corps p:first-child { font-style: normal; font-family: var(--f-capitales); letter-spacing: .06em; }
.signature-titre { justify-self: end; margin-top: -14px; font-family: var(--f-capitales); font-size: 14px; letter-spacing: .1em; color: var(--encre-claire); }

/* registre façon livre d'or */
.registre-page {
  position: relative; max-width: 1040px; margin: 0 auto;
  padding: clamp(36px, 6vw, 70px) clamp(18px, 5vw, 64px) clamp(30px, 5vw, 56px);
  box-shadow: 0 1px 0 rgba(58,38,24,.3), 0 20px 40px rgba(58,38,24,.3);
  transform: rotate(-.4deg);
}
.registre-entete, .registre-lignes li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; gap: 0 22px; align-items: baseline; }
.registre-entete { font-family: var(--f-capitales); font-size: 14px; letter-spacing: .12em; color: var(--bordeaux); padding-bottom: 10px; border-bottom: 3px double rgba(107,28,34,.55); }
.registre-lignes { list-style: none; margin: 0; padding: 0; }
.registre-lignes li {
  padding: 22px 0 18px; border-bottom: 1px solid rgba(58,90,130,.35);
  background: linear-gradient(90deg, transparent 150px, rgba(107,28,34,.35) 150px 151px, transparent 151px, transparent calc(100% - 152px), rgba(107,28,34,.35) calc(100% - 152px) calc(100% - 151px), transparent calc(100% - 151px));
}
.ligne-nom { font-size: 30px; line-height: 1; }
.ligne-mot { margin: 0; font-size: 22px; line-height: 1.4; }
.ligne-note { font-family: var(--f-capitales); font-size: 14px; letter-spacing: .06em; color: var(--encre-claire); }
.main-1 { font-family: "Kalam", cursive; color: #1f2b55; }
.main-1 .ligne-mot { font-size: 19px; }
.main-2 { font-family: "Caveat", cursive; color: #2b1a10; }
.main-2 .ligne-mot { font-size: 26px; line-height: 1.2; }
.main-3 { font-family: "Shadows Into Light Two", cursive; color: #3a2a55; }
.main-4 { font-family: "Homemade Apple", cursive; color: #3b2616; }
.main-4 .ligne-mot { font-size: 16px; line-height: 1.9; }
.main-4 .ligne-nom { font-size: 22px; }
.registre-lignes .ligne-mot, .registre-lignes .ligne-nom { mix-blend-mode: multiply; }
.tampon {
  position: absolute; top: -58px; right: -26px;
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; text-align: center;
  border: 3px solid rgba(107,28,34,.75); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 7px rgba(107,28,34,.6);
  color: rgba(107,28,34,.85); transform: rotate(-14deg);
  -webkit-mask: var(--ronge-1) 0 0 / 100% 100% no-repeat; mask: var(--ronge-1) 0 0 / 100% 100% no-repeat;
  background: rgba(239,226,196,.55); mix-blend-mode: multiply;
}
.tampon-chiffre { font-family: var(--f-capitales); font-size: 34px; line-height: 1; }
.tampon-sur { font-family: var(--f-capitales); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.tampon-source { font-family: var(--f-calli); font-style: italic; font-size: 13px; }
@media (max-width: 760px) {
  .registre-entete { display: none; }
  .registre-lignes li { grid-template-columns: 1fr auto; background: none; }
  .ligne-mot { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .tampon { width: 104px; height: 104px; top: -40px; }
  .tampon-chiffre { font-size: 28px; }
}

/* indice de scroll : simple trait qui descend */
.indice-scroll { width: 2px; height: 52px; border: 0; border-radius: 2px; background: none; transition: opacity .3s; }
.indice-scroll::before {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(#e7b75a, rgba(231,183,90,0));
  animation: descendre 1.9s ease-in-out infinite;
}
.indice-scroll span { display: none; }
@keyframes descendre {
  0%, 100% { opacity: .3; transform: translateY(-6px); }
  50% { opacity: 1; transform: translateY(2px); }
}

/* le bouton Réserver se secoue toutes les 6 secondes */
.hdr .btn-reserver { animation: secousse 6s ease-in-out infinite; transform-origin: 50% 50%; }
.hdr .btn-reserver:hover { animation-play-state: paused; }
@keyframes secousse {
  0%, 88%, 100% { transform: rotate(0) translateX(0); }
  89.5% { transform: rotate(-5deg) translateX(-3px); }
  91% { transform: rotate(5deg) translateX(3px); }
  92.5% { transform: rotate(-4deg) translateX(-2px); }
  94% { transform: rotate(3deg) translateX(2px); }
  95.5% { transform: rotate(-1.5deg); }
  97% { transform: rotate(0); }
}
html.baguette-active .baguette { width: 116px; height: 116px; filter: drop-shadow(4px 8px 6px rgba(20,10,4,.45)); }

/* hero : la photo seule */
.hero::after { display: none; }

/* le grimoire tient entièrement dans l'écran (bannière, couverture et signet compris) */
.grimoire-colle { padding: calc(18px + env(safe-area-inset-top)) var(--gouttiere) 70px; }
.grimoire-colle .banniere { width: min(44vw, 360px); margin-bottom: 34px; }
.livre { --h: min(calc(100svh - 260px), 820px); }
@media (max-width: 899px) { .livre { --h: min(calc(100svh - 230px), 760px); } }

/* règles de la maison : affiche encadrée de bois, suspendue par des chaînes */
.proclamation {
  --bois: #7a4527;
  position: relative; width: min(100%, 780px); margin: 90px auto 0;
  filter: drop-shadow(0 26px 30px rgba(40,22,10,.45));
}
.chaines { position: absolute; left: 12%; top: -104px; height: 150px; width: 76%; z-index: 0; }
.fronton {
  position: relative; z-index: 1; height: clamp(58px, 9vw, 86px); margin: 0 -3.5%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: url("textures/bois-cadre.jpg") center / 700px auto, var(--bois); background-blend-mode: overlay;
}
.fronton::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(rgba(0,0,0,.45), rgba(255,220,180,.12)); }
.fronton span {
  position: absolute; inset: 14px 9% 16px; clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: url("textures/bois-cadre.jpg") 30% 40% / 700px auto, #6a3a20; background-blend-mode: overlay;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.cadre-bois {
  position: relative; z-index: 1;
  padding: clamp(18px, 3.4vw, 34px);
  background:
    url("textures/bois-cadre-v.jpg") left / 700px auto,
    var(--bois);
  background-blend-mode: overlay;
  box-shadow:
    inset 3px 3px 0 rgba(255,215,170,.16), inset -3px -3px 0 rgba(0,0,0,.45),
    inset 0 0 0 9px rgba(0,0,0,.12);
}
.cadre-bois .regles {
  transform: none; width: 100%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 6px rgba(20,10,4,.55), 0 0 0 8px rgba(255,215,170,.1), inset 0 0 40px rgba(110,70,30,.22);
}
.bouton-laiton {
  position: absolute; right: 7px; top: 50%; width: 13px; height: 13px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #f2d99a, #a9803a 55%, #5d4217);
  box-shadow: 1px 2px 3px rgba(0,0,0,.55);
}
.tablette {
  position: relative; z-index: 1; height: clamp(22px, 3vw, 30px); margin: 0 -2.5%;
  background: url("textures/bois-cadre.jpg") center / 700px auto, #5e3219; background-blend-mode: overlay;
  box-shadow: inset 0 3px 0 rgba(255,215,170,.14), inset 0 -8px 10px rgba(0,0,0,.45);
}
.tablette::after { content: ""; position: absolute; left: 5%; right: 5%; top: 100%; height: 10px; background: linear-gradient(#2a150b, rgba(42,21,11,0)); }
.regles-section { padding-top: clamp(80px, 12vw, 140px); }

/* notes manuscrites du grimoire plus petites */
.notes li { font-size: clamp(17px, 2.3vh, 22px); line-height: 1.45; padding-left: 24px; }
.notes li::before { width: 14px; }
.livre.simple .notes li { font-size: clamp(15px, 4vw, 18px); padding-left: 16px; }

/* registre : écritures plus petites, note en grand */
.ligne-nom { font-size: 24px; }
.ligne-mot { font-size: 17px; }
.main-1 .ligne-mot { font-size: 16px; }
.main-2 .ligne-mot { font-size: 21px; }
.main-4 .ligne-mot { font-size: 13px; }
.main-4 .ligne-nom { font-size: 18px; }
.registre-lignes li { padding: 16px 0 14px; }
.ligne-note { display: grid; justify-items: start; gap: 2px; }
.note-grande { font-family: var(--f-capitales); font-size: 34px; line-height: 1; color: var(--bordeaux); letter-spacing: 0; }
.note-plateforme { font-size: 12px; letter-spacing: .1em; }
@media (max-width: 760px) { .ligne-note { justify-items: end; } .note-grande { font-size: 26px; } }

/* la pile d'enveloppes floutée derrière l'enveloppe */
.scene-pile { position: absolute; inset: -12%; z-index: 0; will-change: transform; }
.pile-flou { position: absolute; inset: 0; filter: blur(5px) saturate(.85) brightness(.82); }
.pile-env {
  position: absolute; aspect-ratio: 16 / 11;
  width: calc(var(--t) * max(1vw, .75vh));
  translate: -50% -50%;
  border-radius: 3px;
  background-color: var(--teinte);
  background-image: var(--matiere);
  background-size: 360px auto;
  background-blend-mode: multiply;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  container-type: inline-size;
}
.pile-env svg.plis { position: absolute; inset: 0; width: 100%; height: 100%; }
.pile-adresse {
  position: absolute; left: 38%; top: 46%; right: 6%;
  font-family: var(--f-main); color: rgba(45,25,12,.8);
  font-size: 7.5cqw; line-height: 1.25; white-space: nowrap;
}
.pile-timbre { position: absolute; right: 6%; top: 8%; width: 13%; aspect-ratio: 4 / 5; background: #6b1c22; outline: 2px dashed rgba(240,225,190,.7); outline-offset: -4px; opacity: .85; }
.pile-sceau { position: absolute; left: 50%; top: 56%; width: 22%; translate: -50% -50%; }
.scene-voile { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 55% at 50% 52%, rgba(10,5,2,.35), #050302 88%); opacity: .6; pointer-events: none; }
.scene .env { z-index: 1; }
.scene::after { z-index: 1; }

/* sceau « MDS » au bas du règlement (remplace l'ancien sceau lisse) */
.regles::after { content: none; }
.regles-sceau { position: absolute; left: clamp(20px, 6vw, 60px); bottom: 10px; width: 124px; height: 124px; transform: rotate(-10deg); overflow: visible; filter: drop-shadow(2px 5px 5px rgba(40,10,5,.45)); }

/* registre et règlement 15 % plus petits */
.registre-page, .proclamation { zoom: .85; }

/* carte : aperçu OpenStreetMap, Google Maps chargé au clic */
.carte-apercu { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; overflow: hidden; background: #d9c7a0; }
.carte-tuiles { position: absolute; left: 50%; top: 50%; width: 1280px; display: grid; grid-template-columns: repeat(5, 256px); translate: -625px -563px; filter: sepia(.75) saturate(.8) contrast(.95) brightness(.97); mix-blend-mode: multiply; }
.carte-tuiles img { display: block; width: 256px; height: 256px; max-width: none; }
.carte-bouton { position: absolute; left: 50%; bottom: 44px; translate: -50% 0; z-index: 2; }
.carte-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 6px 10px; font-size: 12px; text-align: center; color: var(--encre-douce); background: rgba(234,220,188,.85); }
.carte-note a { color: var(--bordeaux); }
.carte-cadre .carte-sceau { z-index: 3; }

/* module de réservation Lodgify aux couleurs de la maison : papier, encre sépia, bordeaux */
:root {
  --ldg-bnb-background: #f3e7cc;
  --ldg-bnb-border-radius: 3px;
  --ldg-bnb-box-shadow: 0 1px 0 rgba(58,38,24,.3), 0 20px 40px rgba(58,38,24,.3);
  --ldg-bnb-padding: 16px;
  --ldg-bnb-input-background: #fbf4e3;
  --ldg-bnb-button-border-radius: 2px;

  --ldg-bnb-color-primary: #6b1c22;
  --ldg-bnb-color-primary-lighter: #a8686c;
  --ldg-bnb-color-primary-darker: #4a1217;
  --ldg-bnb-color-primary-contrast: #f3e7cc;
  --ldg-component-calendar-cell-selection-bg-color: #6b1c22;
  --ldg-component-calendar-cell-selection-color: #f3e7cc;
  --ldg-component-calendar-cell-selected-bg-color: #d9b99a;
  --ldg-component-calendar-cell-selected-color: #3a2618;
  --ldg-bnb-font-family: "Alegreya", Georgia, serif;
}
.reserver-boite { width: min(100%, 980px); color: var(--encre-carte); font-family: var(--f-corps); text-align: left; }
#lodgify-book-now-box { width: 100%; }
/* fenêtres du module (calendrier, voyageurs) : papier au lieu du blanc */
[id^="ldg-book-now-box"][role="dialog"],
[id^="ldg-book-now-box"][role="dialog"] [data-testid*="calendar"] {
  background-color: #f3e7cc !important;
  color: #3a2618;
  --ldg-component-calendar-cell-color: #3a2618;
  --ldg-component-calendar-cell-today-color: #6b1c22;
}
[id^="ldg-book-now-box"][role="dialog"] { box-shadow: 0 12px 30px rgba(58,38,24,.35) !important; border: 1px solid rgba(58,38,24,.25); }

/* calque du curseur baguette, placé dans la couche du dessus (popover) */
.curseur-calque {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; overflow: visible; pointer-events: none; color: inherit;
}

/* ---------- Invitation : cercle doré autour du sceau (remplace le trait de scroll) ---------- */
.sceau-bouton {
  position: absolute; left: 50%; top: 56%; z-index: 6;
  width: 36cqw; height: 36cqw; translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: opacity .3s;
}
.sceau-cercle, .sceau-cercle::before {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.1cqw solid #b07d22;
  box-shadow: 0 0 2.6cqw rgba(255,196,90,.85), inset 0 0 1.8cqw rgba(255,196,90,.55);
}
.sceau-cercle { animation: cercle-pulse 2.2s ease-in-out infinite; }
.sceau-cercle::before { content: ""; inset: -10%; border-width: .5cqw; box-shadow: 0 0 1.6cqw rgba(255,196,90,.6); animation: cercle-onde 2.2s ease-out infinite; }
.sceau-bouton:hover .sceau-cercle, .sceau-bouton:focus-visible .sceau-cercle { border-color: #f6d488; }
@keyframes cercle-pulse { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes cercle-onde { 0% { transform: scale(.94); opacity: .6; } 100% { transform: scale(1.22); opacity: 0; } }
.sceau-invite {
  position: absolute; left: 0; right: 0; bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); z-index: 2;
  margin: 0; padding: 0 var(--gouttiere); text-align: center; pointer-events: none;
  font-family: var(--f-titre); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .01em; color: #f1dcae;
  text-shadow: 0 2px 8px rgba(0,0,0,.8); transition: opacity .3s;
}
.fleche-suite {
  position: absolute; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); z-index: 7;
  width: 64px; height: 64px; translate: -50% 0; padding: 12px; border: 1.5px solid rgba(231,183,90,.7); border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(20,11,5,.78), rgba(20,11,5,.55)); box-shadow: 0 0 18px rgba(231,183,90,.35), 0 6px 16px rgba(0,0,0,.5);
  transition: opacity .4s;
}
.fleche-suite svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #f0c46a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(231,183,90,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.7)); animation: fleche-descend 1.8s ease-in-out infinite; }
.fleche-suite:hover svg { stroke: #f6d488; }
@keyframes fleche-descend { 0%, 100% { transform: translateY(-4px); opacity: .7; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fleche-suite svg { animation: none; } }
.sceau-bouton.cache, .sceau-invite.cache, .fleche-suite.cache { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sceau-cercle, .sceau-cercle::before { animation: none; } }

/* ============================================================
   Mobile : corrections d'affichage (vérifié en 390 × 680)
   ============================================================ */
html, body { overflow-x: clip; } /* rien ne dépasse sur les côtés, sans casser le « sticky » */
.scene { height: 100lvh; } /* Safari iOS : pas de bande claire sous l'enveloppe quand la barre d'adresse se replie */

@media (max-width: 899px) {
  /* bouton flottant plus discret, il ne recouvre plus les bannières */
  .hdr .btn-reserver { font-size: 12px; padding: 7px 13px; }

  /* grimoire : le livre tient dans la largeur, couverture comprise */
  .grimoire-colle { padding: calc(58px + env(safe-area-inset-top)) 22px 76px; }
  .grimoire-colle .banniere { width: min(62vw, 300px); margin-bottom: 22px; }
  .livre { --h: min(calc(100svh - 190px), 760px); }
  .livre.simple { width: 100%; }
  .livre-cadre { width: 100%; }
  .livre-cadre::before { inset: -12px -10px -14px; }
  .livre::before { left: -5px; right: -5px; }

  /* page : la photo a une hauteur bornée, le texte ne passe plus dessous */
  .livre.simple .face-page { gap: 8px; padding: 14px 16px; overflow: hidden; }
  .livre.simple .tirage { flex: none; }
  .livre.simple .cadre img { aspect-ratio: auto; height: clamp(120px, 27svh, 250px); }
  .livre.simple .vignettes { flex: none; gap: 6px; }
  .livre.simple .vignette { width: 44px; }
  .livre.simple .face-page h3 { font-size: clamp(24px, 6.6vw, 32px); }
  .livre.simple .recit { font-size: 15px; line-height: 1.35; }
  .livre.simple .notes li { font-size: 15px; line-height: 1.3; }
  .livre.simple .cachette .cadre img { height: clamp(160px, 38svh, 320px); }

  /* carte : bouton sur une ligne, au-dessus de la note */
  .carte-bouton { white-space: nowrap; font-size: 12px; padding: 9px 14px; bottom: 58px; }
  .carte-note { font-size: 11px; }

  /* registre : le tampon reste dans l'écran */
  .tampon { right: -6px; top: -50px; width: 100px; height: 100px; }
  .tampon-chiffre { font-size: 27px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glyphes, .indice-scroll::before, .hdr .btn-reserver { animation: none; }
  .indice-scroll span, .slot.plein { animation: none; }
}