@charset "UTF-8";
/* CSS Document */
/*debut code global*/
html, body
{
	margin:0;
	padding:0;
}
body
{
	background-color: #FFF;
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	font-weight:lighter;
}
#global
{
	width:1200px;
	margin:auto;
}
a
{
	text-decoration: none;
}
a:link
{
	text-decoration: none;
	
}
a:visited
{
	text-decoration: none;
	border: none;
	
}
a:hover
{
	color: #000;
}

a:active
{
	text-decoration: none;

}
/* >>> FIN CODE GLOBAL */

/* COLONNE GAUCHE >>> */
#colonne
{
	float:left;
	position:fixed;
	width:380px;
	height:auto;
	margin:0;
	padding: 10px 10px 0 10px;
	text-align: right;
	list-style-type: none;
	background-color:#FFF;
	z-index:2;
}
#titre
{
	font-size:12px;
	font-weight:lighter;
	color:#000;
}
#titre a
{
	text-decoration: none;
	color:#CCC;
}
#titre a:hover
{
	background-color:#FFF;
	color: #000;
}
#titre a:visited
{
	text-decoration: none;
}
#menu
{
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
	color: #CCC;
}
#menu a
{
	text-decoration:none;
	color: #CCC;
}
#menu a:hover
{
	background-color:#FFF;
	color: #000;
}
.sous
{
	padding:0;
	margin:0;
}
#colonne #pageactive
{	
	color:#000;
}
#menu #langueactive
{
	color:#000;
}
/* fin code colonne commun*/

/*debut code corps (colonne centrale)*/
/* SMARTPHONES ET TABLETTES >>> */

#m_titre 
{
	font-size:12px;
	font-weight:lighter;
	color:#000;
} 
#m_titre a
{
	text-decoration:none;
	color: #000;
}
#m_titre a:hover
{
	background-color:#FFF;
	color: #000;
}
#m_titre a:visited
{
	text-decoration: none;
}
/*#re-index
{
	font-size:10px;
	font-weight:bold;
	color:#000;
}*/
#re-index a
{
	text-decoration:none;
	color: #000;
}
#re-index a:hover
{
	background-color:#FFF;
	color: #000;
}
#re-index a:visited
{
	text-decoration: none;
}
#m_menu
{
	padding:0;
	list-style-type:none;
}
#m_menu #m_nom
{
	color:#CCC;
}
#m_menu #pageactive
{
	color:#000;
}
#m_menu #nom_projet
{
	font-weight:lighter;
	color:#000;
}
	
/* >>> FIN SMARTPHONES ET TABLETTES */
#corps
{
	width:780px;
	background-color:#FFF;
	position:absolute;
	margin:0;
	margin-left:400px;
	padding:10px 10px 20px 10px;
	text-align:justify;
	z-index:1;
}
#corps a:hover
{
	background-color: #06F;
	color:#FFF;
}
.liens_ext
{
	background-color: #CCC;
	color: #FFF;
}
#contenu
{
	text-align: left;
}
/*Fin code corps (colonne centrale)*/

/*Uniquelement pour page index*/
#actu
{
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
}
.date
{
	font-weight:bold;
}
.surligne
{
	background-color: #666;
	color: #FFF;
	font-weight:lighter;
}

/*Uniquement pour page projet*/
.italique
{
	font-style:italic;
}
#technique
{
	font-style:italic;
	font-size:smaller;
}
.liens_ext_2
{
	font-weight:bold;
	color: #000;
}

/*Page contact*/
#contact
{
	text-align:left;
	list-style-type:none;
	margin:0px;
	padding:0px;
}

/*Page cv*/
#cv
{
	text-align:justify;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
#social a:hover
{
	background-color: #FFF;
}
#links
{
	text-align:justify;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.liens_ext_3
{
	background-color: #999;
	color: #FFF;
}
.liens_ext_4
{
	text-decoration: none;
}
/* Fin code Personnel */

/*MEDIA QUERIES*/

@media (min-width: 1200px)
{
	/*Pour eviter que le menu mobile apparaisse sur écrans de plus 1200px*/
	#m_menu
	{
		display:none;
	}
}
@media (max-width: 1200px) and (min-width: 780px)
{
	/* Code pour les écrans de moins de 1200px jusque 780px (exclu) ex : iPad */
	
	html, body
	{
		margin:0;
		padding:0;
	}
	#global
	{
		width:780px;
		margin:auto;
		padding:10px 10px 10px 10px;
	}
	
	#colonne
	{
		display:none;
	}
	
	#corps
	{
		margin:0;
		padding:0;
	}
	#contenu
	{
	display:none;
	}
	 /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

	img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp,
	p,
	li {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
	 /* Un message personnalisé

    body:before {
        content: "Version mobile";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }*/
}

@media (max-width: 780px)
{
	/* Code pour les écrans de moins de 780px ex: telephones */
	/*html, body
	{
		margin:0;
		padding:0;
	} 201710*/
	
	html, body
	{
		margin:0;
		padding:0;
	}
	
	#global
	{
		width:auto;
		margin:auto; /*201710, avant : 0 */
		/*padding-right:10px; /*201710, avant : 5px*/
		/*border: solid 1px red;*/
	}
	
	#colonne
	{
		display:none;
	}
	
	#corps
	{
		width:auto;
		margin:0px; /* 201710, avant : 0px*/
		padding:10px; /*201710, avant : 0px*/
		/*border: solid 1px blue;*/
	}
	#contenu
	{
	display:none;
	}
	 /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width:100%;
    }
    
    /* conserver le ratio des images*/
	iframe {
		width:100%;
		height:auto;
	}
	img {
		width:auto;
        height:auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp,
	p, /*201710*/
	li {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
	 /* Un message personnalisé

    body:before {
        content: "Version mobile";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }*/
}


@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}