/** FICHIERS STYLE ESCAPE GAMES APERO LYON 2026 **/

/** CORRESPONDANCES ECHELLE
PX -> REM :1/16
4px : 0.25rem
6px : 0.375rem
8px :0.5rem;
10px :0.625rem
12px :0.75rem
14px :0.875rem
16px :1rem
18px :1.125rem
20px :1.25rem
22px :1.375rem
24px :1.5rem
25px :1.5625rem
26px :1.625rem
28px :1.75rem
30px :1.875rem
32px :2rem
34px :2.125rem
35px :2.1875rem
36px :2.25rem
38px :2.375rem
39px :2.4375rem
40px :2.5rem
42px :2.625rem
44px :2.75rem
46px :2.875rem
48px :3rem
50px :3.125rem
52px :3.25rem
54px :3.375rem;
56px :3.5rem
60px :3.75rem
64px :4rem;
68px :4.25rem;
70px :4.375rem
80px :5rem

OU 62,5%



RESPONSIVE 1920PX -> 640PX

3.75 rem -> 3.5 rem
3.5 rem -> 3.25 rem
3.25 rem -> 3 rem
3 rem -> 2.75 rem
2.75 rem -> 2.5 rem
2.5 rem -> 2.25 rem
2.25rem -> 2 rem
2 rem -> 1.75 rem
1.75 rem -> 1.5 rem
1.625 rem -> 1.375 rem
1.5 rem -> 1.25 rem
1.375 rem -> 1.125 rem
1.125 rem -> 1 rem
1 rem -> 0.875 rem;



/** COMMUN **/
/** Typographie **/

*{
	font-weight:normal;
	font-style:normal;
	box-sizing:border-box;
}

@font-face{
    font-family:montserrablack;
    src:url("/font/Montserrat-Black.woff2") format("woff2"),
        url("/font/Montserrat-Black.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserrabold;
    src:url("/font/Montserrat-Bold.woff2") format("woff2"),
        url("/font/Montserrat-Bold.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserraextrabold;
    src:url("/font/Montserrat-ExtraBold.woff2") format("woff2"),
        url("/font/Montserrat-ExtraBold.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserramedium;
    src:url("/font/Montserrat-Medium.woff2") format("woff2"),
        url("/font/Montserrat-Medium.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserraregular;
    src:url("/font/Montserrat-Regular.woff2") format("woff2"),
        url("/font/Montserrat-Regular.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserrasemibold;
    src:url("/font/Montserrat-SemiBold.woff2") format("woff2"),
        url("/font/Montserrat-SemiBold.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserrathin;
    src:url("/font/Montserrat-Thin.woff2") format("woff2"),
        url("/font/Montserrat-Thin.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserralight;
    src:url("/font/Montserrat-Light.woff2") format("woff2"),
        url("/font/Montserrat-Light.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}

@font-face{
    font-family:montserraextralight;
    src:url("/font/Montserrat-ExtraLight.woff2") format("woff2"),
        url("/font/Montserrat-ExtraLight.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}


:root{
	/* Couleurs principales */
	--jaune-100:#f4bc50;
	--grisfonce-100:#656565;
	--grisclair-100:#888888;
}


/** Reset **/
h1,h2,h3,h4,h5,h6,p{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
}


/** Mise en page **/
html,body{padding:0; margin:0;}


html{
    font-size:100%;
	color:var(--blanc-100);
}

table{border-spacing:0;}
.init{clear:both}


ul{
	list-style-type:none;
    padding:0;
	margin:0 0 25px 0;
}

a{
	color:var(--rouge-100);
}
	

p{
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
}

*,:after,:before{
	box-sizing:border-box;
}


/*************************************************************/
/** DESKTOP + MOBILE TOUTES RESOLUTIONS **/

/** LIEN **/
a{
	text-decoration:none;
	transition-property:color,background,border;
	transition-duration:0.3s;
	transition-timing-function:ease-out;
}

a:hover{
	text-decoration:none;
	transition-property:color,background,border;
	transition-duration:0.3s;
	transition-timing-function:ease-out;
}

button,input[type="submit"]{
    transition-property:background;
    transition-duration:1s;
    transition-timing-function:ease-out;
}

a:active,a:hover{
    outline:0;
}

abbr{text-decoration:none;margin:0 0 0 5px;}
strong{font-weight:bold;}
button{padding:0;}



/*************************************************************/
/** DESKTOP TOUTES RESOLUTIONS **/
@media only screen{
	
	/* HEADER - MENU */
	header{
		display:flex;
		flex-direction:column;
		align-items:center;
		background:#fff;
		position:relative;
		z-index:9999;
	}
	
	#header-home{
		background:#fff;
        top:0px;
		transition: all 0.5s;
	}
	
	#header-home.sticky{
		background:#fff;
		transform: translateY(0);
		position:fixed;
		width:100%;
		transition: all 0.5s;
	}
	
	#header-logo{
		width:1440px;
		display:flex;
		justify-content:space-between;
		padding:1rem 0;
		column-gap:20px;
	}
	
	#header-logo a p{
		text-indent:-10000rem;
		width:0;
		height:0;
	}
	
	header nav{
		display:flex;
		flex-direction:column;
		justify-content:center;
	}

	header nav ul{
		list-style:none;
		display:flex;
		margin:0;
		padding:0;
		justify-content:space-between;
	}
	
	header nav li{
		display:block;
		padding:0;
		margin:0;
	}
	
	header nav a{
		font-family:montserraregular;
		text-transform:uppercase;
		font-size:1rem;
		line-height:1rem;
		text-decoration:none;
		padding:7.5px 15px 5px 15px;
		text-align:center;
		display:flex;
		justify-content:center;
		margin:0 5px;
		color:var(--grisclair-100);
		border:2px solid transparent;
		background:transparent;	
	}
	
	header nav a.current,header nav a:hover{
		color:var(--jaune-100);
		border-bottom:2px solid var(--jaune-100);
	}