/**
 * Bloc Titre principal (refonte design)
 *
 * Aligné sur le langage visuel du bloc Image-texte :
 * - Palette teal #1F5C56 / #2D7A72 / #3A9C92
 * - DM Serif Display pour le titre, DM Sans pour le corps
 * - Animations cubic-bezier(0.22, 1, 0.36, 1)
 * - border-radius 3px (convention projet)
 *
 * Les classes parallèles .bloc-titre-principal__* coexistent avec les
 * anciennes (.titre_principal, .contenuFlexibleTitre, .contenuFlexibleSousTitre).
 */

/* =========================================================================
   Variables & wrapper
   ========================================================================= */

.bloc-titre-principal {
    --btp-teal: #1F5C56;
    --btp-teal-mid: #2D7A72;
    --btp-teal-light: #3A9C92;
    --btp-teal-rgb: 31, 92, 86;
    --btp-text: #0F2E2A;
    --btp-text-soft: #1A3F3A;
    --btp-muted: #4A5F5B;
    --btp-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --btp-font-display: 'DM Serif Display', Georgia, serif;
    --btp-radius: 3px;
    --btp-ease: cubic-bezier(0.22, 1, 0.36, 1);

    padding: 3rem 0 2rem;
    position: relative;
}

.bloc-titre-principal__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================================
   Sur-titre (kicker, type "quote-author" du bloc image-texte)
   ========================================================================= */

.bloc-titre-principal__sur-titre {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 1.2rem;
    font-family: var(--btp-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--btp-teal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.bloc-titre-principal__sur-titre::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--btp-teal);
    flex-shrink: 0;
}

/* =========================================================================
   Titre principal
   ========================================================================= */

.bloc-titre-principal__titre {
    margin: 0 0 1rem;
    font-family: var(--btp-font-display);
    font-size: clamp(32px, 2.4vw + 18px, 56px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--btp-teal);
    letter-spacing: -0.01em;
}

/* =========================================================================
   Sous-titre
   ========================================================================= */

.bloc-titre-principal__sous-titre {
    margin: 0;
    padding: 0;
    font-family: var(--btp-font-body);
    font-size: clamp(16px, 0.6vw + 13px, 20px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--btp-text-soft);
    letter-spacing: 0;
}

/* =========================================================================
   Variante sur fond coloré (.blocVert et autres classes legacy)
   ========================================================================= */

.bloc-titre-principal.blocVert,
.bloc-titre-principal.blocVert .bloc-titre-principal__sur-titre,
.bloc-titre-principal.blocVert .bloc-titre-principal__titre,
.bloc-titre-principal.blocVert .bloc-titre-principal__sous-titre {
    color: #fff;
}

.bloc-titre-principal.blocVert .bloc-titre-principal__sur-titre::before {
    background: #fff;
}

/* =========================================================================
   Animations à l'apparition (scroll-reveal)
   ========================================================================= */

.bloc-titre-principal__sur-titre,
.bloc-titre-principal__titre,
.bloc-titre-principal__sous-titre {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--btp-ease), transform 0.7s var(--btp-ease);
}

.bloc-titre-principal.is-visible .bloc-titre-principal__sur-titre {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.bloc-titre-principal.is-visible .bloc-titre-principal__titre {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.bloc-titre-principal.is-visible .bloc-titre-principal__sous-titre {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
}

/* Fallback : si JS désactivé, afficher quand même (pas d'observer = pas de .is-visible) */
@media (prefers-reduced-motion: reduce) {
    .bloc-titre-principal__sur-titre,
    .bloc-titre-principal__titre,
    .bloc-titre-principal__sous-titre {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 700px) {
    .bloc-titre-principal {
        padding: 2rem 0 1.5rem;
    }

    .bloc-titre-principal__sur-titre {
        font-size: 12px;
        margin-bottom: 0.8rem;
        gap: 10px;
    }

    .bloc-titre-principal__sur-titre::before {
        width: 28px;
    }

    .bloc-titre-principal__titre {
        margin-bottom: 0.8rem;
    }
}