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

****************************/
	body{
		margin:0;
		font-family: 'Open Sans', sans-serif;
		scroll-behavior: smooth;
		/**background-color: white;**/
		background-image:url('backgrounds/lefunambule_background_main.svg');
		background-size: 100%;
	}
	div{
		margin-right:0px;
		margin-left:0px;
	}
	ul{
		list-style-type: none;
	}
	a{
		color: #993333;
		text-decoration: none;
	}
	a:hover{
		color:black;
	}
	a:active{
		color: black;
	}
	#top{
		padding-top:0px;
		padding-bottom:30px;
	}
	#slogan{
		padding-top:40px;
		float:right;
		text-align:left;
	}
	#title{
		background-image: linear-gradient(to right, #e6e6e6 , white);
		/**background-color: #e6e6e6;**/
		padding-top:30px;
		padding-bottom:30px;
	}
	#page{
		padding-top:30px;
		padding-bottom:30px;
	}
	#contact{
		padding-top:30px;
		padding-bottom:30px;
	}
	#bottom{
		background-image: linear-gradient(to right, white, #e6e6e6);
		/**background-color: #e6e6e6;**/
		padding-top:30px;
		padding-bottom:80px;
		text-align:center;
	}
	#bottom_logo{
			text-align:center;
		}
	#back{
		clear:both;
		padding-top:30px;
		float:right;
		padding-bottom:30px;
	}
	.titre1{
		color:#993333;
		font-style: italic;
	}
	.text1{
		color:#333333;
	}
	.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; }**/

	
	/*à partir de là, tous les éléments qui s'adaptent*/
	
	@media screen and (min-width: 0px) and (max-width: 700px) {
		#top{
			height:525px;
			padding-left:50px;
			padding-right:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:400px;
		}
		#slogan{
			padding-right:50px;
		}
		.titre1{
			font-size:50px;
		}
		.text1{
			font-size:40px;
		}
		.material-icons.md { font-size: 48px; }	
		#title{
			padding-left:50px;
			padding-right:50px;
		}
		#page{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:50px;
			padding-right:50px;
		}
		#bottom_logo_svg{
			width:550px;
		}
		.newspaper {
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
		}
	}
	@media screen and (min-width: 700px) and (max-width: 1200px) {
		#top{
			height:525px;
			padding-left:50px;
			padding-right:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:400px;
		}
		#slogan{
			padding-right:50px;
		}
		.titre1{
			font-size:50px;
		}
		.text1{
			font-size:40px; 
		}
		.material-icons.md { font-size: 48px; }	
		#title{
			padding-left:50px;
			padding-right:50px;
		}
		#page{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:50px;
			padding-right:50px;
		}
		#bottom_logo_svg{
			width:550px;
		}
		.newspaper {
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
		}		
	}
	@media screen and (min-width: 1200px) {
		#top{
			height:275px;
			padding-left:250px;
			padding-right:250px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:400px;
		}
		#slogan{
			padding-right:100px;
		}
		.titre1{
			font-size:24px;
		}
		.text1{
			font-size:18px;
		}
		.material-icons.md { font-size: 24px; }	
		#title{
			padding-left:250px;
			padding-right:250px;
		}
		#page{
			padding-left:250px;
			padding-right:250px;
		}
		#bottom{
			padding-left:250px;
			padding-right:250px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:300px;
			padding-right:300px;
		}
		#bottom_logo_svg{
			width:400px;
		}
		.newspaper {
			-webkit-column-count: 2; /* Chrome, Safari, Opera */
			-moz-column-count: 2; /* Firefox */
			column-count: 2;

		}		
	}