.title.is-1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-xl) ;
    text-shadow: var(--text-shadow);
    color:inherit;
}

.title.is-2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg) ;
    text-shadow: var(--text-shadow);
    color:inherit;
}

.title.is-3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg) ;
    text-shadow: var(--text-shadow);
    color:inherit;
}


.subtitle.is-1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    text-shadow: var(--text-shadow-light);
    line-height: var(--line-height-normal); 
    color:inherit;
}

.subtitle.is-2 {
   font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    text-shadow: var(--text-shadow-light); 
    color:inherit;
}
.subtitle.is-3 {
   font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    text-shadow: var(--text-shadow-light); 
    color:inherit;
}

/* Titre du site avec heading font */
.title.is-navbar {
    font-family: var(--font-family-heading) !important;
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--primary-color) !important;
    margin: var(--spacing-sm) ;
    /* padding-top: var(--spacing-sm); */
    /* text-shadow: var(--text-shadow-strong); */
    transition: all var(--transition-speed) var(--transition-easing);
}

.title.is-navbar:hover {
    color: var(--secondary-color-dark) !important;
    text-decoration: none;
    text-shadow: var(--text-shadow);
    transform: translateY(-1px);
}

/* === HERO === */
.title.is-hero {
    font-family: var(--font-family-heading);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    text-shadow: var(--text-shadow);
    line-height: 1.3;
}

.subtitle.is-hero {
    font-family: var(--font-family-heading);
    font-size: 3rem;
    font-weight: 500;
    color: var(--white);
    text-shadow: var(--text-shadow-light);
    line-height: 1.3;
}

@media only screen and (max-width: 768px) {

.subtitle.is-1 {
    font-size: var(--font-size-2xl);
}

.title.is-navbar {
    font-size: var(--font-size-xl) !important;
}

.title.is-hero {
    font-size: 2.5rem;
}

.subtitle.is-hero {
    font-size: 2rem;
}
}

@media only screen and (max-width: 375px) {
.title.is-navbar {
    font-size: var(--font-size-lg) !important;
}

}