{
margin:0;
padding:0;
}

body, html
{
	height:100%;
}

/* ------------------------------------------------------------------------------------ */
/* ---------- Définitions des variables utilisées plusieurs fois dans le css ---------- */
/* ------------------------------------------------------------------------------------ */
:root 
{
  --total_max_width: 1260px; 			/* largeur maximum de ce qui est affiché sur mon site, plus grand que ca les marges blanches à gauche et à droite augmentent */
  --total_min_width: 260px;				/* largeur minimum de ce qui est affiché sur mon site, plus petit que ca on slider horizontal apparait */
  
  /* COULEURS */
  --text_orange_dark: #a1523f; 			/* utilisé pour mon nom et titres BIO */
  --text_gris_dark: #999999;			/* utilisé pour texte pages CONTACT et BIO */
  --orange_links: #cc8c47;				/* couleur texte links */
  --orange_hover_links: #ff8400;		/* couleur texte links quand souris passe dessus */
  --copyright_color: #444444;			/* couleur texte copyright en bas pages */
  --onglets_color: #666666;				/* couleur texte onglets menu */
  --onglets_hover_color: #c98a46;		/* couleur texte onglets menu quand souris passe dessus et/ou que onglet courant */
  --small_menu_border_color: #aaaaaa;	/* couleur de la ligne en bordure petit menu */
  
  /* LOGO ET NOM */
  --logo_height: 50px;					/* hauteur du logo, varie avec width screen */
  --my_name_font_size: 30px;			/* taille texte de mon nom, varie avec width screen */
  --my_name_top: 20px; 					/* position top de mon nom, varie avec width screen */
  --my_name_min_width: 250px;			/* min width de mon nom, varie avec width screen */
  --my_name_margin_left: 15px;			/* margin left de mon nom, varie avec width screen */

  /* BIO */
  --image_bio_padding_top: 15px;		/* varie avec width screen */
  --image_bio_padding_bottom: 0px;		/* varie avec width screen */
  --image_bio_float: right;				/* varie avec width screen */
  --image_bio_width : 350px;			/* varie avec width screen */
  
  /* MENU */
  --menu_onglets_display: inline;		/* varie avec width screen */
  --mini_menu_icon_display: none;		/* varie avec width screen */
}

/* ------------------------------------------------------------------------------------ */
/* ------------------------ variables variant avec width screen ----------------------- */
/* ------------------------------------------------------------------------------------ */
@media screen and (max-width:1050px)
{
  :root 
  {
	/* LOGO ET NOM */
    --logo_height: 45px;
	--my_name_font_size: 25px;
	--my_name_min_width: 200px;
	--my_name_margin_left: 10px;
	
	/* BIO */
    --image_bio_padding_top: 20px;
    --image_bio_padding_bottom: 10px;
    --image_bio_float: left;
    --image_bio_width: 100%;
	
	/* MENU */
    --menu_onglets_display: none;
	--mini_menu_icon_display: inline-block;
  }
}

@media screen and (max-width:600px)
{
  :root 
  {
	/* LOGO ET NOM */
    --logo_height: 40px;
	--my_name_font_size: 19px;
	--my_name_min_width: 160px;
	--my_name_margin_left: 5px;
  }	
}

@media screen and (max-width:450px)
{
  :root 
  {
	/* LOGO ET NOM */
	--my_name_font_size: 16px;
	--my_name_top: 5px; 	
	--my_name_min_width: 80px;
	--my_name_margin_left: 5px;
	
	/* MENU */
	--menu_responsive_width: 85px;
  }	
}

/* ------------------------------------------------------------------------------------ */
/* ------------------------------------- FONTES --------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* Font utilisée quasi partout dans le site */
@font-face 
{
	font-family: TPHFont;
	font-style: normal;
	font-weight: normal;
	src: url(./Neris-Light.ttf),
	     url(./Neris-Light.eot),
		 url(./Neris-Light.otf);
}

/* Font utilisée pour mon nom */
@font-face 
{
	font-family: TPHNameFont;
	font-style: normal;
	font-weight: normal;
	src: url(./alegreya-sans-sc.thin.ttf);
}

/* ------------------------------------------------------------------------------------ */
/* -------------------------------- COMMUN DIV PAGES ---------------------------------- */
/* ------------------------------------------------------------------------------------ */
body 
{
	margin: 0px;
	background-repeat: no-repeat;
	background-position: center top;
	
	font-family: TPHFont;
	font-size: 10pt;
	color: #000000;
	background-color: #ffffff;
	text-align:center;
}

/* DIV MAIN, contient tout, header, contenu et footer */
#main
{
	min-width:var(--total_min_width);  /* a utiliser pour forcer  taille min w sur laquelle on scroll en horizontal, surtout pour texte BIO */
	max-width:var(--total_max_width);  /* a utiliser pour forcer  taille min w sur laquelle on scroll en horizontal, surtout pour texte BIO */
	margin:0 auto;
	position:relative;
	padding-bottom:40px;   /* pour laisser la place au footer */
	padding-left: 7%;
	padding-right: 7%;
}

/* DIV CONTENU PAGE */
.div_contenu_page 
{
	margin-top: 15px;
	max-width:100%;
	max-height:100%;
	height: auto;
	width:auto;
}

/* ------------------------------------------------------------------------------------ */
/* --------------------------------- COMMUN HEADER ------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* DIV HEADER, image et menu */
.site_header 
{
	color: #000;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 18px;
	text-rendering: optimizeLegibility;
	text-align: center;
	height: 50px;
	padding-top: 20px;
	padding-bottom: 0px;
	
	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
    -ms-user-select: none;
	
	/*background-color: rgb(0, 255, 255);*/
}

/* DIV HEADER, image */
.logo 
{
  margin-top: 0px;
  float: left;
  height:var(--logo_height);
  padding: 0px;
  
  user-select: none; 
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  
  /*background-color: rgb(0, 255, 0);*/
}

.layout_name
{
	height:100%;
	min-width: var(--my_name_min_width);
	float: left;
	margin-left: 15px;
	position:relative; 
	
	/*background-color: rgb(0, 0, 255);*/
}

#bottom_name 
{ 
	position:absolute;                  
	top:var(--my_name_top);                          
	left:0;     
	color: var(--text_orange_dark);	
	font-family: TPHNameFont;	
	font-size: var(--my_name_font_size);
}

/* ------------------------------------------------------------------------------------ */
/* --------------------------------- COMMUN FOOTER ------------------------------------ */
/* ------------------------------------------------------------------------------------ */
.div_footer
{
	float: right;
	padding-left: 0px;
	padding-top: 0px;

	color: var(--text_gris_dark);
	font-size: 12pt;
	font-family: TPHFont;
	text-decoration: none;
	font-weight: none;

	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	display: inline-block; 
}

#copyright
{
	font-size: 10pt;
	font-weight: normal;
	font-family: TPHFont;
	color: var(--copyright_color);
	
	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
    -ms-user-select: none;
	
	display: inline-block; 
	float:left;
}

/* ------------------------------------------------------------------------------------ */
/* ---------------------------- COMMUN MENU avec toggle ------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* Remove margins and padding from the list */
ul.topnav 
{
    list-style-type: none;
    margin: 0;
    padding: 0px;
    overflow: hidden;
	float: right;
	position: relative; 
	border-style: none;
	border-width: 1px;
	border-color: var(--small_menu_border_color);
	
	/*background-color: rgb(255, 255, 0);*/
}

/* Quand on ouvre le mini menu */
ul.topnav.responsive 
{
  padding: 10px 14px; 	/* top/bottom: 10px, right/left: 14px */
  border-style: solid; 
  width: 130px;
  
  /*background-color: rgb(255, 0, 0);*/
}

ul.topnav.responsive li.icon 
{
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
}
  
ul.topnav.responsive li 
{
  float: none;
  display: inline;
}
  
ul.topnav.responsive li a 
{
  display: block;
  text-align: left;
  font-size: 13px;
  padding: 3px 3px;
}

/* Float the list items side by side */
ul.topnav li 
{
	float: left;
	display: var(--menu_onglets_display);
}

/* Style the links inside the list items */
ul.topnav li a 
{
    display: inline-block;
    color: var(--onglets_color);
    text-align: center;
    padding: 19px 25px;
	padding-right:0px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	font-family: TPHFont;
	
	/*background-color: rgb(255, 255, 0);*/
}

/* Change color of links on hover */
ul.topnav li a:hover 
{
  color: var(--onglets_hover_color);
}

ul.topnav li a.curr-menu-item 
{
  color: var(--onglets_hover_color);
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon 
{
  display: var(--mini_menu_icon_display);
  float: right; 
  font-size: 20px;
}

/* pour switcher entre symbol menu et symbol croix/close */
ul.topnav li.icon a.menu-symbol 
{
	display: block;
}

ul.topnav li.icon a.close-menu-symbol 
{
  display: none;
}

ul.topnav.responsive li.icon a.menu-symbol 
{
  display: none;
}

ul.topnav.responsive li.icon a.close-menu-symbol 
{
	display: block;
	font-size: 20px; 
}

/* ------------------------------------------------------------------------------------ */
/* -------------------------------------- INDEX --------------------------------------- */
/* ------------------------------------------------------------------------------------ */

div.fillScreen
{
	position: fixed;
	left: 0;
	right: 0;
	top: 80px;
	bottom: 0;
	text-align: center;
}

img.fitImage
{
	padding-top:10px;
	max-width: 86%; /* 100% moins les 7% de padding de chaque coté, voir mainIndex : padding-left / padding-right */
	max-height: calc(100% - 20px);
	user-select: none;
}

/* ------------------------------------------------------------------------------------ */
/* ------------------------------------- CONTACT -------------------------------------- */
/* ------------------------------------------------------------------------------------ */
#layout_contact
{
	color: var(--text_gris_dark);
	margin-top: 70px;
	margin-bottom: 10px;
	font-size: 14pt;
	line-height: 20px;
	font-family: TPHFont;
	text-decoration: none;
	font-weight: none;
	
	user-select: text; 
	-moz-user-select: text;
	-webkit-user-select: text;
    -ms-user-select: text;
}

.layout_contact
{
	color: var(--text_gris_dark);
	font-size: 16pt;
	font-weight: none;
	
	user-select: text; 
	-moz-user-select: text;
	-webkit-user-select: text;
    -ms-user-select: text;
}

.layout_p_contact
{
	margin-top: 50px;
	margin-bottom: 20px;
}

.div_contact 
{
	float: center;
	padding-left: 0px;
	padding-top: 20px;

	color: var(--text_gris_dark);
	font-size: 12pt;
	font-family: TPHFont;
	text-decoration: none;
	font-weight: none;

	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* ------------------------------------------------------------------------------------ */
/* ------------------------------------- BIO ------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
a.layout_link:link 
{
	color:var(--orange_links);
	text-decoration: none;
}
	
a.layout_link:visited 
{
	color:var(--orange_links);
	text-decoration: none;
}

a.layout_link:hover 
{
	color:var(--orange_hover_links);
	text-decoration: none;
}

/* Page BIO*/
.bio_awards_photo 
{
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	
	/* ce sont ces deux params qu'il faut mettre pour que le div height fit le contenu */
	display: block;
	/* pour forcer de ne pas mettre de sliders */
	overflow: hidden;
	
	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
    -ms-user-select: none;
	
	/*background-color: rgb(0, 255, 255);*/
}

.bio_awards 
{
	float: left;
	padding: 0px;
	padding-top: 0px;
	text-align: left;
	color: var(--text_gris_dark);	
	font-size: 10pt;
	line-height: 14px;
	font-family: TPHFont;
	text-decoration: none;
	font-weight: none;
	display: block;

	/*background-color: rgb(0, 255, 0);*/
}

.bio_photo
{
	padding-top: var(--image_bio_padding_top);
	padding-bottom: var(--image_bio_padding_bottom);
	width: var(--image_bio_width);	
	float: var(--image_bio_float);
	margin-left: 0px;
	position:relative; 
	
	/*background-color: rgb(0, 0, 255);*/
}

.layout_bio
{
	font-family: TPHFont;
	line-height: 1.3;
	padding-right: 0px;
	margin-bottom: 10px;
	text-align: left; 
	color: var(--text_gris_dark);	
	max-width:1000px;
	
	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
    -ms-user-select: none;
	
	/*background-color: rgb(0, 0, 255);*/
}

.layout_title
{
	margin-top: 0px;
	color: var(--text_orange_dark);
	font-size: 12pt;
	font-weight: bold;
	
	/*background-color: rgb(255, 0, 255);*/
}

.layout_cover_img
{
	width:100%;
	max-width:var(--total_max_width);
	padding: 0px;
	
	user-select: none; 
	-moz-user-select: none;
	-webkit-user-select: none;
    -ms-user-select: none;
	
	/*background-color: rgb(0, 0, 255);*/
}