/*
Theme Name: Laeti Réflexologie
Theme URI: https://laeti-reflexologie.fr/
Description: Thème enfant Blocksy personnalisé pour le site Laeti Réflexologie.
Author: Jonathan Lacoste
Author URI: https://joenibiru.fr/
Template: blocksy
Version: 1.0.1
Text Domain: blocksy-child
*/

/* ==========================================================
   GOOGLE FONTS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ==========================================================
   VARIABLES GLOBALES
========================================================== */

:root {

    /* Couleurs */
    --color-primary: #8FAF9A;
    --color-primary-dark: #6F907A;
    --color-secondary: #EADCC8;
    --color-background: #FAF7F1;
    --color-text: #2F332F;
    --color-muted: #6F756D;

    /* Typographie */
    --font-title: "Playfair Display", serif;
    --font-body: "Lato", sans-serif;

    /* Design */
    --radius-soft: 24px;
    --shadow-soft: 0 18px 45px rgba(47, 51, 47, .10);

}

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

html{
    scroll-behavior:smooth;
}

body {
     background-image:
        linear-gradient(
            rgba(250, 247, 241, 0.45),
            rgba(250, 247, 241, 0.45)
        ),
        url("/wp-content/themes/blocksy-child/asset/images/minimalistic-zen-stone-background.jpg") !important;
            background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text);
}

/* ==========================================================
   TYPOGRAPHIE
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.site-title{

    font-family:var(--font-title);
    color:#19374A;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.02em;
    margin-bottom:.8em;

}

h1{
    font-size:clamp(2.8rem,6vw,5rem);
}

h2{
    font-size:clamp(2.1rem,4vw,3.3rem);
}

h3{
    font-size:clamp(1.6rem,3vw,2.3rem);
}

h4{
    font-size:1.5rem;
}

h5{
    font-size:1.25rem;
}

h6{
    font-size:1.1rem;
}

p,
li{

    font-size:1.05rem;
    color:var(--color-text);

}

strong{
    font-weight:700;
}

small{
    color:var(--color-muted);
}

/* ==========================================================
   LIENS
========================================================== */

a{

    color:var(--color-primary-dark);
    text-decoration-thickness:1px;
    text-underline-offset:4px;
    transition:.3s ease;

}

a:hover{

    color:var(--color-primary);

}

/* ==========================================================
   BOUTONS
========================================================== */

.wp-block-button__link,
.ct-button{

    border-radius:999px;
    font-weight:600;
    transition:.3s ease;

}

.wp-block-button__link:hover,
.ct-button:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   HERO
========================================================== */

.hero-reflexologie{

    min-height:70vh;
    display:flex;
    align-items:center;
    padding:clamp(3rem,8vw,7rem)
            clamp(1.5rem,5vw,5rem);

    border-radius:0 0 48px 48px;

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

}

.hero-reflexologie h1{

    max-width:760px;

}

.hero-reflexologie p{

    max-width:620px;
    color:var(--color-muted);
    font-size:1.15rem;

}

/* ==========================================================
   CARTES
========================================================== */

.carte-service{

    background:rgba(255,255,255,.82);

    border:1px solid rgba(143,175,154,.22);

    border-radius:var(--radius-soft);

    box-shadow:var(--shadow-soft);

    backdrop-filter:blur(12px);

    padding:clamp(1.8rem,3vw,2.6rem);

    transition:.35s ease;

}

.carte-service:hover{

    transform:translateY(-6px);

    box-shadow:0 24px 50px rgba(0,0,0,.12);

}

/* ==========================================================
   SECTION FOND
========================================================== */

.section-bg-bienetre{

    position:relative;
    overflow:hidden;
    border-radius:var(--radius-soft);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    max-width:100%;
    height:auto;

}

/* ==========================================================
   FORMULAIRES
========================================================== */

input,
textarea,
select{

    border-radius:16px;
    border:1px solid #d8d8d8;
    padding:.9rem 1rem;
    font-family:var(--font-body);

}

/* ==========================================================
   TITRE DE PAGE
   (Masqué uniquement sur l'accueil)
========================================================== */

.home .entry-header,
.home .page-title,
.home .entry-title{

    display:none;

}

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

@media (max-width:768px){

    body{

        font-size:16px;

        background-attachment:scroll;

    }

    .hero-reflexologie{

        min-height:58vh;
        border-radius:0 0 32px 32px;

    }

    .carte-service{

        padding:1.5rem;

    }

    h1{

        font-size:2.6rem;

    }

}