/******************************************************************************************************/
@font-face {font-family : 'bodoni'		;
			font-weight	: normal		;
			font-style 	: normal		;
			src			: url('../fonts/bodoni.eot');
			src			: local('☺'), 
			url('../fonts/bodoni.woff') format('woff')		, 
			url('../fonts/bodoni.ttf' ) format('truetype')	, 
			url('../fonts/bodoni.svg' ) format('svg')		;
}
:root 	   {--orange	: #ECAD31		; 
			--gris 		: #A09B97		;
			--grisfonce : #79736B		;
			--bleuvert 	: #7FC1A8		;
			font-family : 'bodoni'		;}
/*****************************************************************************************************/
#container 	{display	: flex			;
			max-width 	: 1800px		;
			min-width   : 1100px;}

#gauche 	{position	: fixed			;
			/*border		: 1px solid #000;*/
			min-height	: 350px			;
			height		: 620px			;
			display		: inline-block	;
			width		: 330px			;
			vertical-align: top			;}
			
#droite 	{position	: relative		;
			height		: 600px			;
			display		: inline-block	;
			width		: 600px			;
			vertical-align: top			;}
	
.column 	{flex		: 25%			;
			padding		: 0px			;}

/************************************************************bandeau gauche ************************/
#contact	{position	:absolute		;
			top			:550px			;
			left 		: 40px			;}	
			
#contact img{
			height		:50px			;
			width		:50px			;}
			
#imagetitre{position 	: absolute		; 
			width 		: 200px			;
			top 		:  10px   		;
			left 		:  20px   		;}

#menu    	{position 	: absolute		; 
			width		: 200px	  		;
			z-index 	: 10 	  		;   
			width 		: 100% 	  		;
			top 		: 350px   		;
			left 		:  60px   		;}
			
#navigation {list-style	: none	  		;
			margin		: 0		  		;
			padding		: 0		  		;}
			
#navigation li a {
			display		: block  		;
			color		: var(--gris)	;
			font-size	: 25px	 		;	/* hauteur des lettres des items du menu	*/
			line-height	: 20px	 		;
			text-decoration:none 		;
			padding     : 7px 10px 9px;}
			
#navigation li a:hover, 
#navigation li a:focus, 
#navigation li a:active 
			{
			color		: var(--orange);
			}
			
#footer		{position 	: absolute		; 
			top			: 600px			;
			left 		:  10px			;
			font-size	:  12px			;	
			font-style 	: italic 		;
			color 		: var(--gris) 	;}
			
/************************************************************ fin bandeau gauche ******/
/********************************** enveloppe, lettre, clickable, plot ****************/
#lalettre 	  {position: absolute; top: 90px; left:300px; width: 800px; height: 500px; }
#zoneclic	  {position: absolute; top:150px; left:400px; width: 600px; height: 330px;opacity :0;cursor:pointer;}

#labulle  	  	{display : none	 ; text-decoration: none;	}
#lazone:hover #labulle {
				display			: inline	; /* On affiche l'infobulle. */
				position		: absolute	;
				top				: 300px		; /* On positionne notre infobulle. */
				left			: 500px		;
				background		: white		;
				font-size		: 18px		;		
				color 			: var(--gris) 	;
				padding			: 3px		;
				border-radius   : 5px       ; 
				border			: 1px solid ;
				border-color    : var(--gris)   ;
}

/********************************** fin enveloppe, lettre, clickable ******************/
/************************************************************ a propos fixe ***********/
#mimessfixe		{position	:absolute	;  
				/*border		: 1px solid #000;*/
				left		: 750px		; 
				width		: 500px		;
				height		: 600px		;
				display		: flex		;
				align-items	: center	;min-height: 350px;
				justify-content: center;}
#textefixe		{position	:absolute	;  
				/*border		: 1px solid #ff0000;*/
				left		: 345px		; 
				width		: 500px		;
				height		: 800px		;
				display		: flex		;
				align-items	: center	;min-height: 350px;
				justify-content: center ;	}
				
.imgportfixe	{width		: 500px		; 
				height		: 500px		; 
				/*border		: 1px solid #000;	*/}
				
#texteaproposfixe{
				width		:470px		; 
				height		:500px		; 
				color		: var(--gris)	; 
				font-size	: 16px		; 
				/*border		: 1px solid #0000ff;*/}

#couleurapropos{color		: var(--grisfonce)	; 
				font-weight : bold;
				font-size	: 18px		; }

/*************************************************** div portfolio************************/
.imgport 		{width 		: 96%		;		/* dans javascript */
				padding		: 0px 0px 3% 0px;
				opacity		: 1			;
				cursor		: pointer	;}		
				
#bullemagic {	visibility	: hidden	;
				position 	: absolute	;
				top			: 100px		;
				left 		: 100px		;
				width 		: 400px		;
				height		: 20px		;
				text-align	: center	;
				padding		: 3px		;
				font-size	: 20px		;		
				color 		: var(--gris) 	;
				/*border-radius   : 5px       ; 
				border			: 1px solid ;
				border-color    : var(--gris)   ;		*/		
			}
/*************************************************** div parution************************/

.columnparu1	{position 	: absolute; width : 150px;left : 300px;	top : 75px; z-index : 10}
.columnparu2	{position 	: absolute; width : 250px;left : 470px;	top : 75px;}
.columnparu3	{position 	: absolute; width : 150px;left : 720px;	top : 75px;}
.columnparu4	{position 	: absolute; width : 250px;left : 890px;	top : 75px;}
.divimgparu		{height 	: 180px		;
				padding-top : 4px 		;}	
.divtextparu	{height 	: 180px		;
				color		: var(--gris)	; 
				font-size	: 20px		; 	
				padding-top : 4px 		;
				cursor		: pointer	;}	
.divtextparu span  {color		: var(--orange);
				font-size	: 20px		;
				cursor		: pointer	;}				
.imgparu		{height 	: 150px		;		/* dans javascript */
				opacity		: 1			;
				cursor		: pointer	;}		
				
/*************************************************** div magique *************************/
#magic	    	{position	:absolute;	
				border		: 1px solid #000;
				z-index		: 10	 	;
				background-color:#fff  	;
				visibility 	: hidden    ; 
				}	
#imgmagic		{position	:absolute	;	
				width 		: 100px		;
				height		:100px		;
				top 		:100px   	;
				left 		:100px   	;
				}
#textmagic		{position	: absolute	; 
				left		: 100px		; 
				top			: 100px		;
				width 		: 410px	    ; 
				height 		:  30px		; 
				color		: var(--gris)	; 
				background-color:#ffffff;
				text-align  : left		;
				font-size	: 19px		;	
				margin 		: 0px 0 0px 0px; /*haut droite bas gauche*/
					
				 -webkit-transform-origin : 0 0;
					-moz-transform-origin : 0 0;
					 -ms-transform-origin : 0 0;
					  -o-transform-origin : 0 0;
						 transform-origin : 0 0;
						-webkit-transform : rotate(-90deg); 
						   -moz-transform : rotate(-90deg);  
							-ms-transform : rotate(-90deg);  
							 -o-transform : rotate(-90deg);  
								transform : rotate(-90deg);
			}
/************************************************ fin div magic***************************/