/* L'accueil : en haut sa fenêtre bleue, en bas son velours rouge, et le colis au
   milieu. Sur téléphone, tout tient sur un écran, sans défilement. */
html, body { height: 100%; overflow: hidden; }
body { --pack-h: min(27dvh, 58vw, 250px); --pack-l: calc(var(--pack-h) * .92); --lx: 44%; --ly: 84%; }

.scene { position: fixed; left: 0; right: 0; top: 0; height: 37dvh; overflow: hidden; background: var(--encre); }
.couches { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 96%; }
.pan, .pan-i { position: absolute; inset: 0; }
.pan { transform-origin: 50% 100%; }
.couche { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.couche.vif { will-change: transform; }
/* Les ombres du papier ne se calculent qu'une fois : ces couches ne bougent jamais de l'intérieur. */
.fenetre, .mur { filter: drop-shadow(0 5px 6px rgba(6, 8, 34, .4)); }
.meubles { filter: drop-shadow(0 8px 10px rgba(6, 8, 34, .5)); }
.devant { filter: drop-shadow(0 8px 9px rgba(6, 8, 34, .5)); }
.objet { pointer-events: auto; cursor: pointer; outline: none; }

/* Le ciel suit l'heure : seul le fondu change, jamais le dessin. */
.ciel { opacity: 0; transition: opacity .8s ease; }
.scene[data-moment='jour'] .ciel-jour, .scene[data-moment='doree'] .ciel-doree, .scene[data-moment='bleue'] .ciel-bleue, .scene[data-moment='nuit'] .ciel-nuit { opacity: 1; }
.etoiles, .lune { opacity: 0; transition: opacity .8s ease; }
.scene[data-moment='bleue'] .etoiles, .scene[data-moment='nuit'] .etoiles { opacity: 1; }
.scene[data-moment='doree'] .lune { opacity: .5; }
.scene[data-moment='bleue'] .lune, .scene[data-moment='nuit'] .lune { opacity: 1; }
.etoile { fill: #FDF4E7; animation: scintille 4s ease-in-out infinite; }
.etoile.e1 { animation-delay: -1.300s; } .etoile.e2 { animation-delay: -2.600s; }
@keyframes scintille { 50% { opacity: .3; } }
.lune { fill: #FDF0D5; }
.filante { opacity: 0; animation: filante 17s linear 4s infinite; }
@keyframes filante { 0% { opacity: 0; transform: translate(40px, 60px) rotate(16deg); } 1% { opacity: 1; } 4.500% { opacity: 0; transform: translate(470px, 190px) rotate(16deg); } 100% { opacity: 0; transform: translate(470px, 190px) rotate(16deg); } }
.scene[data-moment='jour'] .filante, .scene[data-moment='doree'] .filante { display: none; }
.toit { transition: fill .8s ease; }
.loin { fill: var(--toit-loin); } .milieu { fill: var(--toit-milieu); } .pres { fill: var(--toit-pres); }
.carreaux { fill: #FFD48A; opacity: 0; transition: opacity .8s ease; }
.scene[data-moment='jour'] { --toit-loin: #8FA6D6; --toit-milieu: #6E84C0; --toit-pres: #5167A8; }
.scene[data-moment='doree'] { --toit-loin: #8D6BAE; --toit-milieu: #6A4E9B; --toit-pres: #4A3A86; }
.scene[data-moment='bleue'] { --toit-loin: #3B3FB0; --toit-milieu: #252C8C; --toit-pres: #161D66; }
.scene[data-moment='nuit'] { --toit-loin: #141C50; --toit-milieu: #0E143E; --toit-pres: #090E2E; }
.scene[data-moment='bleue'] .carreaux { opacity: .95; }
.scene[data-moment='nuit'] .carreaux { opacity: .8; }
.scene[data-moment='doree'] .carreaux { opacity: .35; }

/* La lumière : aucune fusion, seulement des voiles posés dessus. */
.lumiere { position: absolute; inset: 0; pointer-events: none; transition: opacity .7s ease; }
.lumiere.nuit { background: #070B2C; opacity: .05; }
.lumiere.jour { background: #FFF0D8; opacity: 0; }
.lumiere.bords { background: radial-gradient(ellipse 80% 90% at 50% 60%, rgba(8, 10, 44, 0) 40%, rgba(8, 10, 44, .55) 100%); }
.lumiere.chaude { background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 176, 92, .26), rgba(255, 150, 80, .07) 34%, transparent 58%); animation: vacille 3.300s ease-in-out infinite; }
@keyframes vacille { 0%, 100% { opacity: .85; } 28% { opacity: 1; } 52% { opacity: .76; } 80% { opacity: .95; } }
.scene[data-moment='jour'] .lumiere.jour { opacity: .3; }
.scene[data-moment='doree'] .lumiere.jour { opacity: .1; }
.scene[data-moment='nuit'] .lumiere.nuit { opacity: .36; }
.scene[data-etat='eteinte'] .lumiere.nuit { opacity: .46; transition-duration: 0s; }
.scene[data-etat='eteinte'] .lumiere.chaude { opacity: 0; animation: none; }
.scene[data-etat='eteinte'] .flamme-bloc { opacity: 0; transform: scale(.2); }
.flamme-bloc { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.500, .4, 1); }

/* Ce qui vit dans la pièce : seules l'opacité et la position bougent. */
.flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flamme 2.300s ease-in-out infinite; }
@keyframes flamme { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.070) skewX(2.500deg); } 55% { transform: scale(1.050, .95) skewX(-2deg); } 78% { transform: scale(.97, 1.040) skewX(1.200deg); } }
.halo { animation: halo 3.100s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .78; } 80% { opacity: .95; } }
.vapeur { animation: vapeur 4.500s ease-in-out infinite; opacity: 0; }
.vapeur.v2 { animation-delay: -1.500s; } .vapeur.v3 { animation-delay: -3s; }
@keyframes vapeur { 0% { opacity: 0; transform: translateY(14px); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-24px); } }
.ampoule { fill: #FFD48A; animation: ampoule 3s ease-in-out infinite; }
.ampoule.a1 { animation-delay: -1s; } .ampoule.a2 { animation-delay: -2s; }
@keyframes ampoule { 50% { opacity: .5; } }
.chaussette { transform-box: fill-box; transform-origin: 25% 0; animation: balance 6s ease-in-out infinite; animation-delay: calc(var(--p) * -.9s); }
@keyframes balance { 0%, 100% { transform: rotate(-1.800deg); } 50% { transform: rotate(1.800deg); } }
.suspendue { animation: suspendue 7s ease-in-out infinite; animation-delay: calc(var(--p) * -1.700s); }
@keyframes suspendue { 0%, 100% { transform: rotate(-2.200deg); } 50% { transform: rotate(2.200deg); } }

/* Le livre qui vole, quand personne ne le regarde. */
.oiseau { --k: .62; position: absolute; z-index: 3; left: 0; top: 0; width: calc(72px * var(--k)); height: calc(56px * var(--k)); margin: calc(-28px * var(--k)) 0 0 calc(-36px * var(--k)); will-change: transform; perspective: 300px; opacity: 0; }
.oiseau .corps { position: absolute; inset: 0; transform-style: preserve-3d; animation: plane 2.600s ease-in-out infinite; }
@keyframes plane { 0%, 100% { transform: translateY(0) rotateX(32deg) rotate(-6deg); } 50% { transform: translateY(-9px) rotateX(38deg) rotate(5deg); } }
.oiseau i { position: absolute; top: 4px; width: calc(32px * var(--k)); height: calc(46px * var(--k)); border-radius: 2px; background: linear-gradient(#FDF4E7, #FDF4E7) padding-box, var(--couv, #D3123A) border-box; border: 2.500px solid transparent; }
.oiseau .aile-g { right: 50%; transform-origin: 100% 50%; animation: aile-g .46s ease-in-out infinite alternate; }
.oiseau .aile-d { left: 50%; transform-origin: 0 50%; animation: aile-d .46s ease-in-out infinite alternate; }
@keyframes aile-g { from { transform: rotateY(-12deg); } to { transform: rotateY(58deg); } }
@keyframes aile-d { from { transform: rotateY(12deg); } to { transform: rotateY(-58deg); } }

/* Deux pastilles sur la fenêtre : le prochain colis, le cappuccino. */
.pastilles { position: fixed; z-index: 44; left: 12px; right: 12px; top: calc(var(--haut) + 62px); display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.pastille { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(12, 18, 54, .78); color: var(--mousse); font-size: 14.500px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(211, 218, 251, .25); }
.pastille svg { width: 20px; height: 20px; flex: none; }
.pastille .point { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge-vif); box-shadow: 0 0 0 2px rgba(12, 18, 54, .78); animation: point 1.500s ease-in-out infinite; }
@keyframes point { 50% { transform: scale(1.350); } }

/* Le velours rouge, où attendent les colis. */
.comptoir { position: fixed; z-index: 10; left: 0; right: 0; top: 37dvh; bottom: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: calc(var(--nav) + var(--bas) + 10px); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 44px), linear-gradient(180deg, #B50F33, #7A0A24 58%, #560A1E); }
.comptoir::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 20px; background: radial-gradient(circle at 50% 0, #E5173F 13px, transparent 14px) 0 2px / 30px 18px repeat-x; border-top: 2px solid var(--or); filter: drop-shadow(0 3px 3px rgba(40, 4, 14, .5)); }
.presentoir { flex: none; width: 100%; display: flex; gap: 14px; margin-top: calc(1dvh - var(--pack-h) * .34); padding: calc(var(--pack-h) * .34) calc(50% - var(--pack-l) / 2) calc(var(--pack-h) * .15); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.presentoir::-webkit-scrollbar { display: none; }
.emplacement { position: relative; flex: none; width: var(--pack-l); height: var(--pack-h); scroll-snap-align: center; scroll-snap-stop: always; will-change: transform; }

/* Un colis : du papier, une fenêtre sur son monde, un ruban, un sceau. */
.motif-etoiles { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M12 6c.6 3.500 1.500 4.400 5 5-3.500.6-4.400 1.500-5 5-.6-3.500-1.500-4.400-5-5 3.500-.6 4.400-1.500 5-5z' fill='%23FFF3E0' fill-opacity='.5'/%3E%3Ccircle cx='32' cy='30' r='1.800' fill='%23FFF3E0' fill-opacity='.45'/%3E%3C/svg%3E"); }
.motif-or { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M12 6c.6 3.500 1.500 4.400 5 5-3.500.6-4.400 1.500-5 5-.6-3.500-1.500-4.400-5-5 3.500-.6 4.400-1.500 5-5z' fill='%23FFE29A' fill-opacity='.8'/%3E%3Ccircle cx='32' cy='30' r='1.800' fill='%23FFE29A' fill-opacity='.7'/%3E%3C/svg%3E"); }
.motif-coeurs { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M12 12a4.500 4.500 0 0 1 7 1.500 4.500 4.500 0 0 1 7-1.500c2.500 2.700.6 6.500-7 12-7.600-5.500-9.500-9.300-7-12z' fill='%23fff' fill-opacity='.42'/%3E%3Ccircle cx='34' cy='32' r='2.400' fill='%23fff' fill-opacity='.38'/%3E%3C/svg%3E"); }
.motif-loupes { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%2393A6F5' stroke-opacity='.5' stroke-width='1.800'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M18 18l6 6' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='1.600' fill='%2393A6F5' fill-opacity='.5'/%3E%3C/svg%3E"); }
.pack { --L: var(--pack-l); --H: var(--pack-h); --P: calc(var(--pack-l) * .62); position: relative; display: block; width: var(--L); height: var(--H); perspective: calc(var(--pack-h) * 3.400); perspective-origin: 50% 26%; }
.pack::after { content: ''; position: absolute; left: 2%; right: -12%; bottom: -9%; height: 17%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 2, 10, .62), transparent); }
.caisse { position: absolute; z-index: 1; inset: 0; transform-style: preserve-3d; transform: rotateX(-13deg) rotateY(-22deg); }
.f { position: absolute; display: block; background: var(--motif), linear-gradient(155deg, var(--p1), var(--p2)); }
.f-avant { inset: 0; transform: translateZ(calc(var(--P) / 2)); border-radius: 2px; box-shadow: inset 0 0 0 1.500px rgba(255, 255, 255, .22), inset 0 -22px 28px rgba(0, 0, 0, .22); }
.f-dos { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--P) / 2)); background: linear-gradient(var(--p2), #000 140%); }
.f-droite { top: 0; bottom: 0; left: calc(50% - var(--P) / 2); width: var(--P); transform: rotateY(90deg) translateZ(calc(var(--L) / 2)); background: linear-gradient(rgba(6, 4, 24, .42), rgba(6, 4, 24, .42)), var(--motif), linear-gradient(155deg, var(--p1), var(--p2)); }
.f-droite i { position: absolute; left: 0; right: 0; top: 66%; height: 7.500%; background: linear-gradient(180deg, var(--ruban), color-mix(in srgb, var(--ruban) 62%, black)); transition: opacity .12s ease; }
.f-gauche { top: 0; bottom: 0; left: calc(50% - var(--P) / 2); width: var(--P); transform: rotateY(-90deg) translateZ(calc(var(--L) / 2)); background: linear-gradient(var(--p2), #000 150%); }
.f-fond { left: 0; right: 0; top: calc(50% - var(--P) / 2); height: var(--P); transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); background: #0A0A20; }
/* L'intérieur de la boîte : c'est lui qui s'allume à l'ouverture. */
.pack.ouvert .f-dos, .pack.ouvert .f-gauche { background: linear-gradient(color-mix(in srgb, var(--c, #FFD98A) 62%, white), color-mix(in srgb, var(--c, #FFD98A) 46%, #0A0A20) 62%); }
.couvercle { position: absolute; left: -1.200%; right: -1.200%; top: 50%; height: calc(var(--P) * 1.030); transform-origin: 50% 0; transform: translateY(calc(var(--H) / -2 - 1px)) translateZ(calc(var(--P) / -2)) rotateX(90deg); background: var(--motif), linear-gradient(120deg, color-mix(in srgb, var(--p1) 80%, white), var(--p1)); box-shadow: inset 0 0 0 1.500px rgba(255, 255, 255, .28); }
.couvercle i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 44%, var(--ruban) 44% 56%, transparent 56%), linear-gradient(0deg, transparent 43%, var(--ruban) 43% 57%, transparent 57%); }
/* Le couvercle se soulève et s'envole : rien ne reste accroché à la boîte. */
.pack.ouvert .couvercle { transform: translateY(calc(var(--H) * -1.200)) translateZ(calc(var(--P) / -2)) rotateX(116deg) rotateY(-7deg); opacity: 0; visibility: hidden; transition: transform .32s cubic-bezier(.3, .7, .3, 1), opacity .18s ease .12s, visibility 0s .32s; }
.noeud-haut { position: absolute; left: 50%; top: 0; width: 58%; transform: translate(-50%, -66%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); transition: transform .3s cubic-bezier(.3, .6, .4, 1), opacity .24s ease; }
.pack.coupe .noeud-haut { transform: translate(-30%, -340%) rotate(-28deg); opacity: 0; filter: none; }
/* La lumière monte de derrière la boîte, sans bord. */
.faisceau { position: absolute; z-index: 0; left: -34%; right: -34%; top: -92%; height: 184%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #FFD98A) 74%, white), color-mix(in srgb, var(--c, #FFD98A) 40%, transparent) 46%, transparent); opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.pack.ouvert .faisceau { opacity: .8; }
.livres-dedans { position: absolute; inset: 0; transform-style: preserve-3d; }
.pack-fenetre { position: absolute; left: 11%; right: 11%; top: 6%; height: 54%; overflow: hidden; border-radius: 999px 999px 5px 5px; background: var(--encre); box-shadow: inset 0 5px 9px rgba(2, 3, 18, .6), 0 0 0 2px var(--ruban2), 0 0 0 4px rgba(0, 0, 0, .22); }
.pack-fenetre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pack-ruban { position: absolute; left: 0; right: 0; top: 66%; height: 7.500%; background: linear-gradient(180deg, var(--ruban2), var(--ruban) 45%, color-mix(in srgb, var(--ruban) 76%, black)); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: transform .14s ease-in, opacity .14s ease; }
.pack-sceau { position: absolute; left: 50%; top: 69.700%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); transition: transform .28s cubic-bezier(.4, .1, .7, .4), opacity .2s ease .08s; }
.pack.coupe .pack-ruban { transform: scaleX(0); opacity: 0; }
.pack.coupe .f-droite i { opacity: 0; }
.pack.coupe .pack-sceau { transform: translate(-50%, 240%) rotate(50deg); opacity: 0; visibility: hidden; filter: none; transition: transform .28s cubic-bezier(.4, .1, .7, .4), opacity .2s ease .08s, visibility 0s .28s; }
.pack-nom { position: absolute; left: 6%; right: 6%; bottom: 4.500%; text-align: center; color: var(--mousse); font-family: var(--titre); font-style: italic; font-weight: 600; font-size: calc(var(--pack-h) * .07); line-height: 1.08; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.pack-reflet { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .3) 48%, rgba(255, 230, 190, .14) 54%, transparent 64%); background-size: 280% 100%; background-position: var(--reflet, 140%) 0; }
.emplacement.actif .pack-reflet { animation: reflet 4.200s ease-in-out infinite; }
@keyframes reflet { 0%, 45% { background-position: 140% 0; } 75%, 100% { background-position: -60% 0; } }
.emplacement.actif .caisse { animation: caisse-vit 5s ease-in-out infinite; }
@keyframes caisse-vit { 0%, 100% { transform: rotateX(-13deg) rotateY(-24deg) translateY(0); } 50% { transform: rotateX(-11deg) rotateY(-14deg) translateY(-6px); } }
.compte { position: absolute; z-index: 3; right: -16px; top: -2%; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--mousse); color: var(--carmin); font-family: var(--titre); font-weight: 700; font-size: 18px; box-shadow: 0 3px 8px rgba(30, 4, 14, .55); }
.emplacement.ferme .pack { filter: saturate(.55) brightness(.72); }
.cadenas { position: absolute; z-index: 3; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 999px; background: rgba(12, 18, 54, .88); color: var(--mousse); font-size: 14px; font-weight: 600; white-space: nowrap; text-align: center; line-height: 1.15; }

.infos { text-align: center; padding: 0 16px; min-height: 58px; }
.infos h1 { font-size: 25px; font-style: italic; font-weight: 500; }
.infos p { margin: 1px 0 0; font-size: 15.500px; color: var(--lait); }

/* La jauge de chance : elle monte à chaque colis. */
.jauge { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 8px; }
.jauge .bougies { display: flex; gap: 4px; }
.jauge svg { width: 14px; height: 20px; fill: rgba(253, 244, 231, .2); transition: fill .2s ease; }
.jauge svg.allumee { fill: var(--flamme); }
.jauge p { margin: 0; font-size: 14px; color: var(--lait); }
.jauge b { color: var(--flamme); font-weight: 650; }

.appel { margin-top: auto; width: 100%; padding: 8px 18px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.appel .bouton { width: min(100%, 340px); }
.lien-chances { min-height: 32px; padding: 2px 10px; color: var(--lait); font-size: 14.500px; text-decoration: underline; text-underline-offset: 3px; }

/* Sur les petits écrans, on garde le colis et le bouton, le reste s'efface. */
@media (max-height: 740px) and (max-width: 899px) {
  body { --pack-h: 25dvh; }
  .scene { height: 33dvh; }
  .comptoir { top: 33dvh; padding-bottom: calc(var(--nav) + var(--bas) + 6px); }
  .infos { min-height: 0; }
  .infos h1 { font-size: 21px; }
  .infos p { display: none; }
  .jauge { margin-top: 3px; }
  .jauge svg { width: 11px; height: 15px; }
  .jauge p { font-size: 13px; }
  .lien-chances { display: none; }
  .appel { padding-top: 4px; }
  .bouton.grand { min-height: 52px; font-size: 20px; }
}

/* Les chances, publiées. */
.cotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cotes li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 16px; }
.cotes i { width: 12px; height: 24px; border-radius: 2px; background: var(--tranche); }
.cotes b { font-variant-numeric: tabular-nums; }
.note-cotes { margin: 12px 0 0; font-size: 14.500px; color: var(--cafe); }

/* Sept tasses pour sept soirs. */
.tasses { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.tasse { padding: 5px 0 6px; border-radius: 8px; text-align: center; font-size: 12.500px; line-height: 1.15; color: var(--cafe); background: var(--lait); }
.tasse svg { display: block; width: 72%; margin: 0 auto 2px; }
.tasse.bue { background: var(--orchidee); color: var(--lie); }
.tasse.ce-soir { background: var(--rouge); color: var(--mousse); }

/* L'ouverture du livre : courte, et seulement la première fois. */
.intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 80% 58% at 50% 50%, #1D2A7C, #0A0F35 64%, #05071E); perspective: 1500px; perspective-origin: 50% 42%; }
.intro .magie { z-index: 3; }
.plongee { position: relative; z-index: 2; transform-style: preserve-3d; will-change: transform; }
.flotte { transform-style: preserve-3d; animation: flotte 5s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-9px) rotate(.7deg); } }
.grimoire { --h: min(58dvh, 122vw); --w: calc(var(--h) * .72); --e: calc(var(--h) * .09); --repli: .6; position: relative; display: block; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(13deg) rotateY(-19deg) rotateZ(-2deg); transition: transform .62s cubic-bezier(.5, .02, .2, 1); }
.grimoire.ouvert { transform: translateX(calc(var(--w) / 2 * var(--repli, 1))) rotateX(26deg) rotateY(0) rotateZ(0) scale(var(--repli, 1)); }
.g { position: absolute; display: block; }
.g-fond { inset: 0; transform: translateZ(calc(var(--e) * -1)); background: linear-gradient(120deg, #A60E30, #6A0A22); border-radius: 3px 9px 9px 3px; box-shadow: 0 30px 50px rgba(2, 3, 18, .75); }
.g-droite { left: 100%; top: 0; bottom: 0; width: var(--e); transform-origin: 0 50%; transform: translateX(-9px) rotateY(90deg); background: repeating-linear-gradient(0deg, #F7ECD9 0 1.500px, #CDB89A 1.500px 3px); }
.g-bas { left: 0; right: 9px; top: 100%; height: var(--e); transform-origin: 50% 0; transform: translateY(-7px) rotateX(-90deg); background: repeating-linear-gradient(90deg, #F7ECD9 0 1.500px, #CDB89A 1.500px 3px), #F7ECD9; }
.g-page { inset: 7px 9px 7px 0; transform: translateZ(-1px); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(58, 34, 24, .3), transparent 12%), repeating-linear-gradient(0deg, transparent 0 15px, rgba(107, 65, 40, .16) 15px 16px), #FBF2E2; }
.g-feuille { inset: 7px 9px 7px 0; transform-origin: 0 50%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(58, 34, 24, .22), transparent 16%, transparent 80%, rgba(58, 34, 24, .1)), repeating-linear-gradient(0deg, transparent 0 15px, rgba(107, 65, 40, .14) 15px 16px), #FDF6E9; will-change: transform; }
.g-couv { inset: 0; transform-origin: 0 50%; transform: translateZ(3px); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.6, .02, .18, 1); }
.grimoire.ouvert .g-couv { transform: translateZ(3px) rotateY(-170deg); }
.g-avant, .g-dedans { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3px 9px 9px 3px; }
.g-avant { overflow: hidden; background: radial-gradient(ellipse at 40% 30%, #E5173F, #A30D2E 72%, #7A0A24); box-shadow: inset 11px 0 12px -7px rgba(0, 0, 0, .55), inset -1px -1px 0 rgba(255, 255, 255, .14); }
.g-avant::before { content: ''; position: absolute; inset: 0; opacity: .3; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px); }
.g-cadre { position: absolute; inset: 3.500%; border: 1.500px solid var(--or); border-radius: 3px 7px 7px 3px; }
.g-arche { position: absolute; left: 21%; right: 21%; top: 11%; height: 49%; border-radius: 999px 999px 4px 4px; overflow: hidden; background: linear-gradient(#14237A, #2F49CC 46%, #6A6FE6 66%, #C47AD2 82%, #FF97A8); box-shadow: inset 0 7px 12px rgba(2, 3, 18, .75), 0 0 0 2.500px var(--or), 0 0 0 6px rgba(120, 12, 40, .9), 0 0 0 7px rgba(233, 184, 79, .7); }
.g-arche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-titres { position: absolute; left: 6%; right: 6%; top: 65%; text-align: center; }
.g-titre { display: block; font-family: var(--titre); font-style: italic; font-weight: 600; font-size: calc(var(--h) * .082); line-height: 1; letter-spacing: -.01em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 90; color: #FFE29A; text-shadow: 0 1px 0 rgba(70, 8, 22, .8); }
.g-pour { display: block; margin-top: calc(var(--h) * .02); font-family: var(--main); font-size: calc(var(--h) * .046); color: #FFE29A; }
.g-dedans { transform: rotateY(180deg); display: grid; place-items: center; padding: 12%; text-align: center; background: linear-gradient(270deg, rgba(0, 0, 0, .35), transparent 14%), #1E2D78; color: #FFE29A; font-family: var(--main); font-size: calc(var(--h) * .056); line-height: 1.2; }
.g-ruban { left: 63%; top: calc(100% - 9px); width: calc(var(--h) * .036); height: calc(var(--h) * .15); background: linear-gradient(90deg, #2F4FD0, #4F6DEA 50%, #2238A6); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); transform: translateZ(1px); }
.invite { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(8dvh, 34px); margin: 0; text-align: center; font-family: var(--main); font-size: 32px; color: var(--flamme); font-kerning: none; animation: invite 2.200s ease-in-out infinite; }
@keyframes invite { 50% { opacity: .58; } }
.toucher-livre { position: absolute; inset: 0; z-index: 4; }
.eclat { position: absolute; z-index: 4; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%; background: radial-gradient(circle, #fff 0, #FFFBEF 34%, #FFF1CC 52%, #FFDFA4 66%, rgba(255, 214, 140, 0) 71%); opacity: 0; transform: scale(.08); will-change: transform, opacity; pointer-events: none; }

@media (min-width: 900px) {
  body { --pack-h: min(32dvh, 290px); --lx: 37%; --ly: 72%; }
  .scene { height: 50dvh; }
  .couche { inset: -3%; width: 106%; height: 106%; }
  .pan-i { will-change: transform; }
  .comptoir { top: 50dvh; padding-bottom: 34px; }
  .comptoir::before { background-size: 34px 18px; }
  .presentoir { gap: 54px; margin-top: calc(-16dvh - var(--pack-h) * .34); }
  .pastilles { left: auto; right: 28px; top: 84px; flex-direction: column; align-items: flex-end; }
  .infos h1 { font-size: 30px; }
  .jauge { margin-top: 4px; }
  .appel { padding-top: 4px; }
  .oiseau { --k: 1; }
  .grimoire { --h: min(62dvh, 620px); --repli: 1; }
}