/***************************
file name : main_style.css
description : gère l'affichage général de la page principale
auteur : Patrick le 24 juin 2025
modifié le : 

****************************/
	body{
		margin:0;
		line-height: 1.3;
		background-size: 100%;
		background-image:url('backgrounds/president-gcvd-25-26_background_main.svg');
		background-color: white;
	}
	div{
		margin:0px;
	}
	ul{
		list-style-type: none;
	}
	a{
		color: #129a39;
		font-weight:bold;
		text-decoration: none;
	}
	a:hover{
		color: #333333;
	}
	a:active{
		color: #333333;
	}
	a.ex2{
		color: #333333;
		font-weight:bold;
		text-decoration: none;
	}
	a.ex2:hover{
		color: #7fc732;
	}
	a.ex2:active{
		color: #7fc732;
	}
	a.ex3{
		color: white;
		font-weight:bold;		
		text-decoration: none;
	}
	a.ex3:hover{
		color: #129a39;
	}
	a.ex3:active{
		color: #129a39;
	}
	a.ex4{
		color: #129a39;
		font-weight:bold;
		text-decoration: none;
	}
	a.ex4:hover{
		color: #333333;
		text-decoration: underline;
		text-decoration-thickness: 5px;
		text-decoration-color: #333333;
	}
	a.ex4:active{
		color: #333333;
	}
	a.ex5{
		color: #0866FF; /**facebook**/
		font-weight:bold;
		text-decoration: none;
	}
	a.ex5:hover{
		color: #333333;
	}
	a.ex5:active{
		color: #333333;
	}
	a.ex6{
		color: #E4405F; /**instagram**/
		font-weight:bold;
		text-decoration: none;
	}
	a.ex6:hover{
		color: #333333;
	}
	a.ex6:active{
		color: #333333;
	}


/**hr change in bootstrap.css line 1130**/
	#top{
		height:280px;
		padding-top:10px;
		padding-bottom:10px;
		background-size: 100%;
		/**background-color: #7fc732;**/
		background-image:url('backgrounds/president-gcvd-25-26_background_top.svg');
		background-position: bottom;

	}
	#slogan{
		padding-top:40px;
		float:right;
		text-align:left;
		line-height: 100%;
	}
	#menu{
		clear:both;
		font-size:18px; /*font size*/
		/**font-weight:bold;**/
		font-family: 'Red Hat Text', sans-serif;
		float: right;
		margin-top:0px;
		margin-bottom:0px;
		padding-top:0px;
		padding-right:150px;
		padding-bottom:0px;
	}
	#menu li{
		text-align:justify;
		float:left;
		padding-top:0px;
		padding-left:30px;
		padding-bottom:0px;
	}
	#page_title{
		text-align: left;
		height:100%;
		padding-top:55px;
		padding-bottom:65px;
		background-size: 100%;
		background-color: #129a39;
	}
	#page_content{
		clear:both;
		padding-left:0px;
		padding-bottom:30px;
		height:100%;
	}
	#pages{
		padding-top:25px;
		padding-bottom:10px;
	}
	#personnel{
		clear: both;
		padding-top: 20px;
	}
	#image_personnel{
		float: left;
		padding-right: 50px;
	}
	#localisation{
		padding-top:25px;
		padding-bottom:25px;
	}
	#back{
		clear:both;
		padding-top:30px;
		float:right;
		padding-bottom:30px;
	}
	#demo{
		color: #129a39;
	}		
	#menus{
		clear:both;
		/**background-color: #f2f2f2;**/
		padding-top:20px;
		padding-bottom: 20px;
		text-align:left;
	}
	#bottom{
		clear:both;
		background-size: 100%;
		background-image:url('backgrounds/president-gcvd-25-26_background_bottom.svg');
		/**background-color:#333333;**/
		background-position:top;
		padding-top:50px;
	}
	
	/*floating menus*/
	#menu_button{
		width:200px;
		height:100px;
		background-image:url('buttons/president-gcvd-25-26_button_menus.svg');
		float:right;
		margin-right:50px;
	}
	#floating_menu{
		position:absolute;
		top:0px;
		right:0px;
		background-size: 100%;
		background-color:#333333;
		width:80%;
		height:100%;
		padding:50px;
		font-size:55px; /*font size*/
		font-family: 'Red Hat Text', sans-serif;
		font-weight:bold;
		display:none;
		z-index:1;
	}
	.material-icons {
	  font-family: 'Material Icons';
	  font-weight: normal;
	  font-style: normal;
	  font-size: 24px;  /* Preferred icon size */
	  display: inline-block;
	  line-height: 1;
	  text-transform: none;
	  letter-spacing: normal;
	  word-wrap: normal;
	  white-space: nowrap;
	  direction: ltr;

	  /* Support for all WebKit browsers. */
	  -webkit-font-smoothing: antialiased;
	  /* Support for Safari and Chrome. */
	  text-rendering: optimizeLegibility;

	  /* Support for Firefox. */
	  -moz-osx-font-smoothing: grayscale;

	  /* Support for IE. */
	  font-feature-settings: 'liga';
	}
	/**.material-icons.md-18 { font-size: 18px; }
	.material-icons.md-24 { font-size: 24px; }
	.material-icons.md-36 { font-size: 36px; }
	.material-icons.md-48 { font-size: 48px; }**/	
	.titre1{
		font-weight: bold;
		color: white;
		font-family: 'Red Hat Text', sans-serif;
		text-shadow: 2px 2px 15px black;
		line-height: 1.0;
	}
	.titre2{
		color: white;
		font-family: 'Red Hat Text', sans-serif;
		font-weight: bold;
		text-shadow: 2px 2px 15px black;
		line-height: 1.0;
	}
	.titre3{
		color: white;
		font-family: 'Red Hat Text', sans-serif;
		font-weight: normal;
		text-shadow: 2px 2px 15px black;
		line-height: 1.0;
	}
	/**
	.titre3a{
		color: #333333;
		font-weight:bold;
		font-family: 'Red Hat Text', sans-serif;
	}
	**/
	.titre4{
		color: #333333;
		font-family: 'Red Hat Text', sans-serif;
		font-weight:bold;
	}
	.text-align-right{
		text-align: right;
	}
	.text-align-center{
		text-align: center;
	}
	.text4{
		color: #333333;
		font-family: 'Red Hat Text', sans-serif;
	}
	.text5{
		color: white;
		font-family: 'Red Hat Text', sans-serif;
	}
	.text6{
		color: white;
		font-family: 'Red Hat Text', sans-serif;
	}
	.cadre{
		background: #ccffcc; /**#fff199**/
		border-radius: 10px;
		padding: 30px;
	}

	
	/*********************à partir de là, tous les éléments qui s'adaptent*******************************/
	
	@media screen and (min-width: 0px) and (max-width: 700px) {
		#top{
			padding-left:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:750px;
		}
		#bottom_logo_svg{
			width:700px;
		}
		#slogan{
			padding-right:50px;
		}
		#menu{
			padding-left:50px;
			padding-right:50px;
		}
		#menu{
			display:none;
		}
		#page_title{
			padding-left:50px;
			padding-right:50px;
			background-repeat: no-repeat;
			background-position: left; 
		}
		#page_content{
			padding-left:50px;
			padding-right:50px;
		}
		.newspaper {
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
		}
		#services_menu{
			/* Chrome, Safari, Opera */
			-webkit-column-count: 1;
			-webkit-column-gap: 50px;
			-webkit-column-rule-style: outset;
			-webkit-column-rule-width: 1px;

			/* Firefox */
			-moz-column-count: 1;
			-moz-column-gap: 50px;
			-moz-column-rule-style: outset;
			-moz-column-rule-width: 1px;

			column-count: 1;
			column-gap: 50px;
			column-rule-style: outset;
			column-rule-width: 1px;
			
			width:100%-50px;
			font-size:50px;
			/**background-color:#333333;**/
			padding-top:15px;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:30px;
			color:#333333;
		}
		.material-icons.md { font-size: 48px; }	
		.titre1{
		font-size:70px; /*font size*/
		}
		.titre2{
			font-size:60px; /*font size*/
		}
		.titre3{
			font-size:60px; /*font size*/
		}
		.titre4{
			font-size:50px; /*font size*/
		}
		.text4{
			font-size:55px; /*font size*/
		}
		.text5{
			font-size:55px; /*font size*/
		}
		.text6{
			font-size:28px; /*font size*/
		}
		#menus{
			clear:both;
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			clear:both;			
			padding-left:50px;
			padding-right:50px;
		}
	}
	@media screen and (min-width: 700px) and (max-width: 1200px) {
		#top{
			padding-left:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:750px;
		}
		#bottom_logo_svg{
			width:700px;
		}
		#slogan{
			padding-right:50px;
		}
		#menu{
			padding-left:50px;
			padding-right:50px;
		}
		#menu{
			display:none;
		}
		#page_title{
			padding-left:50px;
			padding-right:50px;
			background-repeat: no-repeat;
			background-position: left; 
		}
		#page_content{
			padding-left:50px;
			padding-right:50px;
		}
		.newspaper {
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
		}
		#services_menu{
			/* Chrome, Safari, Opera */
			-webkit-column-count: 2;
			-webkit-column-gap: 50px;
			-webkit-column-rule-style: outset;
			-webkit-column-rule-width: 1px;

			/* Firefox */
			-moz-column-count: 2;
			-moz-column-gap: 50px;
			-moz-column-rule-style: outset;
			-moz-column-rule-width: 1px;

			column-count: 2;
			column-gap: 50px;
			column-rule-style: outset;
			column-rule-width: 1px;
			
			width:100%-50px;
			font-size:50px;
			/**background-color:#333333;**/
			padding-top:15px;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:30px;
			color:#333333;
		}
		.material-icons.md { font-size: 48px; }	
		.titre1{
		font-size:70px;
		}
		.titre2{
			font-size:60px; /*font size*/
		}
		.titre3{
			font-size:60px; /*font size*/
		}
		.titre4{
			font-size:50px; /*font size*/
		}
		.text4{
			font-size:45px; /*font size*/
		}
		.text5{
			font-size:45px; /*font size*/
		}
		.text6{
			font-size:28px; /*font size*/
		}
		#menus{
			clear:both;
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			clear:both;
			padding-left:50px;
			padding-right:50px;
		}		
	}
	@media screen and (min-width: 1200px) {
		#top{
			padding-left:150px;
		}
		#top_logo{
			padding-top:20px;
			padding-bottom:0px;
		}
		#top_logo_svg{
			width:525px;
		}
		#bottom_logo_svg{
			width:525px;
		}
		#slogan{
			padding-right:150px;
		}
		#menu{
			padding-left:150px;
			padding-right:150px;
		}
		#menu_button{
			display:none;
		}
		#page_title{
			padding-left:150px;
			padding-right:150px;
			background-repeat: no-repeat;
			background-position: right; 
		}
		#page_content{
			padding-left:150px;
			padding-right:150px;
		}
		.newspaper {
			-webkit-column-count: 2; /* Chrome, Safari, Opera */
			-moz-column-count: 2; /* Firefox */
			column-count: 2;
		}
		#services_menu{
			/* Chrome, Safari, Opera */
			-webkit-column-count: 3;
			-webkit-column-gap: 50px;
			-webkit-column-rule-style: outset;
			-webkit-column-rule-width: 1px;

			/* Firefox */
			-moz-column-count: 3;
			-moz-column-gap: 50px;
			-moz-column-rule-style: outset;
			-moz-column-rule-width: 1px;

			column-count: 3;
			column-gap: 50px;
			column-rule-style: outset;
			column-rule-width: 1px;
			
			width:100%-50px;
			font-size:20px;
			/**background-color:#333333;**/
			padding-top:15px;
			padding-left:100px; /**pad**/
			padding-right:100px; /**pad**/
			padding-bottom:30px;
			color:#333333;
		}
		.material-icons.md { font-size: 28px; }	
		.titre1{
			font-size:50px; /*font size*/
		}
		.titre2{
			font-size:42px; /*font size*/
		}
		.titre3{
			font-size:35px; /*font size*/
		}
		.titre4{
			font-size:24px; /*font size*/
		}
		.text4{
			font-size:18px; /*font size*/
			/**text-align: justify;**/
		}
		.text5{
			font-size:18px; /*font size*/
		}
		.text6{
			font-size:14px; /*font size*/
		}
		#menus{
			clear:both;
			padding-left:150px;
			padding-right:150px;
		}
		#bottom{
			clear:both;
			padding-left:150px;
			padding-right:150px;
		}
	}