/* ==========================================================
   Magic Kado — typographie « fine »
   Échelle de titres plus légère et plus élégante sur tout le site.
   Chargé en dernier : les !important ne servent qu'à passer devant les
   tailles écrites en dur par le thème (styles inline du bandeau de titre)
   et par les widgets Elementor (titres de 70–80 px de l'accueil).

   Pour ajuster : modifier uniquement les variables ci-dessous.
   ========================================================== */

:root {
    /* Titres de contenu */
    --mk-h1: clamp(30px, 3.2vw, 42px);
    --mk-h2: clamp(25px, 2.5vw, 34px);
    --mk-h3: clamp(20px, 1.7vw, 24px);
    --mk-h4: 19px;
    /* Grand titre d'accueil (héros) */
    --mk-hero: clamp(34px, 4.4vw, 58px);
    /* Bandeau de titre des pages */
    --mk-pt-size: clamp(30px, 3vw, 40px);
    --mk-pt-height: 210px;
    --mk-pt-height-mobile: 150px;
    /* Texte */
    --mk-body: 16px;
    --mk-lead: 17px;
}

/* 1. Texte courant ------------------------------------------- */
body { font-size: var(--mk-body); }
.elementor-widget-text-editor { font-size: var(--mk-lead); }
p {
    line-height: 1.75;
    width: 100% !important;
}

/* 2. Titres HTML (pages, articles) ---------------------------
   Sans !important : ce fichier est chargé après le thème, ces tailles
   s'appliquent par défaut, mais les composants qui ont leur propre
   style (panier, commande, widgets) gardent la main. */
h1 { font-size: var(--mk-h1) !important; line-height: 1.15 !important; }
h2 { font-size: var(--mk-h2) !important; line-height: 1.2 !important; }
h3 { font-size: var(--mk-h3) !important; line-height: 1.25 !important; }
h4 { font-size: var(--mk-h4) !important; line-height: 1.3 !important; }
h1, h2, h3, h4 { letter-spacing: .01em; }

/* Bandeau : pas de Majuscule À Chaque Mot (« Finaliser Ma Commande ») */
body .page-header .page-header_title,
body .page-header .page-header_breadcrumbs,
body .page-header .page-header_breadcrumbs * { text-transform: none !important; }

/* Panier & commande (blocs WooCommerce) : titres à taille fixe */
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-totals-wrapper .wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
    font-family: "Bubblegum Sans", "Nunito", sans-serif !important;
    font-size: 24px !important; font-weight: 400 !important; text-transform: none !important;
    letter-spacing: .01em !important; color: var(--mk-navy) !important;
}
.wc-block-components-order-summary .wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name {
    font-family: "Nunito", sans-serif !important;
    font-size: 15px !important; font-weight: 800 !important; line-height: 1.35 !important;
    color: var(--mk-navy) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-title { font-size: 26px !important; }
.wc-block-components-checkout-order-summary__title-text { font-size: 18px !important; }

/* 3. Bandeau de titre de page (hauteur et titre) -------------- */
body .page-header {
    height: auto !important;
    min-height: var(--mk-pt-height) !important;
    padding-top: 10px !important;
    padding-bottom: 46px !important;
    margin-bottom: 30px !important;
}
body .page-header .page-header_content .page-header_title,
body .page-header .page-header_title {
    font-size: var(--mk-pt-size) !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
}
body .page-header .page-header_breadcrumbs,
body .page-header .page-header_breadcrumbs * {
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: .02em;
}
@media (max-width: 768px) {
    body .page-header {
        min-height: var(--mk-pt-height-mobile) !important;
        padding-bottom: 30px !important;
    }
}

/* 4. Titres Elementor (widget Titre) ------------------------- */
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--mk-h1) !important; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--mk-h2) !important; }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--mk-h3) !important; }

/* 5. Titres WGL « double heading » (accueil et pages) -------- */
.elementor-widget-wgl-double-headings h1.dbl-titles_wrapper .dbl-title__wrap > span,
.elementor-widget-wgl-double-headings h1.dbl-titles_wrapper .dbl-title__wrap {
    font-size: var(--mk-hero) !important;
    line-height: 1.12 !important;
}
.elementor-widget-wgl-double-headings h2.dbl-titles_wrapper .dbl-title__wrap > span,
.elementor-widget-wgl-double-headings h2.dbl-titles_wrapper .dbl-title__wrap,
.elementor-widget-wgl-double-headings h3.dbl-titles_wrapper .dbl-title__wrap > span,
.elementor-widget-wgl-double-headings h3.dbl-titles_wrapper .dbl-title__wrap {
    font-size: var(--mk-h2) !important;
    line-height: 1.2 !important;
}
/* Surlignage plus fin autour des mots */
.elementor-widget-wgl-double-headings .dbl-title__wrap > span { padding: .02em .28em !important; border-radius: 10px; }

/* 6. Étapes illustrées et cartes ----------------------------- */
.sat-service__title { font-size: clamp(21px, 1.8vw, 26px) !important; line-height: 1.2 !important; }
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title { font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.25 !important; }
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description { font-size: 15.5px; line-height: 1.65; }

/* 7. Boutons ------------------------------------------------- */
.wgl-button, .elementor-button { font-size: 15px !important; letter-spacing: .04em; }
.wgl-button.size-lg, .elementor-size-lg { font-size: 16px !important; }

/* 8. Boutique ------------------------------------------------ */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 19px !important; line-height: 1.25 !important; }
.woocommerce div.product .product_title { font-size: clamp(26px, 2.6vw, 34px) !important; }
.woocommerce ul.products li.product .price { font-size: 17px; }
.woocommerce div.product p.price { font-size: 22px; }

/* 9. Accordéon FAQ et menu ----------------------------------- */
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-title a { font-size: 19px !important; }
.primary-nav > ul > li > a { font-size: 15px !important; }

/* 10. Espacement des sections : un peu plus d'air, moins de « gros blocs » */
@media (min-width: 1025px) {
    .elementor-widget-wgl-double-headings { margin-bottom: 4px; }
}