/* ==========================================================================
   La Providence — V2 « diorama de papier »
   Dehors il fait froid (bleus d'ardoise, neige), dedans il fait chaud
   (braise, bois, laine rouge). Chaque section est une feuille découpée
   posée sur la précédente.
   ========================================================================== */

@font-face {
    font-family: 'Caprasimo';
    src: url('../fonts/caprasimo-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-italic-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Palette */
    --night: #1C2541;       /* ardoise de nuit */
    --night-2: #26305A;
    --night-3: #333F70;
    --snow: #F1F4FA;        /* papier neige */
    --snow-2: #E7ECF5;
    --frost: #D3DCEA;       /* ombres de neige */
    --ember: #F2A93B;       /* braise, fenêtres éclairées */
    --ember-soft: #FFD58A;
    --red: #B8352B;         /* laine rouge */
    --red-deep: #8E251E;
    --fir: #1F4B45;         /* sapin */
    --kraft: #C9A77C;       /* papier kraft */
    --kraft-deep: #A9845A;
    --honey: #FBF1E0;       /* papier à lettre chaud */
    --bark: #3B2A22;
    --ink: #1C2541;
    --ink-soft: #46506F;

    --font-display: 'Caprasimo', 'Georgia', serif;
    --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --wrap: 1180px;
    --gutter: clamp(20px, 5vw, 48px);
    --section-y: clamp(72px, 9vw, 128px);

    --paper-shadow: 0 1px 1px rgba(28, 37, 65, .10), 0 10px 22px -12px rgba(28, 37, 65, .45);
    --paper-shadow-lift: 0 2px 2px rgba(28, 37, 65, .10), 0 22px 36px -16px rgba(28, 37, 65, .5);
    --edge-shadow: drop-shadow(0 -6px 8px rgba(28, 37, 65, .16));

    --grain: url('../img/paper-grain.png');
    --ease-pop: cubic-bezier(.2, .9, .25, 1.12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}
body {
    margin: 0;
    min-height: 100vh;
    background: var(--snow);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
@supports (overflow-x: clip) {
    body { overflow-x: clip; }
}
img, svg { display: block; max-width: 100%; }
.icon {
    display: inline-block;
    flex: none;
    width: 1.2em;
    height: 1em;
    fill: currentColor;
    vertical-align: -.14em;
    overflow: visible;
}
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
strong { font-weight: 700; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip {
    position: fixed;
    left: 12px; top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--ember);
    color: var(--night);
    font-weight: 700;
    border-radius: 10px;
    transition: top .2s;
}
.skip:focus { top: 12px; }

:focus-visible {
    outline: 3px solid var(--ember);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    width: min(var(--wrap), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.h2 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -.005em;
    color: var(--night);
    text-wrap: balance;
}
.h3 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    line-height: 1.2;
    color: var(--night);
}
.section-head {
    max-width: 44rem;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head .h2 { margin-bottom: .45em; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin: 0; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Boutons en papier (épaisseur visible, s'enfoncent au clic)
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--snow);
    --btn-fg: var(--night);
    --btn-edge: #B9C3D6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .82em 1.35em;
    border: 0;
    border-radius: 12px;
    background: var(--btn-bg) var(--grain);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--btn-edge), 0 10px 18px -10px rgba(10, 14, 36, .55);
    transform: translateY(0);
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge), 0 14px 22px -12px rgba(10, 14, 36, .6); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-edge), 0 4px 8px -6px rgba(10, 14, 36, .5); }
.btn[disabled], .btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    box-shadow: 0 3px 0 var(--btn-edge);
}
.btn--red { --btn-bg: var(--red); --btn-fg: #FFF8F0; --btn-edge: var(--red-deep); }
.btn--red:hover { --btn-bg: #C23C31; }
.btn--paper { --btn-bg: #F7F4EC; --btn-fg: var(--night); --btn-edge: #C9C0AC; }
.btn--sm { padding: .62em 1.05em; font-size: .95rem; border-radius: 10px; }
.btn .icon { width: 1.1em; }

.linklike {
    border: 0;
    padding: 0;
    background: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Barre de navigation
   -------------------------------------------------------------------------- */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    color: #FBF4E6;
    transition: background-color .35s, color .35s, box-shadow .35s;
}
.topbar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1320px, 100% - 2 * var(--gutter));
    margin-inline: auto;
    height: 76px;
}
.topbar.is-scrolled {
    background: rgba(241, 244, 250, .97) var(--grain);
    color: var(--night);
    box-shadow: 0 1px 0 rgba(28, 37, 65, .08), 0 10px 24px -18px rgba(28, 37, 65, .6);
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .topbar.is-scrolled { background-color: rgba(241, 244, 250, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.brand__mark { width: 42px; height: 32px; color: currentColor; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1;
    white-space: nowrap;
}

.menu { margin-left: auto; }
.menu__list { display: flex; gap: 4px; }
.menu__list a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    white-space: nowrap;
    opacity: .92;
    position: relative;
}
.menu__list a:hover { opacity: 1; }
.menu__list a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 3px;
    height: 3px;
    border-radius: 3px;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.menu__list a:hover::after,
.menu__list a[aria-current="true"]::after { transform: scaleX(1); }
.menu__extra { display: none; }

.topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
}
.topbar__phone:hover { background: rgba(255, 255, 255, .12); }
.topbar.is-scrolled .topbar__phone:hover { background: rgba(28, 37, 65, .07); }

.burger {
    display: none;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    position: relative;
}
.topbar.is-scrolled .burger { background: rgba(28, 37, 65, .08); }
.burger span {
    position: absolute;
    left: 12px; right: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s, opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1360px) {
    .topbar__phone span { display: none; }
}
@media (max-width: 1260px) {
    .menu__list a { padding-inline: 9px; }
    .menu__list a::after { left: 9px; right: 9px; }
}
@media (max-width: 1140px) {
    .burger { display: block; }
    .topbar__cta { display: none; }
    .menu {
        position: fixed;
        inset: 0 0 auto 0;
        top: 0;
        padding: 96px var(--gutter) 32px;
        background: var(--snow) var(--grain);
        color: var(--night);
        box-shadow: 0 30px 50px -30px rgba(10, 14, 36, .6);
        transform: translateY(-105%);
        visibility: hidden;
        transition: transform .45s var(--ease-pop), visibility 0s .45s;
        z-index: -1;
        max-height: 100vh;
        overflow-y: auto;
    }
    .menu::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -18px;
        height: 20px;
        background: var(--snow);
        -webkit-mask: radial-gradient(12px 10px at 12px 0, #000 98%, transparent) 0 0 / 24px 20px repeat-x;
        mask: radial-gradient(12px 10px at 12px 0, #000 98%, transparent) 0 0 / 24px 20px repeat-x;
    }
    .menu.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform .45s var(--ease-pop), visibility 0s;
    }
    .menu__list { flex-direction: column; gap: 2px; }
    .menu__list a {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 1.6rem;
        padding: 8px 0;
    }
    .menu__list a::after { left: 0; right: auto; width: 60px; bottom: 6px; }
    .menu__extra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 22px;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 2px dashed var(--frost);
    }
    .menu__phone { font-weight: 700; text-decoration: none; }
    body.menu-open .topbar { color: var(--night); }
    body.menu-open .burger { background: rgba(28, 37, 65, .08); }
}

/* --------------------------------------------------------------------------
   Héros : le diorama
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    max-height: 1300px;
    overflow: hidden;
    color: #FBF4E6;
    isolation: isolate;
    background: var(--night);
}
.hero__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(26% 34% at 88% 16%, rgba(255, 244, 214, .14), transparent 70%),
        radial-gradient(60% 34% at 22% 100%, rgba(255, 170, 110, .08), transparent 70%),
        linear-gradient(180deg, #05091A 0%, #0A1130 24%, #121B44 46%, #1D275A 64%, #2C3670 80%, #3A4583 100%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background: var(--grain);
    opacity: .6;
}

/* Scène : 7 feuilles de papier. Chaque feuille porte une « scène » au format 16/9
   (coordonnées 1600 x 900) : un dessin fixe + de petits objets animés. */
.scene {
    position: absolute;
    inset: 0;
    container-type: size;
    --fir-dark: #0B1F28;
    --fir-light: #173A4B;
    --fir-snow: #D3DBF3;
    --fir-snow-shade: #8793C4;
    --fir-mound: #A7B2DB;
    --fir-trunk: #1E1410;
    --fir-trunk-lit: #3A2519;
}
.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}
.stage {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    translate: -50% 0;
    transform-origin: 50% 100%;
}
@supports (width: 1cqh) {
    /* Plus large que l'écran sur mobile, recadrée sur le chalet grâce à --scene-shift */
    .stage {
        width: max(100cqw, 177.78cqh);
        translate: var(--scene-shift, -50%) 0;
    }
}
.stage > .art,
.stage > .life {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
    user-select: none;
}
.obj {
    position: absolute;
    left: calc(var(--x) * 100% / 1600);
    top: calc(var(--y) * 100% / 900);
    width: calc(var(--w) * 100% / 1600);
    height: calc(var(--h) * 100% / 900);
    overflow: visible;
    filter: drop-shadow(0 -2px 4px rgba(4, 7, 22, .45));
}
.layer--sky    { z-index: 1; }
.layer--far    { z-index: 2; }
.layer--mid    { z-index: 4; }
.layer--near   { z-index: 5; }
.layer--forest { z-index: 6; }
.layer--hill   { z-index: 7; }
.layer--front  { z-index: 8; }

/* L'ombre portée de chaque feuille sur la précédente */
.layer--far .art    { filter: drop-shadow(0 -2px 5px rgba(3, 6, 20, .35)); }
.layer--mid .art    { filter: drop-shadow(0 -3px 7px rgba(3, 6, 20, .42)); }
.layer--near .art   { filter: drop-shadow(0 -4px 8px rgba(3, 6, 20, .45)); }
.layer--forest .art { filter: drop-shadow(0 -4px 8px rgba(3, 6, 20, .45)); }
.layer--hill .art   { filter: drop-shadow(0 -6px 10px rgba(3, 6, 20, .42)); }
.layer--front .art  { filter: drop-shadow(0 -8px 14px rgba(3, 6, 20, .45)); }
.obj.chalet { filter: none; }
.obj.cloud, .obj.moon { filter: none; }
.chalet-sign { font-family: var(--font-display); font-size: 12.5px; fill: #F3E2C3; }

.hero__copy {
    position: relative;
    z-index: 9;
    width: min(800px, 100% - 2 * var(--gutter));
    margin-left: max(var(--gutter), calc((100% - 1180px) / 2));
    padding-top: clamp(104px, 17vh, 180px);
}
.hero__title { display: block; }
.hero__name {
    display: block;
    font-family: var(--font-display);
    /* le nom tient toujours sur une ligne */
    font-size: min(clamp(3.1rem, 1.4rem + 5.6vw, 6.6rem), calc((100vw - 2 * var(--gutter)) / 7.4));
    line-height: .92;
    white-space: nowrap;
    letter-spacing: -.01em;
    color: #FFF7EA;
    text-shadow:
        0 1px 0 #E9DAC0,
        0 2px 0 #DCCAAA,
        0 3px 0 #CDB895,
        0 4px 0 #BFA985,
        0 12px 22px rgba(6, 8, 28, .5);
}
.hero__kicker {
    display: block;
    margin-top: .8em;
    font-weight: 700;
    font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem);
    color: #FFE3B3;
    text-shadow: 0 1px 12px rgba(6, 8, 28, .45);
}
.hero__lede {
    max-width: 35em;
    margin: .9em 0 0;
    font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
    color: rgba(255, 250, 240, .9);
    text-shadow: 0 1px 10px rgba(6, 8, 28, .5);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-top: 26px;
}
.hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255, 250, 240, .92);
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(6, 8, 28, .5);
}
.hero__rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.stars { display: inline-flex; gap: 1px; color: var(--ember); font-size: .85em; }
.stars .icon { width: 1.05em; }

.snowfall {
    position: absolute;
    inset: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero__scroll {
    position: absolute;
    z-index: 13;
    left: 50%;
    bottom: 58px;
    width: 46px; height: 46px;
    margin-left: -23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--night);
    background: rgba(255, 255, 255, .7);
    box-shadow: var(--paper-shadow);
    animation: nudge 2.4s ease-in-out infinite;
}
.hero__scroll svg { width: 24px; height: 24px; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --------------------------------------------------------------------------
   Vie du décor : vent, fumée, lumières, animaux
   -------------------------------------------------------------------------- */
/* Le vent dans les sapins : chaque arbre oscille depuis son pied, à son rythme */
.sway {
    transform-origin: 50% 100%;
    animation: sway var(--sd, 6s) ease-in-out var(--sdl, 0s) infinite;
}
@keyframes sway {
    0%, 100% { transform: rotate(calc(var(--sa, 1) * -.5deg)); }
    22%      { transform: rotate(calc(var(--sa, 1) * 1.3deg)); }
    38%      { transform: rotate(calc(var(--sa, 1) * .7deg)); }
    58%      { transform: rotate(calc(var(--sa, 1) * 2.1deg)); }
    76%      { transform: rotate(calc(var(--sa, 1) * .3deg)); }
}
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud--b { animation-duration: 52s; animation-delay: -20s; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(46px); } }

.smoke .puff {
    fill: #C9D1EC;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: puff 7.2s linear infinite;
}
.smoke .puff:nth-child(2) { animation-delay: -1.2s; }
.smoke .puff:nth-child(3) { animation-delay: -2.4s; }
.smoke .puff:nth-child(4) { animation-delay: -3.6s; }
.smoke .puff:nth-child(5) { animation-delay: -4.8s; }
.smoke .puff:nth-child(6) { animation-delay: -6s; }
@keyframes puff {
    0%   { opacity: 0;   transform: translate(0, 0) scale(.55); }
    10%  { opacity: .8; }
    55%  { opacity: .42; }
    100% { opacity: 0;   transform: translate(64px, -118px) scale(3.1); }
}
.spindrift {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: spindrift 7s ease-out var(--dl, 0s) infinite;
}
@keyframes spindrift {
    0%   { opacity: 0;   transform: translateX(0) scaleX(.3); }
    25%  { opacity: .32; }
    100% { opacity: 0;   transform: translateX(40px) scaleX(1.4); }
}
.twinkle { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .4; } }

/* Fenêtres, lanternes, guirlande */
.chalet-art .glow { animation: glow 5s ease-in-out infinite; }
.chalet-art .glow:nth-of-type(2n) { animation-delay: -2.1s; }
@keyframes glow { 0%, 100% { opacity: .78; } 30% { opacity: .92; } 55% { opacity: .7; } 80% { opacity: .88; } }
.lantern-glow { animation: lantern 3.2s ease-in-out infinite; }
.lantern:nth-child(2n) .lantern-glow { animation-delay: -1.3s; }
@keyframes lantern { 0%, 100% { opacity: .9; } 40% { opacity: .65; } 60% { opacity: 1; } 75% { opacity: .75; } }
.bulb { animation: bulb 2.6s ease-in-out infinite; }
.bulb:nth-child(3n) { animation-delay: -.9s; }
.bulb:nth-child(3n+1) { animation-delay: -1.7s; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Le drapeau du château claque au vent */
.flag-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: flag .9s ease-in-out infinite alternate; }
@keyframes flag { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.04); } }

/* Gypaète : battements d'ailes entre deux vols planés */
.gyp-wing { transform-box: fill-box; animation: flap-l 4.6s ease-in-out infinite; }
.gyp-wing-l { transform-origin: 100% 45%; }
.gyp-wing-r { transform-origin: 0 45%; animation-name: flap-r; }
@keyframes flap-l {
    0%, 52%, 100% { transform: rotate(0); }
    58% { transform: rotate(18deg); } 64% { transform: rotate(-12deg); }
    70% { transform: rotate(16deg); } 76% { transform: rotate(-9deg); } 82% { transform: rotate(4deg); }
}
@keyframes flap-r {
    0%, 52%, 100% { transform: rotate(0); }
    58% { transform: rotate(-18deg); } 64% { transform: rotate(12deg); }
    70% { transform: rotate(-16deg); } 76% { transform: rotate(9deg); } 82% { transform: rotate(-4deg); }
}
.chough-wing { transform-box: fill-box; transform-origin: 100% 100%; animation: chough .36s ease-in-out infinite alternate; }
.chough-wing--front { transform-origin: 0 100%; animation-name: chough-f; }
@keyframes chough { from { transform: rotate(-24deg); } to { transform: rotate(26deg); } }
@keyframes chough-f { from { transform: rotate(24deg); } to { transform: rotate(-26deg); } }

/* Renard : queue, oreilles, paupière */
.fox-tail { transform-box: fill-box; transform-origin: 88% 30%; animation: fox-tail 4.4s ease-in-out infinite; }
@keyframes fox-tail { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } 55% { transform: rotate(4deg); } 70% { transform: rotate(-3deg); } }
.fox-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: ear 5.3s ease-in-out infinite; }
.fox-ear-back { animation-delay: -2.2s; }
@keyframes ear { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-16deg); } 90% { transform: rotate(5deg); } 93% { transform: rotate(-9deg); } }
.fox-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: blink 4.6s linear infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.fox-head { transform-box: fill-box; transform-origin: 20% 90%; animation: fox-look 10s ease-in-out infinite; }
@keyframes fox-look { 0%, 58%, 100% { transform: rotate(0); } 64%, 82% { transform: rotate(-7deg); } 88% { transform: rotate(2deg); } }

/* Isards : tête qui guette, queue, oreille */
.isard-head { transform-box: fill-box; transform-origin: 85% 95%; animation: isard-look 8.5s ease-in-out infinite; }
.isard--young .isard-head { animation-duration: 6.2s; animation-delay: -2.4s; }
@keyframes isard-look { 0%, 44%, 100% { transform: rotate(0); } 50%, 68% { transform: rotate(9deg); } 74% { transform: rotate(-4deg); } 80% { transform: rotate(0); } }
.isard-tail { transform-box: fill-box; transform-origin: 0 50%; animation: tail-flick 3.8s ease-in-out infinite; }
@keyframes tail-flick { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-28deg); } 95% { transform: rotate(10deg); } }
.isard-ear { transform-box: fill-box; transform-origin: 0 100%; animation: ear 4.9s ease-in-out -1.1s infinite; }

/* Lièvre, chouette, biche, bonhomme de neige, luge */
.hare-ear { transform-box: fill-box; transform-origin: 40% 100%; animation: ear 6.1s ease-in-out infinite; }
.hare-ear-back { animation-delay: -3.3s; }
.hare-nose { transform-box: fill-box; transform-origin: center; animation: nose 1.1s ease-in-out infinite; }
@keyframes nose { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.owl-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: blink 5.4s linear -1.3s infinite; }
.owl-head { transform-box: fill-box; transform-origin: 50% 90%; animation: owl-look 11s ease-in-out infinite; }
@keyframes owl-look { 0%, 40%, 100% { transform: rotate(0); } 46%, 60% { transform: rotate(-16deg); } 66%, 80% { transform: rotate(12deg); } 86% { transform: rotate(0); } }
.deer-neck { transform-box: fill-box; transform-origin: 6% 92%; animation: graze 12s ease-in-out infinite; }
@keyframes graze { 0%, 34%, 92%, 100% { transform: rotate(34deg); } 42%, 78% { transform: rotate(0); } }
.deer-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: ear 4.2s ease-in-out -2s infinite; }
.deer-tail { transform-box: fill-box; transform-origin: 100% 0; animation: tail-flick 5s ease-in-out -1s infinite; }
.scarf-tail { transform-box: fill-box; transform-origin: 20% 0; animation: scarf 1.3s ease-in-out infinite alternate; }
@keyframes scarf { from { transform: rotate(-4deg) skewX(4deg); } to { transform: rotate(9deg) skewX(-6deg); } }
.kid-scarf { transform-box: fill-box; transform-origin: 0 50%; animation: scarf .35s ease-in-out infinite alternate; }

.hero.is-paused *,
.hero.is-paused *::before,
.hero.is-paused *::after { animation-play-state: paused !important; }

/* Ouverture façon livre animé : chaque feuille se déplie depuis sa base */
.js .hero .stage,
.js .hero__copy > * {
    transition: transform 1.1s var(--ease-pop), opacity .7s ease;
}
.is-loading .hero .stage {
    transform: perspective(1400px) rotateX(78deg);
    opacity: 0;
}
.is-loading .hero__copy > * {
    transform: translateY(18px);
    opacity: 0;
}
.js .hero .layer--sky .stage    { transition-delay: 0s; }
.js .hero .layer--far .stage    { transition-delay: .08s; }
.js .hero .layer--mid .stage    { transition-delay: .18s; }
.js .hero .layer--near .stage   { transition-delay: .28s; }
.js .hero .layer--forest .stage { transition-delay: .38s; }
.js .hero .layer--hill .stage   { transition-delay: .5s; }
.js .hero .layer--front .stage  { transition-delay: .62s; }
.js .hero__copy > :nth-child(1) { transition-delay: .55s; }
.js .hero__copy > :nth-child(2) { transition-delay: .68s; }
.js .hero__copy > :nth-child(3) { transition-delay: .78s; }
.js .hero__copy > :nth-child(4) { transition-delay: .86s; }

@media (max-width: 760px) {
    .hero { min-height: 640px; }
    .hero__copy { padding-top: 96px; }
    .scene { top: auto; height: 62%; }
    .stage { --scene-shift: -69%; }
    .hero__actions { gap: 10px; margin-top: 22px; }
    .hero__actions .btn { flex: 1 1 auto; padding-inline: 1em; }
    .hero__lede { font-size: .97rem; }
    .hero__rating { margin-top: 16px; }
    .cloud, .layer--sky .life { display: none; }
    /* la lune se place dans le ciel libre, sous les boutons, au-dessus des sommets */
    .moon { --x: 1236 !important; --y: 190 !important; --w: 150 !important; --h: 150 !important; }
}
@media (max-width: 420px) {
    .hide-sm { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
    .hero__lede { display: none; }
}
@media (min-width: 761px) and (max-height: 760px) {
    .hero__copy { padding-top: 96px; }
    .hero__name { font-size: clamp(3rem, 1rem + 5.4vw, 5.8rem); }
    .hero__lede { margin-top: .6em; }
    .hero__actions { margin-top: 18px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .stage { --scene-shift: -54%; }
}
/* Écrans très larges : le haut du ciel est rogné, la lune descend au-dessus des sommets */
@media (min-aspect-ratio: 2/1) {
    .moon { --x: 1390 !important; --y: 150 !important; }
}
@media (min-width: 761px) and (orientation: portrait) {
    .scene { top: auto; height: 66%; }
    .stage { --scene-shift: -66%; }
}

/* --------------------------------------------------------------------------
   Feuilles (sections)
   -------------------------------------------------------------------------- */
.sheet {
    position: relative;
    padding-block: var(--section-y);
    background-image: var(--grain);
}
.sheet--snow { background-color: var(--snow); color: var(--ink); }
.sheet--frost { background-color: var(--snow-2); color: var(--ink); }
.sheet--kraft { background-color: var(--kraft); color: var(--bark); }
.sheet--night { background-color: var(--night); color: #F3EEE6; }

.edge {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(100% - 1px);
    height: 44px;
    pointer-events: none;
    filter: var(--edge-shadow);
}
.edge--flip { transform: scaleX(-1); }
.region > .edge--sky { color: #8DB7E0; z-index: 1; }
.sheet--snow > .edge { color: var(--snow); }
.sheet--frost > .edge { color: var(--snow-2); }
.sheet--kraft > .edge { color: var(--kraft); height: 30px; }
.sheet--night > .edge { height: auto; aspect-ratio: 1440 / 160; max-width: none; filter: drop-shadow(0 -4px 6px rgba(28, 37, 65, .22)); }

/* --------------------------------------------------------------------------
   Bienvenue : la fenêtre éclairée
   -------------------------------------------------------------------------- */
.welcome { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(40px, 5vw, 64px); }
.welcome__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}
.welcome__text .h2 { margin-bottom: .55em; }
.welcome__text p { max-width: 34em; font-size: 1.1rem; color: #2C3553; }

.thermo {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FFFFFF var(--grain);
    box-shadow: var(--paper-shadow);
    font-size: .98rem !important;
    color: var(--ink) !important;
}
.thermo[hidden] { display: none; }
.thermo__icon { width: 24px; height: 24px; flex: none; color: var(--night); margin-top: 1px; }
.thermo strong { color: var(--red); }

.window {
    position: relative;
    display: grid;
    grid-template-columns: 11% minmax(0, 1fr) 11%;
    align-items: stretch;
    margin: 0;
    padding: 0 0 44px;
}
.window__glow {
    position: absolute;
    inset: -10% 4% 6%;
    background: radial-gradient(closest-side, rgba(255, 190, 100, .55), rgba(255, 170, 80, .18) 60%, transparent);
    filter: blur(8px);
    animation: flicker-glow 6s ease-in-out infinite;
}
@keyframes flicker-glow { 0%, 100% { opacity: .95; } 45% { opacity: .8; } 70% { opacity: 1; } }
.window__frame {
    position: relative;
    z-index: 1;
    border: clamp(10px, 1.3vw, 15px) solid #7A4A2E;
    border-radius: 4px;
    background: #3A2418;
    box-shadow:
        inset 0 0 0 3px #5F3722,
        0 0 0 3px #5F3722,
        0 0 60px 8px rgba(255, 176, 84, .45),
        0 24px 40px -18px rgba(28, 37, 65, .55);
    overflow: hidden;
}
.window__frame img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: saturate(1.12) sepia(.18) brightness(1.02) contrast(1.03);
}
.window__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 60% at 50% 115%, rgba(255, 150, 50, .38), transparent 72%),
        linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .16) 19% 26%, transparent 27% 31%, rgba(255, 255, 255, .1) 32% 34%, transparent 35%);
    pointer-events: none;
}
/* Givre dans les coins de la vitre */
.window__frost {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 0 0, rgba(255, 255, 255, .78), rgba(255, 255, 255, .28) 11%, transparent 20%),
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 9%, transparent 16%),
        radial-gradient(circle at 0 100%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 9%, transparent 15%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .26) 10%, transparent 19%);
}
/* Volets ouverts, planches et cœur découpé comme sur le chalet */
.window__shutter {
    position: relative;
    margin: 4px 0;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(25% - 1.5px), rgba(40, 20, 10, .45) calc(25% - 1.5px) 25%),
        linear-gradient(90deg, #8E5234, #7A4529);
    box-shadow: inset 0 0 0 2px #5F3722, 0 14px 24px -14px rgba(28, 37, 65, .6);
}
.window__shutter--l { transform: perspective(500px) rotateY(22deg); transform-origin: 100% 50%; margin-right: -2px; }
.window__shutter--r { transform: perspective(500px) rotateY(-22deg); transform-origin: 0 50%; margin-left: -2px; }
.shutter__brace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #6A3B22;
    opacity: .9;
}
.shutter__heart {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    height: auto;
    translate: -50% -50%;
    fill: var(--snow);
}
.window__snow {
    position: absolute;
    left: calc(11% - 20px);
    width: calc(78% + 40px);
    top: -26px;
    height: 46px;
    z-index: 2;
    filter: drop-shadow(0 4px 5px rgba(28, 37, 65, .28));
}
.window__sill {
    position: absolute;
    z-index: 2;
    left: calc(11% - 26px);
    right: calc(11% - 26px);
    bottom: 22px;
    height: 22px;
    border-radius: 4px;
    background: #6B3F27;
    box-shadow: 0 10px 18px -10px rgba(28, 37, 65, .6);
}
.window__sill svg {
    position: absolute;
    left: 4px; right: 4px;
    width: calc(100% - 8px);
    top: -14px;
    height: 20px;
}
.window__mug {
    position: absolute;
    z-index: 3;
    right: calc(11% + 18px);
    bottom: 38px;
    width: clamp(54px, 5.4vw, 72px);
    height: auto;
    filter: drop-shadow(0 3px 3px rgba(28, 37, 65, .25));
}
.window__mug .steam { opacity: .8; animation: steam 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.window__mug .steam--2 { animation-delay: -1.8s; }
@keyframes steam {
    0%   { opacity: 0;  transform: translateY(4px) scaleY(.8); }
    35%  { opacity: .85; }
    100% { opacity: 0;  transform: translateY(-6px) scaleY(1.1); }
}
.window figcaption {
    position: absolute;
    z-index: 3;
    right: 12%;
    bottom: -12px;
    padding: 6px 12px;
    background: var(--honey) var(--grain);
    color: var(--bark);
    font-size: .88rem;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: var(--paper-shadow);
    transform: rotate(-2deg);
}

/* --------------------------------------------------------------------------
   La maison
   -------------------------------------------------------------------------- */
.house { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); }
.house__intro { max-width: 44rem; }
.house__intro .h2 { margin-bottom: .45em; }
.house__intro p { font-size: 1.1rem; color: #2C3553; }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 26px;
    margin: 34px 0 56px;
}
.tag {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 148px;
    padding: 18px 22px 16px 34px;
    background: var(--honey) var(--grain);
    color: var(--bark);
    border-radius: 6px 14px 14px 6px;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
    filter: drop-shadow(0 6px 8px rgba(28, 37, 65, .22));
    transform: rotate(var(--r, 0deg));
}
.tag::before {
    content: "";
    position: absolute;
    left: 14px; top: 50%;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--snow);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.tag__num {
    font-family: var(--font-display);
    font-size: 2.3rem;
    line-height: 1;
    color: var(--red);
}
.tag__label { font-weight: 700; font-size: .98rem; }

.rooms {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 26px);
}

/* Tirage photo (bord blanc, légère rotation) */
.print {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 10px 0;
    border: 0;
    border-radius: 3px;
    background: #FFFFFF;
    color: var(--ink);
    text-align: left;
    box-shadow: var(--paper-shadow);
    transform: rotate(var(--r, 0deg));
    transition: transform .3s var(--ease-pop), box-shadow .3s;
}
li[style*="--r"] > .print { transform: rotate(var(--r)); }
button.print:hover,
button.print:focus-visible {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
    box-shadow: var(--paper-shadow-lift);
}
.print__img { display: block; overflow: hidden; background: var(--snow-2); }
.print__img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.print__caption {
    display: block;
    padding: 9px 2px 11px;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
}
.rooms .print__img img { aspect-ratio: 4 / 5; }
.rooms .print__caption { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; }

/* --------------------------------------------------------------------------
   Bandeau tricoté
   -------------------------------------------------------------------------- */
.knit {
    position: relative;
    background: var(--red) var(--grain);
    color: #FFF6EC;
}
.knit__band {
    height: 22px;
    background-color: var(--red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'%3E%3Cg fill='%23FFF6EC'%3E%3Cpath d='M0 0h24v3H0zM0 19h24v3H0z'/%3E%3Cpath d='M12 6l3 3-3 3-3-3zM0 6l3 3-3 3zM24 6l-3 3 3 3z' opacity='.95'/%3E%3Cpath d='M6 13l2 2-2 2-2-2zM18 13l2 2-2 2-2-2z' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px 22px;
    background-repeat: repeat-x;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
}
.knit__band--bottom { transform: scaleY(-1); }
.knit__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 20px 40px;
    align-items: center;
    padding-block: 26px;
}
.knit__item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}
.knit__item .icon { width: 2rem; height: 1.6rem; color: var(--ember-soft); }
.knit__item strong { display: block; font-size: 1.08rem; }
.knit__price { gap: 10px; align-items: baseline; flex-wrap: wrap; }
.knit__price strong {
    display: inline;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 0 3px 0 var(--red-deep);
}
.knit__small { font-weight: 700; }

/* --------------------------------------------------------------------------
   Calendrier mural
   -------------------------------------------------------------------------- */
.cal {
    position: relative;
    padding: 34px clamp(16px, 3vw, 40px) 30px;
    border-radius: 8px;
    background: #FFFFFF var(--grain);
    box-shadow: 0 1px 1px rgba(28, 37, 65, .08), 0 30px 50px -28px rgba(28, 37, 65, .5);
}
.cal::before {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -8px;
    height: 20px;
    border-radius: 0 0 8px 8px;
    background: #F4F2EC;
    z-index: -1;
    box-shadow: 0 10px 20px -12px rgba(28, 37, 65, .45);
}
.cal__rings {
    position: absolute;
    left: 6%; right: 6%; top: -14px;
    height: 28px;
    background:
        radial-gradient(circle at 50% 70%, #2B3354 0 5px, transparent 5.5px) 0 0 / 46px 28px repeat-x;
}
.cal__rings::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #8C93A8 0 4px, transparent 4px) 21px 0 / 46px 22px repeat-x;
    border-radius: 3px;
}
.cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.cal__hint { margin: 0; text-align: center; color: var(--ink-soft); font-weight: 600; font-size: .98rem; }
.cal__nav {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border: 0;
    border-radius: 12px;
    background: var(--snow-2);
    color: var(--night);
    box-shadow: 0 3px 0 var(--frost);
    transition: transform .15s, box-shadow .15s;
}
.cal__nav:active { transform: translateY(3px); box-shadow: 0 0 0 var(--frost); }
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }
.cal__months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 56px);
}
.cal__month h3 {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: none;
    text-align: center;
    color: var(--night);
}
.cal__month h3 small {
    display: block;
    font-family: var(--font-text);
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: .01em;
}
.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.cal__dow {
    padding: 4px 0 8px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.cal__day {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(38px, 3.6vw, 48px);
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-weight: 600;
    font-size: .98rem;
    color: var(--ink);
    transition: background-color .15s, color .15s;
}
.cal__day:not([disabled]):not(.is-start):not(.is-end):not(.is-in-range):hover { background: #FFF1DA; }

.cal__day[disabled] { cursor: default; }
.cal__day.is-past { color: #A9B0C2; }
.cal__day.is-today::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2px dashed var(--frost);
    border-radius: 50%;
}
.cal__day.is-booked { color: #7A5550; background: #F6ECEA; }
.cal__day.is-booked::after {
    content: "";
    position: absolute;
    left: 18%; right: 18%;
    top: 50%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--red);
    transform: rotate(-32deg);
    opacity: .85;
}
.cal__day.is-in-range { background: #FFE2B0; border-radius: 0; }
.cal__day.is-start,
.cal__day.is-end {
    background: var(--red);
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 3px 0 var(--red-deep);
}
.cal__day.is-start.is-end { border-radius: 50%; }
.cal__day.is-start::before,
.cal__day.is-end::before { display: none; }
.cal__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 2px dashed var(--snow-2);
}
.cal__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.cal__legend li { display: inline-flex; align-items: center; gap: 8px; }
.cal__key { width: 18px; height: 18px; border-radius: 6px; }
.cal__key--free { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--frost); }
.cal__key--booked { background: #F6ECEA linear-gradient(-32deg, transparent 44%, var(--red) 45% 55%, transparent 56%); }
.cal__key--stay { background: #FFE2B0; box-shadow: inset 0 0 0 2px #F2C579; }
.cal__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cal__selection { margin: 0; font-weight: 600; }
.cal__selection strong { color: var(--red); }
.cal__noscript { margin: 16px 0 0; font-weight: 600; }

/* --------------------------------------------------------------------------
   Album photo sur papier kraft
   -------------------------------------------------------------------------- */
.album .h2 { color: #2E2018; }
.album .section-head p { color: #4A3527; }
.album__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
}
.album__item.is-extra { display: none; }
.no-js .album__item.is-extra { display: block; }
.no-js .album__more { display: none; }
.album__grid.is-open .album__item.is-extra { display: block; animation: drop-in .5s var(--ease-pop) both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px) rotate(4deg); } to { opacity: 1; transform: none; } }
.print--album { position: relative; }
.print--album::before,
.print--album::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    background: #3B2A22;
    z-index: 1;
    opacity: .9;
}
.print--album::before { left: 3px; top: 3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.print--album::after { right: 3px; bottom: 44px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.album__more { display: flex; justify-content: center; margin-top: 40px; }

/* Visionneuse */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFFFFF;
}
.lightbox::backdrop { background: rgba(12, 16, 34, .9); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; animation: fade-in .25s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__inner {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 64px 72px;
}
.lightbox__figure {
    margin: 0;
    padding: 12px 12px 0;
    background: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
    max-width: min(960px, 100%);
}
.lightbox__figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    width: auto;
    margin-inline: auto;
    object-fit: contain;
}
.lightbox__figure figcaption {
    padding: 10px 4px 12px;
    color: var(--ink);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.lightbox__count { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--night);
    font-size: 1.15rem;
    box-shadow: 0 4px 0 #C3CCDB, 0 12px 24px -10px rgba(0, 0, 0, .6);
}
.lightbox__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C3CCDB; }
.lightbox { touch-action: pan-y pinch-zoom; }
.lightbox__figure img { -webkit-user-drag: none; user-select: none; }
.lightbox__prev { left: 14px; top: 50%; margin-top: -25px; }
.lightbox__next { right: 14px; top: 50%; margin-top: -25px; }
.lightbox__close { right: 14px; top: 14px; }

/* --------------------------------------------------------------------------
   Équipements
   -------------------------------------------------------------------------- */
.equip__groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}
.equip__group {
    padding: 24px 22px 26px;
    border-radius: 10px;
    background: #FFFFFF var(--grain);
    box-shadow: var(--paper-shadow);
}
.equip__group .h3 { margin-bottom: 14px; }
.equip__group li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-weight: 600;
    line-height: 1.3;
}
.equip__group li + li { border-top: 1px dashed var(--snow-2); }

.badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px; height: 38px;
    color: #FFFFFF;
    background: var(--night);
    font-size: 1.05rem;
    /* médaillon festonné, comme découpé aux ciseaux cranteurs */
    clip-path: polygon(50% 0%, 61% 7%, 75% 4%, 80% 17%, 93% 21%, 92% 35%, 100% 46%, 94% 58%, 97% 72%, 85% 78%, 80% 92%, 66% 91%, 55% 100%, 44% 93%, 30% 96%, 23% 84%, 9% 80%, 9% 66%, 0% 55%, 6% 43%, 3% 29%, 15% 22%, 20% 8%, 34% 9%);
}
.equip__group:nth-child(2) .badge { background: var(--fir); }
.equip__group:nth-child(3) .badge { background: var(--red); }
.equip__group:nth-child(4) .badge { background: #6B4A33; }

/* --------------------------------------------------------------------------
   Informations séjour
   -------------------------------------------------------------------------- */
.infos__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 3vw, 36px) clamp(16px, 2.4vw, 28px);
    align-items: start;
}
.note {
    padding: 26px 24px 20px;
    border-radius: 4px;
    background: #FFFFFF var(--grain);
    background-image:
        linear-gradient(transparent 0 calc(100% - 1px), rgba(28, 37, 65, .06) 0),
        var(--grain);
    background-size: 100% 28px, auto;
    box-shadow: var(--paper-shadow);
    position: relative;
}
.note::before {
    content: "";
    position: absolute;
    left: 50%; top: -9px;
    width: 76px; height: 20px;
    margin-left: -38px;
    background: rgba(255, 213, 138, .8);
    transform: rotate(-3deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.note:nth-child(3n+2)::before { background: rgba(211, 220, 234, .9); transform: rotate(2deg); }
.note:nth-child(3n)::before { background: rgba(184, 53, 43, .35); transform: rotate(-1deg); }
.note .h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.note li {
    position: relative;
    padding: 5px 0 5px 20px;
    line-height: 1.5;
    color: #2C3553;
}
.note li::before {
    content: "";
    position: absolute;
    left: 2px; top: .95em;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--ember);
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   La région : décor de jour
   -------------------------------------------------------------------------- */
.region { position: relative; background: var(--snow); }
.day-scene {
    position: relative;
    /* format 4:1, sans aspect-ratio + min-height qui élargirait la boîte sur mobile */
    height: max(200px, 25vw);
    overflow: hidden;
    background: linear-gradient(180deg, #8DB7E0 0%, #B9D3EC 55%, #DCE9F6 100%);
    color: var(--snow);
}
.day-scene__art,
.day-scene svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}
.day-scene__art { object-fit: cover; object-position: 50% 100%; user-select: none; }
.region__body { padding-top: clamp(32px, 4vw, 56px); }

.region__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.signpost {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 18px 0 0;
}
.signpost__post {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: -40px;
    width: 26px;
    height: calc(100% + 40px);
    margin-left: -13px;
}
.signpost__boards {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(100%, 380px);
}
.board {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 26px 12px 20px;
    width: 86%;
    background: #E8B04A var(--grain);
    color: #3B2A22;
    line-height: 1.2;
    filter: drop-shadow(0 6px 6px rgba(28, 37, 65, .28));
}
.board strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.board span { font-weight: 700; font-size: .95rem; }
.board--right {
    margin-left: 10%;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.board--left {
    margin-left: 4%;
    padding: 12px 20px 12px 30px;
    text-align: right;
    align-items: flex-end;
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
    background-color: #F2C161;
}
.board:nth-child(3) { background-color: #D99A3A; }

.region__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.region__lists .h3 { margin-bottom: 10px; }
.ticks li {
    position: relative;
    padding: 6px 0 6px 30px;
    line-height: 1.45;
    font-weight: 500;
}
.ticks li::before {
    /* balisage des sentiers : blanc sur rouge */
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 18px; height: 11px;
    background: linear-gradient(#FFFFFF 0 50%, var(--red) 50% 100%);
    box-shadow: 0 0 0 1.5px rgba(28, 37, 65, .25);
    border-radius: 2px;
}

.postcards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin-bottom: clamp(56px, 7vw, 96px);
}
.postcards .print__img img { aspect-ratio: 1; }
.postcards .print__caption { font-size: .9rem; }

.spots__title { margin-bottom: 22px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.spots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.spot {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    background: #FFFFFF var(--grain);
    text-decoration: none;
    box-shadow: 0 2px 0 var(--snow-2), 0 8px 18px -12px rgba(28, 37, 65, .5);
    transition: transform .2s var(--ease-pop), box-shadow .2s;
}
.spot:hover { transform: translateY(-3px); box-shadow: 0 2px 0 var(--snow-2), 0 16px 26px -14px rgba(28, 37, 65, .55); }
.spot .badge { background: var(--fir); }
.spot__text { display: flex; flex-direction: column; line-height: 1.3; }
.spot__text strong { font-size: 1rem; }
.spot__text span { font-size: .9rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Contact : au coin du feu
   -------------------------------------------------------------------------- */
.contact {
    margin-top: 11.2vw;
    padding-top: clamp(40px, 5vw, 72px);
    background-image:
        radial-gradient(40% 50% at 78% 60%, rgba(242, 169, 59, .16), transparent 70%),
        var(--grain);
}
.contact .h2 { color: #FFF7EA; }
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
}
.contact__side { position: relative; }
.contact__side > p { color: #D9DDEA; font-size: 1.1rem; margin-top: 16px; }
.ways { display: grid; gap: 12px; margin: 28px 0; }
.ways a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    text-decoration: none;
    transition: background-color .2s;
}
.ways a:hover { background: rgba(255, 255, 255, .12); }
.ways .badge { background: var(--ember); color: var(--night); }
.ways span:last-child { display: flex; flex-direction: column; line-height: 1.3; font-size: .9rem; color: #C4CAE0; }
.ways strong { font-size: 1.05rem; color: #FFFFFF; word-break: break-word; }
.airbnb {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #FFFFFF var(--grain);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--paper-shadow);
}
.airbnb > .icon { width: 1.9rem; height: 2rem; color: #FF5A5F; }
.airbnb__note { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.airbnb__text { display: flex; flex-direction: column; font-weight: 600; font-size: .9rem; line-height: 1.35; }
.airbnb:hover .airbnb__text { text-decoration: underline; text-underline-offset: 3px; }
.letter-wrap { position: relative; }
.contact__fox {
    position: absolute;
    z-index: 2;
    left: -86px;
    bottom: -8px;
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}

.letter {
    position: relative;
    padding: clamp(24px, 4vw, 44px);
    border-radius: 6px;
    background: var(--honey);
    background-image:
        linear-gradient(90deg, transparent 0 34px, rgba(184, 53, 43, .18) 34px 36px, transparent 36px),
        var(--grain);
    color: var(--bark);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 70px -30px rgba(0, 0, 0, .75), 0 0 90px -20px rgba(242, 169, 59, .35);
    transform: rotate(.6deg);
}
.letter__stamp {
    position: absolute;
    right: 22px;
    top: -20px;
    width: 84px;
    padding: 6px;
    background: radial-gradient(circle, transparent 2.6px, #FFFFFF 3.2px) -5px -5px / 10px 10px;
    transform: rotate(5deg);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3));
}
.letter__stamp-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px #E9D9C0;
    color: var(--night);
    font-size: .7rem;
    font-weight: 800;
}
.letter__stamp svg { width: 46px; height: 36px; color: var(--night); }
.letter__intro { font-size: .9rem; color: #6B5647; margin-bottom: 18px; padding-right: 80px; }
.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}
.field-row--stay {
    grid-template-columns: 1fr 1fr .7fr .7fr;
    margin: 4px 0 6px;
    padding: 14px 16px 4px;
    border: 2px dashed rgba(59, 42, 34, .22);
    border-radius: 10px;
}
.field-row--stay legend { padding: 0 6px; font-weight: 700; font-size: .95rem; }
.field-row--stay legend span { font-weight: 500; color: #7A6555; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field label { font-weight: 700; font-size: .92rem; }
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px rgba(59, 42, 34, .22), inset 0 2px 4px rgba(59, 42, 34, .06);
    transition: box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--red), 0 0 0 4px rgba(242, 169, 59, .35);
}
.field input:user-invalid,
.field textarea:user-invalid { box-shadow: inset 0 0 0 2px var(--red); }
.letter__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-top: 6px;
}
.form-status { margin: 0; flex: 1 1 240px; font-weight: 600; font-size: .95rem; }
.form-status.is-ok { color: #1F6B45; }
.form-status.is-error { color: var(--red); }
.letter button[type="submit"].is-sending { pointer-events: none; opacity: .75; }
.letter button[type="submit"].is-sending i { animation: fly .9s ease-in-out infinite; }
@keyframes fly { 50% { transform: translate(3px, -3px); } }

/* --------------------------------------------------------------------------
   Pied de page : la nuit tombe
   -------------------------------------------------------------------------- */
.footer { position: relative; background: var(--night); color: #C9CEE0; }
.footer__scene {
    position: relative;
    height: max(180px, 27.5vw);
    overflow: hidden;
    background: linear-gradient(180deg, var(--night) 0%, #202B50 100%);
}
.footer__scene .night-scene {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 100%;
    user-select: none;
}
.footer__body { background: var(--night) var(--grain); padding: 16px 0 28px; }
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 36px 56px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.brand--footer { color: #FFF7EA; margin-bottom: 14px; }
.footer__about p { max-width: 30em; font-size: .98rem; }
.footer__title {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: #FFF7EA;
}
.footer__nav li, .footer__contact li { padding: 4px 0; }
.footer__nav a, .footer__contact a { text-decoration: none; }
.footer__nav a:hover, .footer__contact a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer__contact .icon { width: 18px; margin-top: 5px; color: var(--ember); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 22px;
    font-size: .9rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover, .footer__bottom .linklike:hover { color: #FFFFFF; }
.footer__bottom .linklike { text-decoration: none; }

/* Bouton WhatsApp */
.whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    font-size: 1.9rem;
    text-decoration: none;
    box-shadow: 0 4px 0 #189247, 0 14px 24px -10px rgba(10, 14, 36, .6);
    transition: transform .2s var(--ease-pop), opacity .3s, visibility .3s;
}
.whatsapp .icon { width: 30px; height: 30px; }
.whatsapp:hover { transform: translateY(-3px) rotate(-6deg); }
.whatsapp.is-hidden { opacity: 0; visibility: hidden; transform: translateY(20px); }

/* Bandeau cookies : une petite note posée en bas de l'écran */
.cookies {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 60;
    width: min(440px, calc(100% - 36px));
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--honey) var(--grain);
    color: var(--bark);
    box-shadow: 0 30px 50px -20px rgba(10, 14, 36, .6), 0 0 0 1px rgba(0, 0, 0, .05);
    font-size: .92rem;
    line-height: 1.5;
    transform: rotate(-.6deg);
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 12px; }
.cookies a { font-weight: 700; }
.cookies__actions { display: flex; gap: 10px; }
.cookies__actions .btn { flex: 1; }

/* --------------------------------------------------------------------------
   Pages secondaires (mentions légales, 404)
   -------------------------------------------------------------------------- */
.page-top {
    position: relative;
    padding: 130px 0 70px;
    background: linear-gradient(180deg, #111A36 0%, #26305E 60%, #3C4579 100%);
    color: #FFF7EA;
    overflow: hidden;
}
.page-top .h2 { color: #FFF7EA; }
.page-top p { color: #D9DDEA; margin: 10px 0 0; }
.page-top__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #FFE3B3;
}
.page-top__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal .note { margin-bottom: 28px; }
.legal .note p, .legal .note li { color: #2C3553; }
.legal .note h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 18px 0 8px; color: var(--night); }
.legal .note h2:first-child { margin-top: 0; }
.legal .note a { color: var(--red); font-weight: 600; }
.legal .muted { color: var(--ink-soft); font-size: .95rem; }
.legal__body { max-width: 820px; }
.legal { padding-top: clamp(48px, 6vw, 80px); }
.legal .note { padding: clamp(24px, 4vw, 40px); }
.legal .note li { color: #2C3553; }
.legal__section { margin: 56px 0 10px; }
.legal__lede { margin-bottom: 30px; }

.notfound {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 110px var(--gutter) 60px;
    text-align: center;
    background: linear-gradient(180deg, #111A36 0%, #26305E 55%, #57558A 100%);
    color: #FFF7EA;
}
.notfound__card { max-width: 560px; }
.notfound__marmot { width: min(260px, 70vw); margin: 0 auto 8px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)); }
.notfound__zzz { font-family: var(--font-display); color: #FFE3B3; font-size: 1.6rem; letter-spacing: .1em; animation: zzz 3.2s ease-in-out infinite; }
@keyframes zzz { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translate(6px, -8px); opacity: .5; } }
.notfound .h2 { color: #FFF7EA; margin: 10px 0 12px; }
.notfound p { color: #D9DDEA; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rooms__item:nth-child(n+4) { display: none; }
    .equip__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .infos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .album__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .postcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .knit__grid { grid-template-columns: 1fr 1fr; }
    .knit__price { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .welcome__grid,
    .region__grid,
    .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .window { max-width: 620px; }
    .contact__fox { left: 6px; bottom: auto; top: -74px; width: 80px; height: 80px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    body { font-size: 1rem; }
    .topbar__inner { height: 66px; gap: 12px; }
    .brand__name { font-size: 1.25rem; }
    .brand__mark { width: 36px; height: 28px; }
    .tags { gap: 16px; margin: 26px 0 40px; }
    .tag { min-width: calc(50% - 8px); padding: 14px 16px 12px 30px; }
    .tag__num { font-size: 1.9rem; }
    .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rooms__item:nth-child(n+4) { display: block; }
    .rooms__item:nth-child(5) { display: none; }
    .rooms__item:nth-child(3) { grid-column: 1 / -1; }
    .rooms__item:nth-child(3) .print__img img { aspect-ratio: 16 / 10; }
    .album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .print { padding: 7px 7px 0; }
    .print__caption { font-size: .85rem; padding: 7px 1px 9px; }
    .print--album::after { bottom: 38px; }
    .equip__groups { grid-template-columns: minmax(0, 1fr); }
    .infos__grid { grid-template-columns: minmax(0, 1fr); }
    .region__lists { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .postcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cal { padding: 30px 14px 22px; }
    .cal__months { grid-template-columns: minmax(0, 1fr); }
    .cal__day { min-height: 0; font-size: .95rem; }
    .cal__summary { width: 100%; }
    .cal__summary .btn { width: 100%; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .field-row--stay { grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .letter { transform: none; }
    .letter__intro { padding-right: 70px; }
    .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .whatsapp { width: 52px; height: 52px; font-size: 1.7rem; right: 14px; bottom: 14px; }
    .cookies { left: 10px; bottom: 10px; width: calc(100% - 20px); }
    .lightbox__inner { padding: 64px 8px 84px; }
    .lightbox__figure { padding: 7px 7px 0; }
    .lightbox__figure img { max-height: calc(100dvh - 200px); }
    .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin-top: 0; }
    .lightbox__prev { left: calc(50% - 64px); }
    .lightbox__next { right: calc(50% - 64px); }
    .knit__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .signpost__boards { width: 100%; }
}

/* Mouvement réduit : décor immobile */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .smoke, .spindrift { display: none; }
    .hero__scroll { animation: none; }
}
.show-sm { display: none; }
@media (max-width: 420px) {
    .show-sm { display: inline; }
}