:root {
	/* BORDER */
	--border-radius: 8px;
	--border-width: 2px;
    --outline-width: 2px;
		
    
	/* WRAPPER / LOGO */
	--wrapper-size: 1650px;
    --wrapper-size-small: 960px;
    --logo-ratio: 181 / 67;
			
    
	/* COLORS */
	--background-color: #FFFFFF;
	--background-grey: #F1F3F4;
	--background-dark: #141C2E;
	--background-socket: #070B12;
	
	--dark-title-color: #141C2E;
    --light-title-color: #FFFFFF;
    --dark-text-color: 20, 28, 46;
    --light-text-color: 252, 255, 255;
	
	--primary-color: #E95014;
    --primary-hover-color: #b74011;
    --primary-focus-color: #882d0a;
    --primary-rgb: 233, 80, 20;
	
	--secondary-color: #154883;
    --secondary-hover-color: #103969;
    --secondary-focus-color: #0c2950;
    --secondary-rgb: 21, 72, 131;
      
    --alert-danger-color: #DF2935;    
    --alert-danger-rgb: 223, 41, 53;
    
    --alert-warning-color: #E8814A;
    --alert-warning-rgb: 232, 129, 74;
    
    --alert-success-color: #4FB477;  
    --alert-success-rgb: 79, 180, 119;
		
	
	/* FONTS */
	--font-title: 'Inter', sans-serif;
	--font-text: 'Inter', Sans-serif;
	--letter-spacing: .1em;
		
	
	/* FONT SIZES */
	--h1-font-size: 3.75rem;
	--h2-font-size: 2.5rem;
	--h3-font-size: 1.375rem;
	--h4-font-size: 1.5rem;
	--text-font-size: .875rem;
	--text-font-weight: 500;
	
	
	/* MARGES */
	--margin-h2: 2.5rem;
	--margin-h3: 2rem;
	--margin-h4: 1.5rem;
    --margin-section: 6.2rem;
    --margin-block: 4rem;
    --padding-section: 5rem;
    --padding-block: 6rem;
		
	
	/* GRID */
	--items-by-row: 3;
	--items-margin: 22px;
		
	
	/* VECTORS */
    
}



/* ICONS SET */
.inodia-icons.arrow_left:before {
  content: "\64";
}
.inodia-icons.arrow_right:before {
  content: "\63";
}
.inodia-icons.arrow_up:before {
  content: "\62";
}
.inodia-icons.arrow_down:before {
  content: "\61";
}
.inodia-icons.search:before {
  content: "\69";
}
.bouton.icon.icon-play a > span:before,
.inodia-icons.icon-play:before {
  content: "\6b";
}





/* ----------------------------------- */
/*
/* ----------- RESPONSIVE ------------ */
/*
/* ----------------------------------- */

@media screen and (max-width: 1750px) {
    
    :root {
        --wrapper-size: 85%;
    }
}



@media screen and (max-width: 1500px) {
    
    :root {
        --h1-font-size: 4rem;
        --h2-font-size: 3rem;
    }
}



@media screen and (min-width: 1251px) {
	
}



@media screen and (max-width: 1250px) {
	
	:root {
		--items-by-row: 3;
		--items-margin: 24px;
        --margin-section: 7rem;
        --padding-section: 6rem;
	}	
}



@media screen and (max-width: 1140px) {
	
}



@media screen and (max-width: 989px) {
	
	:root {
        --h1-font-size: 2.5rem;
        --h2-font-size: 2.25rem;
		--items-by-row: 2;
        --margin-section: 6rem;
		--margin-block: 3rem;
        --padding-section: 5rem;
		--padding-block: 4rem;
	}	
}



@media screen and (max-width: 767px) {
    
}



@media screen and (max-width: 575px) {
	
    :root {
        --h1-font-size: 2rem;
        --h2-font-size: 1.825rem;
        --h3-font-size: 1.75rem;
        --h4-font-size: 1.25rem;
		--margin-h2: 2.5rem;
        --margin-h3: 1.5rem;
        --margin-h4: 1.25rem;
        --margin-section: 5rem;
		--margin-block: 2rem;
        --padding-section: 4rem;
		--padding-block: 3rem;
		--items-by-row: 1;
	}	
}



@media screen and (max-width: 480px) {
	
}



@media screen and (max-width: 375px) {
	
	:root {
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: .875rem;
        --text-font-size: .75rem;
    	--margin-h2: 2rem;
    	--margin-h3: 1.25rem;
    	--margin-h4: 1rem;
		--padding-block: 2rem;
	}
}



@media screen and (max-width: 300px) {
	
}
