<link rel="stylesheet" media="handheld" type="text/css" title="mobile" href="mobile.css" />

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600");

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

}


h1
{
	color: #ef7800;
	font-weight: bold;
	font-size: 3em;
	font-family:"Source Sans Pro", sans-serif, ambleregular, Verdana;
	text-align: center;
	text-transform: uppercase;
	margin: 50px 0px 0px 0px;
}
p
{
	color: white;
	font-size: 1.4em;
	font-family:"Source Sans Pro", sans-serif, ambleregular, Verdana;
	text-align: center;
	margin: 50px 0px 50px 0px;

}
.soustitre
{
	color: white;
	font-size: 1.7em;
	text-transform: uppercase;
}
.liens
{
	color: white;
	text-decoration: none;
	font-size: 1.2em;
	font-family:"Source Sans Pro", sans-serif, ambleregular,Verdana;
	text-transform: uppercase;
}
.date
{
	color: #ef7800;
	text-decoration: none;
	font-size: 1.2em;
	font-family:"Source Sans Pro", sans-serif, ambleregular,Verdana;
	text-transform: uppercase;
	text-align: start;
}
.texte_colle
{
	color: white;
	text-decoration: none;
	font-size: 1.2em;
	font-family:"Source Sans Pro", sans-serif, ambleregular,Verdana;
	text-align: start;
}

.texte_colle_comp
{
	color: white;
	text-decoration: none;
	font-size: 0.6em;
	font-family:"Source Sans Pro", sans-serif, ambleregular,Verdana;
	text-align: start;
}

.contact
{
	color: white;
}
body
{
	background-image: url("images/composite_honeycomb.jpg");
	/*max-width: 100%;
    height: auto;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top-left;
	background-size: cover;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}


#conteneur
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0px;
}

#conteneur_colle
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.element
{
	width: 400px;
	padding: 10px;
	border: 2px solid #444;
	border-color: #ef7800/*1f1c1b*/;
	background-color: rgba(2, 8, 32, 0.7);
	border-radius: 0px;
	text-align: center;
}

.block_colle
{
	width: 800px;
	padding: 10px;
	border: 10px solid #444;
	
	border-left: solid #ef7800 4px;
    border-right: solid green 0px;
    border-bottom: solid green 0px;
    border-top: solid green 0px; /*rgba(2, 8, 32, 0.7)/*1f1c1b*/;
	/*border-left-color:  #ef7800;*/
	background-color: rgba(2, 8, 32, 0.7);
	border-radius: 0px;
	text-align: center; 
}

.titre
{
	padding: 10px;
	border: 2px solid #444;
	border-color: #1f1c1b;
	background-color: #403e3a;
	border-radius: 5px;
	text-align: center;
}

ol.normal {
  list-style-type: none;
  color: white;
}

#page
{
  margin-top: 10vh; 
  transform: translateY(0%); 
}


#page2
{
  margin-top: 0vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(0%); /* tiré de la moitié de sa propre hauteur */
}

svg{display:block;width:100%;margin:0 auto;}

#logo
{
position: absolute;
right:0;
top:0;
}