/* ============================================================
   LOCADIE — TYPOGRAPHIE GLOBALE
   Fichier unique : familles, tailles, couleurs, titres, WooCommerce,
   blog, header, breadcrumb, prix, catégories, onglets.
   ============================================================ */

/* ------------------------------ */
/* VARIABLES TYPOGRAPHIQUES       */
/* ------------------------------ */
:root {
    /* Familles */
    --font-title: 'Kalam', cursive;
    --font-body: 'Playfair Display', serif;
    /* Couleurs typographiques */
    --color-title: #17522f;
    --color-title-dark: #0f3a20;
    --color-text: #222;
    --color-text-light: #444;
    /* Tailles globales */
    --fs-xs: 12px;
    --fs-s: 14px;
    --fs-m: 16px;
    --fs-l: 20px;
    --fs-xl: 28px;
    --fs-xxl: 38px;
    --fs-xxxl: 55px;
}

/* ============================================================
   1. TEXTE GLOBAL
   ============================================================ */
body {
    font-family: var(--font-body);
    font-size: var(--fs-m);
    color: var(--color-text);
    line-height: 1.6;
}

/* Paragraphes */
p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Liens */
a {
    color: var(--color-title);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ============================================================
   2. TITRES H1 → H6
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--color-title);
    margin-bottom: 0.5em;
}

/* Hiérarchie */
h1 { font-size: 48px; }

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-l);
}

h4 {
    font-size: var(--fs-m);
}

h5 {
    font-size: var(--fs-s);
    font-family: var(--font-body);
    color: var(--color-text-light);
}

h6 {
    font-size: var(--fs-xs);
    font-family: var(--font-body);
    color: var(--color-text-light);
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }
}

/* ============================================================
   3. HEADER / MENU / BREADCRUMB
   ============================================================ */

/* Menu principal */
.main-navigation a {
    font-family: var(--font-body);
    font-size: var(--fs-m);
    color: var(--color-title-dark);
}

/* Breadcrumb */
.storefront-breadcrumb {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-title);
}

/* ============================================================
   4. BLOG / ARTICLES
   ============================================================ */

/* Titre article */
.single-post .entry-title,
.blog .entry-title,
.archive .entry-title {
    font-family: var(--font-title);
    font-size: var(--fs-xl);
    color: var(--color-title-dark);
}

/* Métadonnées */
.entry-meta,
.entry-taxonomy {
    font-family: var(--font-body);
    font-size: var(--fs-s);
    color: var(--color-text-light);
}

    /* Catégories / tags */
    .entry-taxonomy .cat-links,
    .entry-taxonomy .tags-links {
        font-size: 18px;
        color: var(--color-title);
    }

/* Navigation articles */
.nav-links a {
    font-family: var(--font-title);
    font-size: 28px;
    font-style: italic;
    color: var(--color-title-dark);
}

/* ============================================================
   5. WOOCOMMERCE — TITRES / PRIX / CATÉGORIES
   ============================================================ */

/* Listing produits */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--color-title);
    line-height: 1.2;
}

/* Titre fiche produit */
.single-product .product_title {
    font-family: var(--font-title);
    font-size: 34px;
    color: var(--color-title-dark);
    line-height: 1.2;
}

/* Prix */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-title-dark);
    font-weight: 600;
}

/* Prix barré */
.woocommerce del {
    opacity: 0.6;
}

/* Sections WooCommerce */
.storefront-product-section .section-title {
    font-family: var(--font-title);
    font-size: 30px;
    color: var(--color-title);
}

/* Catégories produits */
.storefront-product-categories a h2 {
    font-family: var(--font-title);
    font-size: 22px;
    color: var(--color-title);
}

/* ============================================================
   6. ONGLET DESCRIPTION / AVIS
   ============================================================ */
.woocommerce-tabs h2,
.woocommerce-tabs h3 {
    font-family: var(--font-title);
    color: var(--color-title);
}

#tab-description h3 {
    font-size: 20px;
    font-weight: 600;
}

#tab-description p {
    font-family: var(--font-body);
    font-size: var(--fs-m);
    color: var(--color-text);
    line-height: 1.7;
}

/* ============================================================
   7. BADGES (promo, nouveauté)
   ============================================================ */
.woocommerce span.onsale {
    font-family: var(--font-title);
    font-size: 14px;
    color: #fff;
}

/* ============================================================
   8. RESPONSIVE WOOCOMMERCE
   ============================================================ */
@media (max-width: 768px) {
    .single-product .product_title {
        font-size: 28px;
    }

    .woocommerce ul.products li.product h2 {
        font-size: 18px;
    }

    .storefront-product-section .section-title {
        font-size: 24px;
    }
}