/* =========================================
   SOKANRED
   MAINTENANCE PAGE
   MOBILE FIRST
========================================= */

/* -----------------------------------------
   PALETTE
----------------------------------------- */

:root {

    --blue-night: #09131b;

    --stone: #b8b0a3;

    --stone-light: #ded7cc;

    --stone-dark: #77746e;

    --red: #a33b3b;

}

/* -----------------------------------------
   RESET
----------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    background: var(--blue-night);
}

body {
    margin: 0;
    background: var(--blue-night);
    color: var(--stone);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

/* =========================================
   PAGE
========================================= */

.maintenance {
    width: 100%;
    overflow: hidden;
}

/* =========================================
   LOGO
========================================= */

.logo {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 80px;
    aspect-ratio: 1 / 1;
    padding: 3px;
    border: 1px solid var(--red);
    line-height: 0;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   HEADER
========================================= */

.masthead {
    min-height: 100svh;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------
   SOKANRED
----------------------------------------- */

.site-name h1 {
    margin: 0;
    color: var(--stone-light);
    font-family:
        Georgia,
        serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.04em;
}

.site-name span {
    color: var(--red);
}

/* -----------------------------------------
   HERO
----------------------------------------- */

.hero-content {
    margin-top: auto;
    padding-bottom: 12vh;
}

/* -----------------------------------------
   EYEBROW
----------------------------------------- */

.eyebrow {
    margin-bottom: 25px;
    color: var(--red);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
}

/* -----------------------------------------
   GRAND TITRE
----------------------------------------- */

.hero-content h2 {
    margin: 0;
    color: var(--stone-light);
    font-family:
        Georgia,
        serif;
    font-size: clamp(3.4rem, 18vw, 8rem);
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.05em;
}

.hero-content h2 span {
    color: var(--red);
}

/* =========================================
   MESSAGE PRINCIPAL
========================================= */

.message {
    padding: 100px 25px;
}

/* -----------------------------------------
   INTRO
----------------------------------------- */

.message-intro {
    margin-left: 12%;
    margin-bottom: 80px;
}

.message-intro p {
    margin: 0;
    max-width: 400px;
    color: var(--stone-light);
    font-family:
        Georgia,
        serif;
    font-size: 1.6rem;
    line-height: 1.3;
}

/* -----------------------------------------
   TEXTE
----------------------------------------- */

.message-body {
    max-width: 470px;
}

.message-body p {
    margin: 0 0 30px;
    color: var(--stone);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.9;
}

/* =========================================
   MARQUE
========================================= */

.art-mark {
    width: 10px;
    height: 10px;
    margin: 80px auto;
    border-radius: 50%;
    background: var(--red);
}

/* =========================================
   CONCLUSION
========================================= */

.message-closing {
    margin-left: 20%;
}

.thanks {
    margin: 0 0 35px;
    color: var(--stone-light);
    font-family:
        Georgia,
        serif;
    font-size: 1.5rem;
    line-height: 1.3;
}

.return {
    margin: 0;
    max-width: 300px;
    color: var(--stone-dark);
    font-size: 0.85rem;
    line-height: 1.8;
}

/* =========================================
   VERSION FRANÇAISE
========================================= */

.message-french {
    border-top: 1px solid rgba(184, 176, 163, 0.15);
}

/* -----------------------------------------
   LANGUE
----------------------------------------- */

.language-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 80px;
}

.language-header span {
    color: var(--red);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
}

.language-header p {
    margin: 0;
    color: var(--stone-dark);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
}

/* -----------------------------------------
   TITRE FR
----------------------------------------- */

.message-french h2 {
    margin: 0 0 80px;
    color: var(--stone-light);
    font-family:
        Georgia,
        serif;
    font-size: clamp(2.8rem, 14vw, 6rem);
    font-weight: 400;
    line-height: 0.9;
}

.message-french h2 span {
    color: var(--red);
}

/* =========================================
   FOOTER
========================================= */

footer {
    padding: 50px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--stone-dark);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
}

.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
}

/* =========================================
   TABLETTE
========================================= */

@media (min-width: 768px) {

    .masthead {
        padding: 50px 10%;
    }

    .logo {
        top: 50px;
        right: 50px;
        width: 110px;
        padding: 4px;
    }

    .message {
        padding: 140px 10%;
    }

    .message-body {
        max-width: 550px;
    }

    .message-body p {
        font-size: 1rem;
    }

}

/* =========================================
   ORDINATEUR
========================================= */

@media (min-width: 1100px) {

    .masthead {
        padding: 60px 12%;
    }

    .logo {
        top: 60px;
        right: 10%;
        width: 130px;
        padding: 5px;
    }

    .message {
        max-width: 1400px;
        margin: auto;
        padding: 180px 12%;
    }

    .message-intro {
        margin-left: 35%;
    }

    .message-closing {
        margin-left: 45%;
    }

    .message-body {
        max-width: 600px;
    }

}