/**
 * Styles pour le bloc Titre et Sous-titre
 * @package GrimTheme
 */

.title-subtitle-block {
    position: relative;
}

/* Animation d'apparition du titre */
.title-main {
    animation: fadeInUp 0.6s ease-out;
}

/* Animation d'apparition du sous-titre */
.subtitle-text {
    animation: fadeInUp 0.8s ease-out;
}

/* Animation de la ligne de soulignement */
.title-underline {
    animation: expandWidth 0.6s ease-out 0.3s both;
    border-radius: 2px;
}

/* Keyframes pour l'animation fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes pour l'animation d'expansion de la ligne */
@keyframes expandWidth {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 5rem; /* w-20 = 5rem */
        opacity: 1;
    }
}

/* Transition douce pour le hover sur les titres */
.title-main,
.subtitle-text {
    transition: all 0.3s ease;
}

/* Responsive: réduction de la taille des textes sur mobile */
@media (max-width: 768px) {
    .title-main {
        font-size: 1.875rem; /* text-3xl */
        line-height: 2.25rem;
    }

    .subtitle-text {
        font-size: 1.125rem; /* text-lg */
        line-height: 1.75rem;
    }
}

/* Desktop: tailles maximales */
@media (min-width: 768px) {
    .title-main {
        font-size: 2.25rem; /* text-4xl */
        line-height: 2.5rem;
    }

    .subtitle-text {
        font-size: 1.25rem; /* text-xl */
        line-height: 1.75rem;
    }
}

/* Préférence utilisateur: réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .title-main,
    .subtitle-text,
    .title-underline {
        animation: none;
        opacity: 1;
        transform: none;
    }
}