:root {
    --mobile_breakpoint: 480px;
	--tablet_breakpoint: 768px;
	--big_screen_low_breakpoint: 1024px;
    
	--primary_color_blue: #172A46;
	--primary_color_pink: #A9165D;
	--primary_color_light_blue: #66C2C2;
    
	--secondary_color_blue: #195E7A;
	--secondary_color_yellow: #EDB458;
	--secondary_color_pink: #F36FA6;

    --bg_color: #EFFFFF;
    
    --inline_space: 5vw;
    --block_space: 3vw;
    --corner_radius: 1vw; 
}

body{
    margin: 0;
    width: 100%;
    background-color: var(--bg_color);
}
::-moz-selection { /* Code for Firefox */
	color: white;
	background: var(--primary_color_pink);
}

::selection {
    color: white;
	background: var(--primary_color_pink);
}


h1{
    font-family: Athiti;
    color: var(--primary_color_blue);
    font-size: 4vw;
    margin-block: 1vw;
    line-height: 3vw;
}


h2{
    font-family: Athiti;
    font-size: 3.5vw;
    color: var(--primary_color_blue);
    font-weight: 600;   
}

h1 + h2{
    font-family: Jost;
    font-weight: 400;   
    font-size: 3vw;
    margin-block: 1vw;
    color: var(--secondary_color_blue);
}

h3{
    font-family: Jost;
    font-size: 2.7vw;
    font-weight: 400;   
    margin-block: 0;
}


h4, p{
    font-family: Jost;
    font-size: 1.6vw;
    font-weight: 340;   
    margin-block: 0;
}

h6{
    font-family: Jost;
    font-size: 1.5vw;
    font-weight: 300;   
    margin: 0;
    color: white;
}

p{
    margin-block: 2vw;
}

.invisible-link{
    text-decoration: none;
    color: white
}


.page-container{
    min-height: 100vh;
    padding-top: var(--nav_bar_height);
    display: flex;
    flex-direction: column;
    justify-content: start;
}

@media screen and (min-height: 1000px) {
    .page-container{
        min-height: 1000px;
    }
}
@media screen and (min-width: 1024px){
    :root{
        --inline_space: 65px;
        --block_space: 30px;
        --corner_radius: 10px; 
    }
    h1{
        font-size: 40px;
        margin-block: 10px;
        line-height: 40px;
    }
    h2{
        font-size: 35px;
        line-height: 35px;
    }
    h1 + h2{
        font-size: 30px;
        margin-block: 10px;
    }
    h3{
        font-size: 27px;
    }
    h4, p, .mail-tooltip{
        font-size: 16px;
    }
    h6{
        font-size: 14px;
    }
    p{
        margin-block: 20px;
    }
    .page-container{
        width: 976px;
        margin-inline: auto;
    }
}

@media screen and (max-width: 768px){
    :root{
        --inline_space: 6vw;
        --block_space: 3.2vw;
        --corner_radius: 2vw; 
    }
    h1{
        font-size: 6vw;
        margin-block: 2vw;
        line-height: 4vw;
    }
    h2{
        font-size: 3.5vw;
    }
    h1 + h2{
        font-size: 3.2vw;
        margin-block: 1vw;
    }
    h3{
        font-size: 3.2vw;
    }
    h4, p, .mail-tooltip{
        font-size: 2.2vw;
    }
    h6{
        font-size: 2vw;
    }
    p{
        margin-block: 4vw;
    }
}
@media screen and (max-width: 480px){
    :root{
        --inline_space: 10vw;
        --block_space: 5vw;
        --corner_radius: 4vw; 
    }
    h1{
        font-size: 6vw;
        margin-block: 2vw;
    }
    h2{
        font-size: 6.6vw;
    }
    h1 + h2{
        font-size: 4.5vw;
        margin-block: 1vw;
    }
    h3{
        font-size: 6vw;
    }
    h4, p, .mail-tooltip{
        font-size: 3.7vw;
    }
    h6{
        font-size: 3vw;
    }
    p{
        margin-block: 6vw;
    }
}

img{
    border-radius: var(--corner_radius);
}



/*************** NOUS SECTIONS ***************/
/*************** NOUS SECTIONS ***************/
/*************** NOUS SECTIONS ***************/
#nous{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary_color_blue);
}

#nous h2{
    color: white;
}

#nous_content{
    display: flex;
    flex-direction: row;
    color: white;
    gap: calc(2.5*var(--inline_space));
}

#nous_L{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#nous_L h4{
    margin-bottom: 2vw;
}

#nous_L h4:last-child{
    margin-bottom: 0;
}

#nous-buttons{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2vw;
}

#social-btn{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2vw;
}

#nous_R{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nous_R img{
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 2vw;
}

@media screen and (min-height: 1000px) {
    #nous{
        min-height: 1000px;
    }
}
@media screen and (min-width: 1024px){
    #nous_content{
        gap: 100px;
    }
    #nous_L h4{
        margin-block: 0 60px;
    }
    #nous-buttons{
        gap: 20px;
    }
    #social-btn{
        gap: 20px;
    }
    #nous_R img{
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 768px){
    #nous_content{
        gap: 4vw;
    }
    #nous_L h4{
        margin-block: 0 6vw;
    }
}
@media screen and (max-width: 480px){    
    #nous_content{
        flex-direction: column;
        align-items: center;
    }
    #nous_content{
        margin-block: var(--block_space);
        gap: 1vw;
    }
    #nous_L h4{
        margin-block: 3vw 6vw;
    }
    #nous_L h4:last-child{
        margin-bottom: 6vw;
    }
    #nous-buttons{
        gap: 4vw;
    }
    #nous_R, #nous_L{
        width: 100%;
    }
    #nous_R img{
        aspect-ratio: 4/3;
        margin-bottom: 6vw;
    }
     #social-btn{
        width: 90%;
        row-gap: 1vw;
     }
}


#spotify-playlist{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
}

@media screen and (min-height : 1000px){
    #spotify-playlist{
        min-height: 1000px;
    }
}

/*************** PAGE ***************/
/*************** PAGE ***************/
/*************** PAGE ***************/

.page-title{
    margin-inline: var(--inline_space);
    padding-block-start: var(--block_space);
}

.section-container{
    padding-inline: var(--inline_space);
    padding-block: var(--block_space);
    border-radius: var(--corner_radius);
}

.section-container h2{
    margin-top: 0;
}


/*************** TEAM ***************/
/*************** TEAM ***************/
/*************** TEAM ***************/

#team-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-block: var(--block_space);
}

.gallery-card{
    margin-block: 2vw;
    margin-inline: 2vw;
    width: 25%;
}

.gallery-card img{
    width: 100%;
}

.gallery-card h3, .collectifs-card h3{
    font-size: calc(2.7vw / 1.5);
    line-height: calc(2.7vw / 0.8);
}
.gallery-card h4, .collectifs-card h4{
    line-height: calc(2.7vw / 1.3);
}


@media screen and (min-width : 1024px){
    .gallery-card{
        margin-block: 15px;
        margin-inline: 15px;
        width: calc(0.25*976px);
    }
    .gallery-card h3, .collectifs-card h3{
        font-size: calc(27px / 1.5);
        line-height: calc(27px / 0.9);
    }
    .gallery-card h4, .collectifs-card h4{
        line-height: calc(27px / 1.4);
    }
}
@media screen and (max-width : 768px){
    .gallery-card{
        margin-block: 3vw;
        margin-inline: 3vw;
        width: 40%;
    }
    .gallery-card h3, .collectifs-card h3{
        font-size: calc(3.2vw / 1.5);
        line-height: calc(3.2vw / 0.8);
    }
    .gallery-card h4, .collectifs-card h4{
        line-height: calc(3.2vw / 1.2);
    }
}
@media screen and (max-width : 480px){
    .gallery-card{
        margin-block: 4vw;
        margin-inline: 4vw;
        width: 80%;
    }
    .gallery-card h3, .collectifs-card h3{
        font-size: calc(6vw / 1.5);
        line-height: calc(6vw / 0.8);
    }
    .gallery-card h4, .collectifs-card h4{
        font-size: calc(6vw / 1.5);
        line-height: calc(6vw / 1.9);
    }
}


/*************** COLECTIFS ***************/
/*************** COLECTIFS ***************/
/*************** COLECTIFS ***************/


#current-collectif-list, #old-collectif-list{
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.collectif-long-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    height: fit-content;
    padding-inline: calc(0.5*var(--inline_space));
    padding-block: var(--block_space);
    border: solid var(--primary_color_blue) 3px;
    border-radius: var(--corner_radius);
    cursor: pointer;
    transition: 300ms;
}

.collectif-long-card:hover{
    transform: scale(1.02);
    transition: 300ms;
}

.long-card-img-container{
    height: 18%;
    width: 18%;
    max-width: 10vw;
    aspect-ratio: 1/1;
}

.long-card-img-container img{
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.collectif-title{
    width: 80%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0;
    white-space: nowrap;
    gap: 2vw;
    align-items: center;
}


.collectif-title h3{
    width: fit-content;
}
.collectif-title h3:last-child{
    font-weight: 300;
}
.collectif-long-card div:last-child p{
    width: 100%;
    margin-block: 0;
}

.video-player{
    margin-inline: auto;
    width: 80%;
    height: calc(80%*16/9);
    aspect-ratio: 16/9;
}

@media screen and (min-width: 1024px) {
    #current-collectif-list, #old-collectif-list, .collectif-title{
        gap: 20px;
    }
    .collectif-long-card{
        gap: 20px;
    }
}
@media screen and (max-width: 768px) {
    #current-collectif-list,  #old-collectif-list{
        gap: 4vw;
    }
    .long-card-img-container{
        height: 25%;
        width: 25%;
    }
}
@media screen and (max-width: 480px) {
    #current-collectif-list,  #old-collectif-list{
        gap: 12vw;
    }
    .collectif-long-card{
        flex-direction: column;
        border-radius: calc(1.6*var(--corner_radius));
    }
    .long-card-img-container{
        height: 100%;
        width: 100%;
        max-width: 100%;
    }
    .collectif-title{
        flex-direction: column;
        align-items: start;
        gap: 0;
        margin-bottom: 2.5vw;
    }
    .collectif-title h4:nth-child(2){
        display: none;
    }
    .video-player{
        width: 100%;
        height: calc(100%*16/9);
    }
}