/* CYBOIDE.COM */ /* >–––––––––––––––––––––––––––––––––––––– XXXXX –––––––––< */ /* >–––––– XXXXXX XXXXXXXX ––––––< */ /* >–––––––––––––––––––––––––––––––––––––– POLICES –––––––––< */ /* Import in app init (async) */ @font-face{ font-family:"Century Gothic W01 Bold"; src:url("../../assets/Fonts/b247e158-e647-4a3d-9637-944de5124043.eot?#iefix"); src:url("../../assets/Fonts/b247e158-e647-4a3d-9637-944de5124043.eot?#iefix") format("eot"),url("../../assets/Fonts/2ef5ecda-1772-45e2-843f-a13f5d76ed3a.woff") format("woff"),url("../../assets/Fonts/33cf10ca-a6bb-4888-a320-d38720c9847b.ttf") format("truetype"),url("../../assets/Fonts/3428a0e6-cb4d-408a-8331-cc78554ab49c.svg#3428a0e6-cb4d-408a-8331-cc78554ab49c") format("svg"); } @font-face{ font-family:"CenturyGothicW01-BoldIt"; src:url("../../assets/Fonts/620781dc-b993-429f-ace1-722c9b2ba789.eot?#iefix"); src:url("../../assets/Fonts/620781dc-b993-429f-ace1-722c9b2ba789.eot?#iefix") format("eot"),url("../../assets/Fonts/3bd69eb9-2110-4d97-989e-99a659576659.woff") format("woff"),url("../../assets/Fonts/8edaed62-069c-4a3b-87f5-fc14b5cdaec3.ttf") format("truetype"),url("../../assets/Fonts/d5c40f0a-3098-4a2b-8cbb-84524c2a29bc.svg#d5c40f0a-3098-4a2b-8cbb-84524c2a29bc") format("svg"); } @font-face{ font-family:"CenturyGothicW01-Italic"; src:url("../../assets/Fonts/38471ac0-7849-4a39-9f97-f89d78f42142.eot?#iefix"); src:url("../../assets/Fonts/38471ac0-7849-4a39-9f97-f89d78f42142.eot?#iefix") format("eot"),url("../../assets/Fonts/483a662e-88d8-4865-8dd3-1515c67fe28b.woff") format("woff"),url("../../assets/Fonts/d29e72e3-fcd5-4fa6-8cfb-986a2e33e105.ttf") format("truetype"),url("../../assets/Fonts/1e08e1b1-b459-4819-95bc-54667cb4d9b5.svg#1e08e1b1-b459-4819-95bc-54667cb4d9b5") format("svg"); } @font-face{ font-family:"Century Gothic W01"; src:url("../../assets/Fonts/bd45538f-4200-4946-b177-02de8337032d.eot?#iefix"); src:url("../../assets/Fonts/bd45538f-4200-4946-b177-02de8337032d.eot?#iefix") format("eot"),url("../../assets/Fonts/9908cdad-7524-4206-819e-4f345a666324.woff") format("woff"),url("../../assets/Fonts/b710c26a-f1ae-4fb8-a9fe-570fd829cbf1.ttf") format("truetype"),url("../../assets/Fonts/c9e387df-c0d3-42e1-8de6-78c41f68594c.svg#c9e387df-c0d3-42e1-8de6-78c41f68594c") format("svg"); } @font-face{ font-family:"Swordtail W01 Regular"; src:url("../../assets/Fonts/b3e9aad8-c407-4b34-98c0-c15151b4ec95.eot?#iefix"); src:url("../../assets/Fonts/b3e9aad8-c407-4b34-98c0-c15151b4ec95.eot?#iefix") format("eot"),url("../../assets/Fonts/4ea6be4d-929b-433a-b770-27c96bd6438c.woff") format("woff"),url("../../assets/Fonts/ca65a076-d85c-440c-b054-3d28e0277086.ttf") format("truetype"),url("../../assets/Fonts/2af6681d-2158-4d86-a8a1-1910f1f96f11.svg#2af6681d-2158-4d86-a8a1-1910f1f96f11") format("svg"); } /* >–––––––––––––––––––––––––––––––––––––– RÉINIT –––––––––< */ a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, time, tfoot, th, thead, tr, ul, var, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ol, ul { list-style: none; margin-left: 1em; } /* >–––––––––––––––––––––––––––––––––––––– SITE –––––––––< */ /* >–––––– STRUCTURE GLOBALE ––––––< */ html { height: 100%; font-size: 62.5%; /* RACINE. = 10px, donc à base de 10, plus facile à gérer pour les rem et em */ -ms-touch-action: none; /* IE 10 Direct all pointer events to JavaScript code. */ /* test : sur 2014 seulement */ touch-action: none; /* IE11 Disable touch behaviors, like pan and zoom *//* test : sur 2014 seulement */ } body { position: fixed; /* fix bug extra 20px sur innerHeight mobile panorama */ width: 100%; /* fix bug extra 20px sur innerHeight mobile panorama */ height: 100%; font-family: "Century Gothic W01", sans-serif; /* Touch iOS */ -webkit-user-select: none; /* disable cut copy paste */ -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; /* disable callout, image save panel */ -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */ -webkit-appearance: none; /* apparence form el (submit) */ -webkit-text-size-adjust: 100%; /* mobile text size, off -- avoid 'none' */ /*-webkit-user-drag: none;*/ -webkit-font-smoothing: antialiased; /* fonts too bold in Chrome */ -moz-osx-font-smoothing: grayscale; } div#iFond { position: fixed; width: 100%; height: 100%; background:#ffffff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9ImRlZ3JSYWRfRm9uZCIgY3g9IjM2MCIgY3k9IjIwMCIgcj0iMzYwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CgkJPHN0b3AgIG9mZnNldD0iMC40IiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGIi8+CgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q2RDZENiIvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IGZpbGw9InVybCgjZGVnclJhZF9Gb25kKSIgd2lkdGg9IjcyMCIgaGVpZ2h0PSI0MDAiLz4KPC9zdmc+") no-repeat center center; background-size: cover; } div#iFond div { position: absolute; width: 50%; height: 100%; } div#iFond div.gauche { margin-left: -10rem; left: 0; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDkuOCIgaGVpZ2h0PSIxMjY5IiB2aWV3Qm94PSIwIDAgMjA5Ljc2MyAxMjY4Ljk3NSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQgc2xpY2UiPgoJPHBvbHlnb24gZmlsbD0iI0Q2RDZENiIgcG9pbnRzPSIyMDksMTI2OC40IDEsOTg5IDEsODA4LjIgMS4xLDgwOC4xIDY4LjEsNzIxLjkgODYuOSw3MjEuOSA4Ni45LDU0Ny4xIDY4LjEsNTQ3LjEgMSw0NjAuOCAxLDI4MCAxLjEsMjc5LjggMjA5LDAuNiAyMDkuOCwxLjIgMiwyODAuMyAyLDQ2MC40IDY4LjYsNTQ2LjEgODcuOSw1NDYuMSA4Ny45LDcyMi45IDY4LjYsNzIyLjkgMiw4MDguNiAyLDk4OC43IDIwOS44LDEyNjcuOCIvPgoJPHBvbHlsaW5lIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjA4LjEsMTI2OSAtMCw5ODkuMyAtMCw4MDcuOSA2Ny42LDcyMC44IDg1LjksNzIwLjggODUuOSw1NDguMSA2Ny42LDU0OC4xIC0wLDQ2MS4xIC0wLDI3OS42IDAuMywyNzkuMiAyMDguMSwwIDIwOS40LDAgMS4xLDI3OS44IDEsMjgwIDEsNDYwLjggNjguMSw1NDcuMSA4Ni45LDU0Ny4xIDg2LjksNzIxLjkgNjguMSw3MjEuOSAxLjEsODA4LjEgMSw4MDguMiAxLDk4OSAyMDkuNCwxMjY5Ii8+Cgk8cG9seWxpbmUgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIyMDguMSwxMjY5IC0wLDk4OS4zIC0wLDgwNy45IDY3LjYsNzIwLjggODUuOSw3MjAuOCA4NS45LDU0OC4xIDY3LjYsNTQ4LjEgLTAsNDYxLjEgLTAsMjc5LjYgMC4zLDI3OS4yIDIwOC4xLDAgMjA5LjQsMCAxLjEsMjc5LjggMSwyODAgMSw0NjAuOCA2OC4xLDU0Ny4xIDg2LjksNTQ3LjEgODYuOSw3MjEuOSA2OC4xLDcyMS45IDEuMSw4MDguMSAxLDgwOC4yIDEsOTg5IDIwOS40LDEyNjkiLz4KPC9zdmc+") repeat-x right center; background-size: contain; } div#iFond div.droite { margin-right: -10rem; right: 0; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDkuOCIgaGVpZ2h0PSIxMjY5IiB2aWV3Qm94PSIwIDAgMjA5Ljc2MyAxMjY4Ljk3NSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQgc2xpY2UiPgoJPHBvbHlnb24gZmlsbD0iI0Q2RDZENiIgcG9pbnRzPSItMC4yMDUsMTI2OC4zNzggMjA3Ljc1NSw5ODguOTk0IDIwNy43NTUsODA4LjIxOCAyMDcuNjQ5LDgwOC4wODMgMTQwLjYzNyw3MjEuODU0IDEyMS44OTIsNzIxLjg1NCAKCTEyMS44OTIsNTQ3LjEyMiAxNDAuNjM3LDU0Ny4xMjIgMjA3Ljc1NSw0NjAuNzU3IDIwNy43NTUsMjc5Ljk4IDIwNy42NTUsMjc5Ljg0OCAtMC4yMDUsMC41OTcgLTEuMDA5LDEuMTk0IDIwNi43NTUsMjgwLjMxMiAKCTIwNi43NTUsNDYwLjQxMyAxNDAuMTQ4LDU0Ni4xMjIgMTIwLjg5Miw1NDYuMTIyIDEyMC44OTIsNzIyLjg1NCAxNDAuMTQ4LDcyMi44NTQgMjA2Ljc1NSw4MDguNTYyIDIwNi43NTUsOTg4LjY2MiAtMS4wMDksMTI2Ny43OCAiLz4KCTxwb2x5bGluZSBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjAuNjA4LDEyNjguOTc1IDIwOC43NjIsOTg5LjMyOCAyMDguNzYyLDgwNy44NyAxNDEuMTMxLDcyMC44NDYgMTIyLjksNzIwLjg0NiAxMjIuOSw1NDguMTMgCgkJMTQxLjEzMSw1NDguMTMgMjA4Ljc2Miw0NjEuMTAzIDIwOC43NjIsMjc5LjY0MiAyMDguNDU5LDI3OS4yNCAwLjYwNywwIC0wLjY1OCwwIDIwNy42NTUsMjc5Ljg0OCAyMDcuNzU1LDI3OS45OCAyMDcuNzU1LDQ2MC43NTcgCgkJMTQwLjYzNyw1NDcuMTIyIDEyMS44OTIsNTQ3LjEyMiAxMjEuODkyLDcyMS44NTQgMTQwLjYzNyw3MjEuODU0IDIwNy42NDksODA4LjA4MyAyMDcuNzU1LDgwOC4yMTggMjA3Ljc1NSw5ODguOTk0IAoJCS0wLjY1NCwxMjY4Ljk3NSAiLz4KCTxwb2x5bGluZSBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjAuNjA4LDEyNjguOTc1IDIwOC43NjIsOTg5LjMyOCAyMDguNzYyLDgwNy44NyAxNDEuMTMxLDcyMC44NDYgMTIyLjksNzIwLjg0NiAxMjIuOSw1NDguMTMgCgkJMTQxLjEzMSw1NDguMTMgMjA4Ljc2Miw0NjEuMTAzIDIwOC43NjIsMjc5LjY0MiAyMDguNDU5LDI3OS4yNCAwLjYwNywwIC0wLjY1OCwwIDIwNy42NTUsMjc5Ljg0OCAyMDcuNzU1LDI3OS45OCAyMDcuNzU1LDQ2MC43NTcgCgkJMTQwLjYzNyw1NDcuMTIyIDEyMS44OTIsNTQ3LjEyMiAxMjEuODkyLDcyMS44NTQgMTQwLjYzNyw3MjEuODU0IDIwNy42NDksODA4LjA4MyAyMDcuNzU1LDgwOC4yMTggMjA3Ljc1NSw5ODguOTk0IAoJCS0wLjY1NCwxMjY4Ljk3NSAiLz4KPC9zdmc+") repeat-x left center; background-size: contain; } svg#iAssets { position: absolute; /*display: none; */visibility: hidden; } /* display none : out, autrement les gradient déclarés n’affichent pas */ div#iSite { position: absolute; width: 100%; height: 100%; overflow: hidden; } div#iContenu { width: 100%; height: 100%; overflow: hidden; } div#iLandscape { position: absolute; display: none; width: 100%; height: 100%; text-align: left; } div#iLandscape.mastered { background-color: #027ec7; } /* une fois que app.js master View le prend en charge */ div#iLandscape .phone { position: absolute; left: -50px; top: -50px; width: 10rem; height: 10rem; background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8cGF0aCBpZD0ic3ZnX2ljb25fbGFuZHNjYXBlIiBmaWxsPSIjZTZlNmU2IiBkPSJNNzYuMzg2IDBIMjMuNjE1Yy0yLjc4MiAwLTUuMDM4IDIuMjU2LTUuMDM4IDUuMDM4djg5LjkyNGMwIDIuOCAyLjMgNSA1IDUuMDM4aDUyLjc3MSBjMi43ODIgMCA1LjAzNy0yLjI1NSA1LjAzNy01LjAzOFY1LjAzOEM4MS40MjMgMi4zIDc5LjIgMCA3Ni40IDB6IE01MCA5NC43OTljLTMuMDYxIDAtNS41NDEtMi40ODEtNS41NDEtNS41NDIgYzAtMy4wNiAyLjQ4LTUuNTQxIDUuNTQxLTUuNTQxczUuNTQyIDIuNSA1LjUgNS41NDFDNTUuNTQyIDkyLjMgNTMuMSA5NC44IDUwIDk0Ljc5OXogTTc3LjA3OCA3OS45NzVIMjIuOTIyVjUuNDE2IGg1NC4xNTZWNzkuOTc1eiIvPgo8L3N2Zz4=") no-repeat center center; background-size: contain; opacity: 0; } /* >–––––– PRELOADER ––––––< */ div#iPreloader div.logo_in, div#iPreloader div.logo_off { position: absolute; left: 50%; top: 50%; margin-left: -9rem; margin-top: -10rem; width: 18rem; height: 18rem; /* svg logo carré */ } div#iPreloader div.logo_in { animation: preloaderFadeIn 1s; -webkit-animation: preloaderFadeIn 1s; /*-moz-animation: preloaderFadeIn 1s;*/ animation-delay: 0.25s; -webkit-animation-delay: 0.25s; /*-moz-animation-delay: 0.25s;*/ animation-fill-mode: both; -webkit-animation-fill-mode: both; /*-moz-animation-fill-mode: both;*/ } div#iPreloader div.txt { position: absolute; top: 50%; margin-top: 90px; width: 100%; font-size: 1.2rem; letter-spacing: 0.1rem; text-align: center; color: #524f54; } .chargement { font-family: "Century Gothic W01 Bold", sans-serif; }; @keyframes preloaderFadeIn { 0% {opacity: 0; margin-top: -150px;} 60% {opacity: 1;} 100% {margin-top: -100px;} } @-webkit-keyframes preloaderFadeIn { 0% {opacity: 0; margin-top: -150px;} 60% {opacity: 1;} 100% {margin-top: -100px;} } /*@-moz-keyframes preloaderFadeIn { 0% {opacity: 0; margin-top: -150px;} 60% {opacity: 1;} 100% {margin-top: -100px;} }*/ /* >–––––––––––––––––––––––––––––––––––––– GLOBAL –––––––––< */ /* >–––––– UTILS ––––––< */ .mouse { cursor: pointer; } .nomouse { cursor: default; } .trigger { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } .hidden { display: none; visibility: hidden; } /* Hide for both screenreaders and browsers:*/ .invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */ .centre { position: absolute; left: 50%; top: 50%; } .prepJS { opacity: 1; } .site_preloader { position: absolute; left: 0; top: 45%; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); transform:translate(0,-50%); width: 100%; height: 1.8rem; font-size: 1.8rem; line-height: 1.8rem; letter-spacing: 0.1rem; color: #524f54; text-align: center; } /* >–––––– CONTAINER / SECTIONS / SECTION HEADER ––––––< */ #iContenu>.bBox { position: relative; margin-left: 0; width: 100%; height: 100%; } /* nécessaire au nav#iSideMenu */ #iContenu>.bBox>div:first-child { position: relative; width: 100%; height: 100%; } /* nécessaire au contenu (.dragBox) pour dégager le iTopMenu (or seul. version #iVP le dégage vraiment) */ #iContenu>.bBox>div#iVP { position: absolute; top: 7.4rem; bottom: 0; height: auto; overflow: hidden; } /* dégage le iTopMenu */ /* NOTE pour les section, ci-bas. Au fond, attendu le vh partiell. propagé, et la nécessité des #iVP d’avoir 100%, aussi bien ne pas recourir au vh, car JS doit se charger d’attribuer manuellement le height et min-height. À voir. */ #iContenu>.bBox>div:first-child section { box-sizing: border-box; position: relative; width: 100%; height: 100vh; opacity: 0; } /* opacity pour fix vh initial ds JS */ #iContenu>.bBox>div:first-child section.isf { padding-bottom: 1rem; min-height: 100vh; height: auto; } #iContenu>.bBox>div#iVP section { height: 100%; } #iContenu>.bBox>div#iVP section.isf { min-height: 100%; height: auto; } /* Header (ici tant que le header Services est le standard... (idem sous reactif) (les padding pourraient changer par défaut, surtout mobile)) -----*/ #iContenu section header { box-sizing: border-box; position: relative; padding: 2rem 0 0 10%; width: 100%; } #iContenu section header .logo { display: none; position: absolute; top: 2rem; right: 2rem; width: 14.2rem; height: 4.8rem; cursor: pointer; } #iContenu section header .cursive { font-size: 5.6rem; line-height: 5rem; } #iContenu section header h1 { margin-bottom: 1rem; font-size: 6rem; line-height: 6rem; font-weight: normal; color: #787878; } /* ------------*/ #iContenu>.bBox div.trigger.master { display: none; } .dragBox { width: 100%; } /* >–––––– SVG ASSETS ––––––< */ .logo_c, div#iPreloader div.logo_in, div#iPreloader div.logo_off { /* logo, carré seul., couleurs */ background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMCAtMTAgMTIwIDEyMCI+Cgk8bGluZWFyR3JhZGllbnQgaWQ9IkdMX2JsZXVfbG9nb0ljb25fY2FycmUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iODAuMiIgeTE9IjEwMS45IiB4Mj0iMTAuOSIgeTI9IjIuOSI+CgkJPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojMDM0RUExIi8+CgkJPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDBCMkVGIi8+Cgk8L2xpbmVhckdyYWRpZW50PgoKCTxmaWx0ZXIgaWQ9IkRTX2xvZ29DYXJyZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlQWxwaGEiIHN0ZERldmlhdGlvbj0iMyA0IiByZXN1bHQ9ImJsdXIiLz4gCiAgICAgIDxmZU9mZnNldCBpbj0iYmx1ciIgZHg9IjIiIGR5PSIzIiByZXN1bHQ9Im9mZnNldF9ibHVyIi8+IAogICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIwIDAgMCAwIDAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDAgMCAwIDAgMAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMCAwIDAgMCAwCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwIDAgMCAwLjcgMCIgaW49Im9mZnNldF9ibHVyIiByZXN1bHQ9Im1hdHJpeCIvPgogICAgICA8ZmVDb21wb3NpdGUgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0ibWF0cml4IiBvcGVyYXRvcj0ib3ZlciIvPgogICAgPC9maWx0ZXI+CgoJPCEtLSAwIDAgMTAwIDEwMCAtLT4KCTxnIGlkPSJzdmdfbG9nb0ljb24iPgoJCTxwYXRoIHN0eWxlPSJmaWxsOnVybCgjR0xfYmxldV9sb2dvSWNvbl9jYXJyZSkiIGZpbHRlcj0idXJsKCNEU19sb2dvQ2FycmUpIiBkPSJNOTkuODI2IDgxLjk3NGMxLjE3NCA2LjA2LTMuNzIzIDEwLjg1NC0xMS4wNyAxMC44OTRjLTI1Ljg4MyAwLjE0MS01MS43NyAyLjIxMi03Ny42NTQgNi4yIEMzLjc1IDEwMC4yNjEtMS4wNTUgOTUuNSAwLjIgODguMjFjNC4yNDgtMjUuNTU3IDYuNjAzLTUwLjk3IDcuMDU5LTc2LjI0NEM3LjM5MSA0LjggMTIuMTk3LTAuMTA0IDE4LjIgMC45IEMzOS4zMzkgNC4xIDYwLjUgNS44IDgxLjcgNS45NDdjNS45NTcgMCAxMC45IDQuOSAxMS4xIDExLjA3OUM5My41MDYgMzguOCA5NS45IDYwLjUgOTkuOCA4MS45NzR6Ii8+CgkJPHBhdGggZmlsbD0iI0U2RTdFOCIgZD0iTTg5LjYwOSA1Ny42ODZjLTkuOTI0IDkuOTI0LTI2LjIxIDIwLjczOC00MC43MTUgMjAuNzM4Yy02LjkxNyAwLTEzLjAzMy0yLjA5NC0xNy4wMDgtNi4yNmw1Ljk5Mi01Ljk5NCBjMy40NzggNC4yIDkuMiA2LjUgMTQuOCA2LjUyOEM2NS4xODEgNzIuNyA3OSA2My44IDg5LjYgNTcuNjg2eiBNMzYuMDg5IDYzLjQ2NGMtMS0xLjk1Ny0xLjU3MS00LjE5LTEuNTcxLTYuNjY5IGMwLTEzLjM2MSAxOS4zMzgtMzUuNzU1IDMxLjQyNi0zNS43NTVjNS40NzEgMCA3LjkgMTIuMSA5LjcgMTkuOTc2YzEuNzgtMy45NDMgMi45MjYtOC4xNDMgMi45MjYtMTIuMzQxIGMwLTcuNjM1LTIuNDE3LTEzLjYxNS0xMC45NDMtMTMuNjE1Yy0xMy40ODUgMC00MC40NiAyNS44MjktNDAuNDYgNDQuMjc4YzAgNC4xIDEgNy41IDIuOCAxMC4zMDFMMzYuMDg5IDYzLjQ2NHoiLz4KCTwvZz4KPC9zdmc+") no-repeat center center; background-size: contain; } .logo { /* logo, full, couleurs */ background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTIgMTIwIj4KCTxsaW5lYXJHcmFkaWVudCBpZD0iR0xfYmxldV9sb2dvRnVsbF9jYXJyZSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4Mi4xIiB5MT0iMTAxLjUiIHgyPSIxNi43IiB5Mj0iOC4yIj4KCQk8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMzRFQTEiLz4KCQk8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMEIyRUYiLz4KCTwvbGluZWFyR3JhZGllbnQ+CgoJPGxpbmVhckdyYWRpZW50IGlkPSJHTF9ibGV1X2xvZ29GdWxsX2xldHRyZXMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAxLjEiIHkxPSI2NC43IiB4Mj0iMzUyIiB5Mj0iNjQuNyI+CgkJPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA4NkQ0Ii8+CgkJPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDM2NEExIi8+Cgk8L2xpbmVhckdyYWRpZW50PgoKCTxmaWx0ZXIgaWQ9IkRTX2xvZ29DYXJyZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlQWxwaGEiIHN0ZERldmlhdGlvbj0iMyA0IiByZXN1bHQ9ImJsdXIiLz4gCiAgICAgIDxmZU9mZnNldCBpbj0iYmx1ciIgZHg9IjIiIGR5PSIzIiByZXN1bHQ9Im9mZnNldF9ibHVyIi8+IAogICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIwIDAgMCAwIDAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDAgMCAwIDAgMAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMCAwIDAgMCAwCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwIDAgMCAwLjcgMCIgaW49Im9mZnNldF9ibHVyIiByZXN1bHQ9Im1hdHJpeCIvPgogICAgICA8ZmVDb21wb3NpdGUgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0ibWF0cml4IiBvcGVyYXRvcj0ib3ZlciIvPgogICAgPC9maWx0ZXI+CgoJPCEtLSAwIDAgMzUyIDEyMCAtLT4KCTxnIGlkPSJzdmdfbG9nb0Z1bGwiPgoJCTxnIGlkPSJzdmdfbG9nb0Z1bGxfaWNvbiI+CgkJCTxwYXRoIGlkPSJzdmdfbG9nb0Z1bGxfY2FycmUiIHN0eWxlPSJmaWxsOnVybCgjR0xfYmxldV9sb2dvRnVsbF9jYXJyZSkiIGZpbHRlcj0idXJsKCNEU19sb2dvQ2FycmUpIiBkPSJNMTAwLjU2OSA4Mi43MDNjMS4xMDcgNS43MTUtMy41MTEgMTAuMjM2LTEwLjQzOSAxMC4yNzNjLTI0LjQxIDAuMTMzLTQ4LjgyNCAyLjA4Ni03My4yMzYgNS45IEM5Ljk2IDk5LjkgNS40IDk1LjQgNi42IDg4LjU4NGM0LjAwNi0yNC4xMDIgNi4yMjgtNDguMDY5IDYuNjU3LTcxLjkwNWMwLjEyNi02Ljc1NiA0LjY1OC0xMS4zODMgMTAuMjgzLTEwLjQ3MiBjMTkuOTczIDMuMSAzOS45IDQuNyA1OS45IDQuNzk1YzUuNjE4IDAgMTAuMiA0LjcgMTAuNCAxMC40NDhDOTQuNjA5IDQyIDk2LjggNjIuNCAxMDAuNiA4Mi43MDN6Ii8+CgkJCTwhLS0gYyAtLT4KCQkJPHBhdGggZmlsbD0iI0U2RTdFOCIgZD0iTTkwLjkzNSA1OS43OTZjLTkuMzU5IDkuMzYtMjQuNzE5IDE5LjU1OS0zOC4zOTggMTkuNTU5Yy02LjUyMyAwLTEyLjI5MS0xLjk3NS0xNi4wNC01LjkwNGw1LjY1MS01LjY1MiBjMy4yNzkgMy45IDguNyA2LjIgMTQgNi4xNTZDNjcuODk2IDc0IDgxIDY1LjYgOTAuOSA1OS43OTZ6IE00MC40NTkgNjUuMiBjLTAuOTQyLTEuODQ2LTEuNDgxLTMuOTUxLTEuNDgxLTYuMjljMC0xMi42MDEgMTguMjM4LTMzLjcyIDI5LjYzOS0zMy43MmM1LjE1OSAwIDcuNCAxMS40IDkuMSAxOC44IGMxLjY4LTMuNzE5IDIuNzYtNy42OCAyLjc2LTExLjYzOWMwLTcuMi0yLjI3OS0xMi44NC0xMC4zMi0xMi44NGMtMTIuNzE5IDAtMzguMTU4IDI0LjM1OS0zOC4xNTggNDEuOCBjMCAzLjkgMSA3LjEgMi42IDkuNzE1TDQwLjQ1OSA2NS4yNDZ6Ii8+CgkJPC9nPgoJCTxnIGlkPSJzdmdfbG9nb0Z1bGxfdHJlbWFzIiBmaWxsPSIjOUM3MkZGIj4KCQkJPHBhdGggaWQ9InN2Z19sb2dvRnVsbF90cmVtYV9nYXVjaGUiIGQ9Ik0yMjMuNDA1IDM4LjQxYzAuMjQtMi4yNzkgMS4yLTcuOCAzLjEyLTkuMTE5YzAuNzItMC40OCAxLjY4MS0wLjQ4IDIuNTIxLTAuNDggYzAuNzIgMCAxLjcgMC4yIDIuNCAwLjM1OUMyMzAuOTY2IDM0LjUgMjI5LjIgMzcuOCAyMjMuNCAzOC40MXoiLz4KCQkJPHBhdGggaWQ9InN2Z19sb2dvRnVsbF90cmVtYV9kcm9pdGUiIGQ9Ik0yNDAuOTI1IDM3LjgxYy0xLjMxOSAwLTIuNTItMS4zMi0zLjQ3OS0yLjI4Yy0wLjEyLTAuNDc5LTAuMzYtMS4zMTktMC4zNi0xLjhjMS4yLTEuNTYxIDEuOC01LjQgMy45Ni01LjQgYzEuNDQgMCAzIDEuNyA0IDIuNjQxQzI0NC4wNDUgMzIuMiAyNDMuMyAzNy44IDI0MC45IDM3LjgxeiIvPgoJCTwvZz4KCQk8ZyBpZD0ic3ZnX2xvZ29GdWxsX2xldHRyZXMiIHN0eWxlPSJmaWxsOnVybCgjR0xfYmxldV9sb2dvRnVsbF9sZXR0cmVzKSI+CgkJCTxwYXRoIGlkPSJzdmdfbG9nb0Z1bGxfeSIgZD0iTTEzNC4wNzEgMzguMjQ2Yy0zLjQ1NyA4LjUxMS01LjA4OCAxNy44MDUtOC41NDUgMjYuMzE3bDQuNC0xLjMzNmMtMC44NyAyLjkwNi0yLjM0NyA1LjU5NC00LjA2OCA4LjIgYy0yLjk4MyA0LjQxNi02LjQ1NSA4LjYwNS05LjE5NSAxMy4xMzNjLTIuMDQzIDMuNzg1LTUuNDcxIDEzLjI1Ni03LjEyNyAxNy44NjljLTIuMjEzIDYuMDcyLTQuNzg0IDEyLjE1NC04LjQ2MSAxNy40IGMwLjc5NS01LjMwNyAyLjMzNi05Ljc5OSAzLjYyMS0xNC43NmMyLjEzOS04LjQ2OSAxMC45ODItMjkuMDMzIDEwLjgxOC0zNC4zMTJjLTAuMjU4LTguMjc1LTEwLjUtMTMuMzU4LTEwLjc5Mi0yMi43MTMgYy0wLjAxMS0wLjM2MSAwLjA5NS0wLjg0NCAwLjA3OS0xLjMyM2wxNC4yMSAxNi44NDVjNi43NDEtMTEuMDE0IDEwLjg0LTI5Ljc0OSAyMC43NDctMzkuMzAxIEMxMzguNTYzIDI4LjMgMTM2IDMzLjUgMTM0LjEgMzguMjQ2eiIvPgoJCQk8cGF0aCBpZD0ic3ZnX2xvZ29GdWxsX2IiIGQ9Ik0xNjIuNDA4IDQ2LjEyOGMtMy40NzggMC4xMDctNS42NzEgMi45MzYtOC40MjkgMy4wMjFsLTEuODgzIDEuMjZjMi4xMDktMTMuMjcgNi40NTUtMjcuOTMyIDYuMjItMzUuNDg4IGMtMC4wNTItMS42OC0wLjM0OC0zLjQ3MS0xLTUuMTMxbC0xLjc4IDAuNjU1Yy0zLjA5NCAxMi40NjItNS45MzkgMjUuMTU2LTguNjcgMzcuNzI2Yy0xLjU3MSA3LjM3MS00LjMxNiAxNS42MjItNS45OTIgMTkuNiBjLTAuNTUyIDEuNTc4LTEuMDkyIDMuNTE2LTEuMDQzIDUuMDc0YzAuMTQ2IDQuNyAzLjcgNi40IDguMiA2LjIyOWMxMC41NTYtMC4zMyAyOC41MDItMTAuMDEyIDI4LjEyOC0yMi4wMDYgQzE3NS45ODMgNTAuMyAxNjkgNDUuOSAxNjIuNCA0Ni4xMjh6IE0xNTAuMTA3IDc1LjIwM2MtMi42MzggMC4wODItMy43NjctMS40NDMtMy44NDUtMy45NjMgYy0wLjI0Mi03Ljc5NSA2LjcwNy0xOS43NzggMTUuMzQ0LTIwLjA0NWM0Ljc5Ny0wLjE1IDguNCAzLjcgOC41IDguMzc3QzE3MC40MjQgNjguMyAxNTcuNyA3NSAxNTAuMSA3NS4yMDN6Ii8+CgkJCTxwYXRoIGlkPSJzdmdfbG9nb0Z1bGxfbyIgZD0iTTIwNy44MDcgNDIuNzk0Yy0zLjgzOCAwLjExOS03LjUxMiAxLjY3NS0xMC40NzMgMi45NjdjLTAuMzk3LTEuMTg4LTEuMjUyLTEuNjQyLTIuNDUxLTEuNjA0IGMtNC44NjQgMC4xNS04LjYxNSA3Ljk3MS0xMC41NzMgMTUuMTc2aDUuMDI4YzIuMTM5LTYuNDMgNy41MjYtMTEuOTk4IDE0LjA0MS0xMi4yYzQuMTk3LTAuMTMxIDYuNyAxLjcgNi44IDYgYzAuMjQ2IDcuOTE3LTcuMDc1IDE5LjU0OS0xNC43NTEgMTkuNzg4Yy00Ljc5OCAwLjE1LTYuOTI3LTIuNjY0LTcuMDY4LTcuMjIzYy0wLjAzNC0xLjEyMSAwLjA1My0yLjI2MiAwLjI0MS0zLjM5NWgtNS4wMDMgYy0wLjU1NiAyLjY1OC0wLjgyOSA1LjA0OS0wLjc3OCA2LjY4OWMwLjEzNSA0LjMgMS45IDkuMyA3LjEgOS4xNDNjMTIuNDczLTAuMzg5IDI1Ljk0OC0xNC44NTQgMjUuNTY0LTI3LjIwOCBDMjE1LjM2MSA0Ni40IDIxMi42IDQyLjYgMjA3LjggNDIuNzk0eiIvPgoJCQk8cGF0aCBpZD0ic3ZnX2xvZ29GdWxsX2kiIGQ9Ik0yMjEuNDE4IDc4Ljk4NmwtMC44ODEtMS4yOTNjMS40MzktMy44ODcgMS45MjQtOC42MjUgMi44ODUtMTIuNDk4YzEuMDYxLTQuNDc0IDMuMjctMTAuNjYzIDMuNTgtMTIuMjM1IGMwLjQyLTEuOTM0IDAuMzU3LTMuOTczIDAuNjU3LTUuOTAyYzAuMzUzLTAuMjUgMC43MDQtMC41MDIgMS4xODQtMC41MThjMC45Ni0wLjAyOSAxLjkgMC43IDMgMC42IEMyMzEuMTMzIDU0LjUgMjI4LjQgNzUuNSAyMjEuNCA3OC45ODZ6Ii8+CgkJCTxwYXRoIGlkPSJzdmdfbG9nb0Z1bGxfZCIgZD0iTTI5MC40NTEgOS42MDljLTAuNjAxIDAuMTYyLTEuMTI4IDAuMTkxLTEuNzM0IDAuNDQ0Yy0xLjg4IDEuNjY3LTMuMDcgNC4zOTItNC4xNzYgOC4yIGMtMi4xMzcgNy4zNTgtMi41NzEgMTMuNDgzLTMuOTA2IDI2Ljk2Yy04LjI2OSA0LjMzOC00MS4yNzUgOC40ODYtNDAuODA1IDIzLjU5OGMwLjEyNyA0LjEgMy45IDYuMiA3LjYgNi4xIGM4LjI3Ni0wLjI1OCAyMC42NjctNi4xODkgMjguMzQ4LTExLjA4OGMtMC41MDYgMy4wMTgtMC43NzIgNi4wMjctMC42NzUgOS4xNDZjMC4xMDEgMy4yIDAuNiA2LjQgMS44IDguNSBjMS41ODMtMC4yNzIgMi41MDgtMS44NyA0LjEwNy0zLjAxYy0wLjc1OC00LjU4MSAwLjY3Mi0xMi42NTcgMS45MS0xOS4xNzlDMjg2LjMyIDQyLjggMjkwLjggMjcuNiAyOTAuNSA5LjYwOXogTTI3Ny43MDUgNTUuMjY1Yy0zLjIxMyA4LjYyNC0xNy4yIDE0LjM0Mi0yNS44MzYgMTQuNjFjLTEuNzk5IDAuMDU3LTUuMDU3LTAuNDQzLTUuMTI3LTIuNzIzIGMtMC4yNTgtOC4yNzYgMTkuMzMtMTUuMzY4IDI2LjQwNi0xNS41ODhjMS41NTktMC4wNDcgNC44MDItMC4wMjkgNC45IDIuMTMxQzI3OC4wMzUgNTQuMyAyNzcuOSA1NC44IDI3Ny43IDU1LjI2NXoiLz4KCQkJPHBhdGggaWQ9InN2Z19sb2dvRnVsbF9lIiBkPSJNMzQ3LjgwNSA1NC44ODRjLTcuMDc2IDAuMjIxLTMyLjQ2MyAxNy42OTgtNDQuNTc4IDE4LjA3NWMtMi4zOTcgMC4wNzQtNS43OS0wLjktNS44ODMtMy44OTggYy0wLjQwMy0xMi45NTQgMzIuMTI1LTEzLjEyNSAzMS43MTktMjYuMTk4Yy0wLjEwOC0zLjQ3OC00LjYzMS02LjA5OC05LjA2OC01Ljk2Yy0xMy41NTQgMC40MjItMjcuNTkgMjMuOTA3LTI3LjI1NCAzNC43IGMwLjEzMSA0LjIgMi41IDYuMiA2LjcgNi4wMzVjOC42MzYtMC4yNyAyNi4zNzMtOC45ODQgMzQuNjU2LTEyLjg0NGMxLjg5My0wLjkgOS4yMjgtNC4zNyAxMS4xNDctNC40MyBjMS4xOTktMC4wMzcgMi4zOTUtMC4xOTUgMy40NjMtMC41ODhjMS4zMDktMC40IDIuMzU3LTEuMzk1IDMuMjkxLTIuMjY0QzM1MS4xOTMgNTUuNyAzNDkuNyA1NC44IDM0Ny44IDU0Ljg4NHogTTMxNy42NDYgNDIuNDk4bDIuMDM4LTAuMDYyYzEuNjgtMC4wNTMgNC4wNzktMC4xMjcgNS4xIDEuNDAxYy00LjYxMSA2LjE0Ni0xMS45NzMgOC43NzYtMTguOTc1IDExLjQgQzMwNi45MTkgNDguOCAzMTAuNCA0Mi43IDMxNy42IDQyLjQ5OHoiLz4KCQk8L2c+Cgk8L2c+Cjwvc3ZnPg==") no-repeat center center; } /* >–––––– BOUTON ––––––< */ .btnBox { position: relative; margin: 0 auto; } /* Default : gros, vertical, double */ .btn { position: absolute; left: 50%; top: 50%; width: 6.2rem; height: 14.4rem; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .btn .slot { position: absolute; left: 0; top: 0; width: 100%; height: 70%; cursor: n-resize; } .btn .slot.b { top: auto; bottom: 0; cursor: s-resize; } .btn .slot .f { position: absolute; width: 100%; height: 100%; border-radius: 3.1rem; background-color: #7d7d7d; opacity: 0.9; } .btn .slot .rond { position: absolute; left: 50%; top: 0.9rem; margin-left: -1.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: #eaeaea; } .btn .slot.b .rond { top: auto; bottom: 0.9rem; } .btn .souspastille {position: absolute; top:50%; width: 100%; height: 7.4rem; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); transform:translate(0,-50%); border-radius: 3.1rem; background-color: #d972ff; } .btn .souspastille.cnnx { background-color: #00B2EF; } .btn .pastille { position: absolute; left: 50%; top: 50%; } .btn .pastille svg { position: absolute; margin: -4.5rem 0 0 -4.5rem; width: 9rem; height: 9rem; /*-ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);*/ } /* translate buggy sous Safari 6- (iOS, Mac OS) (et Chrome 3GS), probabl. car svg 'en dehors' de .pastille /* Mini */ .btn.m { -ms-transform:translate(-50%,-50%) scale(0.75,0.75); -webkit-transform:translate(-50%,-50%) scale(0.75,0.75); -moz-transform:translate(-50%,-50%) scale(0.75,0.75); transform:translate(-50%,-50%) scale(0.75,0.75); } /* Horizontal */ .btn.h { width: 14.4rem; height: 6.2rem; } .btn.h .slot { left: 0; top: 0; width: 70%; height: 100%; cursor: w-resize; } .btn.h .slot.b { left: auto; right: 0; bottom: auto; cursor: e-resize; } .btn.h .slot .rond { left: 0.9rem; top: 50%; margin-left: 0; margin-top: -1.1rem; } .btn.h .slot.b .rond { left: auto; right: 0.9rem; bottom: auto; } .btn.h .souspastille { left: 50%; top: 0; width: 7.4rem; height: 100%; -ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); transform:translate(-50%,0); } /* Single slot */ .btn.s { height: 7.2rem; -ms-transform:translate(-50%,-25%); -webkit-transform:translate(-50%,-25%); -moz-transform:translate(-50%,-25%); transform:translate(-50%,-25%); } .btn.s .slot { height: 100%; } .btn.s .slot .f { border-radius: 0 0 3.1rem 3.1rem; } .btn.s .souspastille { top: 0; } .btn.s .pastille { top: 0; } /* Single slot ajustements h, m */ .btn.h.s { width: 7.2rem; height: 6.2rem; -ms-transform:translate(-25%,-50%); -webkit-transform:translate(-25%,-50%); -moz-transform:translate(-25%,-50%); transform:translate(-25%,-50%); } .btn.h.s .slot { width: 100%; } .btn.h.s .slot .f { border-radius: 0 3.1rem 3.1rem 0; } .btn.h.s .souspastille { left:0; top: 0; } .btn.h.s .pastille { left: 0; top: 50%; } .btn.m.s { -ms-transform:translate(-50%,-30%) scale(0.75,0.75); -webkit-transform:translate(-50%,-30%) scale(0.75,0.75); -moz-transform:translate(-50%,-30%) scale(0.75,0.75); transform:translate(-50%,-30%) scale(0.75,0.75); } .btn.m.h.s { -ms-transform:translate(-30%,-50%) scale(0.75,0.75); -webkit-transform:translate(-30%,-50%) scale(0.75,0.75); -moz-transform:translate(-30%,-50%) scale(0.75,0.75); transform:translate(-30%,-50%) scale(0.75,0.75); } svg.bleu { background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMCAtMTAgMTIwIDEyMCI+Cgk8bGluZWFyR3JhZGllbnQgaWQ9IkdMX2JsZXVfcGFzdGlsbGUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iODcuMTU4MiIgeTE9IjgzLjQ1NyIgeDI9IjEyLjg0MjMiIHkyPSIxNi41NDI3Ij4KICAgICAgICA8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojMDM0RUExIi8+CiAgICAgICAgPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAwQjJFRiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8ZmlsdGVyIGlkPSJEU19wYXN0aWxsZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlQWxwaGEiIHN0ZERldmlhdGlvbj0iNCA0IiByZXN1bHQ9ImJsdXIiLz4gCiAgICAgIDxmZU9mZnNldCBpbj0iYmx1ciIgZHg9IjAiIGR5PSIyIiByZXN1bHQ9Im9mZnNldF9ibHVyIi8+IAogICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIwIDAgMCAwIDAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDAgMCAwIDAgMAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMCAwIDAgMCAwCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwIDAgMCAwLjcgMCIgaW49Im9mZnNldF9ibHVyIiByZXN1bHQ9Im1hdHJpeCIvPgogICAgICA8ZmVDb21wb3NpdGUgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0ibWF0cml4IiBvcGVyYXRvcj0ib3ZlciIvPgogICAgPC9maWx0ZXI+Cgk8IS0tIDAgMCAxMDAgMTAwIC0tPgoJPGNpcmNsZSBpZD0ic3ZnX2NlcmNsZSIgc3R5bGU9ImZpbGw6dXJsKCNHTF9ibGV1X3Bhc3RpbGxlKSIgZmlsdGVyPSJ1cmwoI0RTX3Bhc3RpbGxlKSIgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIi8+Cjwvc3ZnPg==") no-repeat center center; } svg.orange { background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMCAtMTAgMTIwIDEyMCI+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9IkdMX3Bhc3RpbGxlIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ijg3LjE1ODIiIHkxPSI4My40NTciIHgyPSIxMi44NDIzIiB5Mj0iMTYuNTQyNyI+CiAgICAgICAgPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGMzAwMCIvPgogICAgICAgIDxzdG9wICBvZmZzZXQ9IjAuOSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGOUUwMCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8ZmlsdGVyIGlkPSJEU19wYXN0aWxsZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlQWxwaGEiIHN0ZERldmlhdGlvbj0iNCA0IiByZXN1bHQ9ImJsdXIiLz4gCiAgICAgIDxmZU9mZnNldCBpbj0iYmx1ciIgZHg9IjAiIGR5PSIyIiByZXN1bHQ9Im9mZnNldF9ibHVyIi8+IAogICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIwIDAgMCAwIDAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDAgMCAwIDAgMAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMCAwIDAgMCAwCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwIDAgMCAwLjcgMCIgaW49Im9mZnNldF9ibHVyIiByZXN1bHQ9Im1hdHJpeCIvPgogICAgICA8ZmVDb21wb3NpdGUgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0ibWF0cml4IiBvcGVyYXRvcj0ib3ZlciIvPgogICAgPC9maWx0ZXI+Cgk8IS0tIDAgMCAxMDAgMTAwIC0tPgoJPGNpcmNsZSBpZD0ic3ZnX2NlcmNsZSIgc3R5bGU9ImZpbGw6dXJsKCNHTF9wYXN0aWxsZSkiIGZpbHRlcj0idXJsKCNEU19wYXN0aWxsZSkiIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPgo8L3N2Zz4=") no-repeat center center; } /* >–––––– NAV SIDE BTNS (pastilles translucides) ––––––< */ .npt { position: absolute; } .npt.r { right:-10rem; top: 30%; width: 9.5rem; height: 9.5rem; } /* show pos = right:-4.2rem */ .npt svg:first-child { position: absolute; width: 100%; height: 100%; fill:#9c71ff; stroke:#9c71ff; } .npt svg.icon { position: absolute; fill:#524f54; } /* >–––––– TEXTS ––––––< */ h1, h2, h3 { font-weight: normal; } p { font-size: 1.5rem; line-height: 2rem; color: #524f54; } .cursive { font-family: "Swordtail W01 Regular", sans-serif; letter-spacing: 0.2rem; color: #524f54; } a { font-family: "Century Gothic W01 Bold", sans-serif; } a:link, a:active, a:visited { color: #0193d7;/*color: #027ec7;*/ text-decoration: none; } /*a:hover, a:active { outline: none; }*/ a:hover { color: #524f54; } b, strong { font-family: "Century Gothic W01 Bold", sans-serif; font-weight: normal; } i, em { font-family: "CenturyGothicW01-Italic", sans-serif; font-style: normal; } .b_i { font-family: "CenturyGothicW01-BoldIt", sans-serif; } /* >–––––––––––––––––––––––––––––––––––––– MENU –––––––––< */ /* >–––––– BTN ––––––< */ #iMenuBtn { position: absolute; left: 3rem; top: 1rem; } #iMenuBtn .btnBox { width: 7rem; height: 9rem; } #iMenuBtn .souspastille { cursor: n-resize; background-color: #9C72FF; } #iMenuBtn .souspastille .rond { position: absolute; left: 50%; top: 0.9rem; margin-left: -1.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: #eaeaea; } #iMenuBtn .pastille div { position: absolute; left: 50%; top: 50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); font-size: 1.9rem; color: #dcdcdc; line-height: 1.9rem; letter-spacing: 0.1rem; text-align: center; } /* >–––––– MENU ––––––< */ nav#iMenu { position: relative; width: 100%; height: 0; background-color: #bfbfbf; overflow: hidden; } nav#iMenu .bBox { position: absolute; left:-100%; width: 200%; height: 100%; } nav#iMenu .dragBox { display: inline-block; vertical-align: top; width: 50%; min-height: 100%; } nav#iMenu .dragBox>div { display: inline-block; } nav#iMenu .dragBox.s>div { box-sizing:border-box; vertical-align: top; text-align: right; width: 36rem; } /* box-sizing pour padding-bottom sous reactif */ nav#iMenu .dragBox.m>div>div { box-sizing:border-box; display: inline-block; vertical-align: top; text-align: right; display: inline-flex; flex-flow:row wrap; } nav#iMenu .dragBox.m>div>div:first-child { margin-right: 5rem; width: 36rem; } nav#iMenu .dragBox.m>div>div:last-child { width: 18rem; } /* Bouton items */ nav#iMenu .box { display: inline-block; vertical-align: top; margin: 2.25rem 2rem 2.25rem; text-align: center; } nav#iMenu .box.acc { order: 1; } nav#iMenu .box.serv { order: 2; } nav#iMenu .box.cont { order: 3; } nav#iMenu .box.cyb { order: 4; } nav#iMenu .box.guide { order: 6; } nav#iMenu .box.prom { order: 5; } nav#iMenu .cursive { max-width: 14rem; font-size: 3rem; line-height: 3rem; } nav#iMenu .cursive.current { color: #7339f9; } nav#iMenu .btnBox { width: 14rem; height: 8.2rem; } nav#iMenu .btn.d { left: 38%; } nav#iMenu .btn .slot.t { left: 8%; width: 62%; } nav#iMenu .btn .slot.t .f { background-color: #5c5c5c; } nav#iMenu .slot .menu { position: absolute; left: 0.9rem; top: 50%; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); transform:translate(0,-50%); width: 1rem; height: 1.4rem; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNzAiPgoJPGcgZmlsbD0iI2VhZWFlYSI+Cgk8cG9seWdvbiBwb2ludHM9IjEwMCw0IDAsNCAwLDAgMTAwLDAgMTAwLDQiLz4KCTxwb2x5Z29uIHBvaW50cz0iMTAwLDM3IDAsMzcgMCwzMyAxMDAsMzMgMTAwLDM3Ii8+Cgk8cG9seWdvbiBwb2ludHM9IjEwMCw3MCAwLDcwIDAsNjYgMTAwLDY2IDEwMCw3MCIvPgoJPC9nPgo8L3N2Zz4=") no-repeat center center; background-size: cover; } nav#iMenu .box.m { margin-bottom: 0; } nav#iMenu .box.lang { order: 1; } nav#iMenu .box.cnnx { order: 2; } nav#iMenu .box.cart { order: 3; } nav#iMenu .box.m .btnBox { height: 6rem; } nav#iMenu .slot.b.current .f { background-color: #9C72FF; } nav#iMenu .arrows { display: block; position: absolute; /*left: 5rem;*/left: 6%; top: 45%; width: 3.5rem; opacity: 0; } nav#iMenu .arrows svg { margin-bottom: 1.5rem; width: 100%; height: 1.4rem; fill: #3a393a; } nav#iMenu .autres { display: none; position: absolute; left: 2rem; bottom: 2.5rem; font-family: "Century Gothic W01", sans-serif; font-size: 1.5rem; line-height: 1.5rem; color: #3b393b; } nav#iMenu .autres:hover { cursor: pointer; color: #027ec7; } nav#iMenu .socials { position: absolute; right: 2rem; bottom: 2.5rem; width: 2.5rem; } nav#iMenu .socials a svg { display: block; position: relative; top: 0; margin-top: 2.5rem; width: 100%; height: 2.5rem; fill: #787878; } nav#iMenu .socials a svg:hover { cursor: pointer; fill: #027ec7; } nav#iMenu .google { margin-left: 0.2rem; } nav#iMenu .facebook { margin-left: -0.2rem; } nav#iMenu .socials .detente { display: none; position: relative; margin-top:2.5rem; width: 100%; height: 2rem; text-align: center; } nav#iMenu .socials .detente svg { position: absolute; left: 50%; top: 50%; margin: -1rem 0 0 -1rem; width: 2rem; height: 2rem; fill: #a8a8a8; } nav#iMenu .socials .detente svg:hover { cursor: pointer; fill: #787878; } nav#iMenu .npt.back svg.icon { left: 10%; top: 50%; margin-top:-20%; width: 40%; height: 40%; } /* >–––––– TOP MENU ––––––< */ nav#iTopMenu { position: absolute; right: 2rem; top: 1.4rem; height: 6rem; } nav#iTopMenu li, nav#iTopMenu div { display: inline-block; vertical-align: top; height: 100%; } nav#iTopMenu li { box-sizing:border-box; padding: 2rem 2.5rem 0; font-family: "Swordtail W01 Regular", sans-serif; letter-spacing: 0.2rem; font-size: 3.6rem; line-height: 3.6rem; } nav#iTopMenu .logo_c { margin-left: 1.5rem; width: 6rem; /* logo carré */ } nav#iTopMenu .logo { display: none; margin-top: 0.5rem; width: 17.9rem; /* logo full */ } nav#iTopMenu:hover { cursor: pointer; } nav#iTopMenu a { color: #787878; } nav#iTopMenu a:hover { color: #027ec7; } /* >–––––– SIDE MENU ––––––< */ nav#iSideMenu { position: absolute; right: -12rem; top: 0; width: 12rem; height: 100%; background-color: #bfbfbf; overflow: hidden; } nav#iSideMenu .dragBox { box-sizing:border-box; padding: 3rem 0 0.1rem; min-height: 100%; } nav#iSideMenu .box { margin-bottom: 4rem; text-align: center; } nav#iSideMenu .box svg.icon { width: 4rem; height: 4rem; fill:#e6e6e6; } nav#iSideMenu .cursive { font-size: 2rem; line-height: 2rem; color: #524d4d; } nav#iSideMenu .btnBox { width: 100%; height: 6rem; } nav#iSideMenu hr { margin: 0 2rem 4rem; border-top: 1px solid #eaeaea; } /* >–––––––––––––––––––––––––––––––––––––– LANDING –––––––––< */ #iContenu .landing .box/*.carrefour*/ { position: absolute; top: 50%; width: 100%; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); transform:translate(0,-50%); text-align: center; } #iContenu .landing .box.carrefour { top: 45%; } #iContenu .landing /*.carrefour */.btnBox { margin-top: 2.5rem; margin-bottom: 3.25rem; width: 9rem; height: 16rem; } #iContenu .landing /*.carrefour */.cursive, #iContenu .landing h1 { padding: 0 2rem 0; font-size: 4.8rem; line-height: 4.8rem; } /* padding pour réactif */ #iContenu .landing footer { position: absolute; bottom: 4rem; width: 100%; text-align: center; font-size: 1rem; letter-spacing: 0.1rem; line-height: 1rem; color: #000000; } /* >–––––––––––––––––––––––––––––––––––––– RÉACTIF –––––––––< */ @media all and (min-width: 1300px) { /* >–––––– MENU / MENU ––––––< */ nav#iMenu .dragBox.m>div>div:first-child { margin-right: 12rem; width: 54rem; } nav#iMenu .dragBox.s>div { width: 72rem; } nav#iMenu .box.guide { order: 5; } nav#iMenu .box.prom { order: 6; } /* >–––––– TOP MENU ––––––< */ nav#iTopMenu .logo_c { display: none; } nav#iTopMenu .logo { display: inline-block; } } @media all and (max-width: 800px) { /* >–––––– GLOBAL ––––––< */ #iContenu>.bBox>div#iVP { top: 6.4rem; } /* >–––––– SECTION HEADER ––––––< */ #iContenu section header { padding: 4rem 1.8rem 0; } #iContenu section header .cursive { font-size: 4.8rem; line-height: 4.5rem; } #iContenu section header h1 { font-size: 4rem; line-height: 4rem; } /* >–––––– MENU / MENU ––––––< */ nav#iMenu .dragBox.m>div>div { padding-bottom: 1.25rem; } nav#iMenu .dragBox.m>div>div:first-child { margin-right: 0; width: 18rem; } nav#iMenu .dragBox.s>div { width: 36rem; padding-bottom: 1.25rem; } nav#iMenu .box { margin-bottom: 1rem; } nav#iMenu .arrows { left: 10%; } /* >–––––– TOP MENU ––––––< */ nav#iTopMenu { right: 2rem; top: 1.4rem; height: 5rem; } nav#iTopMenu li { padding: 1.8rem 1.8rem 0; font-size: 3rem; line-height: 3rem; } nav#iTopMenu div { margin-left: 0.8rem; width: 5rem; } } @media all and (max-width: 600px) { /* >–––––– GLOBAL ––––––< */ #iContenu>.bBox>div#iVP { position: relative; top: auto; bottom: auto; height: 100%; } /* back to !#iVP */ #iContenu>.bBox>div#iVP section { height: 100vh; } #iContenu>.bBox>div#iVP section.isf { min-height: 100vh; } /* >–––––– SECTION HEADER ––––––< */ #iContenu section header { padding: 9rem 1.8rem 0; } #iContenu section header .logo { display: block; } #iContenu section header .cursive { font-size: 3.2rem; line-height: 3rem; } #iContenu section header h1 { margin-bottom: 2.6rem; font-size: 3.4rem; line-height: 3.4rem; } #iContenu section header p { display: none; } /* >–––––– TEXTS ––––––< */ p { font-size: 1.4rem; line-height: 1.9rem; } /* >–––––– BOUTON ––––––< */ #iMenuBtn .btn.m.s { -ms-transform:translate(-50%,-30%) scale(0.55,0.55); -webkit-transform:translate(-50%,-30%) scale(0.55,0.55); -moz-transform:translate(-50%,-30%) scale(0.55,0.55); transform:translate(-50%,-35%) scale(0.55,0.55); } /* >–––––– NAV SIDE BTNS ––––––< */ .npt.r { top: 20%; width: 8rem; height: 8rem; } /* >–––––– MENU / BTN ––––––< */ #iMenuBtn { left: 1rem; } #iMenuBtn .btnBox { width: 6rem; height: 7rem; } /* >–––––– MENU / MENU ––––––< */ nav#iMenu .dragBox.m>div>div { display: block; display: flex; } nav#iMenu .dragBox.s>div { display: block; width: 18rem; } nav#iMenu .box.lang { order: 3; } nav#iMenu .box.cart { order: 1; } nav#iMenu .box.m { margin-bottom: 1rem; } nav#iMenu .box.m .btnBox { height: 7.8rem; } /* plus que 7, pour descendantes (English) */ nav#iMenu .autres { left: 1rem; bottom: 2rem; font-size: 1.3rem; line-height: 1.3rem; } nav#iMenu .socials { right: 1.5rem; bottom: 2rem; } nav#iMenu .socials .detente { display: block; } nav#iMenu .npt.back svg.icon { left: 6%; } /* >–––––– TOP MENU ––––––< */ nav#iTopMenu { display: none; /*right: 1rem;*/ } } @media all and (max-width: 400px) { /* >–––––– GLOBAL ––––––< */ .site_preloader { height: 1.5rem; font-size: 1.5rem; line-height: 1.5rem; } /* >–––––– LANDING ––––––< */ #iContenu .landing /*.carrefour */.btnBox { margin-top: 2rem; margin-bottom: 2.75rem; } #iContenu .landing footer { bottom: 2rem; } } @media all and (max-height: 400px) { /* >–––––– LANDING ––––––< */ #iContenu .landing /*.carrefour */.btnBox { margin-top: 0.8rem; margin-bottom: 1.3rem; } #iContenu .landing /*.carrefour */.cursive, #iContenu .landing h1 { padding: 0 1rem 0; font-size: 4.2rem; line-height: 4.2rem; } #iContenu .landing footer { bottom: 1.5rem; } } @media all and (orientation:landscape) { div#iLandscape { text-align: center; } /* >–––––– MENU / MENU ––––––< */ nav#iMenu .npt.r { top: 15%; width: 8rem; height: 8rem; } } @media all and (max-height: 480px) and (orientation:landscape) { /* 670 : iPhone 6 ; ... devrait plutôt faire seul. 480 + landscape ?? */; div#iLandscape { display: block; }/* some in js onCanvas_Resize Master */ }