* {
  margin: 0;
  padding: 0;
}

:root{
	--color1: #ffffff;
	--color2: #7a7a7a;
	--color3: #141414;
	--header_height: 0px;
	--padding_medium: 1rem;
	--padding_small: 0.25rem;
	--border-radius1: 5px;
	--font_size1: 1.8rem;
	--font_size2: 1.4rem;
	--font_size3: 1.2rem;
	--font_size4: 1rem;
	--font_size-button: 3rem;
	--nav_width: 20px;
	--transi: 0.7s;
}

@media (max-width: 768px) {

:root{
	--header_height: 0px;
	--padding_medium: 1rem;
	--padding_small: 0.25rem;
	--border-radius1: 5px;
	--font_size1: 1.8rem;
	--font_size2: 1.4rem;
	--font_size3: 1.2rem;
	--font_size4: 1rem;
	--font_size-button: 2rem;
	--nav_width: 100%;
	--transi: 0.7s;
}

}

::selection {
    color: var(--color3);
    background-color: var(--color2);
}

::-webkit-scrollbar {
    width: 0px;
  }
  /* Track */
::-webkit-scrollbar-track {
    background-color: var(--color1);
  }
  /* Handle */
::-webkit-scrollbar-thumb {
    background-color: var(--color2);
    transition: all 0.3s;
  }
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color3);
    cursor: pointer;
    transition: all 0.3s;
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-weight: normal;
	font-style: normal;
	vertical-align: baseline;
}

@font-face {
	font-family: "Custome_Type1";
	src: url("../css/font/DinaChaumont-TextRegular.woff") format("woff2");}
@font-face {
	font-family: "Custome_Type2";
	src: url("../css/font/DinaChaumont-TextBold.woff2") format("woff2");}
	@font-face {	
	font-family: "Custome_Type3";
	src: url("../css/font/DinaChaumont-TextItalic.woff") format("woff2");}
	@font-face {	
	font-family: "Custome_Type4";
	src: url("../css/font/DinaChaumont-TextExtraBold.woff2") format("woff2");}
	@font-face {	
	font-family: "Custome_Type5";
	src: url("../css/font/DinaChaumont-DisplayExtraLight.woff2") format("woff2");}
	@font-face {	
	font-family: "Custome_Type6";
	src: url("../css/font/DinaChaumont-DisplayBlack.woff2") format("woff2");}
	@font-face {	
	font-family: "Custome_Type7";
	src: url("../css/font/DinaChaumont-DisplayRegular.woff2") format("woff2");}
	
html {
  font-family: "Custome_Type1";
  font-size: var(--font_size4);
  color: var(--color3);
  scrollbar-width: 0px;
  background-color: var(--color1);
}

b, strong {
	font-family: "Custome_Type2";
}
i, em {
	font-family: "Custome_Type3";
}
a {
	text-decoration: none;
	color: var(--color3);
}
p a {
	border-bottom: 1px solid var(--color2);
}
a:hover {
	font-family: "Custome_Type2";
}

h1 {
	font-family: "Custome_Type4";
	font-size: var(--font_size1);
	font-weight: normal;
}
h2 {
	font-family: "Custome_Type2";
	font-size: var(--font_size2);
	font-weight: normal;
}
h3 {
	font-family: "Custome_Type4";
	font-size: var(--font_size3);
	font-weight: normal;
}

li {
	list-style: none;
}

img {
  width: 100%;
}

.smartphone {
	display:none;
}
@media (max-width: 768px) {
.laptop {
	display:none;
}
.smartphone {
	display:block;
}
}

nav {
	width: var(--nav_width);
	padding: var(--padding_medium);
	position: fixed;
	top:0;
	right:0;
	bottom: 0;
	border-left: 1px solid var(--color3);
	border-right: 1px solid var(--color3);
	background-color: var(--color1);
	left:auto;
	z-index: 10000;
	line-height: 77%;
	cursor: pointer;
}
@media (max-width: 768px) {
	nav {
	width: var(--nav_width);
	padding: var(--padding_medium) 0 var(--padding_medium) 0;
	position: fixed;
	top:auto;
	right:0;
	bottom: 0;
	border-left: none;
	border-right: none;
	border-top: 1px solid var(--color3);
	border-bottom: 1px solid var(--color3);
	left:0;
}
}
.content-box {
	position: fixed;
	top:0;
	bottom:0;
	/*display: none;*/
	padding: var(--padding_medium);
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: var(--color1);
	opacity: 0;
	transform:translateX(100%);
	transition: all var(--transi)
}
.content-box.active {
	opacity: 1;
	transform:translateX(0);
	transition: all var(--transi)
}

@media (max-width: 768px) {

	.content-box {
	transform:translateY(100%);
	transition: all var(--transi)
}
.content-box.active {
	transform:translateY(0);
	transition: all var(--transi)
}
}

.button_home {
	text-align: center;
	font-family: "Custome_Type5";
	font-size: var(--font_size-button) !important;
}
.button_home:hover {
	font-family: "Custome_Type6";
}

.superactive {
	font-family: "Custome_Type6";
}

#button-a-propos {
	right:calc(2 * var(--nav_width) + 4 * var(--padding_medium));
	left:calc(100% - (var(--nav_width) + 2 * var(--padding_medium)) * 3);
	transition: all var(--transi);
}
#button-a-propos.active {
	right:100%;
	left:calc(2 * var(--nav_width) + 2 * var(--padding_medium));
	transition: all var(--transi);
}
#content-a-propos {
	left:calc(3 * var(--nav_width) + 4 * var(--padding_medium));
	right:calc(2 * var(--nav_width) + 4 * var(--padding_medium));
}

.biography {
	column-count: 2;
	column-gap: var(--padding_medium-);
}

#button-evenements {
	right:calc(1 * var(--nav_width) + 2 * var(--padding_medium));
	left:calc(100% - (var(--nav_width) + 2 * var(--padding_medium)) * 2);
	transition: all var(--transi);
}
#button-evenements.active {
	right:100%;
	left:calc(3 * var(--nav_width) + 4 * var(--padding_medium));
	transition: all var(--transi);
}
#content-evenements {
	left:calc(4 * var(--nav_width) + 6 * var(--padding_medium));
	right:calc(1 * var(--nav_width) + 2 * var(--padding_medium));
}

#button-contact {
	left:calc(100% - (var(--nav_width) + 2 * var(--padding_medium)));
	transition: all var(--transi);
}
#button-contact.active {
	right:100%;
	left:calc(4 * var(--nav_width) + 6 * var(--padding_medium));
	transition: all var(--transi);
}
#content-contact {
	left:calc(5 * var(--nav_width) + 8 * var(--padding_medium));
	right:0;
	gap: var(--padding_medium);
	display:flex;
}
#content-contact article {
	width: 50%;
}


@media (max-width: 768px) {

	.button_home {
	text-align: left;
	padding-left: var(--padding_medium);
}

#button-a-propos {
	bottom:calc(2 * var(--font_size-button) + 4 * var(--padding_medium));
	top:calc(100% - (var(--font_size-button) + 2 * var(--padding_medium)) * 3);
	left:0;
	right:0;
	transition: all var(--transi);
}
#button-a-propos.active {
	bottom:calc(100% - (2 * var(--font_size-button) + 4 * var(--padding_medium)));
	top:calc(var(--font_size-button) + 2 * var(--padding_medium));
	left:0;
	right:0;
	transition: all var(--transi);
}
#content-a-propos {
	top:calc(2 * var(--font_size-button) + 4 * var(--padding_medium));
	bottom:calc(2 * var(--font_size-button) + 4 * var(--padding_medium));
	left:0;
	right:0;
}

.biography {
	column-count: 1;
	column-gap: var(--padding_medium-);
}

#button-evenements {
	bottom:calc(1 * var(--font_size-button) + 2 * var(--padding_medium));
	top:calc(100% - (var(--font_size-button) + 2 * var(--padding_medium)) * 2);
	left:0;
	right:0;
	transition: all var(--transi);
}
#button-evenements.active {
	bottom:calc(100% - (3 * var(--font_size-button) + 6 * var(--padding_medium)));
	top:calc(2 * var(--font_size-button) + 4 * var(--padding_medium));
	left:0;
	right:0;
	transition: all var(--transi);
}
#content-evenements {
	top:calc(3 * var(--font_size-button) + 6 * var(--padding_medium));
	bottom:calc(var(--font_size-button) + 2 * var(--padding_medium));
	left:0;
	right:0;
}

#button-contact {
	top:calc(100% - (var(--font_size-button) + 2 * var(--padding_medium)));
	transition: all var(--transi);
	left:0;
	right:0;
}
#button-contact.active {
	bottom:calc(100% - (4 * var(--font_size-button) + 8 * var(--padding_medium)));
	top:calc(3 * var(--font_size-button) + 6 * var(--padding_medium));
	left:0;
	right:0;
	transition: all var(--transi);
}
#content-contact {
	top:calc(4 * var(--font_size-button) + 8 * var(--padding_medium));
	left:0;
	right:0;
	bottom:0;
	display: block;
}
#content-contact article {
	width: 100%;
}

}

.social-icon {
	width: fit-content;
	margin-bottom: var(--padding_medium);
	padding: var(--padding_small);
	border-radius: var(--border-radius1);
	border: 1px solid var(--color3);
	display:block;
	height: auto;
	font-family: "Custome_Type5";
	font-size: var(--font_size-button) !important;
}
.social-icon:hover {
	font-family: "Custome_Type6";
}
.social-icon svg {
	width: 100%;
    height: 100%;
}
.member {
	margin-bottom: var(--padding_medium);
}
.credit {
	position: fixed;
	width:45%;
	bottom:var(--padding_medium);
}

#container {
	width: calc(100% - var(--padding_medium) * 2);
    z-index: 800;
    position: fixed;
    top: calc(var(--header_height) + var(--padding_medium) * 2);
	padding-top: calc(var(--padding_medium) * 2) !important;
	padding: var(--padding_medium);
	left: 0;
	right:0;
    bottom: 60px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: var(--padding_medium);
	--scroll-behavior: smooth;
    scroll-behavior: smooth;
}

#container::-webkit-scrollbar {
    width: var(--padding_medium);
  }
  /* Track */
  #container::-webkit-scrollbar-track {
    background-color: var(--color1);
  }
  /* Handle */
  #container::-webkit-scrollbar-thumb {
    background-color: var(--color2);
    transition: all 0.3s;
  }
  #container::-webkit-scrollbar-thumb:hover {
    background-color: var(--color3);
    cursor: pointer;
    transition: all 0.3s;
  }

/*_______________________HEADER_______________________*/

header {
	position: fixed;
	background-color: var(--color1);
	z-index: 1000;
}
header nav {
	font-size: var(--font_size-button);
	font-family: 'Custome_Type7';
	width: calc(2 * var(--nav_width));
	left: 0 !important;
	right: auto !important;
}

@media (max-width: 768px) {
	header nav {
	width: 100%;
	top:0;
	padding-left:var(--padding_medium);
	right: 0 !important;
	bottom: calc(100% - (var(--font_size-button) + var(--padding_medium) * 2));
	font-size: var(--font_size-button);
}

.credit {
	position: static;
	padding-top: var(--padding_medium);
	width:100%;
}
}

#inscription {
	position: static;
	left:50%;
	top:var(--padding_medium);
	margin-bottom: calc(4 * var(--padding_medium));
	padding-top: var(--padding_medium);
}
#inscription p {
	margin-bottom: var(--padding_medium)
}

iframe {
	width: 100%;
	height:600px;
	border: var(--color3) 1px solid;
	border-radius: var(--border-radius1);
}

#content-home-background{
	position: fixed;
	display: flex;
	top:0;
	left:calc(2 * var(--nav_width) + 2 * var(--padding_medium));
	right:calc(3 * var(--nav_width) + 6 * var(--padding_medium));
	bottom:0;
	z-index: -1;
	align-items: center;
    justify-content: center;
}

#content-home-background img{
	height: auto;
	width: 100%;
}

@media (max-width: 768px) {

	#content-home-background{
	top:calc(var(--font_size-button) + 2 * var(--padding_medium));
	left:0;
	right:0;
	bottom:calc(3 * var(--font_size-button) + 6 * var(--padding_medium));
}
#content-home-background img{
	height: auto;
	width: 100%;
}

#inscription {
	border-top: 1px solid var(--color3);
	margin-top: var(--padding_medium);
}
}

#bio_button{
	cursor: pointer;
}
#bio_button:hover{
	font-family: "Custome_Type2";
}
#bio_button.active_bio_button{
	font-family: "Custome_Type2";
}

#bio_content{
	display:none;
	column-count: 2;
    grid-column: span 6;
}
#bio_content.active_bio{
	display:block;
	width: 98%;
}

/*_______________________ITEM_______________________*/

.item{
	display: grid;
	cursor: pointer;
	grid-template-columns: 1fr 1fr 1fr;
	border: 1px solid var(--color2);
	border-radius: var(--border-radius1);
	padding: var(--padding_medium);
	grid-template-rows: auto;
	width: calc(100% - 2 * var(--padding_medium));
	gap: var(--padding_medium);
	margin-bottom: var(--padding_medium);
}

.item img {
	height: 100%;
    object-fit: cover;
}
.item > *{
	max-height: 20vw;	
}

.projet_info{
	height:auto;
}

.ticket {
	position: relative;
	bottom:0;
	margin-bottom: 0 !important;
	margin-top: var(--padding_medium);
}

.projet_info h2{
	margin-bottom: var(--padding_medium);
}

@media (max-width: 768px) {

	.item{
	display: block;
}

.item > *{
	max-height: max-content;	
	margin-bottom: var(--padding_medium);
}
.item > *:last-child{	
	margin-bottom: 0;
}

}