html{color:#000;background-color:#fff}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,main,menu,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
html, body { margin:0; padding:0; font: 100%/1.2 "OpenL", Verdana, Arial, Helvetica, sans serif; }
body#interface { overflow-x: hidden; width: 100%; height: 100%; background-color: #000; }
* { outline: 0; -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-touch-callout: none; margin:0; padding: 0; box-sizing: border-box; }
a, button { cursor: pointer; }
/* z-index */
aside#keywords, aside#cache, aside#page { z-index: 1; }
nav#lang, main#home div#spots { z-index: 2; }
iframe#page { z-index: 3; }
figure#logo-BTS,h1#greenSEGMENT,h1#redSEGMENT, nav#menu { z-index: 4; }
main#home nav#lang,figure#logo-SEGMENT,h1#SEGMENT { z-index: 5; }
iframe#contact { z-index: 6; }
/*
div#black-0, div#black-1 { z-index: 6; }
p#form-0, p#form-1 { z-index: 7; }
*/
/* COULS
bleu moyen = #27b4ff rgba(40,180,255,1)
vert pâle = #abfdf6 rgba(170,250,245,1)
*/
/* ********************************************* *
* *
* HOME SEGMENT *
* *
* ********************************************* */
/* PREZ */
main#home { display: block; width: 100%; height: 100%; background: #000 url(IMG/SEGMENT-home-vertical.png) 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover; }
/* LOGO */
main#home figure#logo-SEGMENT { position: absolute; display: block; top: 100%; left: calc(50% - 400px); width: 800px; height: 400px; display: none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
main#home figure#logo-SEGMENT img#logo { display: none; }
/* SEGMENT */
main#home h1#SEGMENT, main#home h1#greenSEGMENT, main#home h1#redSEGMENT { position: absolute; display: block; top: calc(50% - 100px); left: 0; width: 100%; height: 80px; color: #fff; text-align: center; font: 80px/1 "UpBold"; }
main#home h1#greenSEGMENT { margin-left: 1px; color: #0f0; }
main#home h1#redSEGMENT { margin-left: -1px; color: #f50; }
main#home def#q { position: absolute; display: block; top: calc(50% - 30px); left: 0; width: 100%; color: #fff; text-align: center; font: 15px/1 "Open"; }
/* KEYWORDS */
main#home aside#keywords { position: absolute; display: block; top: 50%; left: 0; width: 100%; height: 50%; opacity: 0.4;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* LANGUE */
main#home nav#lang { position: absolute; display: block; top: calc(50% + 10px); left: calc(50% - 123px); width: 245px; opacity: 0; text-align: center;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
main#home nav#lang button { display: block; width: 245px; padding: 10px 0; border: 1px solid #fff; background-color: rgba(40,180,255,0.7); color: #fff; margin-bottom: 10px; }
/* 4 SPOTS + CACHE */
main#home aside#cache { display: none; }
main#home div#spots { position: absolute; height: 50%; width: 100%; margin: 0; top: calc(50% - 1px); text-align: center; }
main#home div#spots section { display: none; position: absolute; left: 1000px; height: 50%; text-align: center; width: 180px; height: 150px; border-radius: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
main#home div#spots section header { display: none; }
main#home div#spots section#segment { background: #27b4ff url(IMG/spot-bc.jpg) 50% 50% no-repeat; }
main#home div#spots section#usecase { background: #27b4ff url(IMG/spot-usecase.jpg) 50% 50% no-repeat; }
main#home div#spots section#techno { background: #27b4ff url(IMG/spot-techno.jpg) 50% 50% no-repeat; }
main#home div#spots section#team { background: #27b4ff url(IMG/spot-team.jpg) 50% 50% no-repeat; }
main#home div#spots section h1 { color: #fff; font: 1.4em/130px "UpBold";}
/* TEXTES */
main#home div#words { display: none; }
/* ********************************************* *
* *
* MENU TOP PAGES *
* *
* ********************************************* */
nav#menu { position: fixed; left: 0; top: -60px; width: 100%; height: 60px; background: #000 url(IMG/background_MENU.jpg) 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.35); -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.35); -ms-box-shadow: 0 3px 5px rgba(0,0,0,0.35); -o-box-shadow: 0 3px 5px rgba(0,0,0,0.35); box-shadow: 0 3px 5px rgba(0,0,0,0.35);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav#menu ul { position: fixed; left: -700px; top: 60px; width: 50%; height: calc(100% - 60px); display: block; padding: 5px; background-color: rgba(60,60,60,0.9);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav#menu ul li { display: block; width: 100%; margin: 5px 0; border-bottom: 1px dotted #aaa; cursor: pointer; text-align: center; font: 1.35em/50px "UpBold"; color: #fff; }
nav#menu ul li i { position: relative; top: 10px; display: inline-block; width: 45px; height: 45px; border: 2px solid #fff; border-radius: 50%; font-size: 24px; line-height: 40px; color: #fff; text-align: center; }
nav#menu ul li b { display: block; }
nav#menu ins#hamb { display: block; position: absolute; top: 5px; right: 5px; width: 50px; height: 50px; cursor: pointer; }
nav#menu ins#hamb i { display: inline-block; width: 50px; height: 50px; font-size: 30px; line-height: 44px; color: #fff; text-align: center; }
/* ********************************************* *
* *
* PAGES SEGMENT *
* *
* ********************************************* */
iframe#page { position: absolute; display: none; top: 60px; width: 100%; height: calc(100% - 60px); padding: 10px; background-color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
body#frame { }
body#frame aside#col { display: none; }
body#frame aside#col figure#BTS { display: none; }
body#frame article#page { width: 100%; font-size: 90%; height: 100%; overflow-x: hidden; border:1px solid #fff; }
/* GESTION DES TEXTES */
article#page section { position: relative; display: block; width: 100%; border:1px solid #fff; }
article#page section.hide { display: none; }
/* ********************************************* *
* *
* PAGES TEXTES FR/EN *
* *
* ********************************************* */
/* masque tous les contenus non-phones */
article#page section.hide .del { display: none !important; visibility: hidden !important; }
/* RESUME */
article#page aside.resume { border: 1px solid #999; padding: 10px; margin-bottom: 30px; font: .9em/1.4 "Open"; }
article#page aside.resume header { font: 1.1em/1.4 "OpenX"; }
article#page cite { display: block; font: 2.5em/1.1 "Open"; color: #ccc; margin: 10px 0 40px 0; text-align: center; }
/* INTRO */
article#page section.hide blockquote { color: #555; font: .85em/1.5 "OpenB"; margin-bottom: 20px; text-align: center; }
article#page section.hide blockquote b { font-family "OpenX"; color: #333; }
article#page section.hide blockquote.exergue { color: #777; font: 1.1em/1.3 "Open"; margin: 0; padding: 0 10px; }
/* CONTENUS */
article#page section.hide img.img { width: 100%; height: auto; }
article#page section.hide def.legende { display: inline-block; width: 100%; font: .75em/1 "OpenL"; color: #777; font-style: italic; margin-bottom: 20px; }
article#page section.hide h1 { font: 2.5em/1 "Open"; text-align: center; letter-spacing: -0.03em; margin: 20px 0; }
article#page section.hide h1 sup { font-size: 60%; position: relative; }
article#page section.hide h2 { font: 1.5em/1 "OpenL"; text-align: center; margin-bottom: 20px; }
article#page section.hide h2 b { padding-bottom: 10px !important; }
article#page section.hide mark { display: inline-block; font: 1em/0 "OpenL"; background-color: #fff; margin: 10px 0 0 0; padding-top: 15px; border-top: 3px solid #000; }
article#page section.hide h3 { font: 1.5em/1 "OpenB"; letter-spacing: -0.03em; margin: 10px 0 20px 0; }
article#page section.hide h4 { font: 1.1em/1 "OpenX"; margin: 20px 0 5px 0; }
article#page section.hide p { font: .9em/1.5 "Open"; word-wrap: break-word; padding: 0 15px; }
article#page section.hide p b { display: inline !important; }
article#page section.hide p code { position: relative; background-color: #eee; padding: 3px 6px; font-size: 120%; font-weight: bold; }
article#page section.hide span code { position: relative; background-color: #fff; padding: 3px 6px; font-size: 110%; font-weight: bold; }
article#page section#texte02 p, article#page section#texte12 p { margin-bottom: 60px; } /* pages techno */
article#page section.hide figure { margin: 15px 0 10px 15px; }
article#page section.hide samp { display: block; font: .85em/1.5 "Open"; color: #777; margin-bottom: 10px; }
article#page section.hide span { display: block; background-color: #f5f5f5; margin: 0 15px; padding: 10px 15px; font: .85em/1.5 "Open";
-webkit-box-shadow : 1px 1px 3px #ccc;
-moz-box-shadow : 1px 1px 3px #ccc;
-ms-box-shadow : 1px 1px 3px #ccc;
-o-box-shadow : 1px 1px 3px #ccc;
box-shadow : 1px 1px 3px #ccc;
}
article#page section.hide p b, article#page section.hide p strong, article#page section.hide span strong { display: inline-block; padding: 0 3px; font-family: "OpenB"; }
article#page section.hide button { display: inline-block; padding: 5px 20px; background-color: #27b4ff; color: #fff; border: 1px solid #eee; border-radius: 5px; }
/* pages techno */
article#page section.hide span.end { background-color: #ddd; text-align: center; border-radius: 0 0 10px 10px; margin-bottom: 10px; }
article#page section.hide b { font-weight: bold; }
/* TABLES */
article#page section.hide div.table { text-align: center; margin: 20px 0; }
article#page section.hide table { border-collapse: collapse; margin: auto; }
article#page section.hide table th, article#page section.hide table td { border: 1px solid #000; padding: 3px; font: .65em/1 "Open"; text-align: center; }
article#page section.hide table th { background-color: #000; color: #fff; }
article#page section.hide table th.seg { background-color: #27b4ff; }
article#page section.hide table td { font-size: .8em; }
article#page section.hide table td.desc { background-color: #eee; }
article#page section.hide table td.seg { font-weight: bold; }
/* LIEN INTERNES */
article#page section.hide nav, article#page section.hide a { display: inline; cursor: pointer; color: #27b4ff; border-bottom: 1px dotted #27b4ff; text-decoration: none; }
/* SIGNATURE */
article#page section#sign { font:.7em/1 "OpenB"; border-top: 1px solid #aaa; padding-top: 5px; margin: 20px 0; }
/* ********************************************* *
* *
* PAGE BLOCKCHAIN *
* *
* ********************************************* */
article#page section#texte00 span, article#page section#texte10 span { display: block; margin-top: 10px; margin-bottom: 20px; font-size: .9em; }
/* ********************************************* *
* *
* PAGE USECASES *
* *
* ********************************************* */
article#page section.hide div.exemple { width: 100%; margin-bottom: 20px; }
article#page section.hide div.exemple img { width: calc(100% - 20px); }
article#page section.hide div.exemple span { margin-left: 14px; padding: 10px; font: .85em/1.5 "Open"; }
article#page section.hide div.exemple span h5 { font: 1.2em/1.8 "OpenX"; margin-bottom: 15px; }
article#page section.hide div.exemple span h5 b { border-bottom: 1px solid #000; padding-bottom: 5px; }
article#page section.hide div.exemple span em { display: block; background-color: #555; color: #fff; padding: 10px; text-align: center; line-height: 1.2; font-size: 90%; margin-top: 5px; }
/* ********************************************* *
* *
* PAGE TECHNOS *
* *
* ********************************************* */
article#page section.hide p.doc { overflow: hidden; height: 1px; }
article#page section#texte02 span, article#page section#texte12 span { display: block; margin-top: 10px; margin-bottom: 20px; font-size: .9em; }
article#page section#texte02, article#page section#texte12 { margin-bottom: 60px; }
article#page section.hide p.doc img.float { float: left; width: 100px; height: 100px; margin: 0 15px 3px 0;
-webkit-box-shadow : 3px 5px 5px #999;
-moz-box-shadow : 3px 5px 5px #999;
-ms-box-shadow : 3px 5px 5px #999;
-o-box-shadow : 3px 5px 5px #999;
box-shadow : 3px 5px 5px #999;
}
article#page section.hide figure.twitt { width: 100%; text-align: center; margin-bottom: 30px; }
article#page section.hide figure.twitt img { width: 90%; margin-right:10%; height: auto; border: 1px dotted #ccc; }
/* ********************************************* *
* *
* PAGE EQUIPE *
* *
* ********************************************* */
article#page section.hide p.team { }
article#page section.hide span.team { display: block; margin: 10px; padding: 10px; text-align: center; background-color: #fff; border: 1px solid #eee; }
article#page section.hide span.team img { display: block; width: 80%; height: auto; margin: 10%; margin-top: 5%; border-radius: 50%; }
article#page section.hide span.no { display: none; }
/* CORE */
article#page section.hide span#core { display: block; padding: 10px; text-align: center; background-color: #f5f5f5; border: 1px solid #eee; }
article#page section.hide span.team img { display: block; width: 200px; height: 200px; margin-left: calc(50% - 100px); margin-top: 5%; border-radius: 50%; }
article#page section.hide span.team b { font-size: 130%; }
article#page section.hide span#core span.incore { display: block; height: 100px; margin: 0; padding-top: 5px; text-align: center; font-size: 110%; clear: both; border-bottom: 1px dotted #555;
-webkit-box-shadow : 0 0 0 #fff;
-moz-box-shadow : 0 0 0 #fff;
-ms-box-shadow : 0 0 0 #fff;
-o-box-shadow : 0 0 0 #fff;
box-shadow : 0 0 0 #fff;
}
article#page section.hide span#core span.incore img { display: block; width: 70px; height: 70px; border-radius: 50%; float: left; margin: 10px; }
/* ********************************************* *
* *
* PAGE CONTACT *
* *
* ********************************************* */
/* PAGE SPECIALE CONTACT */
iframe#contact { position: absolute; overflow: hidden; top: 0; width: 100%; height: 200%; background-color: "#fff"; border: 0 none }
body#contact { padding: 10px; font-size: 90%; }
body#contact nav#menu { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 60px; }
body#contact nav#menu figure#logo-SEGMENT { position: absolute; display: block; top: 5px; left: 5px; width: 50px; height: 50px; }
body#contact nav#menu h1#SEGMENT, body#contact nav#menu h1#greenSEGMENT, body#contact nav#menu h1#redSEGMENT { position: absolute; display: block; top: 10px; left: 65px; width: 155px; height: 50px; color: #fff; text-align: center; font: 40px/1 "UpBold"; }
body#contact nav#menu h1#greenSEGMENT { margin-left: 1px; color: #0f0; }
body#contact nav#menu h1#redSEGMENT { margin-left: -1px; color: #f50; }
body#contact nav#menu ins#hamb { display: block; position: absolute; top: 5px; right: 5px; width: 50px; height: 50px; cursor: pointer; }
body#contact nav#menu ins#hamb i { display: inline-block; width: 50px; height: 50px; font-size: 30px; line-height: 44px; color: #fff; text-align: center; }
body#contact section, body#contact section * { margin: 0; }
body#contact section blockquote { text-align: left !important; }
body#contact section p.form { margin-top: 15px; }
body#contact section p.form strong { display: block; margin: 30px; font: 1.2em/1.5 "OpenB"; text-align: center !important; }
body#contact section label { display: block; }
body#contact section input { display: block; width: 100%; margin: 5px 0; border: 0; background-color: #eee; padding: 10px; border-radius: 3px; }
body#contact section textarea { display: block; width: 100%; margin: -15px 0 5px 0; height: 100px; border: 0; background-color: #eee; padding: 10px; border-radius: 3px; }
body#contact section button { display: inline-block; padding: 5px 20px; background-color: #27b4ff; color: #fff; border: 1px solid #eee; border-radius: 5px; }