body {
    background-color: white;
    color: black;
    word-wrap: break-word; /*coupe automatiquement les mots trop longs */
}

.centrer {
	text-align:center;
}

p {
    font-family: verdana;
    /*color: blue;*/
    color: navy;
    font-size: medium;
	test-align:justify;
}

.clearfloat {
    clear: both;
}

#ph1 {
    width: 35%;
    float: left;
}
/* spécifique pour la première photo */



/* mise en forme des principaux composants de la fenêtre */
header {
    width: 100%; /* c'est la valeur par défaut*/
    /*height: 150px;*/
    /*margin-bottom:10px;*/
    border: 1px solid black;
    overflow: auto;
    background-color: navy;
    color: white;
    background-image: url("sources/HeadAlphaquant.jpg");
    background-repeat: no-repeat; /*pas de mosaïque */
    background-position: top right; /* Le fond sera placé en haut à droite */
}
#home {
	float:left;
	color:DeepSkyBlue;
	font-size:2.0em;
	/*display: inline-block;*/
	margin-left: 50px;
	margin-top:20px;
}
#alpha {
	text-align:center;
	color:DeepSkyBlue;
	font-size:4.5em;
	height:140px;
}
header p {
    font-family: verdana;
    /*color: blue;*/
    color: DeepSkyBlue;
    font-size: medium;
	margin-right:20%;
}

nav {
    /*height: 30px;*/
	/*background-color: navy;*/
	text-align:left;
    display: inline-block;
    /*border: 1px solid black;*/
    overflow: auto;
    margin: 10px;
	}
nav a:hover {
	background-color:lime;
}
nav div {
	/*float: right;*/
	text-align: right;
	border: 1px solid blue;
	display: inline-block;
	background-color: #9FE;
	padding: 0 5px;
	margin: 0 2px;
}

#PageInfo {
	/*float: right;*/
	font-size:large;
	font-weight:bold;
	text-align: left;
	border:none;
	width:400px;
	/*display: inline-block;*/
	background-color: navy;
	padding: 0 5px;
	margin: 0 2px;
}

header section a {
	float:right;
	color:white;
	margin-right:20%;
}
header section a:hover {
	background-color:DeepSkyBlue;
}

header section div {
	margin-top:15px;
}

section {
    /*display: inline-block;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(200px,auto);
    border: 1px solid blue;
    vertical-align: top;
	text-align: justify;
}

#im1_home { /*image de la valorisation d'options*/
	margin-left:10%;
	margin-right:auto;}
.telechargement { /*choix de la page réalisations*/
	width:75%;
	text-align: center;
}
.PageLiens {
	margin:5%;
	text-align: justify;
	font-size:large;
}
.ulTitre {
	color:DodgerBlue;
	font-size:large;
}

.ulTitre li {
	margin-left:10%;
	font-size: medium;
}

.Savoirp1 {
	font-size:large;
	font-weight:bold;
	text-align: left;
}

article {
    /*display: inline-block;*/
    /*width: 45%;
    vertical-align: top;*/
    border: 1px solid black;
    padding: 0 5px;
}

aside {
    /*display: inline-block;*/
    background-color: rgb(207,223,181);
    float: right;
    width: 50%;
    vertical-align: top;
    border: 1px solid black;
    text-align: justify;
    margin: 0 10px;
    padding: 0 5px;
}

fieldset { /*regroupement de champs dans des cadres*/
    display: inline-block;
}

/*pour un tableau */
thead {
    background-color: black;
    color: white;
}

tbody {
    background-color: #ccc;
}

tfoot {
    font-size: 10pt;
    font-style: italic;
}

footer {
    height: 50px;
    border: 1px solid black;
	background-color: navy;
    color: white;
	}
footer div {
	padding: 0 5px;
	margin: 10px 2px;
	display: inline-block;
	/*float:center;*/
}
footer div a {
	border: 1px solid blue;
	/*float:right;*/
	display: inline-block;
	background-color: #9FE;
	padding: 0 5px;
	margin: 0 2px;
}

footer div a:hover {
	background-color:lime;
}

#click, #position {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
}

progress {
    text-align: center;
}

    progress:after {
        content: attr(value);
    }

    progress::-moz-progress-bar {
        background: #0063a6; /*change la couleur de la barre*/
    }

/* style pour les Grid: permet de positionner à volonté*/
.wrapper {
    max-width: 940px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(200px, auto);
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}

    .wrapper > div {
        border: 2px solid rgb(233,171,88);
        border-radius: 5px;
        background-color: rgba(233,171,88,.5);
        padding: 1em;
        color: #d9480f;
    }
/*photos pour les marchés ciblés*/
.d1 {
	background-image:url("sources/dollar_1.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
.d2 {
	background-image:url("sources/gold_coins.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
.d3 {
	background-image:url("sources/oil.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
.d4 {
	background-image:url("sources/copper.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
.d5 {
	background-image:url("sources/connectivity_0.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
.d6 {
	background-image:url("sources/platine.jpg");
	background-repeat: no-repeat; /*pas de mosaïque */
	background-size:cover;
}
	
.one {
    grid-column: 1 / 3;
    grid-row: 1;
}

.two {
    grid-column: 2 / 4;
	
    grid-row: 1 / 3;
}

.three {
    grid-column: 1;
    grid-row: 2 / 5;
}

.four {
    grid-column: 3;
    grid-row: 3;
}

.five {
    grid-column: 2;
    grid-row: 4;
}

.six {
    grid-column: 3;
    grid-row: 4;
}

#slideShowImages { /* The following CSS rules are optional. */
      border: 1px gray solid;
      background-color: lightgray;
    }   
  
    #slideShowImages img { /* The following CSS rules are optional. */
      border: 0.8em black solid;
      padding: 3px;
	  width:100%;
    }