:root {
    --paper: #faecdd;
    --ink: #c95812;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: #ead0ad;
}

/* La barre d'état de Safari emprunte la couleur du canevas, donc celle de
   <html>. Sur la page d'invitation on l'aligne sur le haut du visuel pour
   qu'aucune bande ne tranche en haut de l'écran. La classe survit à la
   révélation de l'invitation, contrairement à has-welcome-screen. */
html:has(body.page-invitation) {
    background: #fcead9;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #ead0ad;
    color: var(--ink);
    font-family: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
}

body.has-welcome-screen {
    overflow: hidden;
    padding: 0;
    background: #efd6bc;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Le cadre porte le fond et occupe toute la zone visible : l'aquarelle va
   d'un bord à l'autre, quel que soit le format de l'écran. */
.welcome-screen {
    position: fixed;
    z-index: 10;
    inset: 0;
    overflow: hidden;
    background-color: #fff7ef;
    background-image: url("/images/welcome-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #dc6827;
    text-align: center;
    transition: opacity .55s ease, filter .55s ease;
}

/* La scène garde le format du visuel et COUVRE le cadre : elle déborde et se
   fait rogner, au lieu de rétrécir en laissant des bandes sur les côtés.
   C'est aussi elle qui sert de conteneur, donc les cqw gardent leur échelle
   d'origine — le contenu ne grossit pas quand l'écran s'élargit. */
/* Le contenu, lui, garde le format du visuel. Il est dimensionné en cqw mais
   positionné en % de la hauteur : lui donner toute la largeur d'un écran court
   ferait chevaucher le monogramme et le compte à rebours. La colonne est
   transparente, donc invisible — seul le fond, plein écran, se voit. */
.welcome-screen__scene {
    container-type: inline-size;
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100vw, 862px, calc(100svh * 1260 / 2736));
    height: 100%;
    transform: translateX(-50%);
}

.welcome-screen.is-leaving {
    opacity: 0;
    filter: blur(3px);
    pointer-events: none;
}

.welcome-screen__flowers,
.welcome-screen__monogram {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.welcome-screen__flowers {
    z-index: 1;
    top: -12.5cqw;
    left: -5cqw;
    width: 90cqw;
}

.welcome-screen__monogram {
    z-index: 2;
    top: 21.6%;
    left: 50%;
    width: 84cqw;
    transform: translateX(-50%);
}

.countdown {
    position: absolute;
    z-index: 3;
    top: 65.3%;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) .22fr minmax(0, 1fr) .22fr minmax(0, 1fr) .22fr minmax(0, 1fr);
    align-items: start;
    width: 86cqw;
    transform: translateX(-50%);
}

.countdown__unit {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
}

.countdown__value,
.countdown__separator {
    font-family: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
    font-size: 8.6cqw;
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 400;
    line-height: 1;
}

.countdown__value {
    letter-spacing: .025em;
}

.countdown__separator {
    transform: translateY(-.08em);
}

.countdown__label {
    margin-top: 2.2cqw;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 4.55cqw;
    line-height: 1;
    white-space: nowrap;
}

/* Coupe-son, fixé en bas à droite pendant toute l'invitation. */

.son {
    position: fixed;
    z-index: 30;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid rgb(201 88 18 / 22%);
    border-radius: 50%;
    background: rgb(250 236 221 / 90%);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgb(93 56 22 / 18%);
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, background-color .2s ease;
}

.son:hover {
    background: rgb(250 236 221 / 100%);
    transform: translateY(-2px);
}

.son:active {
    transform: translateY(0);
}

.son:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.son svg {
    width: 1.15rem;
    height: 1.15rem;
}

.son__off {
    display: none;
}

.son.is-muet {
    color: #a8815f;
}

.son.is-muet .son__on {
    display: none;
}

.son.is-muet .son__off {
    display: block;
}

.welcome-screen__button {
    position: absolute;
    z-index: 4;
    top: 88.2%;
    left: 50%;
    display: grid;
    width: 46.5cqw;
    height: 11.3cqw;
    min-height: 44px;
    padding: 0 3cqw;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #e8752e;
    box-shadow: 0 .8cqw 2.2cqw rgb(184 82 29 / 10%);
    color: #fff4e8;
    cursor: pointer;
    font: 400 4.15cqw/1 "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Écran très court (paysage) : le bouton garde ses 44px de hauteur tactile
   alors que tout le reste rétrécit, et finit collé au bord. On l'ancre en bas
   avec une marge au lieu de le placer en pourcentage. */
@media (max-height: 520px) {
    .welcome-screen__button {
        top: auto;
        bottom: 5%;
    }
}

.welcome-screen__button:hover {
    background: #dd6827;
    box-shadow: 0 1cqw 2.8cqw rgb(184 82 29 / 17%);
    transform: translateX(-50%) translateY(-2px);
}

.welcome-screen__button:focus-visible {
    outline: 2px solid #ad4819;
    outline-offset: 5px;
}

.welcome-screen__button:active {
    transform: translateX(-50%) translateY(0);
}

.invitation {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    width: min(100%, 862px);
    aspect-ratio: 862 / 1825;
    min-height: 100svh;
    margin-inline: auto;
    overflow: hidden;
    background-color: var(--paper);
    background-image: url("/images/wedding-background.png");
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 0 40px rgb(93 56 22 / 12%);
}

.invitation__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    text-align: center;
}

.invitation__besiyata {
    position: absolute;
    top: 2.4%;
    right: 4.5%;
    font-family: "Noto Serif Hebrew", Georgia, serif;
    font-size: 3.1cqw;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}

.invitation p,
.invitation h1,
.invitation address {
    margin: 0;
}

.invitation__names,
.invitation__yes,
.car-plate {
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-weight: 400;
}

.invitation__names {
    position: absolute;
    top: 18.65%;
    left: 7.5%;
    width: 92%;
    font-size: 12cqw;
    line-height: 1.28;
    white-space: nowrap;
}

.invitation__announcement {
    position: absolute;
    top: 26.7%;
    left: 0;
    width: 100%;
    font-size: 4.45cqw;
    line-height: 1;
}

.invitation__yes {
    position: absolute;
    top: 31%;
    left: 0;
    width: 100%;
    font-size: 13.9cqw;
    line-height: 1;
}

.invitation__yes span {
    display: inline-block;
    margin-inline: .03em;
    font-family: Georgia, serif;
    font-size: .34em;
    vertical-align: 1.05em;
}

.invitation__details {
    position: absolute;
    inset: 0;
    font-size: 4.3cqw;
    line-height: 1.25;
}

.invitation__date,
.invitation__time,
.invitation__reception {
    font-style: italic;
}

.invitation__date {
    position: absolute;
    top: 41.05%;
    left: 0;
    width: 100%;
}

.invitation__time {
    position: absolute;
    top: 45.35%;
    left: 0;
    width: 100%;
    font-size: 1.18em;
}

.invitation__address {
    position: absolute;
    top: 50.55%;
    left: 2%;
    width: 96%;
    font-style: normal;
    line-height: 1.26;
}

.invitation__reception {
    position: absolute;
    top: 58%;
    left: 0;
    width: 100%;
    line-height: 1.34;
}

.invitation__directions {
    position: absolute;
    top: 64.9%;
    left: 50%;
    color: inherit;
    font-size: .98em;
    letter-spacing: .25em;
    line-height: 1.2;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.ceremony-flow {
    container-type: inline-size;
    position: relative;
    z-index: 4;
    width: min(100%, 862px);
    margin-top: 0;
    margin-inline: auto;
    overflow: visible;
    background: #f8eee6;
    box-shadow:
        24px 0 34px -30px rgb(93 56 22 / 24%),
        -24px 0 34px -30px rgb(93 56 22 / 24%);
}

.invitation-transition {
    position: absolute;
    z-index: 2;
    top: -8cqw;
    left: 0;
    width: 100%;
    height: 36cqw;
    pointer-events: none;
    background-color: #fce6cd;
    background-image:
        linear-gradient(to bottom, rgb(252 230 205 / 100%) 0%, rgb(252 230 205 / 78%) 28%, rgb(252 230 205 / 0%) 100%),
        url("/images/section-transition.png");
    background-position: center top, center top;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 68%) 11%, #000 20%, #000 44%, rgb(0 0 0 / 68%) 62%, rgb(0 0 0 / 24%) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 68%) 11%, #000 20%, #000 44%, rgb(0 0 0 / 68%) 62%, rgb(0 0 0 / 24%) 82%, transparent 100%);
}

.ceremony-section {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Rallongée pour que la plaque descendue tienne dans la section au lieu
       de mordre sur la section Réponse. */
    aspect-ratio: 100 / 216;
    margin-top: 0;
    overflow: visible;
    background-color: #f8eee6;
    background-image: url("/images/ceremony-pattern.png");
    background-position: center;
    background-size: 100% 100%;
}

.response-section {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    /* L'espace au-dessus du bloc réponse est fixe : il dégage le voile
       décoratif et la plaque. La hauteur totale suit ensuite le contenu, donc
       le nombre d'invités — c'est uniquement le bas qui se raccourcit. */
    padding-top: 50cqw;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background-color: #faecdd;
    background-image: url("/images/response-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ceremony-response-transition {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 48cqw;
    pointer-events: none;
    background-image: url("/images/ceremony-pattern.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 200cqw;
    transform: scaleY(-1);
    transform-origin: center;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 22%) 24%,
        rgb(0 0 0 / 68%) 60%,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 22%) 24%,
        rgb(0 0 0 / 68%) 60%,
        #000 100%
    );
}

.rsvp {
    position: relative;
    z-index: 3;
    /* Aucun retrait en haut : le contenu démarre au bord haut de la div.
       En bas, la page s'arrête 50px après le bouton. */
    padding: 0 8.5cqw 50px;
    text-align: center;
}

.rsvp__eyebrow {
    margin: 0;
    color: #d4712a;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 9cqw;
    line-height: 1;
}

.rsvp__names {
    margin: 1.6cqw 0 0;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 11cqw;
    font-weight: 400;
    line-height: 1.2;
}

.rsvp__intro {
    margin: 1.2cqw 0 0;
    color: #b06a36;
    font-size: 3.85cqw;
    font-style: italic;
    line-height: 1.4;
}

.rsvp__form {
    margin-top: 9.5cqw;
}

.rsvp-group + .rsvp-group {
    margin-top: 8.5cqw;
}

.rsvp-group__title {
    display: flex;
    align-items: center;
    gap: 3.6cqw;
    margin: 0;
    font-size: 3.5cqw;
    letter-spacing: .3em;
    line-height: 1;
    text-indent: .3em;
    text-transform: uppercase;
}

.rsvp-group__title::before,
.rsvp-group__title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, rgb(201 88 18 / 0%), rgb(201 88 18 / 34%), rgb(201 88 18 / 0%));
}

.rsvp-group__list {
    margin: 4.2cqw 0 0;
    padding: 0;
    border: 1px solid rgb(201 88 18 / 13%);
    border-radius: 1.8cqw;
    background: rgb(255 251 246 / 60%);
    box-shadow: 0 1.4cqw 3.6cqw rgb(150 84 34 / 7%);
    list-style: none;
}

.rsvp-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    padding: 2.6cqw 4.4cqw;
}

.rsvp-guest + .rsvp-guest {
    border-top: 1px solid rgb(201 88 18 / 11%);
}

.rsvp-guest__name {
    min-width: 0;
    font-size: 4.2cqw;
    line-height: 1.2;
    overflow-wrap: break-word;
    text-align: left;
}

.rsvp-guest__choices {
    display: flex;
    flex: none;
    gap: 4.4cqw;
}

.rsvp-choice {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 1.6cqw;
    cursor: pointer;
}

.rsvp-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rsvp-choice__box {
    display: grid;
    width: 3.5cqw;
    height: 3.5cqw;
    flex: none;
    place-items: center;
    border: 1px solid rgb(201 88 18 / 42%);
    border-radius: .5cqw;
    background: rgb(255 255 255 / 70%);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rsvp-choice__box::after {
    content: "";
    width: .9cqw;
    height: 1.75cqw;
    border: solid #fff6ec;
    border-width: 0 .3cqw .3cqw 0;
    opacity: 0;
    transform: rotate(45deg) translate(-.05cqw, -.2cqw);
    transition: opacity .18s ease;
}

.rsvp-choice__label {
    color: #a9713f;
    font-size: 3.15cqw;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .18s ease;
}

.rsvp-choice:hover .rsvp-choice__box {
    border-color: rgb(201 88 18 / 70%);
}

.rsvp-choice__input:checked + .rsvp-choice__box {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: 0 .5cqw 1.5cqw rgb(201 88 18 / 26%);
}

.rsvp-choice__input:checked + .rsvp-choice__box::after {
    opacity: 1;
}

.rsvp-choice:has(.rsvp-choice__input:checked) .rsvp-choice__label {
    color: var(--ink);
}

.rsvp-choice__input:focus-visible + .rsvp-choice__box {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.rsvp-message {
    display: block;
    width: 100%;
    margin-top: 4.2cqw;
    padding: 3.4cqw 4.4cqw;
    border: 1px solid rgb(201 88 18 / 13%);
    border-radius: 1.8cqw;
    background: rgb(255 251 246 / 60%);
    box-shadow: 0 1.4cqw 3.6cqw rgb(150 84 34 / 7%);
    color: inherit;
    font-family: inherit;
    font-size: 3.9cqw;
    line-height: 1.5;
    resize: vertical;
    text-align: left;
}

.rsvp-message::placeholder {
    color: rgb(169 113 63 / 90%);
    font-style: italic;
    opacity: 1;
}

.rsvp-message:focus-visible {
    border-color: rgb(201 88 18 / 45%);
    outline: 2px solid rgb(201 88 18 / 22%);
    outline-offset: 2px;
}

.rsvp__done {
    margin-top: 6cqw;
}

.rsvp__done-mark {
    display: grid;
    width: 13cqw;
    height: 13cqw;
    margin: 0 auto;
    place-items: center;
    border: 1px solid rgb(201 88 18 / 30%);
    border-radius: 50%;
    background: rgb(255 251 246 / 70%);
    box-shadow: 0 1cqw 3cqw rgb(150 84 34 / 10%);
}

.rsvp__done-mark::after {
    content: "";
    width: 3.1cqw;
    height: 6cqw;
    border: solid var(--ink);
    border-width: 0 .75cqw .75cqw 0;
    transform: rotate(45deg) translate(-.2cqw, -.6cqw);
}

.rsvp__thanks {
    margin: 3.4cqw 0 0;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 8.6cqw;
    line-height: 1.2;
}

.rsvp__error {
    margin: 5cqw auto 0;
    max-width: 68cqw;
    color: #a53420;
    font-size: 3.5cqw;
    font-style: italic;
    line-height: 1.35;
}

.rsvp__submit {
    display: grid;
    width: 52cqw;
    height: 11.3cqw;
    min-height: 44px;
    margin: 10cqw auto 0;
    padding: 0 3cqw;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #e8752e;
    box-shadow: 0 .8cqw 2.2cqw rgb(184 82 29 / 18%);
    color: #fff4e8;
    cursor: pointer;
    font: 400 4.15cqw/1 "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rsvp__submit:hover {
    background: #dd6827;
    box-shadow: 0 1cqw 2.8cqw rgb(184 82 29 / 25%);
    transform: translateY(-2px);
}

.rsvp__submit:active {
    transform: translateY(0);
}

.rsvp__submit:focus-visible {
    outline: 2px solid #ad4819;
    outline-offset: 5px;
}

.ceremony-card {
    position: absolute;
    z-index: 3;
    /* Descend la plaque et son contenu d'un bloc dans la page. */
    top: 30cqw;
    left: 10.55cqw;
    width: 78.9cqw;
    height: 176.4cqw;
    color: #fffaf4;
    text-align: center;
}

.ceremony-card p,
.ceremony-card address {
    margin: 0;
}

.ceremony-card__plaque {
    position: absolute;
    z-index: 1;
    top: -.26cqw;
    left: .5cqw;
    display: block;
    width: 77.11cqw;
    height: 177cqw;
    filter: drop-shadow(0 .65cqw .55cqw rgb(88 42 13 / 26%));
    pointer-events: none;
    user-select: none;
}

.ceremony-card__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    font-weight: 400;
}

.ceremony-card__verse {
    position: absolute;
    top: 7.2cqw;
    left: 50%;
    display: block;
    width: 56cqw;
    height: 14cqw;
    overflow: visible;
    transform: translateX(-50%);
}

.ceremony-card__verse text {
    fill: #fffaf4;
    font-family: "Noto Serif Hebrew", Georgia, serif;
    font-size: 38px;
    font-weight: 600;
}

.ceremony-card__families {
    position: absolute;
    top: 27.6cqw;
    left: 4.1cqw;
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    width: calc(100% - 8.2cqw);
    gap: 3.2cqw;
    align-items: start;
    font-size: 3.12cqw;
    line-height: 1.35;
}

.ceremony-card__announcement {
    position: absolute;
    top: 46cqw;
    left: 0;
    width: 100%;
    font-size: 3.22cqw;
    line-height: 1.52;
}

.ceremony-card__couple {
    position: absolute;
    top: 63cqw;
    left: 50%;
    width: 92cqw;
    transform: translateX(-50%);
    text-align: center;
}

.ceremony-card__names {
    margin: 0;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: 11.8cqw;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.ceremony-card__name {
    position: relative;
    display: inline-block;
}

.ceremony-card__hebrew {
    position: absolute;
    top: 11cqw;
    left: 50%;
    font-family: "Noto Serif Hebrew", Georgia, serif;
    font-size: 5.95cqw;
    font-weight: 600;
    line-height: 1;
    transform: translateX(-50%);
}

.ceremony-card__houppa {
    position: absolute;
    top: 85cqw;
    left: 0;
    width: 100%;
    font-size: 3.15cqw;
    line-height: 1.55;
}

.ceremony-card__date {
    position: absolute;
    top: 98cqw;
    left: 50%;
    width: 76cqw;
    font-size: 4.25cqw;
    line-height: 1.1;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ceremony-card__venue {
    position: absolute;
    top: 106cqw;
    left: 0;
    width: 100%;
    font-size: 3.25cqw;
    font-style: normal;
    line-height: 1.52;
}

.ceremony-card__reception {
    position: absolute;
    top: 119.5cqw;
    left: 0;
    width: 100%;
    font-size: 3.18cqw;
    font-style: italic;
    line-height: 1.2;
}

.ceremony-card__dress {
    position: absolute;
    top: 128cqw;
    left: 4%;
    width: 92%;
    font-size: 3.2cqw;
    font-style: italic;
    line-height: 1.25;
}

.ceremony-card__route {
    position: absolute;
    top: 137cqw;
    left: 50%;
    color: inherit;
    font-size: 3.05cqw;
    font-style: italic;
    letter-spacing: .28em;
    line-height: 1.2;
    text-decoration-color: currentColor;
    text-decoration-thickness: .1cqw;
    text-underline-offset: .35cqw;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ceremony-card__memory {
    position: absolute;
    top: 146cqw;
    left: 0;
    width: 100%;
    font-size: 2.65cqw;
    line-height: 1.28;
}

.ceremony-card__monogram {
    position: absolute;
    top: 159cqw;
    left: 50%;
    display: block;
    width: 16.8cqw;
    height: auto;
    transform: translateX(-50%);
    user-select: none;
}

.ceremony-card__route:focus-visible {
    border-radius: 2px;
    outline: .25cqw solid #fff;
    outline-offset: .55cqw;
}

.invitation__directions:focus-visible {
    border-radius: 2px;
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.art-window {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.art {
    position: absolute;
    display: block;
    max-width: none;
    user-select: none;
}

.art-window--flowers {
    top: 0;
    left: 0;
    width: 60%;
    height: 34%;
}

.art--flowers {
    top: -1.7cqw;
    left: -.5cqw;
    width: 107.5cqw;
}

.art-window--car {
    right: 0;
    bottom: 1.9%;
    left: 0;
    height: 30.5%;
}

.art--car {
    top: -84cqw;
    left: 50%;
    width: 107.5cqw;
    transform: translateX(-50%);
}

.car-plate {
    position: absolute;
    z-index: 3;
    bottom: 9.15%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 18.9%;
    height: 3.8%;
    border: .16cqw solid rgb(139 96 59 / 40%);
    border-radius: .55cqw;
    background: rgb(249 234 216 / 95%);
    box-shadow: 0 0 0 .7cqw rgb(249 234 216 / 65%);
    font-size: 4.5cqw;
    line-height: 1;
    transform: translateX(-50%);
}

@media (min-width: 863px) {
    body {
        padding-block: 24px;
    }

    .invitation {
        min-height: auto;
    }
}

@media print {
    html,
    body {
        background: none;
    }

    body {
        padding: 0;
    }

    .welcome-screen {
        display: none;
    }

    .invitation {
        width: 100%;
        box-shadow: none;
    }

    .invitation-transition {
        display: none;
    }

    .ceremony-section {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-screen,
    .welcome-screen__button {
        transition: none;
    }
}

/* Page d’erreur 404 */

html:has(body.page-error) {
    background: #fcead9;
}

body.page-error {
    min-height: 100svh;
    background-color: #fff7ef;
    background-image: url("/images/welcome-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #dc6827;
}

.error-page {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding:
        max(2rem, env(safe-area-inset-top))
        max(1.25rem, env(safe-area-inset-right))
        max(2rem, env(safe-area-inset-bottom))
        max(1.25rem, env(safe-area-inset-left));
    text-align: center;
}

.error-page__scene {
    container-type: inline-size;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    width: min(100%, 28rem);
}

.error-page__monogram {
    width: min(42%, 9.5rem);
    height: auto;
    margin-bottom: 0.4rem;
    user-select: none;
}

.error-page__brand {
    margin: 0;
    font-family: Allura, "Snell Roundhand", "Apple Chancery", cursive;
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    font-weight: 400;
    line-height: 1;
}

.error-page__title {
    margin: 0.15rem 0 0;
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-page__text {
    margin: 0.35rem 0 0;
    max-width: 22rem;
    font-size: clamp(1.05rem, 4.2vw, 1.2rem);
    font-style: italic;
    line-height: 1.45;
}

.error-page__link {
    margin-top: 1.1rem;
    color: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-transform: uppercase;
    text-underline-offset: 0.28em;
}

.error-page__link:focus-visible {
    border-radius: 2px;
    outline: 2px solid currentColor;
    outline-offset: 5px;
}