// ============================================================
// PROJET : Typographie — surcharges spécifiques au projet
// Importé en FIN de chaîne SCSS (priorité sur library/scss/base/_typography.scss)
//
// Convention du projet : le texte est écrit foncé par défaut. Pour chaque
// niveau de titre (et plus généralement pour tout bloc de texte auquel on
// ajoute du CSS ici — ex: Texte avancé Kadence), prévoir juste en dessous
// la variante ".block-light" — appliquée quand la Rangée/Section parente
// est en style combinable "Clair" (texte clair, donc sur fond foncé — voir
// library/scss/components/_block-styles.scss pour le socle générique
// h1..h6 déjà géré automatiquement ; ce fichier sert aux ajustements fins
// par niveau et aux blocs qui ne sont pas de simples balises h1..h6).
// ============================================================

h1{
    font-size: 45px;
    text-transform: uppercase;
    
    em{
        color: $color-primary;
        text-transform:initial;
        font-style: normal;
    }
}
.block-light h1{
    color: $font-light;
}


h2{
    font-size: 45px;
    text-transform: uppercase;
    position: relative;
    color: $color-primary;

    &:before{
        content: "";
        display: block;
        position: absolute;
        width: 70px;
        height: 70px;
        background-image: url(../../images_projet/h2-round.svg);
        background-repeat: no-repeat;
        background-size: contain;
        top: -28px;
        left: -35px;
    }
    &:after{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: $color-primary;
        border-radius: 50%;
        display: inline-block;
        vertical-align: central;
        margin-left: 10px;
    }
}
.block-light h2{
    //ici le text en clair (sur fond foncé)
}


h3{
 // css h3
}
.block-light h3{
    //ici le text en clair (sur fond foncé)
}


p{
    font-size: 16px;
    line-height: 1.35em;
}


// --- GRAS BLEU (Texte avancé — style combinable) ---
.gras-bleu {

    strong{
        font-weight: 900;
        color: $color-bleu;
        text-transform: uppercase;
    }
}
.block-light .gras-bleu {

    strong{
        color: $font-light;
    }
}


// --- CALL TO ACTION (Texte avancé — style combinable) ---
.call-to-action{
    font-size: 35px;
    font-weight: 800;
    line-height: 1.2em;
}
.block-light .call-to-action{
    //ici le text en clair (sur fond foncé)
}


// --- MISE EN AVANT (Texte avancé — style combinable) ---
.mise-en-avant{
    font-weight: 800;
    color: $color-bleu;
}
.block-light .mise-en-avant{
    //ici le text en clair (sur fond foncé)
}


////// RESPONSIVE //////

@media (max-width: $tablette) {
    h1{ font-size: 35px;}
    h2{ font-size: 35px;}
    .call-to-action{ font-size: 30px;}
    #site-footer.footer-custom .footer-cta-titre p{ font-size: 35px;}
}

@media (max-width: $mobile) {
    h1{ font-size: 25px;}
    h2{ font-size: 25px;}
    .call-to-action{ font-size: 20px;}
    #site-footer.footer-custom .footer-cta-titre p{ font-size: 25px;}
}