:root {
    --page-w: min(74vw, 900px);
    --page-h: min(49vw, 600px);
    --paper: #f4ecd4;
    --ink: #3a3326;
    --hand: #29456a;
    --label: #6a5f4c;
    --accent: #8a5a2b;
    --gold: #d8b25a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Special Elite', 'Courier New', monospace; }

.scene {
    position: relative; min-height: 100vh; overflow: hidden; background: #15110c;
}

/* ── Intro cinématique séquencée (bureau → grimoire → blason → famille) ── */
.intro-stills {
    position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden;
    transition: opacity 1.2s ease;
}
.intro-stills.gone { opacity: 0; pointer-events: none; }
/* Vidéo cinématique : couvre tout, au-dessus des images-repli */
.intro-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 55; opacity: 1; background: #000;
    transition: opacity 1.2s ease, transform 3s ease-in;
    will-change: transform, opacity;
}
.intro-stills.no-video .intro-video { display: none; }
/* 2e vidéo (on tourne la page) : cachée au début, au-dessus de la 1re */
.intro-video.v2 { z-index: 56; opacity: 0; transition: opacity .25s ease; }
.intro-stills.show-v2 .intro-video.v2 { opacity: 1; }
/* À la fin de la vidéo : on s'approche encore (zoom) sur la dernière image */
.intro-stills.video-zoom .intro-video { transform: scale(1.22); }
.intro-still {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04);
    transition: opacity 1.2s ease, transform 2.6s ease-out;
    will-change: opacity, transform;
}
/* L'image active : visible + lent travelling avant (la caméra s'approche) */
.intro-stills[data-step="0"] .s1,
.intro-stills[data-step="1"] .s2,
.intro-stills[data-step="2"] .s3,
.intro-stills[data-step="3"] .s4 {
    opacity: 1; transform: scale(1.12);
}
/* Dernière image (la famille) : zoom plus marqué = la page « devient » le site */
.intro-stills[data-step="3"] .s4 {
    transform: scale(1.2);
    transition: opacity 1.2s ease, transform 3s ease-in;
}
.skip-intro {
    position: fixed; bottom: 22px; right: 22px; z-index: 51;
    font-family: 'Special Elite', monospace; font-size: .82rem; color: #f3ead2;
    background: rgba(0,0,0,.5); border: 1px solid rgba(243,234,210,.45); border-radius: 999px;
    padding: 8px 16px; cursor: pointer; transition: opacity .4s ease;
}
.skip-intro:hover { background: rgba(0,0,0,.75); }
.skip-intro.gone { opacity: 0; pointer-events: none; }

/* ── Le monde (album posé sur le décor figé) ── */
.world {
    position: absolute; inset: 0; z-index: 1;
    transform-origin: 50% 56%;
    transform: scale(1.12) translateY(3%);
    opacity: 0; transition: opacity 1.2s ease;
}
.scene.revealed .world { opacity: 1; }
.world.reading { transform: scale(1.12) translateY(3%); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.desk {
    position: absolute; inset: -14%;
    background-image: url('/scrapbook/page-blank-flat.jpg');
    background-size: cover; background-position: center; z-index: 0;
}
.desk::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(58% 54% at 50% 54%, rgba(255,236,196,.16), rgba(0,0,0,.34) 72%, rgba(0,0,0,.62));
}

.stage {
    position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%);
    display: flex; justify-content: center; perspective: 2200px; z-index: 5;
}

/* Ombre de contact sur le bureau (le grimoire est posé) */
.desk-shadow {
    position: absolute; left: 50%; top: 92%; z-index: 0; pointer-events: none;
    width: calc(var(--page-w) * 1.12); height: calc(var(--page-h) * .34);
    transform: translate(-50%, -40%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);
    filter: blur(18px);
}

/* ── Grimoire ── */
.book {
    position: relative; width: var(--page-w); height: var(--page-h);
    transform-style: preserve-3d; transform-origin: center 60%;
    transform: rotateX(2deg);
}
.book.reading { transform: rotateX(2deg); }

/* épaisseur (pile de pages à droite et en bas) */
.book-thickness {
    position: absolute; top: -2px; left: 0;
    width: calc(100% + 20px); height: calc(100% + 17px);
    border-radius: 6px 12px 14px 6px;
    background: repeating-linear-gradient(0deg, #efe6cd, #efe6cd 2px, #d6c79f 3px, #efe6cd 4px);
    box-shadow: 18px 24px 46px rgba(0,0,0,.55);
    z-index: 0;
}

.leaf {
    position: absolute; inset: 0;
    transform-origin: left center; transform-style: preserve-3d;
    transition: transform 1.35s cubic-bezier(.52, .02, .22, 1), box-shadow 1.35s ease;
    cursor: pointer; z-index: 2;
}
.leaf.flipped { transform: rotateY(-172deg); box-shadow: 30px 0 60px rgba(0,0,0,.35); }
.leaf .turn-shade {
    position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, rgba(0,0,0,.45), rgba(0,0,0,0) 38%);
    transition: opacity .5s ease;
}
.leaf.turning .turn-shade { opacity: 1; }

.face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    overflow: hidden; border-radius: 6px 14px 14px 6px;
    box-shadow: 0 26px 70px rgba(30,24,12,.5);
}
.face.front::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; z-index: 6;
    background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
.face.back {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #efe6cd, #e7dcbe);
    border-radius: 14px 6px 6px 14px;
}
.face.back::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(transparent, transparent 30px, rgba(80,70,50,.08) 31px);
}

/* ── Pages ── */
.pg { position: absolute; inset: 0; padding: 28px 40px; }
.pg-paper {
    background:
        repeating-linear-gradient(transparent, transparent 33px, rgba(50,70,100,.10) 34px),
        linear-gradient(180deg, #f7efd8, #efe4c6);
    color: var(--ink); overflow: hidden;
}

/* Couverture grimoire */
.pg-cover {
    background: radial-gradient(130% 110% at 50% 0%, #6e4a2a, #4a3018 58%, #34220e);
    padding: 0;
}
.cover-frame {
    position: relative; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 22px;
    border: 13px solid transparent;
    border-image: linear-gradient(135deg, #caa24e, #6f5021, #e7c977, #8a6a2c) 1;
    box-shadow: inset 0 0 60px rgba(0,0,0,.45);
}
.cover-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 700;
    color: #f1d88e; font-size: clamp(1.5rem, 3.4vw, 2.6rem); letter-spacing: .04em;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.cover-photo-wrap { position: relative; display: inline-block; line-height: 0; }
.cover-photo {
    width: min(64%, 500px); aspect-ratio: 1/1.12; object-fit: cover;
    border: 7px solid #f3ead2; box-shadow: 0 14px 32px rgba(0,0,0,.6);
    cursor: pointer; transition: transform .3s;
}
.cover-photo:hover { transform: scale(1.02); }
/* Blason incrusté : plaque héraldique (ex-libris) apposée dans le cuir */
.cover-blason.embossed {
    position: absolute; right: -26px; bottom: -24px;
    width: clamp(110px, 28%, 184px);
    padding: 6px; background: rgba(243,234,210,.9);
    border: 3px solid #b88c3c;
    box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,90,40,.5);
    filter: sepia(.3) saturate(1.2) contrast(1.05);
    transform: rotate(-3deg);
    pointer-events: none;
}
.cover-motto {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
    color: #e7c977; letter-spacing: .22em; text-transform: uppercase; font-size: 1rem;
    margin-top: 26px; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.cover-hint {
    font-family: 'Caveat', cursive; color: #ecd296; font-size: 1.3rem;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Intro */
.pg-kicker { font-family: 'Caveat', cursive; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--hand); margin-bottom: 14px; }
.intro-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
.intro-text p { font-family: 'Special Elite', monospace; font-size: clamp(.78rem, 1.15vw, .95rem); line-height: 1.75; margin-bottom: 11px; color: #463f2f; }
.intro-text em { color: var(--hand); }
.intro-text strong { color: var(--accent); }
.intro-aside { border-left: 2px dashed rgba(90,80,60,.4); padding-left: 22px; text-align: center; }
.intro-aside .aside-blason { width: clamp(120px, 60%, 170px); margin-bottom: 10px; filter: sepia(.15); }
.blason-explain { font-family: 'Special Elite', monospace; font-size: clamp(.72rem, 1vw, .85rem); line-height: 1.6; color: #463f2f; text-align: left; }
.blason-explain strong { color: var(--hand); }
.blason-motto { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--accent); letter-spacing: .06em; margin: 10px 0 2px; }
.blason-trad { font-family: 'Caveat', cursive; font-size: 1.15rem; color: var(--label); }
.turn-hint { font-family: 'Caveat', cursive; color: var(--label); font-size: 1.2rem; margin-top: 14px; text-align: center; }

/* Fiche membre */
.pg-member { padding: 24px 38px; }
.member-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; height: 100%; }
.photo-wall { position: relative; }
.photo-wall .polaroid { position: absolute; display: block; background: #fff; padding: 8px 8px 22px; box-shadow: 0 8px 20px rgba(0,0,0,.32); }
.photo-wall .polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-wall .p0 { width: 42%; aspect-ratio: 4/5; top: 2%;  left: 4%;  transform: rotate(-4deg); z-index: 3; }
.photo-wall .p1 { width: 40%; aspect-ratio: 4/5; top: 6%;  right: 3%; transform: rotate(3.5deg); z-index: 2; }
.photo-wall .p2 { width: 38%; aspect-ratio: 4/5; bottom: 3%; left: 8%; transform: rotate(2.5deg); z-index: 4; }
.photo-wall .p3 { width: 37%; aspect-ratio: 4/5; bottom: 5%; right: 6%; transform: rotate(-3deg); z-index: 3; }
.photo-wall .p4 { width: 34%; aspect-ratio: 1/1; top: 40%; left: 36%; transform: rotate(6deg); z-index: 5; }

.member-info { display: flex; flex-direction: column; overflow: hidden; }
.member-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.member-first { font-family: 'Special Elite', monospace; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: .1em; color: #2f2a1f; }
.coin { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6c878, #9c7424); box-shadow: 0 2px 4px rgba(0,0,0,.4); flex: none; }
.star { color: #e7b53b; font-size: 1.5rem; }
.star::before { content: "★"; }
.fiche { font-family: 'Special Elite', monospace; }
.fiche-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed rgba(90,80,60,.3); }
.fiche-row dt { color: var(--label); white-space: nowrap; text-transform: uppercase; font-size: clamp(.6rem, .85vw, .72rem); }
.fiche-row dd { font-family: 'Caveat', cursive; font-size: clamp(1.1rem, 1.7vw, 1.5rem); color: var(--hand); line-height: 1.05; }
.fiche-row:not(.filled) dd { flex: 1; border-bottom: 1px dotted rgba(90,80,60,.4); align-self: stretch; min-height: 1px; }
.fiche-bio { margin-top: 12px; overflow: auto; }
.fiche-bio p { font-family: 'Caveat', cursive; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--hand); margin-bottom: 6px; }
.member-more { margin-top: auto; padding-top: 12px; font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--accent); text-decoration: none; }

/* Origines */
.origins-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; height: 100%; align-items: center; }
.sosa-thumb { display: block; background: #fff; padding: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.3); border-radius: 4px; max-height: 100%; }
.sosa-thumb img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.origins-text p { font-family: 'Special Elite', monospace; font-size: clamp(.8rem, 1.2vw, .98rem); line-height: 1.8; color: #463f2f; margin-bottom: 14px; }
.origins-text strong { color: var(--hand); }
.origins-links { display: flex; gap: 18px; flex-wrap: wrap; }
.origins-links a { font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--hand); text-decoration: none; }

/* Fin */
.pg-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pg-end p { font-family: 'Special Elite', monospace; font-size: clamp(.85rem, 1.2vw, 1rem); line-height: 1.7; color: #463f2f; margin-bottom: 14px; max-width: 640px; }
.end-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
.end-links a { font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--hand); text-decoration: none; background: rgba(255,255,255,.5); border: 1px solid rgba(90,80,60,.25); border-radius: 10px; padding: 10px 18px; }
.end-links a:hover { background: rgba(255,255,255,.85); }
.end-note { font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--label); }

/* ── Interface ── */
.progress { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 30; }
.progress .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.3); cursor: pointer; transition: background .2s, transform .2s; }
.progress .dot.active { background: var(--gold); transform: scale(1.35); }

.controls { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 30; }
.ctl { font-family: 'Special Elite', monospace; font-size: 1rem; color: #2b2b2b; min-width: 46px; background: rgba(245,236,212,.94); border: 1px solid #b9a87f; border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.ctl:hover { background: #fff; }
.ctl:disabled { opacity: .4; cursor: default; }

.music-btn { position: fixed; top: 18px; right: 18px; z-index: 30; font-family: 'Special Elite', monospace; font-size: .82rem; color: #2b2b2b; background: rgba(245,236,212,.94); border: 1px solid #b9a87f; border-radius: 999px; padding: 9px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.music-btn .note { font-size: 1.1rem; }
.music-btn.playing { color: #8a5a2b; border-color: #8a5a2b; }
.music-btn.playing .note { animation: bob .8s infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (max-width: 760px) {
    :root { --page-w: 92vw; --page-h: 132vw; }
    .member-grid, .intro-cols, .origins-grid { grid-template-columns: 1fr; gap: 14px; }
    .photo-wall { height: 46vw; }
    .music-label { display: none; }
}

/* ── Footer maillage (liens internes + réseau du groupe) ── */
.ft { position: relative; z-index: 20; background: #1a140d; color: #d9cdb4; border-top: 3px solid #8a5a2b; font-family: 'Cormorant Garamond', Georgia, serif; }
.ft-wrap { max-width: 1100px; margin: 0 auto; padding: 44px 24px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft-h { font-size: 1.15rem; letter-spacing: .04em; color: #e6d6a8; margin: 0 0 14px; font-weight: 600; }
.ft-col a { color: #d9cdb4; text-decoration: none; display: block; padding: 3px 0; transition: color .2s; }
.ft-col a:hover { color: #f2e4bd; text-decoration: underline; }
.ft-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
.ft-links li { break-inside: avoid; }
.ft-about p { margin: 0 0 10px; line-height: 1.5; font-size: 1.02rem; color: #cabfa6; }
.ft-by { font-size: .92rem; color: #a8987a; }
.ft-legal { border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding: 14px; font-size: .85rem; color: #8f8161; }
@media (max-width: 720px) { .ft-wrap { grid-template-columns: 1fr; gap: 24px; } .ft-links { columns: 2; } }