/* 

https://www.sessions.edu/color-calculator/
https://bootstrapmade.com/demo/Bell/
https://jaetheme.com/balises-html5/#comment
https://www.pantone.com/color-finder
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

*/
    /* -FONTS ------------------------------- */
    @import url("https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
	@font-face {
		font-family:"Revue";
		src: url("http://boule.bessenoise.free.fr/snippet/Revue_BT.ttf");
	}
	
	/* -VARIBLES ----------------------------- */
	:root {
		--color-highlight: #41B6E6; /* pantone 298 C */
		--color-lightshadow: #DCDCDC;
		--color-darkshadow: #808080;
		--color-darklight:#0066ff;
		
		
		--color-orange:#FF9900;
	
		--color-saumon:#e69c2e;
		--color-rouge:#FF1a00;
		--color-jaune:#e6ff00;
		--color-violet:#9900FF;
		--color-vert:#66ff00;
	}
    


    /* -GENERIQUE --------------------------- */
    body {
    	background-image:url("http://boule.bessenoise.free.fr/image/bgbase.gif");
		font-family: 'Raleway', Sans-serif;
		font-weight:500;
		font-size:14px;
		color:#FFF;
		margin:0;
		padding:0;
	}
	
	main iframe {
		  width: 98%;
		  height: 100%;
		  margin:0 1% 0 1%;
		  border:0;
		  /* border: 1px solid red; */
	}
	img{
    	max-width:100%;
	}
	a {
		color:#FFF;
		text-decoration:none;
	}
	a:hover{
		font-weight:700;
	}
	header{
		width:100%;
		position: fixed;
  		left: 0;
  		top: 0;
	}
    main {
    	margin-top:65px;
	    width:100%;
	    text-align:center;
	    height:100%;
	}
    aside {
    	display:none;
		float:left;
		width:100%;
		height:100%;
		text-align:center;
	}
    footer {
		clear:both;
		padding-top:40px;
		height:100%;
    }
    .container {
		text-align:left;
		margin:0;
		padding:0;
    }
    /* LOGO  ---------------------------- */
    .logo{
    	position:fixed;
    	left:0;
    	top:0;
    	margin-top:4px;
    	margin-left:9px;
    }
    .logo img{
    	 height:51px;
    	 width:auto; 
    }
	
	/* NAVBAR --------------------------- */
	.navbar {
		float: left;
  		display: block;
  		width:100%;
  		overflow: hidden;
  		background-color: var(--color-highlight);
  		font-size: 16px;
		font-weight: 500;
		}
	.navbar a{
		float: left;
  		display: block;
		color: #FFF;
		text-decoration: none;
		padding:20px 18px;
	}
	.navbar a.home{
	  	background-color: var(--color-darklight);
	  	/* padding-left:50px; */
	}
	.navbar a:hover{
		color:var(--color-lightshadow);
		font-weight:500;
	}
	.navbar .icon {
		display: none;
	}
	@media screen and (max-width: 850px) {
  		.navbar a:not(:first-child) {display: none;} 
  		.navbar a.icon {
    		float: right;
    		display: block;
  		}
	}
	@media screen and (max-width: 850px) {
  		.navbar.responsive {
  			position: relative;
  		}
   		.navbar.responsive a {
    		float: none;
    		display: block;
    		text-align: left;
  		}		
		.navbar.responsive a:not(:first-child), a:not(:last-child) {
			background-color:black;
			border-bottom: solid 1px var(--color-darkshadow);
		}		
  		.navbar.responsive a:hover{
			color:var(--color-darkshadow);
			font-weight: 500;
  		}
		.navbar.responsive .icon {
    		position: absolute;
    		right: 0;
		    top: 0;
		    text-align: right;
		}
		.navbar.responsive a.icon{
			background-color: var(--color-highlight);
		}
	}

	
	/* MAIN  ------------------- */
	.main-titre-tab{
		/*background-color: var(--color-highlight); */
		display:table;
		width:100%;
	}
	.main-titre-row{
		display:table-row;
	}
	.main-titre-cel{
		vertical-align:middle;
		display:table-cell;
	}

	.main-titre1{
		font-family:"Revue";
		font-size:7vw;
		color:var(--color-bleu-logo);
		margin:0;
	}
	.main-titre2 {
		font-family:"Revue";
		font-size:4vw;
		font-weight: normal;
		color:var(--color-bleu-logo);
		margin:0;
	}
	@media screen and (min-width: 1001px) {
		.main-titre1{font-size:70px;}
		.main-titre2{font-size:40px;}
	}
		
	/* PAGES ----------------------------- */
	.pageBarreTitre {	/* Barre de titre orange */
		width:100%;
		position:relative;
		background-color:#FF9900;
		line-height:27px;
		font-size: 20px;
		font-style: italic;
		font-weight: 700;
		color: #FFFFFF;
		padding-left: 20px;
	}
	.pageBarreFin {	/* Barre de bas de page */
		width:100%;
		position:relative;
		background-color:#FF9900;
		line-height:27px;
		font-size: 14px;
		font-style: italic;
		font-weight: 300;
		color: #FFFFFF;
		text-align:center;
	}
	.pageInfoLien{								/* ligne de texte indiquant un lien */
		margin-top:40px;
		font-size:14px;
		width:100%;			
		color: #FFFFFF;
		margin-left: 5vw;			
	}
	.pageNavBack{
		position:fixed;
		top:0;
		right:0;
		display: block;
		font-size:13px;
	}