/**
 * Selflie • Feuille de Style de la page d'attente
 *
 * @author Samuel Diakité <sdiakite@extrafine.fr>
 * @copyright © 2022 Samuel Diakité
 */

body {
    overflow-y: scroll;
    margin: 0;
    background-color: #74c7d0;
    color: #ffffff;
    line-height: 1.28;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}
/* -------------------------------------------------------------------------- */
a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity .2s ease-out;
}
a:hover {
    opacity: .5;
}
/* -------------------------------------------------------------------------- */
.ligne {
    position: absolute;
    display: inline-block;
    width: 120px;
    height: .5px;
    background-color: #ffffff;
    transform: translateX(-50%);
}
/* -------------------------------------------------------------------------- */
.content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1500px;
    min-height: 100vh;
    margin: 0 auto;
}
.content > div {
    margin-top: -3vh;
}

/* ========================================================================== */
/* CADRE */

.cadre {
    z-index: 1;
    position: relative;
}
.cadre > div {
    position: fixed;
    background-color: #ffffff;
}
.cadre .cadre-top {
    left: 0;
    top: 0;
    width: 100vw;
    height: 25px;
}
.cadre .cadre-right {
    right: 0;
    top: 0;
    width: 25px;
    height: 100vh;
}
.cadre .cadre-bottom {
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 25px;
}
.cadre .cadre-left {
    left: 0;
    top: 0;
    width: 25px;
    height: 100vh;
}

/* ========================================================================== */
/* PHOTOS */

.content .photos {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 780px;
}
.photos > div {
    position: relative;
}
.photos .photo {
    overflow: hidden;
    position: absolute;
    border: 10px solid #ffffff;
}
.photos .photo img {
    display: block;
    width: 100%;
}
/* -------------------------------------------------------------------------- */
.photos .photo_01 {
    left: 23px;
    top: 6px;
    width: 235px;
    /* height: 155px; */
    transform: rotate(-6.2deg);
}
.photos .photo_02 {
    left: 230px;
    top: 77px;
    width: 180px;
    /* height: 120px; */
    transform: rotate(-4.0deg);
}
.photos .photo_03 {
    left: 17px;
    top: 187px;
    width: 297px;
    /* height: 197px; */
    transform: rotate(2.6deg);
}
.photos .photo_04 {
    left: 16px;
    top: 398px;
    width: 253px;
    /* height: 169px; */
    transform: rotate(-4.0deg);
}
.photos .photo_05 {
    left: 238px;
    top: 478px;
    width: 204px;
    /* height: 135px; */
    transform: rotate(2.7deg);
}
.photos .photo_06 {
    left: 14px;
    top: 596px;
    width: 278px;
    /* height: 208px; */
    transform: rotate(-6.2deg);
}
.photos .photo_07 {
    left: 292px;
    top: 636px;
    width: 230px;
    /* height: 152px; */
    transform: rotate(-4.0deg);
}
/* -------------------------------------------------------------------------- */
.photos .photo_08 {
    right: 245px;
    top: 28px;
    width: 192px;
    /* height: 128px; */
    transform: rotate(2.6deg);
}
.photos .photo_09 {
    right: 14px;
    top: 10px;
    width: 234px;
    /* height: 157px; */
    transform: rotate(0.0deg);
}
.photos .photo_10 {
    right: 225px;
    top: 185px;
    width: 216px;
    /* height: 162px; */
    transform: rotate(6.1deg);
}
.photos .photo_11 {
    right: 12px;
    top: 180px;
    width: 233px;
    /* height: 154px; */
    transform: rotate(-6.1deg);
}
.photos .photo_12 {
    right: 16px;
    top: 360px;
    width: 293px;
    /* height: 196px; */
    transform: rotate(2.6deg);
}
.photos .photo_13 {
    right: 0;
    top: 550px;
    width: 360px;
    height: 235px;
    transform: rotate(-4.0deg);
}
.photos .photo_13 img {
    width: 406px;
    margin-left: -20px;
    margin-top: -30px;
}
.photos .photo_14 {
    right: 345px;
    top: 640px;
    width: 225px;
    /* height: 149px; */
    transform: rotate(2.6deg);
}

/* ========================================================================== */
/* TEXTES */

.content .textes {
    z-index: 3;
    position: relative;
    margin: 0 auto;
    margin-top: calc(120px - 8vh);
    padding-right: 2.5vw;
    padding-bottom: 50px;
    text-align: center;
}
h1 {
    margin: 0;
}
h1 span {
    font-size: 0;
    visibility: hidden;
}
img.logo {
    height: 100px;
    /* margin-top: 80px; */
}
.baseline {
    margin-top: 1px;
}
.baseline img {
    height: 17px;
}
/* -------------------------------------------------------------------------- */
.socials {
    margin-top: 16px;
}
.socials div {
    display: inline-block;
    margin: 0 10px;
}
.socials div img.social-picto {
    height: 34px;
}
/* -------------------------------------------------------------------------- */
.services {
    margin-top: 30px;
}
.services .services-image {
    height: 35px;
}
.services .services-texte {
    font-size: 0;
    visibility: hidden;
}
.services .services-notabene {
    margin-top: 6px;
    font-family: sans-serif;
    font-size: 8px;
    font-weight: 100;
}
/* -------------------------------------------------------------------------- */
.ligne-1 {
    margin-top: 8px;
}
.horaires {
    margin-top: 25px;
}
.adresse {
    margin-top: 15px;
}
.ligne-2 {
    margin-top: 18px;
}
/* -------------------------------------------------------------------------- */
.coming-soon {
    margin-top: 50px;
    font-size: 30px;
}
/* -------------------------------------------------------------------------- */
.komunikey {
    margin-top: 40px;
}
.komunikey span {
    display: block;
}
.komunikey img {
    margin-top: 12px;
    height: 54px;
}

/* ========================================================================== */
/* RESPONSIVE */

@media (max-width: 1200px)
{
    .content .photos .photos-left {
        display: none;
    }
    .content .textes {
        margin-right: 60%;
    }
}

@media (max-width: 768px)
{
    .content .photos .photos-right {
        display: none;
    }
    .content .textes {
        margin-right: auto;
    }
}