:root {
    --ink: #26150c;
    --cream: #f4dfb1;
    --gold: #e3ba6b;
    --facade-h: 96dvh;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    background:
        linear-gradient(rgba(28,15,8,.08), rgba(28,15,8,.30)),
        url('assets/background-village.png') center / cover no-repeat fixed;
}
img { display: block; }
a { color: inherit; }

.viewport {
    position: relative;
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* ==========================================================
   V6 : aucune déformation d'image.
   Le groupe central garde toujours le ratio 3:2.
   Il est dimensionné en priorité par la HAUTEUR de l'écran.
   Sur écran large, les côtés + le toit prolongent le bâtiment.
   ========================================================== */
.facade {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    height: var(--facade-h);
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%);
    overflow: visible;
    isolation: isolate;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.34));
}

.asset {
    position: absolute;
    max-width: none;
    height: auto;
    user-select: none;
    pointer-events: none;
}

/* Toit plein écran : ratio naturel 1672x941 (presque 16:9). */
.roof-wide {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: -23dvh;
    width: max(100vw, 178dvh);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 10px 10px rgba(25,11,4,.22));
}

/* Soubassement indépendant : largeur d'écran, ratio conservé. */
.base-wide {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: -23dvh;
    width: max(100vw, 170dvh);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

/* Fenêtres / porte. On ne fixe qu'une largeur : la hauteur reste naturelle. */
.insert { z-index: 2; }
.insert-left  { width: 22.6%; left: 15.1%; top: 43.9%; }
.insert-door  { width: 23.6%; left: 38.2%; top: 42.1%; }
.insert-right { width: 22.6%; right: 15.1%; top: 43.9%; }

/* Les montants latéraux dépassent légèrement du groupe pour raccorder aux bords. */
.side {
    z-index: 2;
    height: 74%;
    width: auto;
    top: 24%;
}
.side-left  { left: -17.2%; }
.side-right { right: -17.2%; }

/* L'ossature est déjà exactement au ratio 3:2 : pas de déformation. */
.frame {
    z-index: 4;
    inset: 0;
    width: 100%;
    height: auto;
}

.portrait-photo {
    position: absolute;
    z-index: 5;
    left: 45.3%;
    top: 5.2%;
    width: 9.4%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #6d482b;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: clamp(.4rem, .68vw, .7rem);
    background: radial-gradient(circle at 50% 35%, #efdfbd, #c6975f 72%);
    box-shadow: inset 0 0 20px rgba(0,0,0,.42);
}
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; }
.oculus {
    z-index: 6;
    width: 14.7%;
    left: 42.65%;
    top: 2.25%;
}

.main-sign {
    position: absolute;
    z-index: 7;
    left: 27.25%;
    top: 23.8%;
    width: 45.5%;
    pointer-events: none;
    filter: drop-shadow(0 7px 5px rgba(27,12,4,.24));
}
.main-sign > img {
    width: 100%;
    height: auto;
}
.main-sign-copy {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 34%;
    bottom: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.main-sign h1 {
    margin: 0;
    font-size: clamp(1rem, 2.7vw, 2.7rem);
    line-height: .95;
    font-variant: small-caps;
    letter-spacing: .035em;
}
.main-sign p {
    margin: .38em 0 0;
    font-size: clamp(.32rem, .62vw, .64rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.main-nav {
    position: absolute;
    z-index: 8;
    left: 18.3%;
    right: 18.3%;
    top: 43.15%;
    height: 4.2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
}
.main-nav a {
    position: relative;
    padding: .3em .18em;
    color: #f4d8a0;
    font-size: clamp(.4rem, .76vw, .78rem);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .055em;
    text-shadow: 0 2px 2px #2f170a;
    white-space: nowrap;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 15%; right: 15%; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .18s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }
.main-nav a:focus-visible { outline: 2px solid #e9bd70; outline-offset: 2px; }

.window-content {
    position: absolute;
    z-index: 8;
    top: 60.4%;
    width: 16.7%;
    height: 18.2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    text-align: center;
    overflow: hidden;
}
.window-left  { left: 16.1%; }
.window-right { right: 16.1%; }
.window-content h2 {
    margin: 0 0 .42em;
    font-size: clamp(.64rem, .95vw, 1.02rem);
    line-height: 1;
    text-transform: uppercase;
}
.window-content p,
.window-content blockquote {
    margin: 0 0 .65em;
    font-size: clamp(.36rem, .56vw, .6rem);
    line-height: 1.34;
}
.window-content blockquote { font-style: italic; }
.window-content a {
    margin-top: auto;
    padding: .4em .68em;
    color: #efd7aa;
    background: linear-gradient(#744323, #492715);
    border: 1px solid #2d160b;
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(.3rem, .46vw, .48rem);
    letter-spacing: .05em;
}

.door-content {
    position: absolute;
    z-index: 8;
    left: 44.5%;
    top: 70.5%;
    width: 11%;
    min-height: 7.4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}
.door-content strong {
    font-size: clamp(.48rem, .76vw, .84rem);
    letter-spacing: .065em;
}
.door-content span {
    margin-top: .22em;
    font-size: clamp(.29rem, .44vw, .48rem);
    line-height: 1.2;
}

.side-sign {
    position: absolute;
    z-index: 9;
    left: -4.8%;
    top: 50%;
    height: 28%;
    width: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.2));
}
.side-sign img {
    height: 100%;
    width: auto;
}
.side-sign p {
    position: absolute;
    left: 28%;
    right: 13%;
    top: 44%;
    margin: 0;
    font-size: clamp(.28rem, .44vw, .46rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.stats {
    position: absolute;
    z-index: 9;
    left: 33.5%;
    right: 33.5%;
    top: 89.3%;
    min-height: 7%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: .15rem;
    color: #efd39b;
    text-align: center;
    text-shadow: 0 2px 2px #2d160a;
}
.stat strong {
    display: block;
    font-size: clamp(.5rem, .86vw, .94rem);
    line-height: 1;
}
.stat span {
    display: block;
    margin-top: .25em;
    font-size: clamp(.2rem, .36vw, .4rem);
    line-height: 1.1;
    text-transform: uppercase;
}

/* Écrans très larges : la façade centrale est dimensionnée par la hauteur,
   les côtés du bâtiment et le toit occupent le surplus horizontal. */
@media (min-aspect-ratio: 2/1) {
    :root { --facade-h: 98dvh; }
    .side-left  { left: -21%; }
    .side-right { right: -21%; }
}

/* Tablettes paysage / petits ordinateurs. */
@media (max-width: 980px) {
    :root { --facade-h: 94dvh; }
    .side-sign { display: none; }
    .main-nav { left: 13%; right: 13%; }
    .window-content p,
    .window-content blockquote { display: none; }
    .window-content a { margin-top: .3em; }
}

/* Portrait : le groupe reste non déformé et remplit la hauteur.
   Les ailes latérales peuvent être recadrées par le viewport, ce qui est
   préférable à étirer les images. */
@media (orientation: portrait) {
    :root { --facade-h: 100dvh; }
    .roof-wide {
        width: max(178dvh, 165vw);
        top: -16dvh;
    }
    .base-wide {
        width: max(170dvh, 160vw);
        bottom: -22dvh;
    }
    .side { display: none; }
    .side-sign { display: none; }
    .main-sign { width: 49%; left: 25.5%; }
    .main-nav {
        left: 20%;
        right: 20%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0 8px;
    }
    .window-content p,
    .window-content blockquote { display: none; }
}

@media (max-width: 620px) and (orientation: portrait) {
    .main-sign h1 { font-size: clamp(.9rem, 4vw, 1.35rem); }
    .main-sign p { font-size: clamp(.26rem, 1vw, .4rem); }
    .main-nav a { font-size: clamp(.3rem, 1.25vw, .46rem); }
    .window-content h2 { font-size: clamp(.46rem, 1.8vw, .65rem); }
    .window-content a { font-size: clamp(.22rem, .85vw, .32rem); padding: .35em .45em; }
    .door-content strong { font-size: clamp(.34rem, 1.35vw, .5rem); }
    .door-content span { font-size: clamp(.22rem, .8vw, .3rem); }
    .stats { left: 37%; right: 37%; }
    .stat strong { font-size: clamp(.3rem, 1.2vw, .46rem); }
    .stat span { font-size: clamp(.14rem, .55vw, .22rem); }
}