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: hidden; 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; }
/* -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; */
.out { position: absolute; top: -5000px; font-size: 1px; color: transparent; width: 1px; height: 1px; border:0 none; background-color: transparent; overflow: hidden; }
a, button { cursor: pointer; }
/* z-index */
aside#keywords, aside#cache, aside#page { z-index: 1; }
nav#lang, nav#menu,.front { z-index: 2; }
figure#logo-BTS,figure#logo-SEGMENT,h1#greenSEGMENT,h1#redSEGMENT { z-index: 3; }
h1#SEGMENT { z-index: 4; }
/* 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-horizontal.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; cursor: pointer;
-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: calc(50% - 200px); width: 400px; height: 100px; color: #fff; text-align: center; font: 100px/1 "UpBold"; }
main#home h1#greenSEGMENT { left: calc(50% - 201px); color: #0f0; }
main#home h1#redSEGMENT { left: calc(50% - 199px); color: #f50; }
main#home def#q { position: absolute; display: block; top: calc(50% - 10px); left: calc(50% - 200px); width: 400px; height: 100px; color: #fff; text-align: center; font: 20px/1 "Open"; }
/* KEYWORDS */
main#home aside#keywords { position: absolute; display: block; top: 50%; left: 0; width: 100%; height: 50%; opacity: 0.7;
-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% - 1px); left: calc(50% - 250px); width: 500px; height: 25px; opacity: 0;
-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: inline-block; width: 245px; padding: 10px 0; border: 1px solid #fff; background-color: rgba(0,0,0,0.15); color: #fff; }
main#home nav#lang button:hover { background-color: #27b4ff; }
/* 4 SPOTS + CACHE */
main#home aside#cache { position: absolute; display: block; top: 50%; left: 0; width: 100%; height: 50%; }
main#home div#spots { position: absolute; height: 20%; width: 70%; margin: 0 15%; top: calc(50% + 50px); text-align: center; }
main#home div#spots section { display: none; position: absolute; left: 3000px; height: 100%; 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 div#spots section header { height: 100%; width: 80%; margin:0 10%; text-align: center; cursor: pointer; }
.cart0 { background: #27b4ff url(IMG/spot-bc.jpg) 50% 50% no-repeat; }
.cart1 { background: #27b4ff url(IMG/spot-usecase.jpg) 50% 50% no-repeat; }
.cart2 { background: #27b4ff url(IMG/spot-techno.jpg) 50% 50% no-repeat; }
.cart3 { background: #27b4ff url(IMG/spot-team.jpg) 50% 50% no-repeat; }
.carte, .front, .back { width: 100%; height: 100%; border-radius: 20px; }
.carte {
-webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
-ms-transform: perspective(1000px); -moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
}
.carte:hover .back, .carte.hover .back {
-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg);
}
.carte:hover .front, .carte.hover .front {
-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);
}
.encarte {
-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s;
-moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
transition: 0.6s; transform-style: preserve-3d; position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg);
-moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg);
-o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg);
-ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg);
transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg);
position: absolute; top: 0; left: 0;
border-right: 1px solid #555; border-bottom: 1px solid #555;
}
.front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-background-size: cover; background-size: cover; background-color: #27b4ff; padding: 5px; color: #fff; }
.front h1 { color: #fff; font: 1.7em/1 "UpBold"; line-height: calc(50% + 30px); } /* titre plots */
.back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); padding: 0 10px; background-color: #27b4ff; color: #fff; font: .85em/1.2 "OpenB";
-webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
-moz-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
-ms-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
-o-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.front i, .back i { display: inline-block; top: -30px; width: 50px; height: 50px; border: 3px solid #fff; border-radius: 50%; font-size: 30px; line-height: 44px; color: #fff; text-align: center; }
.front i.rtl, .back i.rtl { writing-mode: rl-tb; }
/* FILETS */
.filet { display: inline-block; background-color: #000; height: 1px; width: 1px; }
#fils { position: absolute; height: 1px; width: 70%; margin: 0 15%; top: calc(75% + 25px); }
#hor { position: absolute; top: 0; height: 1px; width: 100%; background-color: #eee; display: none; }
#ver { position: absolute; left: 50%; top: 1px; height: 30px; background-color: #eee; display: none; }
#rond, #puce { position: absolute; left: calc(50% - 5px); top: 30px; width: 10px; height: 10px; border-radius: 50%; background-color: #eee; display: none; }
#puce { top: -5px; }
/* TEXTES */
main#home div#words { position: absolute; width: 70%; height:80px; margin: 0 15%; top: calc(75% + 70px); text-align: center; color: #fff; font: 40px/0.7 "OpenL";
-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 div#words span { display: block; position: absolute; width: 100%; top:0; opacity:0;
-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 div#words sup { font-size: 60%; }
main#home div#words def { font: 15px/1.2 "OpenB"; letter-spacing: 1px; color: #888; }
/* ********************************************* *
* *
* 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: 280px; height: 60px; width: calc(100% - 330px); display: none; }
nav#menu ul li { display: inline-block; width: 19.5%; height: 60px; text-align: center; font: 15px/60px "OpenL"; margin: 0; border-bottom: 2px solid transparent; color: #fff; cursor: pointer; }
nav#menu ul li:hover { border-bottom: 2px solid #abfdf6; }
nav#menu ul li.actif { color: #000; background-color: #fff; border-bottom: 2px solid #abfdf6; }
nav#menu ins#hamb, nav#menu ul li i { display: none; }
/* ********************************************* *
* *
* PAGES SEGMENT *
* *
* ********************************************* */
iframe#page { position: absolute; display: block; top: 100%; left: 0; width: 100%; height: calc(100% - 60px); border:1px solid transparent; 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 aside#col { position: absolute; top: 0; left: 0; height: 100%; width: 280px; }
body#frame aside#col figure#BTS { position: fixed; background-color: #fff; width: 270px; left: 10px; padding: 5px; z-index: 10; }
body#frame article#page { height: 100%; width: calc(100% - 500px); margin-left: 280px; }
/* GESTION DES TEXTES */
article#page section { position: relative; display: block; width: 100%; }
article#page section.hide { display: none; }
/* ********************************************* *
* *
* PAGES TEXTES FR/EN *
* *
* ********************************************* */
/* RESUME */
article#page aside.resume { border: 1px dotted #999; padding: 20px; margin-bottom: 30px; font: .9em/1.4 "OpenL"; }
article#page aside.resume header { font: 1.1em/1.4 "OpenX"; }
article#page cite { display: block; font: 2.5em/1.1 "OpenL"; color: #bbb; margin: 10px 0 40px 0; text-align: center; }
/* INTRO */
article#page section.hide blockquote { color: #777; font: .85em/1.5 "OpenB"; border-left: 1px dotted #ccc; margin-bottom: 50px; padding-left: 15px; }
article#page section.hide blockquote b { font-family "OpenX"; color: #333; }
article#page section.hide blockquote.exergue { color: #777; font: 1.2em/1.3 "Open"; border:0; margin: 30px 0; padding-left: 15px; text-align: center; }
/* OBJETS */
article#page section.hide img.img { width: 100%; height: auto; }
article#page section.hide img.shade { margin-bottom: 30px;
-webkit-box-shadow: rgb(38, 57, 77, 0.6) 0px 20px 30px -10px;
-moz-box-shadow: rgb(38, 57, 77, 0.6) 0px 20px 30px -10px;
-ms-box-shadow: rgb(38, 57, 77, 0.6) 0px 20px 30px -10px;
-o-box-shadow: rgb(38, 57, 77, 0.6) 0px 20px 30px -10px;
box-shadow: rgb(38, 57, 77, 0.6) 0px 20px 30px -10px;
}
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: 3em/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: 60px; }
article#page section.hide h2 b { padding-bottom: 10px !important; border-bottom: 1px dotted #000; }
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.3em/1 "OpenB"; letter-spacing: -0.03em; margin: 15px 0 10px 0; }
article#page section.hide h4 { font: .9em/1 "OpenX"; margin: 20px 0 5px 15px; }
article#page section.hide p { font: .85em/1.5 "Open"; margin-left: 15px; word-wrap: break-word; }
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 div.details { }
/* SPANS */
article#page section.hide span { background-color: #f5f5f5; margin-left: 15px; padding: 10px; font: .8em/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 strong, article#page section.hide span strong { display: inline-block; padding: 0 3px; font-family: "OpenB"; }
article#page section.hide span.end { background-color: #ddd; text-align: center; border-radius: 0 0 10px 10px; margin-bottom: 30px; }
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: 5px 10px; 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 { position: relative; overflow: hidden; width: calc(50% - 15px); height: 800px; margin-right: 15px; margin-bottom: 20px; float:left; }
article#page section.hide div.exemple figure { width: calc(100% - 20px); text-align: center; }
article#page section.hide div.exemple img { width: calc(100% - 20px); margin-right: 20px; height: auto; max-width: 350px; }
article#page section.hide div.exemple h4 { cursor: pointer; position: absolute; bottom: 10px; }
article#page section.hide div.exemple span { position: absolute; bottom: -1000px; margin-left: 14px; padding: 20px; padding-top: 10px; font: .8em/1.5 "Open";
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
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; }
article#page section#texte01 img.app, article#page section#texte11 img.app { width: 70%; margin: 0 15% 20px 15%; }
/* ********************************************* *
* *
* PAGE TECHNOS *
* *
* ********************************************* */
article#page section.hide p.doc { overflow: hidden; height: 1px; padding-bottom: 0; }
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: 150px; height: 150px; margin: 0 20px 3px 0;
-webkit-box-shadow : 5px 5px 5px #ccc;
-moz-box-shadow : 5px 5px 5px #ccc;
-ms-box-shadow : 5px 5px 5px #ccc;
-o-box-shadow : 5px 5px 5px #ccc;
box-shadow : 5px 5px 5px #ccc;
}
article#page section.hide p.doc img.archi { width: 70%; margin: 0 15%; }
article#page section.hide p.doc def.archi { display: block; padding: 0 15%; margin-top: 10px; }
article#page section.hide figure.twitt { text-align: center; margin-bottom: 30px; }
article#page section.hide figure.twitt img { width: 400px; height: auto; border: 10px solid #fff;
-webkit-box-shadow : 0 0 10px #ccc;
-moz-box-shadow : 0 0 10px #ccc;
-ms-box-shadow : 0 0 10px #ccc;
-o-box-shadow : 0 0 10px #ccc;
box-shadow : 0 0 10px #ccc;
}
/* ********************************************* *
* *
* PAGE EQUIPE *
* *
* ********************************************* */
article#page section.hide p.team { display: flex; margin-bottom: 100px; } /* si mark en dessous */
article#page section.hide span.team { flex: 1; display: block; height: 280px; margin: 0 10px; padding: 10px; text-align: center; background-color: #fff; border: 1px solid #eee;
-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.no { border: 1px solid #fff; }
article#page section.hide span.team img { display: block; width: 80%; height: auto; margin: 5% 10% 15px 10%; border-radius: 50%; }
article#page section.hide span.team b { font-size: 130%; }
/* CORE */
article#page section.hide span#core { flex: 3; display: block; height: 280px; margin: 0 10px; padding: 10px; text-align: center; background-color: #f5f5f5; border: 1px solid #eee; }
article#page section.hide span#core span.incore { display: block; width: calc(100% / 5); float: left; margin: 0; padding: 0; text-align: center; font-size: 110%;
-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: 100%; height: 100%; margin: 20px 10px 10px 10px; border-radius: 50%; }
/* ********************************************* *
* *
* PAGE CONTACT *
* *
* ********************************************* */
article#page section.hide label { display: inline-block; width: 150px; margin-bottom: 10px; }
article#page section.hide input { display: inline-block; width: 350px; border: 0; background-color: #eee; padding: 10px; border-radius: 3px; margin-bottom: 10px; }
article#page section.hide textarea { display: inline-block; width: 100%; height: 200px; border: 0; background-color: #eee; padding: 10px; border-radius: 3px; margin-bottom: 10px; }
article#page section.hide button { display: inline-block; padding: 5px 12px; background-color: #27b4ff; color: #fff; border: 1px solid #eee; border-radius: 5px; }
/* TYPOS -> fonts.css */
/* ************************************************************ LAPTOP ************************************************************ */
@media (max-width: 1290px) {
/* HOME*/
.front h1 { color: #fff; font: 1.6em/1 "UpBold"; line-height: calc(50% + 20px); }
.filet { display: inline-block; background-color: #000; height: 10px; width: 1px; }
.carte, .front, .back { border-radius: 10px; }
.back { font: .75em/1.1 "OpenB"; }
body#frame article#page { height: 100%; width: calc(100% - 200px); margin-left: 100px; }
body#frame aside#col, body#frame aside#col figure#BTS { width: 100px; left: 0; padding: 5px 0; }
body#frame aside#col figure#BTS img { width: 90px; margin-left: 5px; }
/* TEAM */
article#page section.hide span.team,article#page section.hide span#core { height: 300px; }
article#page section.hide span#core span.incore { font-size: 90% }
article#page section.hide span#core span.incore b { font-size: 140% }
}