/**
 * Bobex Heading Style Block - Styles
 *
 * Ce fichier contient tous les styles pour le bloc Heading Style
 * avec des scopes par thème pour éviter les conflits CSS.
 *
 * Scopes utilisés:
 * - .bbx-headings-block.as-bobex-com-h1/h2/h3/h4/h5/h6 (Bobex.com)
 * - .bbx-headings-block.as-bobex-branded-h1/h2/h3/h4/h5/h6 (Bobex Minisite Branded)
 *
 * Date: 2026-03-10
 */

/* =====================================================
   SCOPE GLOBAL - Container
   ===================================================== */

.bbx-headings-block {
    margin: 0;
    padding: 0;
}

/* =====================================================
   BOBEX.COM STYLES
   Basé sur: Stylesheets/Front/tag.css
   ===================================================== */

/* H1 - Bobex.com */
.bbx-headings-block.as-bobex-com-h1 {
    font-weight: 600;
    font-size: 2rem;
    color: #185da6;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* H2 - Bobex.com */
.bbx-headings-block.as-bobex-com-h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #175da6;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* H3 - Bobex.com */
.bbx-headings-block.as-bobex-com-h3 {
    font-size: 1.6rem;
    font-weight: 550;
    color: #63b0d1;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* H4 - Bobex.com */
.bbx-headings-block.as-bobex-com-h4 {
    font-size: 1.4rem;
    font-weight: 450;
    color: #10375e;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* H5 - Bobex.com */
.bbx-headings-block.as-bobex-com-h5 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #10375e;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* H6 - Bobex.com */
.bbx-headings-block.as-bobex-com-h6 {
    font-size: 1rem;
    font-weight: 300;
    color: #10375e;
    font-family: Montserrat, sans-serif;
    margin: 25px 0 10px;
    font-style: normal;
    display: block;
}

/* =====================================================
   BOBEX MINISITE BRANDED STYLES
   Basé sur: Stylesheets/headings-recap.css
   ===================================================== */

/* H1 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h1 {
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font: 700 30px/36px "Montserrat";
    color: #185da6;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    display: block;
}

/* H2 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h2 {
    font-family: "Montserrat";
    font: 700 24px/28px "Montserrat";
    color: #444444;
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font-style: normal;
    display: block;
}

/* H3 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h3 {
    font-family: "Montserrat";
    font: 700 20px/26px "Montserrat";
    color: #f2643b;
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font-style: normal;
    display: block;
}

/* H4 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h4 {
    color: #175da6;
    font: 500 20px/26px "Montserrat";
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    display: block;
}

/* H5 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h5 {
    color: #175da6;
    font: 500 14px/20px "Montserrat";
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    display: block;
}

/* H6 - Bobex Branded Minisite */
.bbx-headings-block.as-bobex-branded-h6 {
    font-family: Montserrat, sans-serif;
    font-style: normal;
    display: block;
    font-size: 1rem;
    color: #444444;
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    font-weight: 400;
}

/* =====================================================
   RESPONSIVE STYLES - BOBEX.COM
   ===================================================== */

@media only screen and (max-width: 600px) {
    .bbx-headings-block.as-bobex-com-h1 {
        font-size: 1.7rem;
    }

    .bbx-headings-block.as-bobex-com-h2 {
        font-size: 1.6rem;
    }

    .bbx-headings-block.as-bobex-com-h3 {
        font-size: 1.4rem;
    }

    .bbx-headings-block.as-bobex-com-h4 {
        font-size: 1.2rem;
    }

    .bbx-headings-block.as-bobex-com-h5 {
        font-size: 1rem;
    }
}

/* =====================================================
   RESPONSIVE STYLES - BOBEX BRANDED
   ===================================================== */

@media only screen and (max-width: 768px) {
    .bbx-headings-block.as-bobex-branded-h1 {
        font-size: 28px;
        line-height: 32px;
    }

    .bbx-headings-block.as-bobex-branded-h2 {
        font-size: 22px;
        line-height: 26px;
    }

    .bbx-headings-block.as-bobex-branded-h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .bbx-headings-block.as-bobex-branded-h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .bbx-headings-block.as-bobex-branded-h5 {
        font-size: 12px;
        line-height: 18px;
    }
}