/* Typography CSS */

h1, h2, h3, h4, h5, h6{
    font-family: 'Playfair 144pt';
    line-height:1;
    font-weight: 300;
    margin: 0.75em 0;
}

h1{
    font-size:2rem;
    color: var(--noir)
}

h2{
    font-size:1.75rem;
}
h3, h4, h5 ,h6{
    font-size:1.35rem;
}
@media screen and (min-width: 800px){
    h1{
        font-size:2.85rem;
    }
    h2{
        font-size:2.25rem;
    }
    h3, h4, h5 ,h6{
        font-size:1.65rem;
    }
}
@media screen and (min-width: 1440px){
    h1{
        font-size:3.5rem;
    }
    h2{
        font-size:2.75rem;
    }
    h3, h4, h5 ,h6{
        font-size:1.75rem;
    }
}
@media screen and (min-width: 1680px){
    h1{
        font-size:4rem;
    }
    h2{
        font-size:3.25rem;
    }
    h3, h4, h5 ,h6{
        font-size:2rem;
    }
}


.has-small-font-size{
    font-size:0.8rem;
}
.has-medium-font-size{
    font-size:1.25rem;
}
.has-large-font-size{
    font-size:1.5rem;
}
.has-x-large-font-size{
    font-size:2rem;
}

.bouton a{
    text-transform: none;
    font-weight: bold;
    letter-spacing: 0.1rem;
    border:1px solid var(--jade);
    background-color: var(--jade);
    color: var(--blanc);
    padding: 0.75rem 1rem !important;
}
.bouton.contour a{
    background-color: transparent;
    color: var(--noir)
}
.bouton a:hover{
    background-color: var(--noir);
    color: var(--blanc);
    border-color: var(--noir)
}
.bouton.devis a{
    display: flex;
    align-items: center;
    gap:0 0.25rem
}
.bouton.devis a::before{
    content:"";
    display:inline-flex;
    width:24px; height:24px;
    background: url(../img/pen.svg) no-repeat center / contain
}
.bouton.devis a:hover::before{
    background-image: url(../img/pen-white.svg);
}
.wp-block-button a{
    font-weight: bold;
    letter-spacing: 0.1rem;
}
.wp-block-button a:hover{
    background-color: var(--noir);
    color: var(--blanc);
}

@media screen and (min-width:1200px){
    .has-small-font-size{
        font-size:0.8rem;
    }
    .has-medium-font-size{
        font-size:1.5rem;
    }
    .has-large-font-size{
        font-size:2rem;
    }
    .has-x-large-font-size{
        font-size:3rem;
    }
}