/*@import 'components/cart.css';*/
@import 'components/menu.css';


/*GÉNÉRAL ----------------------------*/
/*------------------------------------*/


section 
{
/*	background-color:lightcyan;*/
}


@font-face { 
    font-family: 'Inter-Regular';
    src: url('../fontes/Inter-Regular.ttf') format('truetype'),
       	url('../fontes/Inter-Regular.otf') format('opentype'),
       	url('../fontes/Inter-Regular.woff2') format('woff2'),
       	url('../fontes/Inter-Regular.woff') format('woff');
}

@font-face { 
    font-family: 'Inter-Thin';
    src: url('../fontes/Inter-Thin.ttf') format('truetype'),
       	url('../fontes/Inter-Thin.otf') format('opentype'),
       	url('../fontes/Inter-Thin.woff2') format('woff2'),
       	url('../fontes/Inter-Thin.woff') format('woff');
}

@font-face { 
    font-family: 'Inter-Light';
    src: url('../fontes/Inter-Light.otf') format('opentype');
}

html {
	font-size:13px;
	line-height:14px;
}

:root {
    --color-main: black; 
    --color-second:darkgrey; 

    --font-regular:'Inter-Regular', sans-serif;
    --font-light:'Inter-Light', sans-serif;
    --font-thin:'Inter-Thin', sans-serif;


    --font-size-small: 0.8rem;
    --font-size-normal: 1rem;
    --font-size-mid: 1.125rem;    
    --font-size-medium: 1.16666667rem;
    --font-size-big:2rem;;
    --font-size-large:3rem;;

    --spacing-tiny:2vh;
    --spacing-medium: 4vh;
    --spacing-big: 6vh;

}


html, body, * {
    margin: 0;
    padding:0;
}


html, body{
	height:100vh;
	width:100vw;
	overflow-x: hidden;
}


section{
	height: calc(var(--real-vh, 1vh) * 80);
	width:calc(100vw - 6vh);
	display:flex;
	position: absolute;
	top:10vh;
	list-style: none;
	padding: 0;
	margin:0 3vh;
	overflow-y:scroll;
	z-index:2;
}

::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
    height:0px;
}

::-webkit-scrollbar-thumb {
    width: 0px;
    background-color: var(--color-main);
    border-radius: 0px;
}


section::-webkit-scrollbar {
    width: 2px;
}

section::-webkit-scrollbar-thumb {
    width: 2px;
    border-radius: 2px;
}


/*TYPOGRAPHIES -----------------------*/
/*------------------------------------*/

body{
    font-family:var(--font-regular); 
	font-size: var(--font-size-normal);
	color:var(--color-main);
	background-color: white;
}

h1{
	color:var(--color-main);
	font-size: var(--font-size-large);
	font-weight: normal;
	line-height: 1em;
}

h2{
	color:var(--color-main);
	font-size: var(--font-size-big);
	line-height: 1em;
	font-weight: normal;
}

a{
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	color:inherit;
}

a:hover{
	color:var(--color-second);
}

button, textarea {
  all: unset;
}

.light{
    font-family:var(--font-thin); 
}

/*CHARGEMENT DES IMAGES --------------*/
/*------------------------------------*/

.fade-in {
   opacity: 0;
}

.fade-in-active {
   opacity: 1;
   transition: opacity 0.5s ease;
}


/*MOBILE -------------------------*/
/* -------------------------------*/


@media screen and (max-width: 768px) {

	*{
		-webkit-tap-highlight-color: transparent;
	}

	html, body{
		height:fit-content;
	}

	html {
		font-size:14px;
		line-height:15px;
	}

	section::-webkit-scrollbar {
	    width: 0px;
	}

	section::-webkit-scrollbar-thumb {
	    width: 0px;
	}

	section{
		top:0;	
		height: calc(var(--real-vh, 1vh) * 87.5) !important;

	}

}