@charset "utf-8";
/* CSS Document */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}
/* Correct `inline-block` display not defined in IE 8/9. */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

html {
	font-family:Helvetica, Arial, "sans-serif";
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-family: 'Ubuntu', sans-serif;
   font-size:18px; 
	padding:0px;
	margin:0px;
	background-color: #B1B3B7;
}
a {
	text-decoration: none;
	color:#000;
	transition: 0.2s;
}
.site {
	max-width:1580px;
	margin:auto;
	position: relative;
}
.front .site {
	max-width:1840px;
}
.main {
	padding-top: 70px;
}
h1 {
	margin:36px 0px 25px 0px;
	font-size:2.5em;
}
h2 {
	margin:0px;
	padding:0px;
	line-height: 1.05em;
}
h3 {
	font-size:1.5em;
	margin-bottom:0px;
}
h4 {
	font-size:1em;
	margin:5px 0px 0px 0px;
}
.headFixe .header {
	height: 60px;
	position:fixed;
}
.headFixe .icMenu,
.headFixe .siteName {
	font-size:2em;
}
.headFixe .siteSlogan {
	font-size:0.8em;
}
.headFixe .head1:before {
	top:60px;
	width:60px;
}
.headFixe .head2 {
	width:190px;
}
.headFixe .head2:before {
	top:-70px;
	width:190px;
	height: 150px;
}
.headFixe .logo {
padding-top: 20px;
	width:100px;
}
.headFixe .zoneMenu {
    top: 40px;
}
.header {
	background: #FFF;
	height: 122px;
	color:#000;
	display: flex;
	justify-content: space-between;
	width:100%;
	position: relative;
	z-index: 9;
}
.footer a,
.header a {
	color:#000;
}
.headSide {
	width:40%;
}
.head {
	display: flex;
	align-items: center;
	position: relative;
}
.head1 {
	padding-left: 100px;
}
.head3 {
	justify-content: flex-end;
	padding-right: 100px;
	position: relative;
	z-index: 3;
}
.head2 {
	width:300px;
	flex-shrink: 0;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.head2:before {
	display: block;
	content:"";
	width:300px;
	height: 280px;
	background-color: #B1B3B7;
	border-radius: 100%;
	position: absolute;
	left:50%;
	margin-left:-50%;
	top:-90px;
	z-index: 10;
}
.head1:before {
	display: block;
	content:"";
	width:86px;
	height: 42px;
	background: url('../images/fleche_bas.png') no-repeat center top;
	background-size: contain;
	position: absolute;
	left:100px;
	top:122px;
}
.logo {
	position: absolute;
	z-index: 12;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 50px;
	width:100%;
}
.logo img {
	max-width: 100%;
	max-height: 100%;
	width:auto;
	height: auto;
}
.icMenu,
.siteName {
	font-size:3em;
	font-weight: 700;
	text-transform: uppercase;
}
.icMenu {
	background: url('../images/menu.png') no-repeat left center;
	padding-left:60px;
}
.icMenu:hover {
	background-image: url('../images/menu2.png');
}
.siteSlogan {
	font-size: 1.1em;
	font-weight: 700;
	padding:0px 25px 0px 15px;
	max-width:320px;
}
.zoneMenu {
	position: absolute;
	background-color: #FFF;
	padding:25px;
	width: 200px;
	top:60px;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
	text-align: left;
}
.zoneMenu a {
	font-weight: 700;
	display: block;
	padding:7px 0px;
	border-bottom: 1px solid #ebebeb;
}
.zoneMenu a:last-child {
	border-bottom: 0px ;
}
.zoneMenu a.actif,
.zoneMenu a:hover {
	color: #5EC5ED;
}
.zoneTemplate {
	padding-bottom: 100px;
}
.footer {
	background: #FFF;
	text-align: center;
	padding:35px 20px;
	position: relative;
	font-size: 0.778em;
}
.phraseBas {
	font-weight: 700;
	font-size: 1.25em;
}
.villes {
	max-width: 630px;
	margin:15px auto 0px auto;
	text-align: justify;
}
.phraseVille {
	margin-bottom: 15px;
}
.toTop {
	display: block;
	background: url('../images/fleche_haut2.png') no-repeat center bottom;
	height: 93px;
	width:122px;
	position: absolute;
	top: -93px;
	left:50%;
	margin-left: -61px;
	transition: 0.3s;
	transform: scale(0.9);
	transform-origin: center bottom;
}
.toTop:hover {
	cursor: pointer;
	transform: scale(1);
}
/* home */
.phrase1 {
	color:#FFF;
	font-size: 1.6em;
	text-align: center;
	padding:0px 25px;
}
.front .texte {
	font-size: 1.2em;
	text-align: center;
	max-width: 1200px;
	margin:auto;
	padding:0px 25px;
}
.boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	margin:30px auto;
	max-width: 1900px;
}
.box {
	width:48%;
	background:#333 url('../images/photo_cartographie.jpg') no-repeat center;
	background-size: cover;
	margin:1%;
	min-height: 410px;
}
.p-carto .photoPage,
.boxCarto {
	background-image:url('../images/photo_cartographie.jpg');
}
.p-geo .photoPage,
.boxGeo {
	background-image:url('../images/photo_geo.jpg');
}
.p-plui .photoPage,
.boxPlui {
	background-image:url('../images/photo_plui.jpg');
}
.p-urba .photoPage,
.boxUrba {
	background-image:url('../images/photo_urbanisme.jpg');
}
.p-public .photoPage,
.boxPublic {
	background-image:url('../images/photo_public.jpg');
}
.p-public .photoPage,
.boxStreet {
	background-image:url('../images/photo_loginpage_bg.jpg');
}

.p-public .photoPage,
.boxAP {
	background-image:url('../images/photo_application.jpg');
}
.p-extra .photoPage,
.boxExtra {
	background-image:url('../images/photo_extranet.jpg');
}
.p-vita .photoPage,
.boxVita {
	background-image:url('../images/photo_vitawin.jpg');
}
.p-gru .photoPage,
.boxGru {
	background-image:url('../images/photo_gru.jpg');
}
.p-cloud .photoPage,
.boxCloud {
	background-image:url('../images/photo_cloud.jpg');
}
.p-cowork .photoPage,
.boxCowork {
	background-image:url('../images/photo_cowork.jpg');
}
.p-cowork .photoPage,
.boxBan {
	background-image:url('../images/photo_ban.png');
}
.boxInt {
	padding: 0 35px;
	max-width: 270px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	position: relative;
}
.boxInt:before {
	display: block;
	content:"";
	height: 100%;
	width:100%;
	background-color: rgba(222,135,56,0.7);
	position: absolute;
	top:0px;
	left:0px;
	z-index: 2;
}
.p-carto h1,
.p-carto .boxC1,
.boxCarto .boxInt:before {
	background-color: rgba(222,135,56,0.7);
}
.p-geo h1,
.p-geo .boxC1,
.boxGeo .boxInt:before {
	background-color: rgba(150,150,220,0.7);
}
.p-plui h1,
.p-plui .boxC1,
.boxPlui .boxInt:before {
	background-color: rgba(170,170,3,0.7);
}
.p-urba h1,
.p-urba .boxC1,
.boxUrba .boxInt:before {
	background-color: rgba(114,163,20,0.7);
}
.p-public h1,
.p-public .boxC1,
.boxPublic .boxInt:before{
	background-color: rgba(54,130,222,0.7);
}
.boxStreet .boxInt:before{
background-color:rgba(18,83,148,0.7);
}
.p-extra h1,
.p-extra .boxC1,
.boxExtra .boxInt:before {
	background-color: rgba(82,173,164,0.7);
}
.p-vita h1,
.p-vita .boxC1,
.boxVita .boxInt:before {
	background-color: rgba(209,54,66,0.7);
}
.p-gru h1,
.p-gru .boxC1,
.boxGru .boxInt:before {
	background-color: rgba(179,79,189,0.7);
}
.p-cloud h1,
.p-cloud .boxC1,
.boxCloud .boxInt::before {
    background-color: rgba(102,204,255,0.7);
}
.p-cowork h1,
.p-cowork .boxC1,
.boxCowork .boxInt::before {
    background-color: rgba(150,150,160,0.7);
}
.page h1,
.box h2 {
	font-size:3.6em;
	color:#FFF;
	padding-top: 25px;
	margin:0px;
	text-shadow: 0px 0px 8px rgba(122,45,26,0.5);
	line-height: 0.9em;
}
.box h2 a {
	color:#FFF;
}
.p-carto h1,
.boxCarto h2 {
	text-shadow: 0px 0px 8px rgba(122,45,26,0.5);
}
.p-geo h1,
.boxGeo h2 {
	text-shadow: 0px 0px 8px rgba(60,30,60,0.5);
}
.p-plui h1,
.boxPlui h2 {
	text-shadow: 0px 0px 8px rgba(70,80,0,0.5);
}
.p-urba h1,
.boxUrba h2 {
	text-shadow: 0px 0px 8px rgba(40,90,0,0.5);
}
.p-public h1,
.boxPublic h2, .boxStreet h2  {
	text-shadow: 0px 0px 8px rgba(0,50,90,0.5);
}
.p-extra h1,
.boxExtra h2 {
	text-shadow: 0px 0px 8px rgba(0,80,100,0.5);
}
.p-vita h1,
.boxVita h2 {
	text-shadow: 0px 0px 8px rgba(70,0,20,0.5);
}
.p-gru h1,
.boxGru h2 {
	text-shadow: 0px 0px 8px rgba(90,0,40,0.5);
}
.p-cloud h1,
.boxCloud h2 {
    text-shadow: 0px 0px 8px rgba(40,70,100,0.5);
}
.p-cowork h1,
.boxCowork h2 {
    text-shadow: 0px 0px 8px rgba(40,40,50,0.5);
}
.boxTexte {
	font-size: 1.33em;
	color:#FFF;
}
.boxTexte a {
	display: block;
	text-decoration: underline;
	font-size: 0.85em;
	font-weight: 700;
	padding-top: 5px;
}
.boxTexte a:hover {
	color:#FFF;
}
.boxLiens {
	padding-bottom: 25px;
	position: relative;
	z-index: 3;
}
.iconLien {
	display: block;
	background: url('../images/icon_site.png') no-repeat left center;
	color:#FFF;
	font-weight: 700;
	font-size: 1.33em;
	padding:11px 0px 11px 55px;
}
.iconLien:hover {
	transform: scale(1.1);
}
.iconLog {
	background-image: url('../images/icon_log.png');
}
.iconAdmin {
	background-image: url('../images/icon_admin.png');
}
.iconContact {
	background-image: url('../images/icon_contact.png');
}
.titreTexte {
	position: relative;
	z-index: 3;
}
/* pages */
.retour {
	color:#FFF;
	background: url('../images/fleche_retour.png') no-repeat left center;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.3em;
	padding:15px 45px;
	display: block;
}
.retour:hover {
	color:#000;
}
.colG {
	padding:30px 75px;
}
.boxPage {
	background-color: #FFF;
}
.align-left {
	float: left;
	margin:15px 35px 15px 0px;
}
.clear:after,
.corps:after {
	display: block;
	content:"";
	height: 0px;
	clear: both;
}
.avecCol {
	display: flex;
	justify-content: space-between;
}
.colD {
	width:25%;
	flex-shrink: 0;
}
.photoPage {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 450px;
}
.page h1 {
	padding:45px 75px;
	display: inline-block;
}
.intro,
.corps {
	line-height: 1.5em;
}
.intro {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 30px;
}
.phrase {
	color: #B1B3B7;
	font-size: 1.2em;
}
.corps ul {
	margin:30px 40px;
}
.corps li {
	list-style-type: none;
	position: relative;
	margin:10px 0px;
	display: flex;
}
.corps li:before {
	display: block;
	content:"";
	background-color: #5EC5ED;
	height: 10px;
	width:10px;
	border-radius: 20px;
	position: absolute;
	left:-18px;
	top:8px;
}
.boxColor {
	background-color: #5EC5ED;
	padding:25px 35px;
	margin-bottom: 10px;
}
.boxContact {
	margin-top: 15px;
}
.boxContact a {
	text-decoration: underline;
}
.boxContact a:hover {
	color:#FFF;
}
/* fin pages */

/* fin style */