@font-face {
    font-family: "roboto-condensed";
    src: url("../fonts/Roboto-Condensed.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "roboto-thin";
    src: url("../fonts/Roboto-Thin.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "roboto-light";
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html {height:100%;}
body {margin:0;padding:0;background:#fff; font-family: roboto-light;color:#444;min-height: 100%; scroll-behavior: smooth;font-size:125% !important}
::-moz-selection {background:#00aeef;color:#fff;margin-bottom: 50px}

.bouton {text-align:center;position: relative;margin: 30px auto;padding:11px 30px;background: #94d600;border: none;color: white;
        transition: .2s;display:block;cursor:pointer;border:1px solid transparent; border-radius: 2px;font-family:roboto-condensed;font-size:.9em;min-width: 9em;max-width:calc(9em + 60px)}
.bouton:hover {background:#fff;border:1px solid #94d600;color:#94d600;}

nav {max-width:1200px;position:relative;margin:0 auto;height:120px;}
nav ul {float:right;padding:0;margin:0;bottom:25px;position:absolute; right:0}
nav ul li {list-style: none;float:left;text-transform: uppercase;padding: 0 12px;border-right:1px solid #e1e2e2;}
nav ul li a {color:#00aeef; }
nav ul li a:hover {border-bottom: 1px solid #00aeef;border-top: 1px solid #00aeef}

header {top:0;position: relative;left: auto;width: 100%;z-index: 200;height:120px;background:#fff;}

#menubis {position:absolute;right:0;float:left;bottom:25px;}
#menubis a {text-transform:uppercase;padding: 0 12px;color:#00aeef;}
#menubis a:not(:last-of-type) {border-right:1px solid #e1e2e2;}

#menubis span {height:40px;background:#e1e1e1;padding:5px;border-radius:3px;color:#fff;}
#menubis span a {padding:0;color:#000}
#menubis span.selected {background:#00AEEF;padding:5px;border-radius:3px;}

#menubis ul {position: relative;float: unset;bottom: unset;display: inline-block;}
#menubis li:hover{list-style:none;cursor:pointer}
#menubis li ul li:hover{background-color:#fff;}
#menubis li{margin: 0;float: unset;color: #00aeef;}
#menubis li ul {width:fit-content;left:-999em;font-size:17px;line-height:19px;position: absolute;}
#menubis li ul li{float:none;margin:0;margin-left:1px;width: 200px;background-color:#fff;border:none !important;}
#menubis li ul li:first-of-type {padding-top: 20px}
#menubis li ul li a{display:block;color:#000;text-align:left;background-color:#fff;padding:5px 4px;}
#menubis li ul li a:hover{display:block;color:#00aeef;text-align:left;background-color:#fff;background-image:none;border: none}
#menubis li ul ul{margin:0;}
#menubis li:hover ul ul, #menubis li.sfhover ul ul{left:-999em;}
#menubis li:hover ul, #menubis li li:hover ul, #menubis li.sfhover ul, #menubis li li.sfhover ul{left:0;min-height:0;top:20px}

input[type="checkbox"], #flag450 {display: none;}
input[type="checkbox"]:checked ~ #menubis{display: inline-block;}
.show-menu {padding: 10px 20px;display: none;text-align:right}

.logo {display:block;max-width:300px;position:absolute;bottom: 7px;}
.logo img {width:100%;}

a {text-decoration:none;color:#666}

h1 {color : #fff;padding:5px 0;margin:0;font-size:1.2em;font-family: roboto-condensed;}
h2, #titreconnec {color:#000;font-size:2.3em;font-weight: normal;line-height: 1em;margin:0 0 20px 0;font-family: roboto-thin;}
section, footer {position:relative;padding : 110px 0;width:85%;margin:0 auto;max-width:1200px;}
section li {margin-top:10px; }
section ul {list-style: none;list-style-position: outside;}
section ul li::before {
  content: "\2022";
  color: #00aeef;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
/*section:after {content: "";display: table;clear: both;}
section:before { display: block; content: " "; margin-top: -125px; height: 145px; visibility: hidden; pointer-2n+4ts: none;}*/

section:nth-of-type(1) {background:#F6F6F6;color:#000; padding:60px 0; margin:0;font-weight:bold; width:100%;max-width:100%;}
section:nth-of-type(1) div, section:nth-of-type(2n+4) div, section:nth-of-type(2n+3) div  {position:relative; width:85%; height:100%;margin:0 auto;max-width:1200px;text-align:center}

section:nth-of-type(1) div {background: rgba(0,0,0,0.4);color:#fff;text-align:left;padding:0 30px;width:calc(85% - 60px);max-width:1140px}
section:nth-of-type(1) div h2 {color : #fff;margin:20px 0;}

section:nth-of-type(1) {background:url('../images/papier.jpg') 0 0 no-repeat; background-size: cover;}

section:nth-of-type(2) div a {background-color:#94BE08;display:block;color:#fff;position:absolute;right:0;height:100%;padding: 7px 10px;border-left:1px solid #fff;border-right:1px solid #fff;font-size: 1em;font-weight:bold}

section:nth-of-type(2) {background:#00aeef;color:#000; margin:0;width:100%;max-width:100%;padding:0;border-bottom:1px solid #fff}
section:nth-of-type(2) div:first-child { position:relative; width:85%; height:100%;margin:0 auto;max-width:1200px;text-align:left}

section:nth-of-type(2n+4) {margin:0;width:100%;max-width:100%;}
section:nth-of-type(2n+4) div div { position:relative; width:30%; height:100%;max-width:720px;text-align:left;margin:0}

section:nth-of-type(2n+3) {background:#F6F6F6;margin:0;width:100%;max-width:100%;}
section:nth-of-type(2n+3) div div { position:relative; width:30%; height:100%;max-width:720px;text-align:left;margin:0}

section {float: left; width: 100%;}
section div, section div div {overflow: hidden;}
section:nth-of-type(2n+4) img {width:70%;float:left;}
section:nth-of-type(2n+3) img {width:70%;float:right;}

section:nth-last-of-type(2)  {background-color:#94BE08;color :#fff;}
section:nth-last-of-type(2)  div div {width:70%}
section:nth-last-of-type(2) img {width:25%;float:right;}

section:last-of-type {margin-bottom:0;background-color:#666;color:#fff;padding:40px 0 110px 0}

section.accred a img {float: left;width: 100px;margin-right: 40px;}

/*section:nth-of-type(2n+4) ul {text-align: left;float:right;clear: both;}*/
p{
   clear: both;
}
ul {margin-top:0;padding-top:0}

footer {padding:30px 0}
section:last-of-type footer div {text-align:left;width:calc(33% - 3rem); height:100%;font-size: 0.75em;float:left;position:relative;margin:0 1.5rem;}
footer div a {color:#fff;}
footer div a:hover {color:#000}
footer div h2 {font-size: 1.2em;text-transform: uppercase;margin: 0 0 10px 0;font-family: roboto-condensed}

/*c2c section:nth-of-type(5) {padding:40px 0 0 0}*/

/*section:nth-of-type(13) {
  height: 100vh;
  background-color:transparent; 
}*/

/*new cookies*/
.popin {
  display: block; position: fixed; z-index:101; width: 450px; left: 0; right: 0;
  margin: 22% auto; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); padding:20px; color:#666;font-size:13px;
}
.popin input[type=radio] {margin:4px 3px;}
.popin a {background:#94be08;color:#fff;font-family:Arial Narrow; font-size:14px;font-weight:bold;margin:10px 0;display:block;padding:3px;border-radius : 2px;text-align:center;cursor:pointer}
.popin h1 {font-family:Arial Narrow; font-size:14px;font-weight:bold;color:#94be08;text-transform: uppercase; margin:0;padding:0;margin-bottom : 10px;}
.popin label {display: contents;}
#cachePage{background-color:#000;z-index:101;width:100%;height:100%;position:fixed;opacity:0.6;top:0}

#choixDefaut input[type="button"] {float: left;margin:5px;padding: 5px;border: none;cursor: pointer}
#optout-button1 {background-color:var(--main-tbs-color);}

#cookie-bottom-banner, #cookie-DNT {z-index:101;width:100%;display:block;}

#BannerConsent, #bottomBanner, #bottomBannerDNT {position: fixed;
z-index: 101;
background: #fff;
padding: 10px;
width: 300px;
color: #666;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
bottom: 10px;
text-align: center;
right: 10px;}
#BannerConsent a, #bottomBanner a, #bottomBannerDNT a {color:#666;text-decoration: underline}

#suggestions {width: 100%;display: table;}
#blocSuggestions {display: flex;margin: 0 auto;padding: 30px 30px 30px 4px;overflow: visible;width: -moz-fit-content;}
.suggestion {width: 320px !important;overflow: visible;float: left;margin-left: 26px;background: #fff;padding: 10px 10px 0 10px;
  padding-bottom: 0px;text-align: left;font-size: 12px;padding-bottom: 70px;position: relative;font-family: Verdana, Arial, Helvetica, sans-serif;padding:0;margin: 0 20px !important;}
.suggestion h2 {color: #fff;background: #00aeef;text-transform: uppercase;font-size: 15px;text-align: center;padding: 3px 0;position:relative;font-family: roboto-condensed;}
.suggestion h2:after {content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;border-width:8px 8px 0;border-style:solid;border-color:#00aeef transparent;display:block; width:0;}
.suggestion ul li, .suggestion ul li::before {list-style: none;content:"";font-family: roboto-light;font-size: 18px;top:10px;position: relative;margin-right: 30px;position: relative !important}
.suggestion ul li::after {border-bottom: 1px solid #e7e7e7;position: absolute;content: '';width: 150px;bottom: -15px;left: 30px;}
.suggestion ul li.user::before {content:url("../images/picto_user.png");border-bottom:none;}
.suggestion ul li.storage::before {content:url("../images/picto_storage.png");border-bottom:none;}
.suggestion ul li.org::before {content:url("../images/picto_org.png");border-bottom:none;}
.suggestion ul li.cert::before {content:url("../images/picto_cert.png");border-bottom:none;}
.suggestion ul li.cloud::before {content:url("../images/picto_cloud.png");border-bottom:none;}
.suggestion ul li.flow::before {content:url("../images/picto_flow.png");border-bottom:none;}
.suggestion ul li.api::before {content:url("../images/picto_api.png");border-bottom:none;}

.suggestion ul li ul li::before {content:"" !important;}
.suggestion ul li ul li::after {content:"";position:absolute;border-style:solid;display:block; width:0;
       border-color:#00aeef;left:-8px;z-index:100;margin-top:-8px;border-width:8px 8px 8px 0;
       border-top-color:transparent;border-bottom-color:transparent;top: 20px;bottom: 100%;}
.suggestion ul li ul li {background: #00aeef;left: calc(100% - 10px);color: #fff;width: 100%;font-family: Roboto-Condensed;display: grid;padding: 5px;font-size: 15px;top:0;z-index: 10;}
.suggestion li:hover{cursor:help}

.suggestion li ul{position:absolute;width:100%;left:-999em;margin: 0;padding: 0;top: 0;right: -40px;}
.suggestion li:hover ul ul, .suggestion li.sfhover ul ul{left:-999em;}
.suggestion li:hover ul, .suggestion li li:hover ul, .suggestion li.sfhover ul, .suggestion li li.sfhover ul{left:auto;min-height:0;}

.suggestion .prix {background: #00aeef;max-width: 340px;position: relative;width: calc(100% - 50px);height: 43px;text-align: center;padding-right: 50px;bottom: 0;z-index: 10;margin-top: 80px;}
.suggestion .prix span::after {;width: 45px;border-left: 1px solid #fff;height: 100%;display: inline-block;position: absolute;right: 0;top: 0;font-size: 1.8em;}
.suggestion:lang(fr) .prix span::after {content: "\20ac"}
.suggestion:lang(en) .prix span::after {content: "\00a3"}
.suggestion .prix span {color: #fff;text-decoration: none;font-size: 1.2em;line-height: 40px;display: block;}
.legende {color: #00aeef;padding: 0 10px;display: block;}
section:nth-of-type(2n+3) div div {max-width: 100%;}

@media screen and (max-width:1420px) {
  .suggestion:last-child ul li ul li {right: calc(100% + 50px);left:auto}
  .suggestion:last-child li ul {right:0}
  .suggestion:last-child ul li ul li::after {border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-width:8px 0 8px 8px;left:100%;margin-top:-8px;}
}
@media screen and (min-width:830px) and (max-width:1150px) {
.suggestion:nth-child(2) ul li ul li {right: calc(100% + 50px);left:auto}
.suggestion:nth-child(2) li ul {right:0}
.suggestion:nth-child(2) ul li ul li::after {border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-width:8px 0 8px 8px;left:100%;margin-top:-8px;}
}
@media screen and (min-width:800px) and (max-width:829px){
.suggestion:nth-child(2) ul li ul li, .suggestion:last-child ul li ul li {left: calc(100% - 10px);right:auto}
.suggestion:nth-child(2) li ul, .suggestion:last-child li ul {right: -40px;}
.suggestion:nth-child(2) ul li ul li::after, .suggestion:last-child ul li ul li::after  {left:-8px;z-index:100;margin-top:-8px;border-width:8px 8px 8px 0;
       border-top-color:transparent;border-bottom-color:transparent;top: 20px;bottom: 100%;}
}
@media screen and (min-width:0) and (max-width:799px) {
.suggestion li:hover ul, .suggestion li li:hover ul, .suggestion li.sfhover ul, .suggestion li li.sfhover ul{right:100%;top:100%}
.suggestion:nth-child(2) li:hover ul, .suggestion:nth-child(2) li li:hover ul, .suggestion:nth-child(2) li.sfhover ul, .suggestion:nth-child(2) li li.sfhover ul{right:100%;top:100%}
.suggestion:last-child li:hover ul, .suggestion:last-child li li:hover ul, .suggestion:last-child li.sfhover ul, .suggestion:last-child li li.sfhover ul{right:100%;top:100%}

.suggestion ul li ul li::after, .suggestion:nth-child(2) ul li ul li::after, .suggestion:last-child ul li ul li::after {content:"";position:absolute;border-style:solid;display:block; width:0;
       border-color:#00aeef;left:75%;z-index:100;top:-8px;border-width:0 8px 8px;margin-left:-8px;
       border-left-color: transparent;border-right-color: transparent;bottom: 100%;}
.suggestion ul li ul li, .suggestion:nth-child(2)  ul li ul li, .suggestion:last-child ul li ul li {left: calc(100% - 10px);}
.suggestion li ul, .suggestion:nth-child(2) li ul, .suggestion:last-child li ul {right: -40px;}
}


@media screen and (max-width:1200px) {
  header {top:0;height:60px;}
  #wrapper {height:60px;background: transparent;}
  nav {max-width:100%;margin-top:0;  background:url('../images/logo_tbsx2.png') 0 0 no-repeat; background-position: 20px 0px;background-attachment: fixed;background-size: auto 60px;}
  .logo, #flags {display:none}
  .show-menu {display:block;cursor:pointer;float:right;padding: 22px 20px;height:17px}
  
  
  div#menubis {position: static;display: none;float:none;width:calc(100% - 50px);}
  div#menubis a {display:block}
  div#menubis a {margin-bottom: 1px;text-align:right;width:100%;margin-right:0;line-height:25px;background:#fafafa;padding:0 50px 0 0}
  div#menubis a:hover {background:#d8d6d6;}
  div#menubis a {width: 100%;}
  div#menubis a:hover {color:#000}
  div#menubis span {display:none}

  #flag450 {display:block;position:absolute;right:60px;height:14px;top:0;padding:18px 0}
  #flag450 span {background:#e1e1e1;padding:5px;border-radius:3px;color:#000;margin-left:15px;}
  #flag450 span.selected {background:#00AEEF;padding:5px;color:#fff;right:80px}
  #blocSuggestions {display:inline-block;text-align: center;}
  .suggestion {margin-bottom: 30px !important;float:none;display: inline-block}
}
@media screen and (max-width:1000px) {
  section div {padding:0;}
  section img {float:none;margin:0 auto; min-width:80%;margin:0 10%}
  section {width:100%;max-width:100%;padding:50px 0;float: none; width: 100%;}
  section div div {width:100%;min-width:100%;}
  h2 {text-align:center}
  section:nth-of-type(1) {background-position:0 0;}
  section:last-of-type {margin-bottom:0;padding:40px 0 300px 0}
  
  .popin {
  display: block; position: fixed; z-index:101; width: calc(100% - 60px); left: 0; right: 0;
  margin: 30% 10px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); padding:20px; color:#666;font-size:13px;
  }
  .popin input[type=radio] {margin:4px 3px;}
  .popin a {background:#94be08;color:#fff;font-family:Arial Narrow; font-size:14px;font-weight:bold;margin:10px 0;display:block;padding:3px;border-radius : 2px;text-align:center;cursor:pointer}
  .popin h1 {font-family:Arial Narrow; font-size:14px;font-weight:bold;color:#94be08;text-transform: uppercase; margin:0;padding:0;margin-bottom : 10px;}
  .popin label {display: block;}
  .suggestion, .suggestion .prix {width: 300px !important;min-width: 300px; max-width: 300px}
  .suggestion .prix{padding-right: 0}
  .suggestion {margin-bottom: 30px !important;float:none;display: inline-block}
  #blocSuggestions {display:inline-block;text-align: center;}
  }

@media screen and (max-width:550px) {
  #flag450 {font-size:14px;line-height:40px;padding:12px 0;right:50px;}
  #flag450 span {margin-left:5px;}
  nav {background-size:65%;background-position: 5px 10px;}
  #titre {display:block;width:100%}

  section:nth-of-type(2) div a {position:relative;
         padding: 6px 15px;font-size: 1em;font-weight:bold;
         width:100%;top:0px;border:none;background: #94BE08;z-index: 102;
  }
  section:nth-of-type(2) div:first-child {width:100%; margin:0;padding:0}
section:nth-of-type(2) div h1 {position:relative;width:100%;top:0;font-size: 1em;padding: 6px 15px;}

nav {height:60px;}
}

@media screen and (max-width:800px) {
section:last-of-type {margin-bottom : 0;padding-bottom:100px;overflow:hidden}
footer {padding:30px;height:100%;background: #666}
footer div {position:relative}
section:last-of-type footer div {text-align:left;width:100%; height:100%;font-size: 1em;float:left;position:relative;margin:0 1.5rem;}
footer div a {color:#fff;}
footer div a:hover {color:#000}
footer div h2 {font-size: 1.2em;text-transform: uppercase;margin: 30px 0 10px 0;text-align: left;}
}