/**
    On prépare des classes pour le style des titres en fonction de leur rôle.
    ℹ️ On ne style pas directement les h1, h2, ... pour avoir de la flexibilité selon la maquette conçue par le designer.
*/

.dt-c-Title {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-title);
    font-weight: 500;
    line-height: 1; /** hauteur de ligne = 1x la font-size */
}

/** Permet de mettre une partie d'un titre en avant en orange */
.dt-c-Title span {
    color: var(--color-orange);
}

/** Permet de mettre une partie d'un titre en petit et en orange */
.dt-c-Title small {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5; /** = 24/16 */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.dt-c-Title[data-lvl='1'] {
    font-size: 60px;
}

.dt-c-Title[data-lvl='2'] {
    margin-bottom: 55px;
    font-size: 50px;
    text-align: center;
}

.dt-c-Title[data-lvl='3'] {
    font-size: 30px;
}