* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #050505;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

body {
    min-height: 100dvh;
}

.app {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(34px, env(safe-area-inset-top))
        22px
        max(34px, env(safe-area-inset-bottom));
}

/* PHOTO */

.bg {
    position: absolute;
    inset: 0;

    background-image: url("../images/orel_countdown.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.01);
}

/* Voile pour conserver la lisibilité */

.shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25) 0%,
            rgba(0,0,0,.15) 30%,
            rgba(0,0,0,.35) 62%,
            rgba(0,0,0,.68) 100%
        );
}

/* CONTENU */

.content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;

    text-align: center;
}

.kicker {
    margin: 0;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .24em;
}

.date {
    margin: 9px 0 32px;

    font-size: 12px;
    letter-spacing: .12em;

    opacity: .72;
}

/* J-XX / AUJOURD'HUI */

h1 {
    width: 100%;
    margin: 0 auto;

    font-size: clamp(68px, 12vw, 125px);
    line-height: .9;
    letter-spacing: -.055em;

    text-align: center;
    white-space: nowrap;
}

#message {
    max-width: 520px;

    margin: 30px auto 0;

    font-size: clamp(20px, 4vw, 30px);
    line-height: 1.18;
    font-weight: 650;

    text-align: center;
}

.clock {
    margin-top: 20px;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;

    opacity: .72;
}

#installHelp {
    margin-top: 42px;

    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.25);
    color: #fff;

    border-radius: 999px;
    padding: 13px 20px;

    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* INSTALLATION */

#sheet[hidden] {
    display: none;
}

#sheet {
    position: fixed;
    z-index: 10;
    inset: 0;

    display: flex;
    align-items: flex-end;

    background: rgba(0,0,0,.65);
}

.card {
    position: relative;

    width: 100%;

    background: #f4f4f4;
    color: #111;

    border-radius: 24px 24px 0 0;

    padding:
        30px
        26px
        calc(30px + env(safe-area-inset-bottom));

    font-size: 17px;
    line-height: 1.45;
}

.card h2 {
    font-size: 26px;
}

.card #close {
    position: absolute;
    right: 18px;
    top: 14px;

    border: 0;
    background: transparent;

    font-size: 34px;
}

.card small {
    opacity: .55;
}


/* IPHONE */

@media (max-width: 600px) {

    .app {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bg {
        /*
         * Ta photo est verticale :
         * on conserve Orelsan vers le centre de l'écran.
         */
        background-position: 50% center;
    }

    .content {
        max-width: 100%;
    }

    .kicker {
        font-size: 12px;
        letter-spacing: .22em;
    }

    .date {
        margin-bottom: 30px;
    }

    h1 {
        /*
         * Important :
         * AUJOURD'HUI tient maintenant dans la largeur
         * d'un iPhone 11.
         */
        font-size: clamp(52px, 15.5vw, 72px);
        letter-spacing: -.065em;
    }

    #message {
        margin-top: 28px;
        font-size: 21px;
    }

    .clock {
        margin-top: 22px;
        font-size: 12px;
        letter-spacing: .08em;
    }

    #installHelp {
        margin-top: 42px;
    }
}

#pushTest {
    display: block;
    margin: 14px auto 0;
    padding: 11px 18px;

    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);

    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;

    cursor: pointer;
}