:root{
	--colorText:#821F1B;
	--colorBack: #F19D9A;
}




#column{
    background-color: #FFE1D7;
}

#column p, #column a{
    color:#821F1B;
}

#column #pictureProjectP{
    color: #821F1B;
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 1.46rem;
    font-weight: 700;
}

#column .leger{
    color: #821F1B;
    font-family: "Satoshi Variable";
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
}

#summary a:hover{
    color: #821F1B;
}

#column .button p{
    color:white;
   
}
#column .button{
    background-color: #821F1B;
}

#column .button:hover{
    background: #BE3630;
}

#column #buttonSec p{
    color:#821F1B;
    
}

#column #buttonSec p:hover{
    color:#BE3630;
}

#column #buttonSec{
    background-color: white;
    border-color: #821F1B;
}

#column #buttonSec:hover{
    border-color: #BE3630;
    background: #F8F9F9;
}

@media(max-width:850px){
    #rightbtn{
        background: none;
    }
}

@media(max-width:660px){
    #column #summary{
        background: none;
    }
}

#column.open #upbtn, #column #dropbtn{
    background: none;
}

#mainBloc{
    display: flex;
    padding: 3.75rem 4.5rem 3.75rem 4.5rem;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
}

@media(min-width:1280px){
    #mainBloc{
        padding: 3.75rem 0 3.75rem 0;
        width:100%;

    }
}


@media(max-width:660px){
    #mainBloc{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3rem 2.5rem 3rem 2.5rem;
        gap: 5rem;
    }
}

.mainContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

@media(min-width:1280px){
    .mainContent{
        width:51.56rem;
        align-self: center;
    }
}

#ariane, #ariane a{
    color: #000;
    /* Fil Ariane */
    font-family: "Satoshi Variable";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2rem; /* 160% */
}

#start{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
}



#veryStart{
    display: flex;
    width: 83.33%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
}

@media(max-width:1100px){
    #veryStart{
        width:100%;
    }
}


h1{
    color:#821F1B;
}

@media(max-width:660px){
    h1{
        color: #821F1B;
        font-family: "Cabinet Grotesk Variable";
        font-size: 2rem;
        font-weight: 700;
        line-height: 3rem; /* 150% */
    }
}


#identityCard{
    display: flex;
    padding: 1.25rem 2.875rem 1.25rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    border-radius: 1.25rem;
    background: #FFE1D7;
}

@media(max-width:660px){
    #identityCard{
        display: flex;
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        align-self: stretch;
    }
}

#identityTitle{
    display: flex;
    padding: 0.625rem;
    align-items: flex-start;
    gap: 0.625rem;
}

#identityTitle p{
    color: #000;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.25rem;
    font-weight: 500;
}

@media(max-width:660px){
    #identityTitle p{
        font-size: 1.125rem;
    }
}

#identityContent, #identityStart{
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
    justify-content: space-between;
}

@media(max-width:1200px){
    #identityContent{
        flex-direction: column;
    }

    #identityStart{
        justify-content:flex-start;
        margin-left: 2rem;
    }
}

@media(max-width:660px){
    #identityContent, #identityStart{
        flex-direction: column;
        gap: 1rem;
        margin:0;
    }
}



#identityThemes{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}



.identityTitles{
    color: #000;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem; /* 120% */
}

@media(max-width:660px){
    .identityTitles{
        font-size: 1rem;
    }
}

#identityThemesContent{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1rem;
}

.identityTheme{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

@media(max-width:660px){
    .identityTheme{
        gap: 0.20188rem;
    }
}

.identityTheme p{
    color: #000;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 0.75rem; /* 120% */
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
}

@media(max-width:660px){
    .identityTheme p{
        font-size: 0.5rem;
        line-height: 0.60569rem; /* 121.14% */
        letter-spacing: 0.05rem;
    }
}

#identityTags{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media(max-width:1200px){
    #identityTags{
        margin-left: 2rem;
    }
}

@media(max-width:660px){
    #identityTags{
        margin-left: 0rem;
    }
}




#identityTagsContent{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media(max-width:660px){
    #identityTagsContent{
        flex-direction: row;
    }
}

.identityTag{
    display: flex;
    padding: 0rem 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    border: 1.5px solid #000;
    width:fit-content;

    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 0.75rem; 
    font-weight: 500;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
    color:#000;
    white-space: nowrap;
}


#identitySources{
    display: flex;
    width: 33%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media(max-width:1200px){
    #identitySources{
        width:auto;
        margin-left: 2rem;
    }
}

@media(max-width:660px){
    #identitySources{
        width:100%;
        margin:0;
    }
}

#identitySourcesContent{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem; /* 166.667% */
}

#identitySourcesContent a{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
}

#identitySourcesContent i{
    font-style: italic;
}


/*INTRODUCTION*/

#introduction{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
    align-self: stretch;
}

@media(max-width:660px){
    #introduction{
        gap:2.5rem;
    }
}

h2{
    color: #821F1B;
    text-align: center;

    /* H2 CAPS L */
    font-family: "Cabinet Grotesk Variable";
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.24rem;
    text-transform: uppercase;
}

@media(max-width:660px){
    h2{
        color: #821F1B;
            
        text-align: center;
        font-family: "Cabinet Grotesk Variable";
        font-size: 2rem;
        font-weight: 500;
        letter-spacing: 0.24rem;
        text-transform: uppercase;
    }
}

#introContent{
    display: flex;
    width: 83.33%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
}

@media(max-width:1100px){
    #introContent{
        width:100%;
    }
}

#introContent p{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.5rem; /* 166.667% */
}

@media(max-width:660px){
    #introContent p{
        font-size: 1rem;
        line-height: 2rem; /* 200% */
    }
}

.voc{
    display: flex;
    padding: 1.5rem 1rem;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    border-radius: 0.5rem;
    background: #FFE1D7;
}

.vocAlone{
    gap:0;
}


@media(max-width:660px){
    .voc{
        gap: 1.25rem;
        padding:1rem;
    }
    .vocAlone{
        gap:0;
    }
    
}

.voc p{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
}

.voc b{
    font-family: "Cabinet Grotesk Variable";
    font-weight: 800;
}


/*ARTICLE */

.articleSection{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem;
    align-self: stretch;
}

@media(max-width:660px){
    .articleSection{
        gap:2.5rem;
    }
}

.articleContent{
    display: flex;
    width: 100%;
    padding-right: 16.67%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
}

@media(max-width:660px){
    .articleContent{
        padding-right:0;
    }
}

.articlePart{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

@media(max-width:660px){
    .articlePart{
        gap:0.5rem;
    }
}

.whiteSpace{
    width: 16.67%;
}


.articleWithNote{
    display: flex;
    flex-direction: column;
    gap:1.5rem;
}

.articleNum{
    display: flex;
    width: 16.67%;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1.75rem;
    flex-shrink: 0;
}



.articleNum p{
    color: #821F1B;
    text-align: right;
    font-family: "Cabinet Grotesk Variable";
    font-size: 7.5rem;
    font-weight: 900;
    line-height: 5.7rem;
}

@media(max-width:660px){
    .articleNum p{
        font-size: 5rem;
        line-height: 4rem;
    }
}

.articleNum .date{
    color: #821F1B;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.5rem; /* 75% */
}

@media(max-width:660px){
    .articleNum .date{
        font-size:1.5rem;
        line-height: 1.3rem;
    }
}

.articleText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1 0 0;
}

@media(max-width:660px){
    .articleText{
        gap:1rem;
    }
}

.articleTextTitle{
    display: flex;
    flex-direction: column;
    gap:0.1rem;
}

h3{
    color: #000;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 2rem; /* 80% */
}

@media(max-width:660px){
    h3{
        font-size: 2rem;
        line-height: 1.75rem; /* 87.5% */
    }
}

h4{
    color: #821F1B;
    font-family: "Satoshi Variable";
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.75rem; /* 137.5% */
}

@media(max-width:660px){
    h4{
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.sourceNote{
    display: flex;
    width: 16.67%;
    padding-top: 0.25rem;
    flex-direction: column;
    gap: 0rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.sourceNote p{
    color: #000;
    text-align: right;
    font-family: "Satoshi Variable";
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
}

.sourceNote .sourceTitle{
    color: #821F1B;
    text-align: right;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.5rem; /* 100% */
}

@media(max-width:660px){
    .sourceNote .sourceTitle{
        font-size: 0.875rem;
    }
}



/*CONCLUSION*/

#conclusion{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
}

@media(max-width:660px){
    #conclusion{
        gap:2rem;
    }
}

#conclusionContent{
    display: flex;
    width: 83.33%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
}

@media(max-width:1100px){
    #conclusionContent{
        width:100%;
    }
}

@media(max-width:660px){
    #conclusionContent{
        gap:2rem;
        width:100%;
    }
}

#conclusionContent p{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2rem; /* 177.778% */
}