/*
    ==========================================================
    PROJECT : SITE-GENERIQUE
    FILE    : css/hero-tagline.css
    AUTH    : Renaud
    CREATED : 30 novembre 2025
    UPDATED : 26 février 2026
    ==========================================================
*/

/**
*   @project        SITE-GENERIQUE
*   @description    Composant Tagline du Hero.
*                   Petit aparté décalé à gauche au-dessus du titre.
*                   Effet de transparence (fond semi-transparent + bordure).
*   
*   @file           css/hero-tagline.css
*
*   @see            includes/hero-tagline.php
*   @see            includes/config-site.php    ($hero_tagline, $hero_tagline_visible)
*   @see            css/color-semantic.css
*   @see            css/fonts-semantic.css
*/


/* --- BLOCK --- */
.hero-tagline {
    /* PLACEMENT */
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem 1rem 0.3rem 1rem;

    /* VISUEL */
    background-color: rgba(255, 255, 255, 0.1); /* Transparence légère */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;

    /* TEXTE */
    font-family: var(--font-hero-tagline);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-hero-tagline);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}


/* --- RESPONSIVE (Tablette < 1150px) --- */
@media (max-width: 1150px) {
    .hero-tagline {
        /* TEXTE */
        font-size: 0.8rem;
    }
}


/* --- RESPONSIVE (Mobile < 768px) --- */
@media (max-width: 768px) {
    .hero-tagline {
        /* PLACEMENT */
        padding: 0.3rem 0.8rem;
        
        /* TEXTE */
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }
}