@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('ColabThi-webfont.eot');
    src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabThi-webfont.woff') format('woff'),
         url('ColabThi-webfont.ttf') format('truetype'),
         url('ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'ColaborateBoldRegular';
    src: url('ColabBol-webfont.eot');
    src: url('ColabBol-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabBol-webfont.woff') format('woff'),
         url('ColabBol-webfont.ttf') format('truetype'),
         url('ColabBol-webfont.svg#ColaborateBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
	font: 100%/1.2 'ColaborateThinRegular', Verdana, sans-serif;
	color: #eeeeee;
	background: #000000 url(PMI_qk2.gif) no-repeat;
	background-position:  50% 1em;
	text-align: left;
	padding: 0;
	margin: 0em;
}

p {
	background: transparent url(#) center no-repeat;
	margin: 20px 0px 0px 0px;

}

.contenant {



    width: 80%; /* Adjust the percentage as needed */
    max-width: 31em; /* Optional: Set a maximum width for larger screens */


}
   
   
     /* max-width: 320px; 
     
        max-width:600px;
     
     
     
     
     
   width: 33em; */ /* max_width works with iPhones, but doesn't format well with new Android phones and devices that are wider than 320px */



/*    width: auto;      min-width: 0px;
There is no need to have a giant header on a small mobile screen */


h1 {
	height: 175px;
	background: url(pmi_c-n.pgn.gif) top left no-repeat;
	text-indent: -999em;
	color: black;
	margin: 0px 0px 0px 0px;	
}






h2 {
	font: 1.2em/1.1 'ColaborateBoldRegular', Arial, sans-serif;
	background: url(#) top left no-repeat;
	text-indent: 0em;
	color: #516873;
	margin: 0em 0em 0em 0em;	
	
}



h3 {
	font: 1.2em/1.1 'ColaborateBoldRegular', Arial, sans-serif;
	background: url(#) top left no-repeat;
	text-indent: 0em;
	color: #516873;
	margin: 30px 0px 0px 0px;
}

a:link {
        color: #516873	;
        text-decoration:none;
    	}
/* non vu */ 
   
a:visited {
		color:#7E95A0 
		}
    
/* deja vu */

a:hover  { 
		text-decoration:underline}

/* survol */

    
a:active { 
		color:#b0c7d2 
		}
/* en clic */

    
#lang {
	font-size: 1.1em;
	background: transparent;
	color: #1d3039;
	link: ;
	text-align: right;
	border: 0px solid #000000;
	margin: 0.4em auto;
}

p#Entete {
	font: 2em/1.3 'ColaborateBoldRegular', Arial, sans-serif;
	letter-spacing:0.06em;
	color: #516873;	

}

/*

   

	font: 2em/1.3em  'ColaborateBoldRegular', Arial, sans-serif;
	letter-spacing:0.07em;
	background: transparent;
	text-align: left;
	margin-left:0em;
	color: #eeeeee;
*/


/*
======================
D E B  D E  C O N T
======================
*/
#contenant {
	background: transparent;
	width:31em;

	text-align: left;
	border: 1px solid #142127;
	margin: 0 auto;
}

/*
	padding-left:2em;
*/












/*
======================
D É B U T  M E N U
======================

*/

/* 
	Originalement: 
	http://www.htmldog.com/articles/suckerfish/dropdowns/example/   */

#nav, #nav ul {
	float: left;
	width: 31em;
	list-style: none;
	line-height: 2;
	background: #000000;
	font-weight: bold;
	padding: 0;
	border: solid #bfbfbf;
	border-width: 1px 0;
	margin: 0em 0em 2em 0em;
}

/* 	padding: 0;
	margin: 0 0 1em 0;
*/

#nav a {
	display: block;
	width: 9em;
	w\idth: 5em;
	color: #7E95A0;
	text-decoration: none;
	padding: 0.25em 1.3em;
}


#nav a.papa {
	background: url(flechedroite.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;
	width: 9em;
}

/* 
*/

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.10em;
	margin: 0;
}

/*  	height: auto;
*/

#nav li li {
	padding-right: 1em;
	width: 12.9em
}

/* 
*/

#nav li ul a {
	width: 12em;
	w\idth: 8em;
}

/* 
*/
#nav li ul ul {
	margin: -1.75em 0em 0em 13.8em;
}
/* 	margin: -1.75em 0 0 13.8em;
*/
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #243B46;
}

/*
======================
F I N   D U   M E N U 
======================
*/





	.pNormal {
    font-family:ColaborateThinRegular,Helvetica,Arial,sans-serif;
    font-size:0.85em;
    text-decoration:none;
    color:silver;
}


/*
 18px;
*/

	.contenu {
	clear: left;
	padding-left:1.3em;
}
	.contenu a {
	color: #7E95A0;
	text-decoration: none;
}
	.contenu a:hover {
	color: #516873;
	text-decoration: underline;
}

/*
======================
F I N   D E  C O N T  
======================
*/

/*
======================
D E B   D E  C O L  
======================
*/


#columns, pcolumns {
	margin: 0px;
	padding: 0px;
	}

.col {
	margin-right: 1em;
	padding: 0em;
	float: left;
	}
/*
dégagement horizontal entre menu et contenu 
*/	
	

.col-mega {
	width:27em;
	font: 107%/1.40 ColaborateThinRegular, Verdana, sans-serif;
	margin-right: 1em;
	padding: 0em;
	float: left;

	}
	
.col-mega-ami {
	width:26em;
	background: transparent;	
	font: 110%/1.25 ColaborateThinRegular, Verdana, sans-serif;
	color:#bfbfbf;
	float: left;
	border-top-style:solid;
	border-width:1px;
	border-color: #142127;
	margin-right: 1em;
	margin-bottom: 3em;
	padding: 0em;

	}



/*


width: 31em;
======================
F I N   D E  C O L  
======================
*/

/*
======================
D E B   B O I T E  
======================
*/


#boite_du_bas {
	width:31em;
	background: transparent;
	text-align: left;
	border-top-style:solid;
	border-width:1px;
	border-color: #142127;
	margin: 0 auto;
}




/*

CHARTE COULEUR	
#ffffff		BLANC
#e7f2f8		TRES CLAIR
#CEE5F0		BLEU CLAIR
#eeeeee		GRIS PALE
#bfbfbf		GRIS MOYEN
#BCC2C8
#b0c7d2		PMI
#7E95A0  	GRIS VERT FONCE
#516873
#243B46	
#1d3039	
#0d161a 	GRIS VERT TRES FONCE
#142127
#0f181d		GRIS VERT ULTRA FONCE
#050809		QuasiNoir


Sometimes you might have a really wide table or div or pre that just won't fit in the width of a
mobile device causing the page to have to scroll sideways (horizontally) to view the whole
div or table.  Add the following break_word class and the table or div will even split in
the middle of words to try to format it to the width of the device:
Examples: <table class='break_word'> or <div class='break_word'>
*/

.break_word
{
	width: auto; 
	word-break: break-all;
	white-space: pre-wrap;       /* css-3 */
}