/**
 * S-BEE ONE – Intro Block Widget
 * CSS totalement indépendant (pas de dépendances avec le thème)
 * Utilise des CSS custom properties pour la personnalisation des couleurs
 */

/* === RESET LOCAL === */
.sbee-intro-block,
.sbee-intro-block *,
.sbee-intro-block *::before,
.sbee-intro-block *::after {
    box-sizing: border-box;
}

/* === WRAPPER === */
.sbee-intro-block {
    --sbee-ib-title-color: #09357C;
    --sbee-ib-text-color: #333333;
    --sbee-ib-accent-color: #BB9B34;

    position: relative;
    width: 100%;
    padding: 16px 0;
    margin: 0 auto;
    font-family: inherit;
    line-height: 1.7;
}

/* === ALIGNEMENT === */
.sbee-intro-block.sbee-ib-align-center {
    text-align: center;
}

.sbee-intro-block.sbee-ib-align-left {
    text-align: left !important;
}

.sbee-intro-block.sbee-ib-align-right {
    text-align: right;
}

/* === TITRE H2 === */
.sbee-intro-block .sbee-ib-title {
    color: var(--sbee-ib-title-color) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    clear: none;
}

@media (min-width: 768px) {
    .sbee-intro-block .sbee-ib-title {
        font-size: 22px !important;
    }
}

@media (min-width: 1024px) {
    .sbee-intro-block .sbee-ib-title {
        font-size: 24px !important;
    }
}

/* === SÉPARATEUR DÉCORATIF === */
.sbee-intro-block .sbee-ib-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px auto;
    max-width: 200px;
}

.sbee-intro-block.sbee-ib-align-left .sbee-ib-separator {
    justify-content: flex-start;
    margin-left: 0;
}

.sbee-intro-block.sbee-ib-align-right .sbee-ib-separator {
    justify-content: flex-end;
    margin-right: 0;
}

.sbee-intro-block .sbee-ib-separator-line {
    flex: 1;
    height: 2px;
    background: var(--sbee-ib-accent-color);
    border-radius: 2px;
    opacity: 0.6;
    max-width: 80px;
}

.sbee-intro-block .sbee-ib-separator-diamond {
    width: 8px;
    height: 8px;
    background: var(--sbee-ib-accent-color);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* === SOUS-TITRE H3 === */
.sbee-intro-block .sbee-ib-subtitle {
    color: var(--sbee-ib-title-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 14px 0;
    padding: 0;
    opacity: 0.85;
    clear: none;
    text-align: left !important;
}

/* === CONTENU TEXTE === */
.sbee-intro-block .sbee-ib-content p,
.sbee-intro-block.sbee-ib-align-center .sbee-ib-content,
.sbee-intro-block.sbee-ib-align-right .sbee-ib-content {
    color: var(--sbee-ib-text-color);
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
    text-align: left !important;
}

.sbee-intro-block .sbee-ib-content p,
.sbee-intro-block.sbee-ib-align-center .sbee-ib-content p,
.sbee-intro-block.sbee-ib-align-right .sbee-ib-content p {
    color: var(--sbee-ib-text-color);
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 6px 0;
    text-align: left !important;
}

.sbee-intro-block .sbee-ib-content p:last-child {
    margin-bottom: 0;
}

.sbee-intro-block .sbee-ib-content strong,
.sbee-intro-block .sbee-ib-content b {
    color: var(--sbee-ib-title-color);
    font-weight: 700;
}

.sbee-intro-block .sbee-ib-content a {
    color: inherit;
    text-decoration: none;
}

.sbee-intro-block .sbee-ib-content a:hover {
    text-decoration: underline;
}

/* === ANIMATIONS === */
.sbee-intro-block.sbee-ib-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sbee-intro-block.sbee-ib-animate.sbee-ib-visible {
    opacity: 1;
    transform: none !important;
}

.sbee-intro-block.sbee-ib-anim-fadein {
    opacity: 0;
}

.sbee-intro-block.sbee-ib-anim-slideup {
    opacity: 0;
    transform: translateY(30px);
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .sbee-intro-block {
        padding: 12px 0;
    }

    .sbee-intro-block .sbee-ib-title {
        font-size: 18px;
    }

    .sbee-intro-block .sbee-ib-subtitle {
        font-size: 15px;
    }

    .sbee-intro-block .sbee-ib-content,
    .sbee-intro-block .sbee-ib-content p {
        font-size: 14px;
    }
}