:root{
/*Variables Globales*/
--globalFontSize : 16px;
--globalFontFamily : 'Roboto',
--globalFontWeight : 400;
--globalFontColor : black;
--globalLineHeight : 1.6;


/*Variables pour le Main*/
--mainMargin :0 20px 60px 20px;
--mainPadding : 20px;

/*Variables pour le wrapper*/
--wrapperMaxWidth: 920px;
--wrapperHeight: 100%;
--wrapperWidth: 70%;
--wrapperPadding: 40px;
--wrapperMargin: 0;
--wrapperBackgroundColor : #F2F2F2;

/*Variables pour format Mobile*/
--mobileWidth: 100%;
--mobileMainMargin: 0 0 60px 0;
--mobileMainPadding: 20px 0 20px 0;
--mobileWrapperPadding: 0 20px;
--mobileWrapperMargin: 0;


/*Variables pour les titres H1 et titres H2*/
--H1FontSize : 32px;
--H1FontFamily : var(--globalFontFamily);
--H1FontWeight : 800;
--H1FontColor : var(--globalFontColor);
--H1LineHeight : var(--globalLineHeight);
--H1Padding : 0 0 0 0;
--H1FontSizeMobile : 24px;


--H2FontSize : 26px;
--H2FontFamily : var(--globalFontFamily);
--H2FontWeight : 700;
--H2FontColor : var(--globalFontColor);
--H2LineHeight : var(--globalLineHeight);
--H2Padding : 50px 0 0 0;
--H2Margin : 0 0 -20px 0;
--H2FontSizeMobile: 20px;


/*Variables pour les dialogues des locuteurs*/
--locuteurFontWeight : 800;
--locuteurFontColor : var(--globalFontColor);
--locuteurFontSize : var(--globalFontSize);
--locuteurFontFamily : var(--globalFontFamily);
--locuteurLineHeight : var(--globalLineHeight);

/*Variables pour les sections de descriptions*/
--descriptionFontWeight : var(--globalFontWeight);
--descriptionFontColor : var(--globalFontColor);
--descriptionFontSize : var(--globalFontSize);
--descriptionFontFamily : var(--globalFontFamily);
--descriptionLineHeight : var(--globalLineHeight);
--descriptionMargin : 0 0 0 0;
--descriptionPadding : 40px 0 5px 0;

--descriptionSeulePadding: 20px 0 0 0;
--descriptionMilieuPadding: 13px 0 13px 0;
/*Variables du generique*/
--generiquePadding : 20px 0 0 0;
--generiqueHeadingFont: 700;
--generiqueMarginBlocks : 0.5em;
/*Variables pour les liens et pour les styles de listes*/
--textDecorationColor : 0;
--textDecorationStyle : 0;

--linkStyle : underline;
--linkColor : black;
}


/********** Classes a utiliser **********/

/*Classes personalisées selon le design du site. (modifier au besoin)*/

.transcriptionMain{
    margin: var(--mainMargin);
    padding: var(--mainPadding);
    display:flex;
    flex-direction: column;
    align-items:center;
}

.transcriptionWrapper{
    width: var(--wrapperWidth);
    max-width: var(--wrapperMaxWidth); 
    background-color: var(--wrapperBackgroundColor); 
    height: var(--wrapperHeight); 
    padding: var(--wrapperPadding);
}

.transcriptionLien{
    text-decoration: var(--linkStyle);
    color: var(--linkColor);
}


/* Titres */

.H1{
    font-size: var(--H1FontSize);
    font-family: var(--H1FontFamily);
    font-weight: var(--H1FontWeight);
    color: var(--H1FontColor);
    line-height: var(--H1LineHeight);
    padding: var(--H1Padding);
    margin-bottom: 24px; /* Ajouté */
}

.H2{
    font-size: var(--H2FontSize);
    font-family: var(--H2FontFamily);
    font-weight: var(--H2FontWeight);
    color: var(--H2FontColor);
    line-height: var(--H2LineHeight);
    padding: var(--H2Padding);
    margin: var(--H2Margin);
    margin-bottom: 16px; /* Ajouté */
}


/* Paragraphes et blocs */

.MsoNormal,
.DescriptionSeule,
.DescriptionAvant,
.DescriptionMilieu,
.Parole,
.DescriptionFin,
.GeneriqueCategorie,
.GeneriqueMembre {
    margin-top: 12px; /* Ajouté pour aérer */
}

.MsoNormal{
    font-size: var(--globalFontSize);
    font-family: var(--globalFontFamily);
    font-weight: var(--globalFontWeight);
    color: var(--globalFontColor);
    line-height: var(--globalLineHeight);
    padding: var(--descriptionSeulePadding);
}

.DescriptionSeule{
    padding: var(--descriptionSeulePadding);
    font-size: var(--descriptionFontSize);
    font-family: var(--descriptionFontFamily);
    font-weight: var(--descriptionFontWeight);
    color: var(--descriptionFontColor);
    line-height: var(--descriptionLineHeight);
}

.DescriptionAvant{
    padding: var(--descriptionPadding);
    font-size: var(--descriptionFontSize);
    font-family: var(--descriptionFontFamily);
    font-weight: var(--descriptionFontWeight);
    color: var(--descriptionFontColor);
    line-height: var(--descriptionLineHeight);
}

.Parole{
    font-size: var(--globalFontSize);
    font-family: var(--globalFontFamily);
    font-weight: var(--globalFontWeight);
    color: var(--globalFontColor);
    line-height: var(--globalLineHeight);
}

.DescriptionFin{
    line-height: var(--globalLineHeight);
    font-family: var(--globalFontFamily);
}

.Locuteur{
    font-size: var(--locuteurFontSize);
    font-family: var(--locuteurFontFamily);
    font-weight: var(--locuteurFontWeight);
    color: var(--locuteurFontColor);
    line-height: var(--locuteurLineHeight);
    text-transform: uppercase;
}

.GeneriqueMembre{
    font-size: var(--globalFontSize);
    font-family: var(--globalFontFamily);
    font-weight: var(--globalFontWeight);
    color: var(--globalFontColor);
    line-height: var(--globalLineHeight);
    margin-block-end: var(--generiqueMarginBlocks);
    margin-block-start: var(--generiqueMarginBlocks);
}

.GeneriqueCategorie{
    padding: var(--generiquePadding);
    font-weight: var(--generiqueHeadingFont);
    font-family: var(--globalFontFamily);
}

.DescriptionMilieu{
    padding: var(--descriptionMilieuPadding);
    line-height: var(--globalLineHeight);
    font-family: var(--globalFontFamily);
}


/* Classes mobiles personalisées selon le design du site. (modifier au besoin) */

@media screen and (max-width:768px){
    
    .transcriptionWrapper{
        width: var(--mobileWidth);
        padding: var(--mobileWrapperPadding);
        margin: var(--mobileWrapperMargin);
    }

    .transcriptionMain{
        margin: var(--mobileMainMargin);
        padding: var(--mobileMainPadding);
    }

    .H1{
        font-size: var(--H1FontSizeMobile);
    }

    .H2{
        font-size: var(--H2FontSizeMobile);
    }
}




.Locuteur {
    display: inline-block;
    margin-top: 40px;
}