@charset "UTF-8";
/*
Theme Name: Atelier DIIAD
Author: Basile Jesset
Description: Thème développé dans le cadre du site web Atelier DIIAD
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: graphic design theme, portofolio, brutalist theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Share the love <3

*/



/*      TTT - GENERAL     */


:root{
    --color-black: #010004;

    --color-orange: #F0881D;
    --color-blue: #CBDEEC;

    --color-terracota: #E84F32;
    --color-rose: #EFBBD7;

    --color-golden: #EBE328;
    --color-lightblue: #B8DED5;

    --color-green: #197938;
    --color-lilas: #BFA7D0;

    --color-white: #FFFFFF;

    --size-grandtitre: 80px;
    --size-titre1: 44px; 
    --size-titre2: 24px;
    --size-titre3: 20px;
    --size-labeur: 14px;
    --size-mention: 40px;


    --speed : 400ms;

}

html{
    padding: 0 !important;
    margin: 0 !important;
}

body{
    margin: 0 !important;
    padding: 0 !important;
    font-family: "PPMori", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;  
    font-size: var(--size-labeur);
    line-height: 2.1;
    font-weight: 300;
    color: var(--color-black);
    background-color: var(--color-white);
}


::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    border-radius: 2px;
    background-color: transparent;
} 

::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color:  transparent;
    height: 0px;
}
 
::-webkit-scrollbar-thumb {
    background-color: var(--color-black);
    border-radius: 5px;
}



h1, h2, h3, h4, h5, h6{
    color: var(--color-black);
    margin: 0;
    padding: 0;
    font-weight: 700;
	line-height: 1.15;
}


h1{
}

h2 {
    font-size: var(--size-titre1);
    font-weight: 700;
    margin: 140px auto 90px;
    max-width: 900px;
}

h3{
    font-size: var(--size-titre1);
    font-weight: 700;
}   

h4{
    font-size: var(--size-titre2);
    font-weight: 700;
}

h5{
    font-size: var(--size-titre3);
    font-weight: 700;
    margin: 30px auto 40px;
}



p i, p em{
    font-weight: 500;
}

ul, ol{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li{
    margin: 0;
    padding: 0;
}

a{
    color: var(--color-black);
}

img{
    width: 100%;
    height: auto;
}




hr{
    border: 0;
    border-bottom: 1px solid var(--color-black);
    margin: 80px 0;
}

p{
    padding-bottom: 10px;
    font-weight: 400;
}

form p{
    padding-bottom: 0px !important;
}

b, strong{
    color: var(--color-black);
    font-weight: 700;
}




/* NAV  */



header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
}
    

.container_upper{
    background-size: cover;
    width: 100%;
    padding-top: 200px;
}

.container_bottom{
    background-size: cover;
    width: 100%;
    padding-bottom: 200px;
}

.main_upper{
    background-color: var(--color-golden);
    margin: 0px auto 0 0;
    width: 70%;
    max-width: 700px;
    padding: 30px;
    position: relative;
}

.main_upper .title_upper{
    position: absolute;
    left:0;
    top: -50px;
    width: 160px;
    margin: 0;
    padding: 6px 20px;
    background-color: var(--color-golden);
}

.main_upper h2{
    text-align: center;
    text-transform: uppercase;
}

.main_upper .title_upper img, .main_bottom .bottom_title img{
    mix-blend-mode: multiply;
}

.main_bottom{
    background-color: var(--color-lightblue);
    margin: 0px auto 0 0;
    width: 70%;
    max-width: 700px;
    padding: 80px 30px;
    position: relative;
    text-align: center;
}

.main_bottom .bottom_title{
    position: absolute;
    left:0;
    bottom: -94px;
    width: 240px;
    margin: 0;
    padding:5px 10px 0 10px;
    background-color: var(--color-lightblue);
}

.wp-block-buttons {
    margin: 40px 0;
}
.wp-block-buttons .wp-block-button__link{
    background-color: transparent;
    font-family: 'Fraunces';
    color: var(--color-black);
    font-size: var(--size-titre2);
    border: 1px solid var(--color-black);
    border-radius: 5px;
    padding: 2px 22px;
    transition: all var(--speed);
}

.wp-block-buttons .wp-block-button__link:hover{
    background-color: var(--color-black);
    color: var(--color-white);
}




@media (max-width: 600px){

	:root{
		
        --size-grandtitre: 44px;
        --size-titre1: 24px; 
        --size-titre2: 20px;
        --size-titre3: 16px;
        --size-labeur: 12px;
        --size-mention: 40px;
	}

    h2{
    margin: 40px auto 20px;
    }

    .main_bottom{
        padding: 50px 30px;
    }
}