/*
Theme Name: Hjartadh
Theme URI: https://www.hjartadh.fr
Author: Morgane Lagadec
Author URI: https://www.hjartadh.fr
Description: Le thème que j'ai créé pour mon blog - EN TEST
Version: 1.0
*/


/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap') ;
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap') ;


/* DESKTOP LARGE */

    /* Général */

    body {
        padding : 0 ;
        margin : 0 ;
    }

    h1, h2, h3, h4, h5, h6 {
        color : #FF86CD ;
        font-family : 'Homemade Apple', cursive ;
    }

    h1 {
        font-size : 36pt ;
        line-height : 115% ;
    }

    h2 {
        font-size : 24pt ;
        line-height : 100% ;
    }

    p {
        margin : 0 ;
        color : #48002f ;
        font-family : 'Roboto', sans-serif ;
    }

    a {
        text-decoration : none ;
        color : #FF86CD ;
    }

    a:hover {
        color : #48002f ;
    }

    a:visited {
        color : #72004b ;
    }


    /* Header */

    header {
        display : flex ;
        margin-bottom : 75px ;
    }

    .logo {
        width : 20% ;
        padding : 10px ;
        position : relative ;
    }

    .imgLogo {
        max-width : 100% ;
    }

    .imgFondHeader {
        position : absolute ;
        top : 0 ;
        left : 0 ;
        z-index : -2 ;
    }

    .menus {
        width : 80% ;
        display : flex ;
        flex-direction : column ;
        justify-content : space-between ;
    }

    .menuHaut {
        padding : 10px ;
        display : flex ;
        justify-content : space-between ;
    }

    .menuHaut nav, .menuHaut ul, .menuHaut li {
        padding : 0 ;
        margin : 0 ;
        list-style-type : none ;
    }

    .menuHaut ul {
        display : flex ;
    }

    .socials {
        width : 50% ;
    }

    .socials img {
        width : 40px ;
    }

    .socials li {
        margin-right : 5px ;
        display : flex ;
        align-items : center ;
    }

    .recherche {
        display : flex ;
        align-items : center ;
        width : 50% ;
    }

    .recherche form {
        width : 100% ;
    }

    .recherche input {
        width : calc(100% - 60px) ;
        height : 30px ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        background : none ;
        display : block ;
        padding : 0 10px ;
        float : left ;
    }

    .recherche input::placeholder {
        color : #72004b ;
        font-family : 'Roboto', sans-serif ;
    }

    .recherche button {
        padding : 0 ;
        box-sizing : content-box ;
        width : 30px ;
        height : 30px ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        background : #72004b ;
        float : right ;
    }

    .recherche button:hover {
        border : #48002f solid 2px ;
        background : #48002f ;
    }

    .menuBas {
        position : relative ;
        padding : 0 10px ;
    }

    .menuCouleur {
        position : absolute ;
        top : 50% ;
        transform : translateY(-50%) ;
        left : 0 ;
        width : 100% ;
        height : 100% ;
        background : #FFCBE9 ;
        z-index : -2 ;
        clip-path : polygon(5% 40%, 100% 40%, 100% 60%, 0 60%) ;
        filter : blur(50px) ;
    }

    .menuBas nav, .menuBas ul {
        padding : 0 ;
        margin : 0 ;
        list-style-type : none ;
    }

    .menuPrincipal {
        display : flex ;
        justify-content : end ;
        font-size : 24pt ;
        text-align : center ;
        font-family : 'Homemade Apple', cursive ;
        line-height : 115% ;
    }

    .menuPrincipal a {
        color : #72004b ;
    }

    .menuPrincipal a:hover {
        color : #48002f ;
    }

    .menuPrincipal a:visited {
        color : #FF86CD ;
    }

    .menuPrincipal li {
        margin-left : 50px ;
        position : relative ;
    }

    .menuPrincipal img {
        height : 25px ;
    }

    .sub-menu {
        display : none ;
        background : white ;
        font-size : 18pt ;
        text-align : center ;
        position : absolute ;
        width : 100% ;
        box-sizing : border-box ;
        line-height : 105% ;
        z-index : 5 ;
    }

    .sub-menu li {
        margin-left : 0 ;
        padding : 0 10px ;
    }

    .sub-menu a {
        color : #72004b ;
    }

    .sub-menu a:hover {
        color : #48002f ;
    }

    .sub-menu a:visited {
        color : #FF86CD ;
    }


    /* Main */

    .main {
        display : flex ;
        padding : 10px 100px ;
    }

    main {
        width : 66% ;
    }

    .pageTitle {
        position : relative ;
        background : white ;
        left : 5% ;
        width : 90% ;
    }

    .post {
        position : relative ;
        margin-bottom : 75px ;
        width : 100% ;
        background : white ;
        box-shadow : 5px 5px 5px 5px rgba(0, 0, 0, .25) ;
    }

    .postTitle {
        position : relative ;
        width : 80% ;
        left : 10% ;
    }

    .postContent {
        padding : 25px ;
    }

    .postImg img {
        max-width : 100% ;
        height : 250px ;
        object-fit : cover ;
    }

    .theMeta {
        margin-bottom : 25px ;
        font-style : italic ;
    }

    .extrait {
        margin-bottom : 25px ;
    }

    .lienTitre {
        color : #FF86CD
    }

    .lienTitre:hover {
        color : #72004b
    }

    .lienTitre:visited {
        color : #FF86CD
    }

    .boutonPost {
        display : inline-block ;
        color : white ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        background : #72004b ;
        padding : 10px ;
        margin-top : 25px ;
        font-family : 'Roboto', sans-serif ;
    }

    .boutonPost:hover {
        color : white ;
        border : solid 2px #48002f ;
        background : #48002f ;
    }

    .boutonPost:visited {
        color : white ;
    }

    .siteNav {
        display : flex ;
        justify-content : space-between ;
        margin-bottom : 75px ;
    }

    .siteNavPrev a {
        color : white ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        padding : 10px ;
        background : #72004b ;
        font-family : 'Roboto', sans-serif ;
    }

    .siteNavPrev a:hover {
        color : white ;
        border : solid 2px #48002f ;
        background : #48002f ;
    }

    .siteNavNext a {
        color : white ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        padding : 10px ;
        background : #72004b ;
        font-family : 'Roboto', sans-serif ;
    }
    
    .siteNavNext a:hover {
        color : white ;
        border : solid 2px #48002f ;
        background : #48002f ;
    }


    /* Footer */

    footer {
        padding : 10px ;
        text-align : center ;
        position : relative ;
    }

    .top {
        display : none ;
        width : 50px ;
        height : 50px ;
        border : solid 2px #72004b ;
        border-radius : 6px ;
        background : #72004b ;
        position : fixed ;
        z-index : 5 ;
        left : 95% ;
        top : 95% ;
        transform : translate(-50%, -50%) ;
    }

    .top:hover {
        border : solid 2px #48002f ;
        background : #48002f ;
    }

    .top img {
        width : 30px ;
        height : 30px ;
        vertical-align : -25px ;
        text-align : center ;
    }

    .imgFondFooter {
        position : absolute ;
        z-index : -1 ;
        bottom : 0 ;
        right : 0 ;
    }