/*
 Theme Name:   LEBdT - Intemporel (Storefront Child)
 Theme URI:    https://lebauchedutemps.com
 Description:  Thème enfant doux et harmonieux pour Storefront. Palette "Intemporel".
 Author:       L'Ebauche du Temps — Atelier
 Author URI:   https://lebauchedutemps.com
 Template:     storefront
 Version:      1.2.0
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  lebdt-intemporel-storefront-child
*/

/* ------------------------------------------------------
   PALETTE & BASE
------------------------------------------------------ */

:root {
    --blanc-lin:   #F7F3EC;
    --creme-vanille:#F2E7D8;
    --beige-sable: #E6D8C9;
    --ivoire-doux: #EADFCC;
    --dore-mat:    #C9A36A;
    --dore-fonce:  #B38955;
    --brun-encre:  #4A3B35;
    --gris-brume:  #BAB7B1;

    --radius-card: 16px;
    --radius-btn:  8px;
    --shadow-soft: 0 8px 22px rgba(0,0,0,.05);
}

/* Corps & typographie */

body {
    background: var(--blanc-lin);
    color: var(--brun-encre);
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", "Times New Roman", serif;
    color: var(--brun-encre);
    font-weight: 600;
    margin-top: 0;
}

/* Liens */

a {
    color: var(--dore-mat);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--dore-fonce);
}

/* ------------------------------------------------------
   BOUTONS
------------------------------------------------------ */

.button,
.wp-element-button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--dore-mat);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: var(--shadow-soft);
    transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
    cursor: pointer;
}

.button:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--dore-fonce);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Boutons secondaires doux */

.btn-soft {
    background: var(--ivoire-doux);
    color: var(--brun-encre) !important;
    box-shadow: var(--shadow-soft);
}

.btn-soft:hover {
    background: #f0e4d4;
}

/* ------------------------------------------------------
   FORMULAIRES (général + newsletter Brevo)
------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background: var(--ivoire-doux);
    border: 1px solid rgba(74,59,53,.14);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: var(--brun-encre);
    font-family: inherit;
    font-size: 0.95rem;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--dore-mat);
    box-shadow: 0 0 0 3px rgba(201,163,106,.20);
}

/* Zone newsletter Brevo (sibwp_form) */

.lebdt-newsletter form p {
    margin-bottom: 0.6rem;
}

.lebdt-newsletter input[type="email"],
.lebdt-newsletter input[type="text"] {
    width: 100%;
    max-width: 340px;
}

/* ------------------------------------------------------
   STRUCTURE CARDS D'ACCUEIL
------------------------------------------------------ */

.lebdt-section,
.hero-intemporel,
.lebdt-newsletter {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    margin-bottom: 2rem;
    background: var(--creme-vanille);
}

.lebdt-section h2,
.lebdt-newsletter h3 {
    margin-bottom: 0.8rem;
}

/* Section "Sélection du moment" plus claire */

.lebdt-selection {
    background: var(--blanc-lin);
}

/* ------------------------------------------------------
   HERO INTEMPOREL (comme la maquette)
------------------------------------------------------ */

.hero-intemporel {
    background: var(--creme-vanille);
    padding: 3rem 2.2rem;
    border-radius: var(--radius-card);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    margin-bottom: 2.5rem;
}

/* Bloc texte */

.hero-txt {
    flex: 1 1 360px;
    min-width: 280px;
}

.hero-txt h1 {
    font-size: 2.4rem;
    margin-bottom: 0.4rem;
}

.hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--brun-encre);
}

/* Boutons du hero */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.hero-btn {
    display: inline-block;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-btn);
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: var(--shadow-soft);
    transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}

/* Principal */

.hero-btn.primary {
    background: var(--dore-mat);
    color: #fff !important;
}

.hero-btn.primary:hover {
    background: var(--dore-fonce);
    transform: translateY(-1px);
}

/* Doux */

.hero-btn.soft {
    background: var(--ivoire-doux);
    color: var(--brun-encre) !important;
}

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

/* Bloc visuel à droite */

.hero-visu {
    flex: 1 1 320px;
    min-width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder de la future photo */

.hero-photo {
    width: 100%;
    max-width: 340px;
    height: 240px;
    border-radius: 16px;
    background: var(--ivoire-doux);
    box-shadow: 0 10px 26px rgba(0,0,0,.07);
}

/* ------------------------------------------------------
   SECTION "PIÈCES INTEMPORELLES"
------------------------------------------------------ */

.lebdt-intemporelles {
    background: var(--beige-sable);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8rem;
}

.lebdt-intemporelles .txt {
    flex: 1 1 360px;
    min-width: 260px;
}

.lebdt-intemporelles .visu {
    flex: 1 1 280px;
    min-width: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Case photo vide à droite */

.lebdt-intemporelles .visu::before {
    content: "";
    width: 100%;
    max-width: 260px;
    height: 220px;
    border-radius: 16px;
    background: var(--ivoire-doux);
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
    display: block;
}

/* ------------------------------------------------------
   SECTION NEWSLETTER ACCUEIL
------------------------------------------------------ */

.lebdt-newsletter {
    background: var(--ivoire-doux);
    text-align: left;
}

.lebdt-newsletter p {
    margin-bottom: 1rem;
}

/* ------------------------------------------------------
   WOOCOMMERCE – PRODUITS EN ACCUEIL
------------------------------------------------------ */

.woocommerce ul.products li.product {
    background: var(--creme-vanille);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 0.9rem;
    border: 1px solid rgba(74,59,53,.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 0.95rem;
}

.woocommerce ul.products li.product .price {
    font-weight: 600;
    color: var(--brun-encre);
}

/* ------------------------------------------------------
   RESPONSIVE
------------------------------------------------------ */

@media (max-width: 900px) {
    .hero-intemporel,
    .lebdt-intemporelles {
        flex-direction: column;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .lebdt-intemporelles .txt {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .hero-intemporel {
        padding: 2rem 1.3rem;
    }

    .hero-txt h1 {
        font-size: 2rem;
    }

    .hero-sub {
        font-size: 1rem;
    }

    .lebdt-section,
    .lebdt-newsletter {
        padding: 1.6rem 1.3rem;
    }
}