/* ==========================================
   BASE
========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: #0f0f10;
    color: #f1f1f1;

    font-family: Arial, sans-serif;
}


body {
    min-height: 100vh;
}



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

.site-header {
    text-align: center;
    padding: 40px 20px;
    border-bottom: 1px solid #222;
}


.site-header h1 {
    margin: 0;
    font-size: 42px;
    letter-spacing: 1px;
}


.site-header p {
    margin-top: 10px;
    margin-bottom: 0;
    color: #aaa;
    font-size: 14px;
}



/* ==========================================
   GRID PRINCIPALE
========================================== */

.grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    width: 100%;
    min-height:
        calc(100vh - 180px);
}



/* ==========================================
   CARTE LIVRE
========================================== */


.book-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* IMPORTANT :
       ne plus centrer tout le contenu ensemble */
    justify-content: flex-start;
    min-width: 0;
    padding: 60px 40px 40px;
    text-align: center;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: visible;
    transition:
        background .3s ease,
        z-index 0s;
}

/* carte survolée devant toutes les autres */

.book-card:hover {
    z-index: 50;

    background:
        rgba(255, 255, 255, .015);
}

/* ==========================================
   BORDURES GRID DESKTOP
========================================== */

/* troisième colonne */

.book-card:nth-child(3n) {
    border-right: none;
}

/* dernière ligne */

.book-card:nth-last-child(-n + 3) {
    border-bottom: none;
}

/* ==========================================
   CONTAINER DU LIVRE
========================================== */

.book-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* hauteur fixe du livre */
    height: 450px;
    min-height: 450px;
    flex: 0 0 450px;
    margin-bottom: 40px;
    perspective: 2000px;
    overflow: visible;
}

/* ==========================================
   LIVRE
========================================== */

.book {
    position: relative;
    width: 280px;
    height: 400px;
    flex: none;
    cursor: pointer;
    transform-style: preserve-3d;
    transition:
        transform .8s
        cubic-bezier(.4, 0, .2, 1);
}



/* ==========================================
   COUVERTURE
========================================== */

.book-cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            #2a2a2a,
            #111
        );

    border: 1px solid #444;
    color: #eee;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    transform-origin: left;
    transform-style: preserve-3d;
    backface-visibility: visible;
    box-shadow:
        10px
        10px
        30px
        rgba(0, 0, 0, .5);

    transition:
        transform .8s
        cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================
   VERSO DE LA COUVERTURE
========================================== */

.book-cover::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #fff;

    background-image: var(--page-left);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid #ddd;

    transform: rotateY(180deg);

    backface-visibility: hidden;

    box-shadow:
        inset -15px 0 25px rgba(0, 0, 0, .10);
}


.book-cover span {
    position: relative;
    z-index: 2;
    backface-visibility: hidden;
    transform: rotateY(0deg) translateZ(2px);
}



/* ==========================================
   PAGES
========================================== */

.book-pages {
    position: absolute;

    top: 1%;
    left: 1%;

    z-index: 1;

    width: 99%;
    height: 99%;

    background-color: #f8f5ed;

    background-image:
        var(--page-right);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    box-shadow:
        inset 15px 0 25px rgba(0,0,0,.12),
        5px 5px 15px rgba(0,0,0,.2);

    border: 1px solid rgba(0,0,0,.15);
}


/* ==========================================
   ANIMATION DU LIVRE
========================================== */

.book-card:hover .book {
    /*
       140px = moitié de la largeur du livre.

       Le livre se décale pour que
       l'ouverture reste visuellement centrée.
    */
    transform:
        rotateY(-10deg)
        translateX(140px);
}

.book-card:hover .book-cover {
    transform:
        rotateY(-145deg);
}


/* ==========================================
   OMBRE DU LIVRE
========================================== */

.book::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 5%;
    width: 90%;
    height: 30px;
    background:
        rgba(0, 0, 0, .4);
    filter:
        blur(20px);
    border-radius: 50%;
    opacity: .6;
    transition:
        transform .8s ease,
        opacity .8s ease;
}


.book-card:hover .book::after {
    transform:
        translateX(-140px)
        scaleX(1.5);
    opacity: .2;
}



/* ==========================================
   TITRE DU LIVRE
========================================== */

.book-card h2 {
    position: relative;
    z-index: 1;
    margin:
        10px
        0;
    font-size: 20px;
    transition:
        color .3s ease;
}

.book-card:hover h2 {
    color: #fff;
}

/* ==========================================
   DESCRIPTION
========================================== */

.book-card p {
    position: relative;
    z-index: 1;
    max-width: 260px;
    margin:
        10px
        auto;
    
        margin-bottom: 35px;
    
    color: #bbb;
    font-size: 16px;
    line-height: 1.4;
    transition:
        color .3s ease;
}


.book-card:hover p {
    color: #ddd;
}


/* ==========================================
   BOUTON
========================================== */

.btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    /* pousse le bouton tout en bas */
    margin-top: auto;
    padding:
        10px
        16px;

    background: #fff;
    border: none;
    border-radius: 5px;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    transition:
        background .2s ease,
        transform .2s ease;
}


.btn:hover {
    background: #ddd;
    transform:
        translateY(-1px);
}



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

.site-footer {
    padding: 20px;
    border-top:
        1px solid #222;
    color: #666;
    font-size: 12px;
    text-align: center;
}


/* ==========================================
   CONTACT - PETITE ENVELOPPE FLOTTANTE
========================================== */

.site-header {
    position: relative;
}


.contact-mail {
    position: absolute;

    top: 28px;

    /* décalée de 100px du bord droit */
    right: 100px;

    z-index: 1000;

    /* 3 fois plus grande */
    width: 126px;
    height: 96px;

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

    opacity: .45;

    text-decoration: none;

}


/* ENVELOPPE */

.envelope {
    position: relative;

    display: block;

    width: 96px;
    height: 66px;

    background: #dedede;

    border: 1px solid #777;
    border-radius: 6px;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, .25);

    overflow: hidden;

        animation:
        envelope-float 4s
        ease-in-out
        infinite;
}


/* RABAT */

.envelope::before {
    content: "";

    position: absolute;

    top: -39px;
    left: 50%;

    width: 69px;
    height: 69px;


    background: #cfcfcf;

    border-right: 1px solid #777;
    border-bottom: 1px solid #777;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* PLI INFERIEUR */

.envelope::after {
    content: "";

    position: absolute;

    bottom: -51px;
    left: 50%;

    width: 72px;
    height: 72px;

    background: #d6d6d6;

    border-left: 1px solid #777;
    border-top: 1px solid #777;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* PETIT MOUVEMENT DE VOL */

@keyframes envelope-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }
}


/* SURVOL */

.contact-mail:hover {
    opacity: 1;

    transform:
        scale(1.12);
}


@media (max-width: 1000px) {

    .contact-mail {
        position: fixed;

        top: auto;
        right: 20px;
        bottom: 20px;

        z-index: 1000;

        animation:
            envelope-float 4s
            ease-in-out
            infinite;
    }

}

/* ==========================================
   RESPONSIVE
   901px -> 1300px
   2 LIVRES PAR LIGNE
========================================== */

@media
    (min-width: 901px)
    and
    (max-width: 1700px) {

    .grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .book-card {
        border-right:
            1px solid #222;

        border-bottom:
            1px solid #222;
    }

    /* deuxième carte de chaque ligne */

    .book-card:nth-child(2n) {
        border-right: none;
    }

    /* réactive la bordure éventuellement
       retirée par la règle desktop 3 colonnes */

    .book-card:nth-child(3n) {
        border-right:
            1px solid #222;
    }

    /* si une carte est à la fois
       3n et paire */

    .book-card:nth-child(6n) {
        border-right: none;
    }

    /* les deux dernières cartes */

    .book-card:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    /* z-index carte survolée */

    .book-card:hover {
        z-index: 50;
    }

}



/* ==========================================
   TABLETTE / MOBILE
   900px ET MOINS
   1 LIVRE PAR LIGNE
========================================== */

@media (max-width: 900px) {

    .grid {
        grid-template-columns: 1fr;
    }


    .book-card {
        min-height: 850px;
        padding:
            70px
            30px;

        border-right: none;
        border-bottom:
            1px solid #222;
        overflow: visible;
    }

    .book-card:last-child {
        border-bottom: none;
    }

    /* LIVRE PLUS GRAND */

    .book-container {
        margin-bottom: 55px;
    }


    .book {
        width: 320px;
        height: 460px;
    }


    .book-cover {
        padding: 35px;
        font-size: 24px;
    }

    /* moitié de 320px */

    .book-card:hover .book {
        transform:
            rotateY(-10deg)
            translateX(160px);
    }


    .book-card:hover .book::after {
        transform:
            translateX(-160px)
            scaleX(1.5);
    }

    /* TITRE */

    .book-card h2 {
        margin:
            20px
            0
            10px;
        font-size: 25px;
    }

    /* DESCRIPTION */

    .book-card p {
        max-width: 420px;
        font-size: 20px;
        line-height: 1.6;
    }


    /* BOUTON */

    .btn {
        margin-top: auto;
       padding:
            14px
            24px;

        font-size: 16px;
    }

    .book-card:hover {
        z-index: 50;
    }

}


/* ==========================================
   MOBILE
   600px ET MOINS
========================================== */

@media (max-width: 600px) {

    .site-header {
        padding:
            35px
            20px;
    }

    .site-header h1 {
        font-size: 36px;
    }

    .site-header p {
        font-size: 15px;
    }

    .book-card {
        min-height: 760px;
        padding:
            55px
            20px;
    }

    /*
       Le livre reste volontairement grand
       sur téléphone
    */

    .book {
        width: min(72vw, 300px);
        height:
            min(103vw, 430px);
    }


    .book-cover {
        padding:
            28px
            22px;
        font-size: 21px;
    }

    /*
       Sur mobile tactile,
       on évite un déplacement énorme
       vers la droite.
    */

    .book-card:hover .book {
        transform:
            rotateY(-7deg)
            translateX(25%);
    }

    .book-card:hover .book::after {
        transform:
            translateX(-25%)
            scaleX(1.35);
    }

    .book-container {
        margin-bottom: 45px;
    }

    .book-card h2 {
        font-size: 23px;
    }

    .book-card p {
        width: 100%;
        max-width: 360px;
        font-size: 16px;
        line-height: 1.65;
    }


    .btn {
        padding:
            14px
            25px;
        font-size: 16px;
    }

        .contact-mail {
        position: fixed;

        top: auto;
        left: auto;

        right: 16px;
        bottom: 16px;

        z-index: 1000;

        transform: scale(.9);
        transform-origin: bottom right;

        opacity: .4;
    }

}



/* ==========================================
   PETITS MOBILES
   380px ET MOINS
========================================== */

@media (max-width: 380px) {
    .site-header h1 {
        font-size: 31px;
    }

    .book-card {
        min-height: 690px;
        padding:
            45px
            18px;
    }


    .book {
        width: 250px;
        height: 357px;
    }

    .book-cover {
        padding: 22px;
        font-size: 18px;
    }

    .book-card h2 {
        font-size: 21px;
    }

    .book-card p {
        font-size: 15px;
        max-width: 320px;
    }

}