/*
    ========================================
    HERO-TITLE.CSS
    Auteur                : Renaud
    Création              : 08 décembre 2025
    Dernière modification : 11 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Gère le style du Titre H1 et du Label (Étiquette) de la section Hero.
*
*   @file  css/hero-title.css
*
*   @see   includes/hero-title.php (Structure HTML)
*   @see   css/fonts-semantic.css  (Variables de police)
*/

/* --- LE LABEL (Étiquette au-dessus du titre) --- */
.hero-label {
    /* PLACEMENT */
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    
    /* VISUEL */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    
    /* TEXTE */
    color: var(--color-link-hover); 
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- BLOCK : Hero Title (H1) --- */
.hero-title {
    /* PLACEMENT */
    margin-bottom: 1.5rem;

    /* TEXTE */
    font-family: var(--font-hero-title);
    font-weight: 900; 
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive fluide */
    line-height: 1.1;
    color: var(--color-hero-title);
    text-transform: uppercase;
}

/* --- ELEMENT NESTED : Highlight (via PHP) --- */
/* Cible le <span class="highlight"> injecté dans la variable PHP */
.hero-title .highlight {
    /* TEXTE */
    color: var(--color-hero-title-highlight);
}

/* --- RESPONSIVE --- */
@media (max-width: 480px) {
    .hero-title {
        /* TEXTE */
        font-size: 2.2rem;
    }
}

/* DEBUG */
/*
.hero-label { border: 1px solid yellow; }
.hero-title { border: 1px solid magenta; }
*/