@charset 'UTF-8';

html,
html * {
padding: 0 0 0 0;
margin: 0;
box-sizing: border-box;
}

/*apparence des images*/
img {
max-width: 100%;
}

/*apparence du fond*/
body {
background-color: #FFFFFF;
background-image: url(img/fond_logo---.png);
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 13px;
font-weight:normal;
text-align: center;
overflow-wrap: break-word;
hyphens: auto;
}

/*apparence des liens*/
a:link {
color:black;
text-decoration:underline;
}
a:visited {
color:black;
text-decoration:underline;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}

/*apparence du bandeau d'accueil*/
header {
padding: 10px 32px 0px 32px;
background-color: white;
border-bottom: dotted #E9E9E9;
border-width: 0.3em;
}

/*apparence des styles de paragraphes ou en-têtes*/
h1 {
font-size: 40px;
font-weight:lighter;
line-height: 140%;
padding:32px 16px 16px 20px;
text-align: center;
display: block;
}

h2 {
font-size: 17px;
font-weight:bold;
padding-left: 8px;
padding-right:8px;
padding-top:8px;
padding-bottom: 16px;
text-align: center;
}

h3 {	
font-size: 16px;
font-weight:300;
padding: 0 16px 8px 16px;
text-align: center;
}

h4 {	
font-size: 14px;
font-weight:600;
padding-left:16px;
padding-right:16px;
padding-bottom: 8px;
text-align:center;
}

h5 {	
font-size: 12px;
font-weight:400;
padding-left:16px;
padding-right:16px;
padding-bottom:0px;
text-align:center;
}

h6 {	
font-size: 12px;
font-weight:normal;
color:#7D7D7D;
padding-left:16px;
padding-right:16px;
padding-bottom:16px;
text-align:center;
font-style: italic;
}

.txtariane {	
font-size: 14px;
font-weight:normal;
color:#B5B5B5;
font-style: italic;
}

.txtariane a {	
font-size: 14px;
font-weight:normal;
color:#B5B5B5;
font-style: italic;
}

.txtariane a :hover {	
font-size: 14px;
font-weight:normal;
color:black;
font-style: italic;
}

.txtariane a :visited {	
font-size: 14px;
font-weight:normal;
color:#B5B5B5;
font-style: italic;
}

/*apparence du pied de page*/
footer {
font-size: 12px;
text-align: center;
color:#D3D3D3;
padding-top: 18px;
padding-bottom: 18px;
background-color: white;
}

/*apparence du logo*/
.style_logo {
width: 150px;
margin-left: auto;
margin-right: auto;
display: block;
}

/*apparence du fil d'ariane*/
.style_ariane {
margin-top: 2px;
display: inline-block;
}

/*apparence du petit logo page projets*/
.style_petitlogo {
padding-bottom: 0px;
display:inline;
float: none;
}

/*apparence des fleches page projets*/
.fleche_d {
width: 22px;
margin-right: 24px;
margin-top: 8px;
display: inline-block;
float:right;
}

.fleche_g {
width: 22px;
margin-left: 24px;
margin-top: 8px;
display: inline-block;
float:left;
}

/*apparence du menu cliquable*/
.style_nav ul {
list-style-type: none;
padding-top: 18px;
vertical-align:bottom;
}

.style_nav ul li a {
text-decoration: none;
color: black;
text-align: center;
display: block;
text-transform:uppercase;
letter-spacing: 2px;
padding: 10px;
font-size: 14px;
}

.style_nav ul li:hover a {
color:#858585;
text-decoration:none;
}

/*gestion du responsive - passage à la ligne*/
.row:before, .row:after {
content: "";
display: table;
}

.row:after {
clear: both;
}

/*apparence des lignes*/
.row {
padding-top: 8px;
padding-bottom: 8px;
background-color: #FFFFFF;
}

/*apparence des colonnes*/
.col {
width: 100%;
float: left;
padding : 0px 0px;
}

/*apparence des blocs de contenus 2 images sur la largeur*/
.bloc2gauche {
width: 50%;
border-right: solid #FFFFFF; 
}

.bloc2droite {
width: 50%;
border-left: solid #FFFFFF; 
}

/*apparence des blocs de contenus 3 images sur la largeur*/
.bloc3gauche {
width: 33%;
margin-right: 0.5%;
}

.bloc3milieu {
width: 33%;
}

.bloc3droite {
width: 33%;
margin-left: 0.5%;
}

/*apparence des blocs de contenus vignettes projets*/
.blocvignettes {
width: 50%;
padding: 0px 8px 32px;
float :left;
}

/*apparence des blocs de contenus contact*/
.bloccontact {
width: 250px;
padding: 0px 8px 32px;
margin-left: auto;
margin-right: auto;
float:none;
}

/*surbrillance des vignettes lien*/
a.opacity {
opacity: 1;
/* IE8 et antérieurs */
filter: alpha(opacity=100);
/* Déclenche "hasLayout" dans IE 7 et antérieurs */
zoom: 1; 
}

a.opacity:hover {
opacity: 0.8;
filter: alpha(opacity=50);
zoom: 1;
}

/*apparence des blocs de contenus texte*/
.bloctexte {
width: 80%;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
display: block;
float: none;
text-align: justify;
}

/*apparence des blocs de contenus legende de plans*/
.bloclegende_plan {
column-count: 3;
padding-bottom: 30px;
column-gap: 5%;
text-align: center;
}

/*apparence des blocs de contenus listes de references*/

.blocliste-img {
width: 300px;
margin-left: auto;
margin-right: auto;
float: none;
}

.blocliste-gauche {
width: 50%;
padding-right: 8px;
margin-bottom: 8px;
float: left;
}

.blocliste-milieu {
width: 50%;
padding-left: 8px;
margin-bottom: 8px;
float: left;
}

.blocliste-droite {
width: 100%;
padding: 0px;
margin-bottom: 24px;
display: block;
}

/***********************************paramètres spécifiques à la vue tablette***********************************/

@media (min-width: 768px){
	
body {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}

/*apparence du logo*/
.style_logo {
width: 150px;
}

.style_nav ul li {
display: inline-block;
}
.style_nav ul {
text-align: center;
}

/*apparence des fleches page projets*/
.fleche_d {
margin-right: 0px;
}

.fleche_g {
margin-left: 0px;
}

.row {
padding-left: 20px;
padding-right: 20px;
}

.bloctexte {
column-count: 2;
column-gap: 16px;
width: 100%;
}

/*apparence des blocs de contenus vignettes projets*/
.blocvignettes {
width: 33.3%;
padding: 0px 8px 32px 8px;
float: left;
}

/*apparence des blocs de contenus contact*/
.bloccontact {
width: 50%;
padding: 0px 8px 32px;
margin-left: 0;
margin-right: 0;
float:left;
}

/*apparence des vignettes expériences*/
.blocliste-img {
width: 450px;
}

/***********************************paramètres spécifiques à la vue desktop***********************************/

@media (min-width: 1100px){

body {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
text-align:justify;
}

/*apparence des liens*/
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration:line-through;
}
a:hover {
color:#858585;
text-decoration:none;
}
a:active {
color:#858585;
text-decoration:none;
}

/*apparence du bandeau d'entête*/
header {
padding: 16px 0px;
}

/*apparence du logo*/
.style_logo {
width: 150px;
float: left;
}	

.style_nav {
float: right;
}	

.style_nav ul {
padding-top: 10px;
text-align: center;
}

.style_nav ul li {
display: inline-block;
}

.style_nav ul li a {
font-size: 16px;
}

/*apparence du fil d'ariane*/
.style_ariane {
float: left;
}

.txtariane a {	
color:grey;
}

.txtariane a:hover {	
color:black;
}

.row {
padding-left: 40px;
padding-right: 40px;
}

h1 {
padding-left:0px;
padding-right:0px;
text-align:left;
}

h2 {
padding-left:0px;
padding-right:0px;
padding-top: 8px;
padding-bottom: 8px;
text-align:left;
}

h3 {
padding-left:0px;
padding-right:0px;
text-align:justify;
}

h4 {	
padding-left:0px;
padding-right:0px;
text-align: left;
}

h5 {	
padding-left:0px;
padding-right:0px;
text-align: left;
}

/*apparence du pied de page*/
footer {
text-align: left;
padding-left: 40px;
}

.bloctexte {
column-count: 2;
column-gap: 16px;
width: 100%;
}

/*colonne regroupant les deux vignettes*/
.blocliste-img {
width: 50%;
margin-top: 0px;
margin-left: inherit;
margin-right: inherit;
float: left;
}
	
/*vignette pers*/
.blocliste-gauche {
width: 50%;
padding-left: 0px;
padding-right: 18px;
margin-right: 0px;
margin-bottom: 8px;
float: left;
}
/*vignette plan*/
.blocliste-milieu {
width: 50%;
padding-left: 0px;
padding-right: 18px;
margin-right: 0px;
margin-bottom: 8px;
float: left;
}	
/*texte experiences*/
.blocliste-droite {
width: 50%;
padding-left: 0px;
display: block;
float: left;
}

.blocvignettes {
width: 25%;
padding: 0px 32px 32px 0px;
}

/*apparence des blocs de contenus contact*/
.bloccontact {
width: 25%;
padding: 0px 32px 32px 0px;
margin-left: 0px;
margin-right: 0px;
float:left;
}

.bloctexte {
column-gap: 32px;
}

.bloclegende_plan {
column-count: 4;
column-gap: 16px;
text-align: justify;
}


}


/* Responsive texte : Résolution minimale 

@media (min-resolution: 100dpi) {
body {
font-size:120%;
}
}

@media (min-resolution: 200dpi) {
body {
font-size:150%;
}
}

@media (min-resolution: 300dpi) {
body {
font-size:200%;
}
}

*/