/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RESET */ * { box-sizing:border-box; } html { position:relative; display:block; } body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Montserrat, sans-serif; font-size:0.8rem; font-weight:300; line-height:1.4; background-color:#ffffff; color:#000000; text-align:left; overflow-x:hidden; overflow-y:scroll; } body.noscrollbar { overflow-y:hidden; } header, main, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-x:hidden; } h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Montserrat, sans-serif; font-size:1.5rem; font-weight:700; color:inherit; } div { position:relative; margin:0; padding:0; } a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; } body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; } img { margin:0; padding:0; border:0; } svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; } p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; } p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; } span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; } ul { position:relative; margin:0; padding:0; } li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; } .fromrte ul { margin-left:1em; } .wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; } .cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } .cover.top { top:0; transform:translate(-50%,0); } .cover.bottom { top:100%; transform:translate(-50%,-100%); } .cover.left { left:0; transform:translate(0,-50%); } .cover.topleft { left:0; top:0; transform:translate(0,0); } .cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); } .cover.right { left:100%; transform:translate(-100%,-50%); } .cover.topright { left:100%; top:0; transform:translate(-100%,0); } .cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); } .cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; } .clear { clear:both; } .blochref { cursor:pointer; } pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; } .ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); } .ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:#000000; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Mise en forme spécifique des formulaires */ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:rgba(221,221,221,1); color:rgba(22,22,22,1); line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } textarea { height:6em; } select { background-image:url(https://www.orme.com/_chartes_/orme/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; } select::-ms-expand { display: none; } select option { color:rgba(22,22,22,1); } select.placeholder { color:rgba(54,54,54,0.55) !important; } /* Mise en forme des boutons radio et des checkboxes */ input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:'' !important; position:absolute !important; left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */ width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */ transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */ transition:all .2s !important; /* on prévoit une animation */ } input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */ input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid rgba(221,221,221,1) !important; background-color:transparent !important; } /* Aspect général de la case */ input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(221,221,221,1) !important; } /* Aspect général de la coche */ input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */ input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */ input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */ label { position:relative; display:inline-block; vertical-align:top; font-weight:300; } button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Montserrat, sans-serif; font-size:inherit; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:#ffffff; margin:0; padding:0.5em 1em; width:auto; outline:0; } body.desktop button:hover, body.desktop a.button:hover { color:rgba(22,22,22,1); background-color:#ffffff; border-color:rgba(22,22,22,1); text-decoration:none; outline:0; } html { margin:0; padding:0; } .clear { clear:both; } .blochref, .blochrefpopin { cursor:pointer; } body { font-family:Montserrat, sans-serif; background-color:#000000; color:#706F6F; font-size:1.8rem; font-weight:200; text-align:left; width:100%; position:relative; overflow-x:hidden; overflow-y:scroll; } /* Liens par défaut */ a, a:link, a:active, a:visited, a:focus { color:inherit; text-decoration:inherit; outline-color:transparent; } a:hover { color:inherit; text-decoration:underline; } a.form { clear:both; margin: 2% 0 2% 0; } a.btn { color:#ffffff; } a.ancre { display:block !important; position:absolute !important; margin:0 !important; padding:0 !important; width:0 !important; height:30rem !important; overflow:hidden !important; top:-9rem !important; z-index:100000 !important; } body.scroll a.ancre { top:-9rem !important; } img { padding:0; margin:0; border:0; } /* Paragraphes par défaut */ p { word-wrap:break-word; text-align:left; margin:0; padding-bottom:1em; } span { font-size:inherit; } /* La largeur de la classe liquide est définie dans la feuille de style RESPONSIVE */ .liquide { display:block; clear:both; position:relative; margin:0 auto; padding:0; } /* AJAX LOADER */ .ajaxloading { width:100% !important; background:transparent url('../../_chartes_/orme/ressources/images/ajax-loader.gif') center 5rem no-repeat !important; min-height:20rem !important; } .ajaxloading.white { background-image:url('../../_chartes_/orme/ressources/images/ajax-loader.gif') !important; } .popin .ajaxloading { background-image:url('../../_chartes_/orme/ressources/images/ajax-loader.gif') !important; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Mise en forme spécifique des formulaires */ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ input, textarea, select { font-size:inherit; display:inline-block; background-color:#ededed; color:#161616; line-height:2em; height:2em; vertical-align:middle; padding:0.1em 0.3em 0 0.3em; margin:0; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } textarea { height:6em; } select { background-image:url(https://www.orme.com/_chartes_/orme/ressources/images/dropdown.png) !important; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; } select::-ms-expand { display: none; } select option { color:#161616; } select.placeholder { color:rgba(54,54,54,0.55) !important; } /* Mise en forme des boutons radio et des checkboxes */ input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:'' !important; position:absolute !important; left:0.1em !important; top:0.1em !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */ width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */ transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */ transition:all .2s !important; /* on prévoit une animation */ } input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */ input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { width:1em !important; height:1em !important; border:1px solid #ededed !important; background-color:transparent !important; } /* Aspect général de la case */ input[type="radio"] + span:after, input[type="checkbox"] + span:after { background-color:rgba(221,221,221,1) !important; } /* Aspect général de la coche */ input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */ input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { width:1.2em !important; height:1.2em !important; } /* élargissement à 120% */ input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { width:0.6em !important; height:0.6em !important; opacity:1 !important; transform: scale(1) !important; } /* Aspect si "cochée" */ .linefeed { padding-top:1rem; } label { font-weight:200; position:relative; } button, a.button { display:inline-block; font-size:1.5rem; text-transform:uppercase; text-align:center; background-color:#161616; border:1px solid #161616; color:#ffffff; margin:0; padding:0.5rem 1.5rem; width:auto; } button:hover, a.button:hover { color:#161616; background-color:#ffffff; text-decoration:none; } button.btn-primary, button.btn-primary:focus, button.btn-primary:hover { background-color:#161616; border-color:#161616; color:#ffffff; } button.btn { margin-top:1em; } .asterisque { display:block !important; float:none !important; font-size:0.8rem !important; font-weight:100 !important; clear:both !important; text-transform:none !important; } .reponse { text-transform:uppercase; text-align:center; margin:0 2rem; } .reponse.succes { font-size:1.4rem; color:#706F6F; padding:5rem 0; } .reponse.erreur { font-size:1rem; color:#ab2727; padding:0.5rem 0 2.5rem 0; } .reponse li { font-size:0.8rem; text-transform:none; text-align:center; margin:1em 0 0 0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ #logo-container { z-index:15; position:fixed; display:block; left:0; top:0; width:100%; } #logo-container > div { position:relative; width:100%; height:20rem; display:block; margin:0 auto; background-color:transparent; transition:background-color 800ms ease-out 0ms, height 0ms linear 500ms; } #logo-container .logo { position:absolute; display:block; top:2.5rem; left:10rem; width:14rem; height:3.45rem; overflow:hidden; transition:all 400ms ease-in 100ms; } #logo-container .logo a { position:relative; display:inline-block; width:100%; height:100%; } #logo-container .logo a img, #logo-container .logo a svg { position:absolute; display:block; margin:0; padding:0; width:100%; height:100%; left:0; top:0; } /* Le not outside est utile pour ne colorer le logo en blanc que sur le diaporama (la classe outside est ajoutée au scroll en js) */ body.accueil:not(.outside) #logo-container .logo path, body.accueil:not(.outside) #logo-container .logo rect { fill:#ffffff; } #logo-container .baseline { position:absolute; z-index:15; top:7rem; left:14.5rem; width:auto; height:auto; overflow:hidden; margin:1rem 0 0 0; padding:1.25rem 0 0 2rem; border-left:1px solid #fff; text-transform:uppercase; color:#ffffff; font-size:1.9rem; line-height:1em; transition:padding-top 500ms ease-out 0ms, margin-top 500ms ease-out 0ms, left 500ms ease-in 0ms, font-size 500ms ease-out 0ms, top 500ms ease-out 0ms, color 500ms linear 0ms, border-color 500ms linear 0ms; } #logo-container .baseline span:nth-child(1) { display:inline-block; font-weight:400; } #logo-container .baseline span:nth-child(2) { display:inline-block; font-weight:normal; text-transform:none; font-family:'Didot-Italic'; } #logo-container .baseline span:nth-child(3) { font-size:0.9em; line-height:0.8em; padding-top:0.1em; display:block; font-weight:100; } body.scroll #logo-container > div { height:5rem; transition:background-color 500ms linear 0ms, height 0ms linear 0ms; } body.scroll #logo-container .logo { top:1.5rem; width:10rem; height:2.47rem; transition:all 500ms ease-in 0ms } body.scroll #logo-container .baseline { top:0; left:23rem; font-size:1.3rem; margin-top:0.5rem; transition: left 500ms ease-out 0ms, margin-top 400ms ease-in 100ms, font-size 400ms ease-in 100ms, top 300ms ease-in 200ms; } body.scroll.outside #logo-container > div { background-color:rgba(255,255,255,0.98); } body.scroll.outside #logo-container .baseline { color:#3e3e3e; border-color:#3e3e3e; } .interne #logo-container > div { height:5rem; background-color:rgba(255,255,255,0.98); transition:all 0ms linear 0ms; } .interne #logo-container .logo { top:1.5rem; width:10rem; height:2.47rem; transition:all 0ms ease-in 0ms } .interne #logo-container .baseline { top:0; left:23rem; font-size:1.3rem; margin-top:0.5rem; color:#3e3e3e; border-color:#3e3e3e; transition: all 0ms ease-in 0ms; } header nav { position:absolute; left:0; top:0; } a#downloads { z-index:100; position:fixed; top:2rem; right:0; width:auto; height:5rem; padding:1.9rem 4rem; font-size:1.2rem; line-height:1em; text-transform:uppercase; color:#ffffff; background-color:#3adace; font-weight:600; transition:background-color 300ms linear, color 300ms linear, top 500ms linear; } a#downloads:hover { text-decoration:none; color:#3adace; background-color:#ffffff; } body.scroll a#downloads { top:0; } .interne a#downloads { top:0; transition:background-color 300ms linear, color 300ms linear; } /*------------------------------ MENU --------------------------*/ a#menu-show { display:block; opacity:1; z-index:3333; position:fixed; top:0; left:0; width:5rem; height:5rem; padding:1rem 1.4rem; background-color:#3adace; font-weight:200; font-size:2rem; transition:background-color 300ms linear; } a#menu-show img, a#menu-show svg { position:absolute; display:block; margin:0; padding:0; width:45%; height:45%; left:50%; top:50%; transform: translate(-50%, -50%); } a#menu-show path { fill:#ffffff; transition:fill 300ms linear; } a#menu-show:hover { text-decoration:none; background-color:#ffffff; } a#menu-show:hover path { fill:#3adace; transition:fill 500ms linear; } a#menu-show.hide { display:none; opacity:0; } a#menu-hide { display:none; opacity:1; z-index:3334; position:fixed; top:0; left:0; width:5rem; height:5rem; padding:1rem 1.4rem; background-color:#ffffff; font-weight:200; font-size:2rem; transition:background-color 300ms linear;} a#menu-hide img, a#menu-hide svg { position:absolute; display:block; margin:0; padding:0; width:40%; height:40%; left:50%; top:50%; transform: translate(-50%, -50%); } a#menu-hide path { fill:#3adace; transition:fill 300ms linear; } a#menu-hide:hover { text-decoration:none; background-color:#3adace; } a#menu-hide:hover path { fill:#ffffff; transition:fill 500ms linear; } a#menu-hide.show { display:block; opacity:1; } #menu-container { z-index:2222; overflow:hidden; position:fixed; margin:0; padding:0; top:-100%; left:-50%; height:100%; width:100%; transition:top 0ms linear 500ms, left 500ms linear 0ms; } #menu-container.show { left:0; top:0; transition:top 0ms linear 0ms, left 500ms linear 0ms; } #menu-mask { content: ""; position:absolute; left:0; top:0; width:0; height:0; background-color:transparent; transition: background-color 500ms linear 500ms; } #menu-container.show #menu-mask { width:100%; height:100%; background-color:rgba(0,0,0,0.01); } #menu-background { position:absolute; left:0; top:0; height:100%; background-color:rgba(38,48,67,0.95); width:48%; transition:width 500ms linear 0ms; } /* La largeur du sous-menu est gérée en JS #menu-container.sousmenu #menu-background { width:65%; } */ #menu-background > div { position:absolute; padding:1rem 3rem 1rem 1rem; width:48rem; height:auto; left:0; top:50%; transform:translateY(-50%); color:#ffffff; text-align:right; font-size:0; } #menu-background > div > div { position:relative; display:block; height:auto; width:100%; text-align:right; } #menu-container ul { line-height:1em; } #menu-container li { line-height:1em; } #menu-container a { display:inline-block; white-space:nowrap; line-height:1em; } #menu-container a:hover, #menu-container a.current { text-decoration:none; color:#3adace; } div#menu-logo > img, div#menu-logo > svg { position:relative; display:inline-block; margin:0 1.5rem 0 0; padding:0; width:14rem; height:3.45rem; } div#menu-logo path, div#menu-logo rect { fill:#ffffff; } ul#langues { display:inline-block; border:1px solid rgba(255,255,255,0.5); margin:3rem 1.5rem 0 0; padding:0.5rem 0; width:auto; } ul#langues li { font-size:1.1rem; text-transform:uppercase; display:inline-block; padding:0 0.5rem; } ul#langues li { border-left: 1px solid rgba(255,255,255,0.5); } ul#langues li:first-of-type { border-left: 0; } ul#menu { display:inline-block; width:23rem; margin:3rem 0 0 0; padding:0; } ul#menu > li { position:relative; width:23rem; display:block; font-size:1.6rem; padding:0 0 1.5rem 0; text-align:right; } ul#menu > li > a { position:relative; width:auto; display:inline-block; padding-right:1.5rem; border-right:1px solid transparent; font-weight:200; text-transform:uppercase; } ul#menu > li:hover > a, ul#menu > li > a.hover { color:#3adace; } ul#menu > li.sousarbo:hover > a, ul#menu > li.sousarbo > a.hover { border-color: #3adace; } ul#menu li.downloads { margin-top:0; padding-top:1em; } ul#menu li.downloads:before { content: ""; position: absolute; top:-1px; left:-1px; right:1.5rem; height:1px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(#3adace)); background-image: -webkit-linear-gradient(left, transparent, #3adace); background-image: -moz-linear-gradient(left, transparent, #3adace); background-image: -o-linear-gradient(left, transparent, #3adace); } ul#menu > li > ul { display:block; position:absolute; top:0; left:100%; max-width:0; width:auto; height:auto; overflow:hidden; margin:0; padding:0.3rem 0 0 0; transition: max-width 0ms linear 500ms; } ul#menu > li:hover > ul, ul#menu > li > a.hover ~ ul { max-width:100%; transition: max-width 0ms linear 0ms; } ul#menu > li > ul > li { position:relative; width:100%; display:block; font-size:1.2rem; padding-right:1.5rem; padding-bottom:1.5rem; overflow:hidden; font-weight:200; text-transform:uppercase; } ul#menu > li > ul > li a { left:-100%; opacity:0; position:relative; width:100%; display:inline-block; text-align:left; padding-left:1.5rem; transition:left 500ms linear 0ms, opacity 200ms linear 0ms; } ul#menu > li:hover > ul > li a, ul#menu > li > a.hover ~ ul > li a { left:0; opacity:1; } /*------------------------------ SLIDER --------------------------*/ #preload { position:fixed; left:0; top:0; margin:0; padding:0; width:100%; height:100%; z-index:9999; background-color:#ffffff; } #preload > div.logo { position:absolute; display:block; margin:0; padding:0; width:50%; height:50%; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; } #preload img, #preload svg { position:absolute; display:block; margin:0; padding:0; width:100%; height:100%; left:0; top:0; } #preload .loadingbar { margin:0 auto; position:absolute; display:block; bottom:3rem; left:50%; transform:translateX(-50%); } #preload .ldBar-label { color:transparent; margin:0 auto; position:absolute; display:block; bottom:1rem; left:50%; transform:translateX(-50%); font-size:0.8rem; } #slider-container { z-index:5; position:relative; display:block; width:100%; height:100%; padding:0; margin:0; overflow:hidden; background-color:rgba(38,48,67,1); } #slider-container img { max-width:none; } #slider-container .slide { z-index:5; position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; } #slider-container .fadein { opacity:1; transition: opacity 1s linear; } #slider-container .fadeout { opacity:0; transition: opacity 1s linear; } #slider-container .slide .legend { position:absolute; width:auto; display:inline-block; right:2rem; bottom:2rem; color:#fff; text-transform:uppercase; font-weight:300; font-size:1.4rem; } #slider-container .mousescroll { position:absolute; z-index:1000; left:50%; transform:translateX(-50%); bottom:0; width:auto; height:30%; width:5%; opacity:1; background-color:transparent; padding:0; margin:0; cursor:pointer; } #slider-container .mousescroll path { fill:#ffffff; } #slider-container .mousescroll g > g:nth-child(3), #slider-container .mousescroll g > g:nth-child(4), #slider-container .mousescroll g > g:nth-child(5) { opacity:0; display:none; } .slidelottie { opacity:1; transition:opacity 500ms linear 0ms; } body.scroll .slidelottie { opacity:0; transition:opacity 500ms linear 0ms; } .media-cover-wrapper { position: relative; overflow: hidden; width:100%; height:100%; } .media-cover-wrapper .media-cover { position: absolute; z-index: -1; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL PRODUCTS */ #products-container { position:relative; margin-top:2rem; font-size:0; } #products-container > a { position:relative; width:33%; width:49.5%; height:0; padding-top:44%; padding-top:34%; overflow:hidden; display:inline-block; background-size:cover; background-position:center center; } #products-container > a.trackimage { background-color:rgba(254,156,40,0.51); } #products-container > a.trackreport { background-color:rgba(83,197,104,0.51); margin:0 0.5%; } #products-container > a.fallsensor { background-color:rgba(22,59,94,0.51); } #products-container > a:hover { background-blend-mode: hard-light; } #products-container > a:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(255,255,255, 0); } #products-container h2 { position:absolute; left:0; top:4rem; right:0; height:auto; padding-left:3rem; display:block; color:#fff; font-size:3.2rem; text-transform:uppercase; font-weight:300; } #products-container h2 span { font-weight:700; } #products-container p { position:absolute; top:10rem; width:100%; padding-left:8.8rem; padding-right:1.5rem; color:#fff; text-transform:uppercase; font-size:1.4rem; font-weight:300; letter-spacing:0.025em; } #products-container p:before { content:""; position:absolute; left:3rem; top:0.25rem; height:1.4rem; width:1.4rem; border-radius:50%; border:0.35rem solid #fff; background-color:rgba(255,255,255, 0); } #products-container p:after { content:""; position:absolute; left:4.2rem; top:0.95rem; height:1px; width:4.3rem; background-image:linear-gradient(to right, #fff, rgba(255,255,255, 0)); background-color:rgba(255,255,255, 0); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL EXPERTISE */ #expertise-container { overflow:hidden; position:relative; margin-top:2rem; font-size:0; background-position:right bottom; background-size:cover; } #expertise-container div.zonetitre { position:absolute; left:0; top:0; bottom:0; width:33%; } #expertise-container h2 { position:absolute; z-index:10; left:5rem; top:50%; transform:translateY(-50%); width:19rem; height:auto; margin:0; padding:0 0 18rem 0; font-size:0; color:#fff; } #expertise-container h2 > span { position:absolute; display:block; text-align:left; left:0; width:auto; height:4.6rem; line-height:4.6rem; font-size:6.5rem; font-weight:600; text-transform:uppercase; } #expertise-container h2 > span:nth-child(1) { top:0; } #expertise-container h2 > span:nth-child(2) { top:5.5rem; } #expertise-container h2 > span:nth-child(3) { top:6.6rem; left:12.5rem; font-family:'Didot-Italic'; height:3.5rem; line-height:3.5rem; font-size:5rem; font-weight:200; text-transform:none; } #expertise-container h2:before { content:""; position:absolute; left:6rem; bottom:0; height:1.6rem; width:1.6rem; border-radius:50%; border:0.4rem solid #fff; background-color:transparent; } #expertise-container h2:after { content:""; position:absolute; left:7.35rem; bottom:0.8rem; height:1px; width:9rem; background-image:linear-gradient(to right, #fff, rgba(255,255,255, 0)); } #expertise-container div.visuel { position:absolute; z-index:2; left:0; top:0; bottom:0; width:100%; transform: skew(-15deg, 0deg) translateX(-18%); overflow:hidden; } #expertise-container div.visuel:after { content:""; z-index:3; position:absolute; right:0; top:0; height:100%; width:5rem; background-image: linear-gradient(to left, rgba(0,0,0,0.4), rgba(255,255,255, 0)); } #expertise-container div.visuel div { position:absolute; left:18%; top:0; bottom:0; width:150%; transform: skew(15deg, 0deg); background-repeat: no-repeat; background-clip: border-box; background-size:cover; background-position:left top; } #expertise-container ul { position:relative; display:block; margin:0; padding:0 0 0 30%; height:auto; width:100%; } #expertise-container li { position:relative; display:inline-block; margin:0.5rem 0; padding:0 4rem; width:33%; height:37rem; vertical-align:top; } #expertise-container li:before { content: ""; position:absolute; top:0; left:0; width:1px; height:100%; background-image: radial-gradient(circle at center, #888888, rgba(255,255,255, 0)); } #expertise-container li:first-of-type:before { background-image:none; } #expertise-container li h3 { position:relative; display:block; margin:0 0 2rem 0; padding:4rem 0 0 0; height:14rem; color:#fff; font-size:1.8rem; line-height:1.2em; font-weight:400; text-transform:uppercase; text-align:left; } #expertise-container li h3:before { content: ""; position:absolute; left:0; right:0; bottom:4rem; height:1px; background-image: linear-gradient(to right, #3adace, transparent); } #expertise-container li h3:after { content: ""; position:absolute; left:0; width:30%; bottom:0; height:0.2rem; background-color:#3adace; } #expertise-container li p { position:relative; display:block; margin:0; padding:0; padding-bottom:1em; color:#fff; font-size:0.8rem; line-height:1.5em; font-weight:200; } #expertise-container li p:last-of-type { padding-bottom:0; } #expertise-container li a { position:absolute; white-space: nowrap; bottom:3rem; left:4rem; width:auto; height:auto; font-size:1rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:#3adace; color:#fff; vertical-align:top; display:inline-block; text-align:center; padding:0.7rem 1.5rem; margin:0; transition: background-color 300ms linear, color 300ms linear; } #expertise-container li a:hover { color:#3adace; background-color:#fff; text-decoration:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL METIERS */ #metiers-container { overflow:hidden; position:relative; margin-top:2rem; height:40.5rem; font-size:0; background-position:right bottom; background-size:cover; background-image:url('https://www.orme.com/_chartes_/orme/ressources/images/metiers-bg.jpg'); } #metiers-lottie img, #metiers-lottie svg { position:absolute; left:0; top:0; width:100%; height:100%; } #metiers-lottie path { fill:#ffffff; } #metiers-lottie line { stroke:#ffffff; } #metiers-container ul { z-index:2; position:relative; margin:0 auto; padding:0 0.5% 0 0.5%; width:80%; height:100%; font-size:0; } #metiers-container li { position:relative; display:inline-block; height:100%; width:9%; padding:1.2rem 0.75%; } #metiers-container li:before { content:""; position:absolute; left:-10%; right:-20%; top:0; bottom:0; background-color:transparent; background-image:url('https://www.orme.com/_chartes_/orme/ressources/images/metiers-ombre.png'); background-repeat:no-repeat; background-size:contain; background-position:center 5rem; transition:background-position 100ms ease 0ms; } #metiers-container li .bouton { position:relative; display:block; width:100%; height:23.8rem; background-color:#304151; transition:transform 100ms ease 0ms, top 200ms ease 200ms; padding-bottom:3rem; } #metiers-container li:nth-child(2n) .bouton { background-color:#3adace; } #metiers-container li:hover .bouton { transform: translateY(-1rem); cursor:pointer; } #metiers-container li > .detailinfos { display:none; } #metiers-container li .bouton h3 { position:absolute; left:50%; top:50%; transform-origin:50% 50%; transform: translate(-50%, -50%) rotate(-90deg); width:20rem; height:auto; text-align:right; font-weight:800; font-size:2rem; line-height:1em; padding:0; color:#fff; text-transform:uppercase; letter-spacing:0.05em; } #metiers-container li:nth-child(1) .bouton { top:3rem; } #metiers-container li:nth-child(1):before { background-position: center 1rem; } #metiers-container li:nth-child(1):hover:before { background-position: center -1rem; } #metiers-container li:nth-child(2) .bouton { top:7rem; } #metiers-container li:nth-child(2):before { background-position: center 3rem; } #metiers-container li:nth-child(2):hover:before { background-position: center 1rem; } #metiers-container li:nth-child(3) .bouton { top:11rem; } #metiers-container li:nth-child(3):before { background-position: center 0rem; } #metiers-container li:nth-child(3):hover:before { background-position: center 2rem; } #metiers-container li:nth-child(4) .bouton { top:5rem; } #metiers-container li:nth-child(4):before { background-position: center 2rem; } #metiers-container li:nth-child(4):hover:before { background-position: center 0rem; } #metiers-container li:nth-child(5) .bouton { top:1rem; } #metiers-container li:nth-child(5):before { background-position: center 1rem; } #metiers-container li:nth-child(5):hover:before { background-position: center -1rem; } #metiers-container li:nth-child(6) .bouton { top:9rem; } #metiers-container li:nth-child(6):before { background-position: center 0rem; } #metiers-container li:nth-child(6):hover:before { background-position: center 2rem; } #metiers-container li:nth-child(7) .bouton { top:12.8rem; } #metiers-container li:nth-child(7):before { background-position: center 2.5rem; } #metiers-container li:nth-child(7):hover:before { background-position: center 4.5rem; } #metiers-container li:nth-child(8) .bouton { top:5rem; } #metiers-container li:nth-child(8):before { background-position: center 3rem; } #metiers-container li:nth-child(8):hover:before { background-position: center 1rem; } #metiers-container li:nth-child(9) .bouton { top:7rem; } #metiers-container li:nth-child(9):before { background-position: center 2rem; } #metiers-container li:nth-child(9):hover:before { background-position: center 0rem; } #metiers-container li:nth-child(10) .bouton { top:11rem; } #metiers-container li:nth-child(10):before { background-position: center 2rem; } #metiers-container li:nth-child(10):hover:before { background-position: center 4rem; } #metiers-container li:nth-child(11) .bouton { top:5rem; } #metiers-container li:nth-child(11):before { background-position: center 2.5rem; } #metiers-container li:nth-child(11):hover:before { background-position: center 0.5rem; } #metiers-container.open li:before { background-position: center -4rem !important; } #metiers-container.open li.current:before, #metiers-container.open li:hover:before { background-position: center -3rem !important; } #metiers-container.open li .bouton { top:0; opacity:1; transition:top 200ms ease, opacity 200ms ease, box-shadow 200ms ease; } #metiers-container.open li.current .bouton { opacity:1; box-shadow: 0 0 0.5rem 0.25rem #ffffff; } #metiers-container.open li:hover .bouton { transform: none; opacity:1; } #metiers-container.open li .bouton h3 { color:rgba(255,255,255,0.1); } #metiers-container.open li:nth-child(2n) .bouton h3 { color:rgba(255,255,255,0.3); } #metiers-container.open li.current .bouton h3 { color:rgba(255,255,255,1); } #metiers-container.open li:hover .bouton h3 { color:rgba(255,255,255,1); } #metiers-container li .bouton div { position:absolute; left:0; bottom:-1px; width:100%; height:3rem; background-color:#e59301; color:#fff; font-size:0.5rem; font-weight:400; vertical-align:top; padding:0.7rem 0.4rem; text-transform:uppercase; } #metiers-container li .bouton div.couleur2 { background-color:#d35638; } #metiers-container li .bouton div span:nth-child(1) { position:absolute; right:1.6rem; bottom:1rem; width:0.7rem; height:1rem; overflow:hidden; } #metiers-container li .bouton div span:nth-child(1) img, #metiers-container li .bouton div span:nth-child(1) svg { position:absolute; height:100%; left:50%; transform:translateX(-50%); } #metiers-container li .bouton div span:nth-child(1) polyline { stroke:rgba(255,255,255,1); } #metiers-container li .bouton div span:nth-child(2) { position:absolute; right:0.4rem; bottom:0.7rem; display:inline-block; font-size:1.2em; } #metiers-container.open li .bouton div { color:rgba(255,255,255,0.4); } #metiers-container.open li.current .bouton div { color:rgba(255,255,255,1); } #metiers-container.open li:hover .bouton div { color:rgba(255,255,255,1); } #metiers-container.open li .bouton div span:nth-child(1) polyline { stroke:rgba(255,255,255,0.4); } #metiers-container.open li.current .bouton div span:nth-child(1) polyline { stroke:rgba(255,255,255,1); } #metiers-container.open li:hover .bouton div span:nth-child(1) polyline { stroke:rgba(255,255,255,1); } #metiers-container div.infos { z-index:1; position:absolute; left:0; bottom:0; right:0; height:14rem; overflow:hidden; } #metiers-container div.infos .detail { position:absolute; left:0; top:0; bottom:0; right:0; } #metiers-container div.infos .detail > img { z-index:11; position:absolute; left:100%; opacity:0; transition:opacity 200ms ease 0ms, left 200ms ease 0ms; } #metiers-container div.infos .detail > div.resume { z-index:12; position:absolute; left:-100%; top:0; bottom:0; width:50%; background-color:rgba(52,65,81,0.9); transition:left 400ms ease 0ms; } #metiers-container div.infos .detail > div h3 { position:relative; display:block; color:#ffffff; font-size:1.7rem; font-weight:800; text-transform:uppercase; text-align:right; padding:2rem 5rem 1rem 5rem; margin:0; } #metiers-container div.infos .detail > div p { position:relative; display:block; color:#ffffff; font-size:0.9rem; font-weight:200; text-align:right; padding:0 5rem; margin:0; } #metiers-container div.infos .detail > div.close { z-index:12; opacity:1; position:absolute; left:-50%; top:50%; transform:translate(-50%, -50%); height:3rem; width:3rem; color:#fff; border-radius:50%; overflow:hidden; transition:left 400ms ease 0ms; } #metiers-container div.infos .detail > div.close img, #metiers-container div.infos .close svg { position:absolute; width:25%; height:25%; left:50%; top:50%; transform:translate(-50%, -50%); } #metiers-container div.infos .detail > div.close:before { content:""; position:absolute; left:50%; width:50%; top:0; bottom:0; background-color:rgba(52,65,81,0.9); } #metiers-container div.infos .detail > div.close path { fill:#ffffff; transition: fill 200ms ease; } #metiers-container div.infos .detail > div.close:hover path { fill:#3adace; } #metiers-container.open div.infos { z-index:4; } #metiers-container.open div.infos .detail.current { z-index:5; } #metiers-container.open div.infos .detail.current > img { left:0; opacity:1; transition:opacity 800ms ease 0ms, left 500ms ease 0ms; } #metiers-container.open div.infos .detail.current > div.resume { left:0; transition:left 800ms ease 0ms; } #metiers-container.open div.infos .detail.current > div.close { left:50%; transition:left 800ms ease 0ms; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL SOCIETE */ #societe-container { position:relative; margin-top:2rem; font-size:0; } #societe-container .intro { position:relative; display:inline-block; width:35%; padding:4rem 0 4rem 5rem; margin:0; vertical-align:top; } #societe-container .intro img, #societe-container .intro svg { position:relative; width:14rem; height:3.45rem; } #societe-container h2 { display:block; font-size:1.2rem; font-weight:200; color:#7493a1; text-transform:uppercase; margin:0; padding:2rem 0; } #societe-container p { display:block; font-size:1rem; font-weight:200; } #societe-container .map { position:relative; display:inline-block; width:65%; vertical-align:top; } #societe-container .map > img, #societe-container .map > svg { position:relative; width:100%; } #societe-container .map > div { position:absolute; left:0; right:0; top:0; bottom:0; } #societe-container a { position:relative; font-size:1rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:#3adace; color:#fff; vertical-align:top; display:inline-block; width:auto; height:auto; text-align:center; padding:1rem 3rem; margin:3rem auto 0 auto; transition: background-color 300ms linear, color 300ms linear; border:1px solid #3adace; } #societe-container a:hover { color:#3adace; background-color:#fff; text-decoration:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL CUSTOMERS */ #customers-container { position:relative; margin-top:2rem; margin-bottom:2rem; font-size:0; background-image: linear-gradient(#424242, #1e1e1e); text-align:center; } #customers-container:before { content:""; position:absolute; left:-20rem; right:-20rem; top:3rem; bottom:9rem; background-image: radial-gradient(farthest-side at 50%, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.2) 70%, transparent 100%); } #customers-container ul { position:relative; display:block; margin:5rem auto 0 auto; padding:1px 0; height:auto; width:85%; text-align:center; overflow:hidden; } #customers-container li { position:relative; display:none; margin-left:2%; margin-bottom:3rem; width:15%; height:0; padding-bottom:10%; } #customers-container li:first-of-type { margin-left:0; } #customers-container li div { position:absolute; overflow:hidden; width:100%; height:100%; border-top:1px solid #7d7d7d; border-bottom:1px solid #7d7d7d; transition:height 200ms linear 0ms; top:50%; transform:translateY(-50%); } #customers-container li img { position:absolute; left:50%; top:50%; max-width:75%; max-height:70%; transform:translate(-50%,-50%); opacity:1; transition:opacity 100ms linear 100ms; } #customers-container li:nth-child(-n+6) { display:inline-block; } #customers-container li.clignote div { height:0; } #customers-container li.clignote img { opacity:0; transition:opacity 100ms linear 0ms; } #customers-container a { position:relative; font-size:1rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:#3adace; color:#fff; vertical-align:top; display:inline-block; width:auto; height:auto; text-align:center; padding:1rem 3rem; margin:2rem auto 4rem auto; transition: background-color 300ms linear, color 300ms linear; } #customers-container a:hover { color:#3adace; background-color:#fff; text-decoration:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL NEWS */ #news-container { position:fixed; bottom:0; left:0; right:0; height:6rem; max-height:0; z-index:999; background-color:#2e2e2e; transition:max-height 0.3s linear; font-size:0; vertical-align:top; } #news-container.show { max-height:10rem; transition:max-height 0.3s linear; } #news-container > div { position:absolute; bottom:0; left:0; right:0; height:100%; padding:0; overflow:hidden; } #news-container h2 { position:relative; vertical-align:top; display:inline-block; width:15%; height:3rem; margin:1.5rem 0; border-right:1px solid rgba(255,255,255,0.5); } #news-container h2 img, #news-container h2 svg { position:absolute; display:block; margin:0; padding:0; width:8.07rem; height:3rem; left:4rem; top:0; } #news-container ul { position:relative; vertical-align:top; width:65%; height:100%; display:inline-block; margin:0; padding:0; overflow:hidden; font-size:0; } #news-container ul li { position:relative; vertical-align:top; width:33.33%; height:4.2rem; display:inline-block; margin:1rem 0; padding:0 1rem; font-size:0.8rem; border-right:1px solid rgba(255,255,255,0.5); overflow:hidden; } #news-container ul li div.visuel { position:relative; float:left; width:7rem; margin-right:1rem; height:100%; background-size:cover; background-position:center center; } #news-container ul li div.pubdate { position:relative; padding:0rem 0 0.4rem 0; width:auto; display:block; font-size:0.75rem; color:#7493a1; font-weight:400; } #news-container ul li div.content { position:relative; padding:0 0 0 0; width:auto; display:block; font-size:0.65rem; color:#ffffff; } #news-container div.twitter { position:absolute; right:1rem; top:0.1rem; width:1rem; height:1rem; } #news-container div.twitter > img, #news-container div.twitter > svg { position:relative; display:inline-block; margin:0; padding:0; width:100%; height:100%; } #news-container div.twitter path { fill:#7493a1 !important; } #news-container > div > a.all { position:absolute; font-size:1rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:#3adace; color:#fff; vertical-align:top; display:inline-block; top:50%; transform:translateY(-50%); right:0; width:10%; height:auto; text-align:center; padding:0.7rem 0.5rem; margin:0 5%; transition: background-color 300ms linear, color 300ms linear; } #news-container > div > a.all:hover { color:#3adace; background-color:#fff; text-decoration:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { position:relative; z-index:1; background-color:#2e2e2e; color:#c1c1c1; margin:0; padding:2rem 2.5% 2rem 2.5%; } .accueil footer { margin-bottom:6rem; } footer ul, footer li { margin:0; padding:0; } #coords { position:relative; font-size:0; padding-bottom:2rem; color:#d4d4d4; } #coords h2 { font-size:1.3rem; text-transform:uppercase; font-weight:400; margin:0; padding:0; width:100%; } #coords h3 { font-size:1rem; color:#3adace; text-transform:uppercase; margin:0; padding:0; width:100%; margin-bottom:1rem; font-weight:400; } #identification { display:inline-block; font-size:1rem; width:28%; vertical-align:top; } #sociaux { position:absolute; left:0; width:28%; top:5rem; height:auto; padding:0; vertical-align:top; font-size:0; } #sociaux > li { position:relative; display:inline-block; margin:0 1rem 0 0; padding:0; list-style-type:none; } #sociaux > li:last-of-type { margin-right:0; } #sociaux > li a { position:relative; display:inline-block; width:2.4rem; height:2.4rem; text-align:center; margin:0; padding:0; font-size:1rem; color:#959595; border:0.12rem #959595 solid; border-radius:50%; } #sociaux > li a:hover { color:#3adace; border-color:#3adace; } #sociaux > li a span { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%,-50%); } #contact { display:inline-block; font-size:0.9rem; width:27%; vertical-align:top; margin-top:1.5rem; border-right:1px solid #9f9f9f; } #contact h3 { margin-bottom:0; border-left:1px solid #9f9f9f; padding-left:8%; } #contact div { padding-left:8%; font-size:0.75rem; } #contact .pays { padding-top:1.1rem; font-size:0.8rem; margin-bottom:0.8rem; font-weight:400; text-transform:uppercase; } #contact .phone { margin-top:1.1rem; font-weight:400; } #contact .mail { margin-top:0.3rem; padding-bottom:1.3rem; font-weight:300; } #contact a:hover { text-decoration:none; color:#3adace; } #contact h3 a:hover { color:#c1c1c1; } #distributors { display:inline-block; font-size:1rem; width:45%; vertical-align:top; margin-top:1.5rem; padding-left:5%; font-size:0; } #distributors h3 { margin-bottom:2rem; } #distributors ul { display:inline-block; width:48%; vertical-align:top; } #distributors ul:nth-of-type(2n) { margin-left:4%; } #distributors li { font-size:1rem; list-style-type:none; border:1px solid #9f9f9f; padding:0.3rem; margin:0 0 0.5rem 0; display:block; position:relative; vertical-align:top; } #distributors h4 { text-transform:uppercase; font-size:0.9rem; margin:0; padding:0.4rem; font-weight:300; cursor:pointer; } #distributors h4:after { font-family:Arial; content:"+"; color:#3adace; position:absolute; right:0.5rem; top:0; display:inline-block; font-size:1.5rem; font-weight:400; } #distributors li .detail { max-height:0; height:auto; overflow:hidden; transition:all 1s ease-out 0s; margin:0 1.5rem 0 1.5rem; padding:0 0; border-top:1px solid #9f9f9f; font-size:0.8rem; font-weight:200; opacity:0; } #distributors li .detail .name { padding-top:0.8rem; color:#ffffff; font-weight:400; } #distributors li .detail .address { padding:0.8rem 0; } #distributors li .detail .link { padding-top:0.8rem; color:#3adace; font-weight:300; } #distributors li .detail .link ~ .link { padding-top:0; } #distributors li.show h4:after { content:"-"; right:0.65rem; top:-0.15rem; } #distributors li.show .detail { max-height:30rem; transition:all 1s ease-in 0s; margin:1rem 1.5rem 0 1.5rem; padding:0.5rem 0; opacity:1; } #copyright { position:absolute; left:0; right:0; bottom:0; height:auto; background-color:#fff; color:#5e5e5e; padding:0.5rem 2.5%; font-size:0.6rem; } #copyright a { text-transform:uppercase; } #copyright a:hover { text-decoration:none; color:#3adace; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* CONTENU */ main { margin:0; padding:0; background-color:#ffffff; } main:after { content:""; display:table; clear:both; } .interne main { margin-top:5rem; } h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; text-align:left; text-transform:none; font-weight:200; } h1 { font-size:2.4rem; font-weight:400; } h2 { font-size:2rem; } h3 { font-size:1.6rem; } h1 > img { position:relative; height:auto; width:100%; } h1 > span { position:absolute; display:block; left:0; bottom:0; padding:1.25rem 2rem 1.25rem 8rem; margin:0; font-size:3.2rem; font-weight:200; height:auto; width:100%; color:#fff; text-transform:uppercase; } h1 > span > span { font-weight:700; } .interne h2 { position:relative; margin:0 0 0 8%; padding:2rem 10rem 2rem 0; width:46%; text-transform:uppercase; font-size:2rem; font-weight:200; line-height:1.5em; } .interne div.textevisuel { position:relative; margin-left:8%; margin-bottom:2rem; width:92%; font-size:0; } .interne div.textevisuel > div { position:relative; display:inline-block; width:50%; vertical-align:top; font-size:0.9rem; line-height:1.5em; padding:3rem 10rem 0 0; } .interne div.textevisuel > div p { text-align:justify; } .interne div.textevisuel > img { position:relative; display:inline-block; width:50%; vertical-align:top; } .interne div.textevisuel div.request { position:relative; display:block; width:100%; height:7rem; } .interne div.textevisuel div.request a { position:absolute; right:0; bottom:0; font-size:0.9rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:transparent; color:#3adace; border:1px solid #3adace; vertical-align:top; width:auto; height:auto; text-align:center; padding:0.75rem 1.5rem; margin:0; display:inline-block; transition: background-color 300ms linear, color 300ms linear; } .interne div.textevisuel div.request a:hover { color:#fff; background-color:#3adace; text-decoration:none; } .interne div.controls { position:relative; overflow:hidden; } .interne div.controls > img { z-index:1; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; } .interne div.controls > video ~ img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .interne div.controls video { z-index:2; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; } .interne div.controls iframe { z-index:4; position:relative; width:100%; height:23rem; left:0; top:0; border:0; vertical-align:top; } .interne div.controls > .play { z-index:3; position:absolute; width:100%; height:100%; left:0; top:0; } .interne div.controls > .play img, .interne div.controls > .play svg { position:absolute; width:4rem; height:4rem; left:50%; top:50%; transform:translate(-50%,-50%); } .interne div.controls > .play path { fill:#3adace; } .interne div.controls:hover > .play path { fill:#ffffff; } section, aside { position:relative; margin:0; padding:0; } img { max-width:100%; } .hovergray {-webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter: url('https://www.orme.com/_chartes_/orme/ressources/images/gray.svg#grayscale'); filter: gray; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE PRODUITS */ .page-produits div.modules { overflow:hidden; min-height:30rem; position:relative; margin:0 0 2rem 0; padding:1.5rem 30% 6rem 15%; display:block; background-repeat:no-repeat; background-size:40%; background-position:right bottom; font-size:0; } .page-produits div.modules h2 { font-size:1.8rem; text-transform:uppercase; margin:0; padding:0 0 4rem 0; font-weight:400; } .page-produits div.modules ul { position:relative; display:block; margin:0; padding:0; } .page-produits div.modules li { font-size:0; position:relative; display:block; margin:0; padding:0; } .page-produits div.modules li h3 { font-size:1.2rem; position:relative; display:inline-block; margin:0; padding:1rem 2rem 1rem 3rem; width:45%; border-bottom:1px solid #cccccc; } .page-produits div.modules li:first-of-type h3 { border-top:1px solid #cccccc; } .page-produits div.modules:after { z-index:10; content:''; position:absolute; left:40%; width:60%; top:0; height:100%; } /* Puce circle */ .page-produits div.modules li h3:before { content:''; position:absolute; display:block; left:0.5rem; top:50%; transform:translateY(-50%); height:0.45rem; width:0.45rem; border-radius:50%; border:0.2rem solid transparent; background-color:#706F6F; margin:0; padding:0; font-size:0; } .page-produits div.modules li h3:hover:before { left:0.2rem; height:1rem; width:1rem; border-color:#3adace; background-color:transparent; } /* Puce chevron */ .page-produits div.modules li h3:after { content: ''; position:absolute; display:block; right:0.5rem; top:50%; border-color:#706F6F; border-style:solid; border-width: 2px 2px 0 0; vertical-align:top; height:0.5em; width:0.5em; transform: translateY(-50%) rotate(45deg); } .page-produits div.modules li h3:hover:after { border-color:#3adace; } /* Detail */ .page-produits div.modules li > div { opacity:0; font-size:1rem; position:absolute; top:0; left:55%; width:auto; max-width:45%; height:auto; padding:2rem 0 1rem 2rem; } .page-produits div.modules li:hover div { opacity:1; } .page-produits div.modules li > div:before { content: ''; position:absolute; display:block; left:0; top:3rem; bottom:0; right:0; transform:translate(-1px,0); border-color:#3adace; border-style:solid; border-width: 0 0 1px 1px; } .page-produits div.modules li > div:after { content: ''; position:absolute; display:block; left:-1rem; top:0.6rem; border-color:#3adace; border-style:solid; border-width: 1px 1px 0 0; vertical-align:top; height:2rem; width:2rem; transform: rotate(-135deg); } .page-produits div.modules li > div p { font-size:0.9rem; line-height:1.5em; position:relative; margin:0; padding:0 0 1rem 0; } /* PAGE FALL SENSOR */ #page-fallsensor { font-size:0; background-image: linear-gradient(to bottom, rgb(31,41,50), rgb(58,71,84)); background-color:rgb(58,71,84); } #page-fallsensor h2 { color: rgb(255,255,255); } #page-fallsensor h1 > span { color: rgb(58,78,102); } #page-fallsensor div.textevisuel { color: rgb(255,255,255); } #page-fallsensor div.modules { padding:3rem 8% 9rem 8%; } #page-fallsensor div.modules h2 { display:none; } #page-fallsensor div.modules li img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:10rem; height:10rem; border:0.7rem solid #828991; border-radius:50%; padding:0.2rem; } #page-fallsensor div.modules li:hover img { border-color:#3adace; } #page-fallsensor div.modules li:nth-child(2n) img { left:14rem; } #page-fallsensor div.modules li:after { content:''; height:2px; width:4.4rem; position:absolute; border-radius:2px; background-color:#3adace; left:10.4rem; top:50%; transform-origin:-5.6rem center; transform:translateY(-50%) rotate(25deg); } #page-fallsensor div.modules li:nth-child(2n):after { left:9.2rem; transform-origin:9.8rem center; transform:translateY(-50%) rotate(-25deg); } #page-fallsensor div.modules li:last-child:after { display:none; } #page-fallsensor div.modules li h3 { font-size:1rem; margin-left:33%; height:6rem; padding:2rem 2rem 2rem 3rem; border:none; text-transform:uppercase; color:#fff; width:33%; } #page-fallsensor div.modules li:hover h3 { color:#3adace; } #page-fallsensor div.modules li h3:before { display:none; } #page-fallsensor div.modules li h3:after { right:98%; width:1em; height:1em; border-width: 0.2rem 0.2rem 0 0; top:2rem; transform: rotate(45deg); } #page-fallsensor div.modules li > div { top:1.5rem; left:72%; max-width:25%; color:#fff; } #page-fallsensor div.modules li:hover div { opacity:1; } #page-fallsensor .controls { position:relative; display:inline-block; width:49%; height:auto; margin:0 1% 2rem 0; vertical-align:top; } #page-fallsensor .controls:last-of-type { margin:0 0 2rem 1%; } #page-fallsensor div.controls iframe { height:28rem; } #page-fallsensor div.modules:after { z-index:10; content:''; position:absolute; left:70%; width:30%; top:0; height:100%; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE SOCIETE */ #page-societe h1 > span { font-weight:300; } #page-societe { position:relative; font-size:0; } #container-equipe { position:relative; display:block; font-size:0; margin-bottom:2rem; background-color:rgb(37,46,62); } #container-equipe > div { vertical-align:top; position:relative; display:inline-block; width:100%; padding:3rem 5rem; } #container-equipe > div:hover { cursor:pointer; } #container-equipe > div > video { position:absolute; width:120%; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); padding:0; margin:0; } #container-equipe > div:first-of-type { width:60%; height:29rem; overflow:hidden; } #container-equipe > div:last-of-type { width:40%; } #container-equipe h2 { margin:0; padding:0 0 3rem 0; color:#fff; } #container-equipe p { font-size:0.9rem; line-height:1.5em; margin:0; padding:0 0 1em 0; color:#fff; text-align:justify; } #page-societe > video { vertical-align:top; position:relative; display:inline-block; width:100%; margin-bottom:2rem; } #container-carte { position:relative; display:block; font-size:0; margin-bottom:2rem; } #container-carte .intro { position:relative; display:inline-block; width:35%; padding:4rem 0 4rem 5rem; margin:0; vertical-align:top; } #container-carte .intro h2 { display:block; width:100%; font-size:1.6rem; font-weight:200; color:#7493a1; text-transform:uppercase; margin:0; padding:2rem 0; } #container-carte .intro p { display:block; font-size:1rem; font-weight:200; } #container-carte .map { position:relative; display:inline-block; width:65%; vertical-align:top; } #container-carte .map > img { width:100%; } #container-carte .map > div { position:absolute; left:0; right:0; top:0; bottom:0; } #container-carte a { position:relative; font-size:1rem; line-height:1em; font-weight:400; text-transform:uppercase; background-color:#3adace; color:#fff; vertical-align:top; display:inline-block; width:auto; height:auto; text-align:center; padding:1rem 3rem; margin:3rem auto 0 auto; transition: background-color 300ms linear, color 300ms linear; border:1px solid #3adace; } #container-carte a:hover { color:#3adace; background-color:#fff; text-decoration:none; } #container-highlights { position:relative; overflow:hidden; font-size:0; background: transparent url('https://www.orme.com/_chartes_/orme/ressources/images/highlights-bg.jpg') no-repeat center center; background-size:cover; height:0; margin:2rem 0; padding:0 0 38% 0; } #container-highlights h2 { font-size:2rem; color:#fff; margin:3% 0 0 0; padding:0.5% 1% 0.5% 4%; border:1px solid #fff; border-left:0; position:relative; width:auto; display:inline-block; } #container-highlights ul { position:absolute; bottom:5.25%; font-size:0; width:100%; height:auto; left:0; text-align:center; margin:0; padding:0; } #container-highlights ul li { position:relative; display:inline-block; margin:0; margin-left:2%; padding:0 0 4% 0; width:4%; height:0; border:1px solid transparent; border-radius:50%; vertical-align:top; transition:border-color 300ms ease; } #container-highlights ul li:hover, #container-highlights ul li.current { border-color:#fff; } #container-highlights ul li:first-of-type { margin-left:0; } #container-highlights ul li:before { content:''; display:block; position:absolute; left:-50%; height:1px; background-color:rgba(120,199,203,1); width:50%; top:50%; transform:translateY(-50%); } #container-highlights ul li:first-of-type:before { width:0; } #container-highlights ul li a { position:absolute; display:block; background-color:#fff; border-radius:50%; vertical-align:top; width:75%; height:75%; left:50%; top:50%; transform:translate(-50%, -50%); } #container-highlights ul li a img, #container-highlights ul li a svg { position:absolute; width:70%; height:70%; left:50%; top:50%; transform:translate(-50%, -50%); } #container-highlights > div { position:absolute; left:0; width:100%; top:0; height:0; padding-bottom:100%; opacity:1; transition:opacity 300ms ease; } #container-highlights > div h3 { position:absolute; height:7%; width:14%; margin:0; padding:0; left:30%; top:5%; transition:left 500ms ease; } #container-highlights > div h3 img, #container-highlights > div h3 svg { position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%, -50%); } #container-highlights > div > div { position:absolute; display:inline-block; height:auto; margin:0; padding:2%; font-size:0.9rem; color:#fff; border:1px solid #fff; left:50%; width:32%; transition:left 500ms ease 200ms; } #container-highlights > div:not(.current) { opacity:0; } #container-highlights > div:not(.current) h3 { left:-100% !important; } #container-highlights > div:not(.current) > div { left:200% !important; } #container-highlights > div > div p:last-of-type { padding-bottom:0; } #container-highlights > div span { position:absolute; display:inline-block; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE CLIENTS */ #page-clients h1 > span { padding:1.35rem 2rem 1.35rem 8rem; font-size:3rem; } #page-clients h2 { display:block; width:auto; margin:2rem 5rem; padding:0.5rem 2rem 0.5rem 3rem; font-size:2rem; background-color:#ececec; text-transform:uppercase; font-weight:200; } #page-clients ul { display:block; font-size:0; margin:2rem 5rem; padding:0; } #page-clients li { position:relative; display:inline-block; margin:0; padding:0; height:auto; overflow:hidden; vertical-align:top; list-style-type:none; } #page-clients li > .logo-customer { z-index:1; position:relative; left:0; top:0; width:100%; height:0; padding:0; padding-bottom:51.85%; } #page-clients li > .logo-customer img { z-index:1; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:60%; padding:0; margin:0; } #page-clients li > .infos { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background-color:rgba(58,218,206,0.95); transition:opacity 300ms ease; } #page-clients li > .infos > div { position:absolute; left:50%; top:50%; width:90%; height:auto; transform:translate(-50%, -50%); } #page-clients li:hover > .infos, #page-clients li.hover > .infos { opacity:1; } #page-clients li > .infos h3 { font-size:1.2rem; font-weight:400; color:#fff; text-transform:uppercase; text-align:center; } #page-clients li > .infos > div div { font-size:1rem; margin-top:1rem; font-weight:200; color:#fff; text-align:center; } #page-clients li:before { z-index:3; content:''; position:absolute; left:2rem; right:2rem; top:0; height:1px; background-color:#ccc; } #page-clients li:after { z-index:3; content:''; position:absolute; right:0; top:2rem; bottom:2rem; width:1px; background-color:#ccc; } @media (min-width:2001px) { #page-clients li { width:16.66%; } #page-clients li:nth-of-type(-n+6):before { display:none; } #page-clients li:nth-of-type(6n):after { display:none; } } @media (min-width:1601px) and (max-width:2000px) { #page-clients li { width:20%; } #page-clients li:nth-of-type(-n+5):before { display:none; } #page-clients li:nth-of-type(5n):after { display:none; } } @media (min-width:1201px) and (max-width:1600px) { #page-clients li { width:25%; } #page-clients li:nth-of-type(-n+4):before { display:none; } #page-clients li:nth-of-type(4n):after { display:none; } } @media (min-width:801px) and (max-width:1200px) { #page-clients li { width:33.33%; } #page-clients li:nth-of-type(-n+3):before { display:none; } #page-clients li:nth-of-type(3n):after { display:none; } } @media (min-width:401px) and (max-width:800px) { #page-clients li { width:50%; } #page-clients li:nth-of-type(-n+2):before { display:none; } #page-clients li:nth-of-type(2n):after { display:none; } } @media (max-width:400px) { #page-clients li { width:100%; } #page-clients li:nth-of-type(1):before { display:none; } #page-clients li:after { display:none; } } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE NEWS */ #page-news h1 > span { padding:1.35rem 2rem 1.35rem 8rem; font-size:3rem; } #page-news > img { position:relative; width:100%; margin:0; padding:0; } ul#filtre { position:relative; display:block; text-align:left; vertical-align:top; margin:1rem auto 2rem auto; padding:0; width:60%; font-size:0; } ul#filtre > li { position:relative; display:inline-block; width:auto; height:auto; margin:0; padding:0; list-style-type:none; vertical-align:top; } ul#filtre > li a { position:relative; display:inline-block; vertical-align:top; font-size:1rem; text-transform:uppercase; margin:0 1rem 0 0; padding:0 1rem 0 0; border-right:1px solid #ccc; } ul#filtre > li:last-of-type a { margin-right:0; padding-right:0; border-right:0; } #page-news > ul#listenews { position:relative; width:60%; margin:0 auto; padding:0; } #page-news > ul#listenews > li { position:relative; list-style-type:none; font-size:0; margin:4rem 0 6rem 0; } #page-news > ul#listenews > li:after { content:""; position:absolute; background-color:#ccc; height:1px; width:51%; right:0; bottom:0; } #page-news > ul#listenews > li > div { position:relative; display:inline-block; height:auto; vertical-align:top; } #page-news > ul#listenews > li > div:first-of-type { width:40%; } #page-news > ul#listenews > li > div:last-of-type { width:55%; margin:0 0 0 5%; padding:4rem 0 0.5rem 4%; } #page-news .pubdate { color:#888888; font-size:1.2rem; position:relative; width:100%; height:3rem; border-top:1px solid #cccccc; margin:0; padding:0.2rem 0; text-align:left; } #page-news .pubdate span:nth-of-type(1) { font-size:1.4em; font-weight:400; padding-right:0.2em; } #page-news .pubdate span:nth-of-type(2) { font-size:0.8em; font-weight:200; } #page-news .pubdate span:nth-of-type(3) { font-size:1.4em; font-weight:200; padding:0 0.2em; } #page-news .pubdate span:nth-of-type(4) { font-size:1.4em; font-weight:200; } #page-news .reseau { position:absolute; right:0; top:0; width:3rem; height:3rem; background-color:rgb(11,68,111); } #page-news .reseau img, #page-news .reseau svg { position:absolute; width:40%; height:auto; left:50%; top:50%; transform:translate(-50%, -50%); } #page-news .reseau path, #page-news .reseau rect { fill:#fff !important; } #page-news .visuel { position:relative; float:right; margin:0.5rem 0 0 0; padding:0; width:auto; height:auto; max-width:20rem; max-height:10rem; } #page-news .titre { position:absolute; font-size:1.1rem; font-weight:400; width:100%; top:0; left:0; height:1.4rem; text-transform:uppercase; } #page-news .content { margin:0; padding:0; font-size:0.9rem; overflow:hidden; height:auto; } #page-news .content img { max-height:1em; } #page-news .content a { color:#3adace; font-weight:400; } #page-news .content b { font-weight:400; } #page-news .content a:hover { color:#3adace; text-decoration:none; } #page-news a.link { font-size:0.9rem; font-weight:400; display:block; width:100%; } #page-news a.suite { font-size:0.8rem; font-weight:400; } #page-news a.masquer { display:none; font-size:0.8rem; font-weight:400; margin-top:2rem; } #page-news a:hover { color:#3adace; text-decoration:none; } #page-news .resume { max-height:unset; } #page-news .fulldetail { max-height:unset; } #page-news .full { max-height:0; margin:0 0 2rem 0; } .news-pagination { position:relative; width:65%; font-size:0; margin:0 auto 4rem auto; padding:0; height:2.2rem; } .news-pagination:after { content:""; display:table; clear:both; } .news-pagination .count { float:left; position:relative; font-size:0.8rem; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#706F6F; display:inline-block; width:auto; text-transform:uppercase; text-align:left; } .news-pagination .pages { float:right; position:relative; font-size:0; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#706F6F; display:inline-block; width:auto; text-transform:uppercase; text-align:right; } .news-pagination .pages span { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.5rem; } .news-pagination .pages a { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.5rem; } .news-pagination .pages a img { display:inline-block; margin:0; padding:0; position:relative; width:auto; } .news-pagination .pages a svg { display:inline-block; margin:0; padding:0; position:relative; width:auto; transition: all 0.2s linear; } .news-pagination .pages a img, .news-pagination .pages a svg { height:0.6rem; } .news-pagination .pages a svg polyline { stroke:#706F6F; } .news-pagination .pages a.inactive { opacity:0.2; cursor:default; } a.back { position:relative; display:block; margin:0; padding:0; top:0; left:0; width:100%; height:3rem; overflow:hidden; } a.back > span { position:relative; display:inline-block; vertical-align:top; } a.back > span:first-of-type { background-color:#3adace; width:3rem; height:3rem; } a.back > span:last-of-type { width:auto; height:auto; top:50%; transform:translateY(-50%); padding-left:0.7em; font-size:1.2rem; text-transform:uppercase; font-weight:200; } a.back > span svg { position:absolute; width:30%; height:auto; left:45%; top:50%; transform:translate(-50%, -50%); } ul#share { position:relative; display:block; text-align:right; vertical-align:top; margin:2rem 0 0 0; padding:0; width:100%; } ul#share > li { position:relative; display:inline-block; width:1.6rem; height:1.6rem; margin:0 0 0 1rem; padding:0; list-style-type:none; vertical-align:top; } ul#share > li:first-of-type { margin-left:0; } ul#share > li a { position:relative; display:block; background-color:#3adace; color:#fff; border:1px solid #3adace; width:100%; height:100%; text-align:center; vertical-align:top; margin:0; padding:0; font-size:0.8rem; border-radius:50%; } ul#share > li a:hover { color:#3adace; background-color:#fff; } ul#share > li a span { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%,-50%); } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE EXPERTISE R&D */ #page-expertiserd > h2 { position:relative; margin:3rem auto; padding:0 8rem; width:100%; text-transform:uppercase; font-size:2rem; font-weight:200; line-height:1.2em; } #page-expertiserd > div { position:relative; margin:3rem auto; padding:0 8rem; width:100%; text-transform:none; font-size:0.9rem; font-weight:200; line-height:1.5em; } #page-expertiserd > ul { position:relative; margin:3rem auto; padding:0 8rem; width:100%; } #page-expertiserd > ul > li { position:relative; list-style-type:none; border:1px solid #666; margin:2rem 0; padding:3rem 33rem 3rem 3rem; overflow:hidden; min-height:33rem; } #page-expertiserd > ul > li h3 { position:relative; margin:0 0 1rem 0; padding:0; width:100%; text-transform:uppercase; font-size:1.7rem; font-weight:600; line-height:1.5em; } #page-expertiserd > ul > li h3 > span { font-weight:200; } #page-expertiserd > ul > li h4 { position:relative; margin:1rem 0; padding:0; width:100%; text-transform:none; font-size:0.9rem; font-weight:400; line-height:1.5em; } #page-expertiserd > ul > li div { position:relative; margin:1rem 0; padding:0; width:100%; text-transform:none; font-size:0.9rem; font-weight:200; line-height:1.5em; } #page-expertiserd > ul > li a { text-decoration:none; color:#3adace; font-weight:400; } #page-expertiserd > ul > li a:hover { text-decoration:none; color:#3adace; } #page-expertiserd > ul > li ul > li { list-style-type:disc; padding-left:0.5rem; } #page-expertiserd ul.logos { position:relative; display:inline-block; padding:0; margin:0 0 2rem 0; width:auto; height:auto; font-size:0; } #page-expertiserd ul.logos li { position:relative; display:inline-block; padding:0; margin:0; width:auto; height:auto; list-style-type:none; vertical-align:middle; } #page-expertiserd ul.logos img { position:relative; display:inline-block; padding:0; margin:1rem 1rem 0 0; max-height:5rem; max-width:10rem; } #page-expertiserd > ul > li > img { position:absolute; right:3rem; top:50%; transform:translateY(-50%); width:27rem; height:27rem; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE MENTIONS LEGALES */ #page-mentionslegales > div { width:80%; font-size:1rem; margin:0 auto; padding-bottom:2rem; } #page-mentionslegales > div h2 { font-size:1.5rem; display:block; width:100%; margin-left:0; } #page-mentionslegales > div p, #page-mentionslegales > div li { font-size:1rem; display:block; width:100%; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE CONTACT */ #page-contact h1 > span { padding:1.35rem 2rem 1.35rem 8rem; font-size:3rem; } #page-contact { font-size:0; position:relative; height:auto; margin:0 0 2rem 0; } #page-contact > div { position:relative; margin:2rem 5% 5rem 5%; height:auto; } #page-contact > div > div { position:unset; display:inline-block; height:100%; width:65%; margin:0; padding:0 2rem 0 3rem; vertical-align:bottom; } #page-contact > div > form { position:relative; display:inline-block; height:auto; min-height:35rem; width:35%; margin:0; padding:0 2rem 0 4rem; vertical-align:top; } #page-contact h2 { display:block; position:relative; width:100%; font-size:1.4rem; font-weight:300; text-transform:uppercase; margin:0; padding:0 0.5rem 3rem 0; color:#3adace; } #page-contact > div > div:first-of-type h2 { position:absolute; top:0; } #contact-coords { position:relative; display:inline-block; font-size:0.9rem; width:40%; height:auto; vertical-align:bottom; padding-right:2rem; margin-top:0; } #contact-coords div { font-size:0.75rem; font-weight:200; } #contact-coords .pays { padding-top:3.1rem; font-size:1rem; margin-bottom:0.8rem; font-weight:400; text-transform:uppercase; } #contact-coords .pays:first-of-type { padding-top:0; } #contact-coords .phone { font-size:1rem; margin-top:1.1rem; font-weight:300; } #contact-coords .mail { margin-top:0.3rem; padding-bottom:0.5rem; font-weight:300; } #contact-coords > a { margin-top:0.3rem; padding-bottom:1.3rem; font-weight:200; font-size:0.6rem; font-style:italic; } #contact-coords > a i { display:inline-block; color:#3adace; padding-right:0.3rem; font-size:0.7rem; } #contact-coords a:hover { color:#3adace; text-decoration:none; } #contact-map { border-left:1px solid #cccccc; position:relative; margin:0; padding:0 2rem 0 2rem; display:inline-block; width:60%; height:auto; vertical-align:bottom; } #contact-map div#googlemap { position:relative; margin:0; padding:0; display:inline-block; width:100%; height:0; padding-top:80%; } #form-contact { border-left:1px solid #cccccc; font-size:0; width:100%; margin:2rem auto; } #form-contact label { font-size:0.7rem; font-weight:200; text-transform:uppercase; width:50%; padding:0 0.5rem 0 0; } #form-contact label > span { display:inline-block; padding-left:0.5rem; padding-bottom:0.2rem; } #form-contact label.societe, #form-contact label.adresse, #form-contact label.message { width:100%; } #form-contact label.consentementrgpd { width:100%; font-size:0.5rem; text-transform:none; padding-top:0; padding-bottom:0.5rem; } #form-contact button { width:100%; font-size:1rem; margin-top:1rem; border-color:#3adace; background-color:#3adace; color:#ffffff; } #form-contact button:hover { color:#3adace; background-color:#ffffff; } #form-contact .asterisque { font-size:0.6rem !important; font-weight:200 !important; } #form-contact input { padding-top:1rem !important; padding-bottom:1rem !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd { padding-top:0 !important; padding-bottom:0 !important; position:relative !important; left:0 !important; top:1.2rem !important; transform:scale(1) !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd + span { padding-left:3em !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd + span:before { top:0.1rem !important; left:0 !important; width:1.1rem !important; height:1.1rem !important; border:1px solid #999999 !important; border-radius:15% !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd + span:after { top:0.2rem !important; left:0.1rem !important; width:0.9rem !important; height:0.9rem !important; border:1px solid #999999 !important; border-radius:15% !important; background-color:#999999 !important; } #form-contact .reponse { margin:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ div.retour { font-size:1rem; position:relative; text-align:center; display:block; width:33.33%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.saisie { font-size:1rem; position:relative; text-align:center; display:block; width:33.33%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.erreur { font-size:1.2rem; position:relative; text-align:center; text-transform:uppercase; display:block; width:33.33%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.retour a { text-decoration:none; } div.retour a:hover { text-decoration:none; color:#bb2a00; } div.retour strong { font-weight:400; } div.saisie a { text-decoration:none; } div.saisie a:hover { text-decoration:none; color:#bb2a00; } div.saisie strong { font-weight:400; } div.erreur a { text-decoration:none; } div.erreur a:hover { text-decoration:none; color:#bb2a00; } div.erreur strong { font-weight:400; } #page-authentification, #page-inscription, #page-compte, #page-oublipassword, #page-changepassword { text-align:center; display:block; width:100%; margin:0; padding:2rem 0; } #page-authentification h1, #page-inscription h1, #page-compte h1, #page-oublipassword h1, #page-changepassword h1 { text-align:center; display:block; width:33.33%; margin:0 auto 0 auto; padding:0 0 1em 0; color:#393939; text-transform:uppercase; font-weight:200; font-size:1.4rem; } #page-authentification form, #page-inscription form, #page-compte form, #page-oublipassword form, #page-changepassword form { width:33.33%; position:relative; margin:0 auto 4rem auto; text-align:center; display:block; padding:0; } form div.connected { font-size:1.2rem; padding:1rem 0 2rem 0; } form.formauth { font-size:0; width:33.33%; position:relative; margin:0 auto; text-align:center; display:block; padding:0; } form.formauth > div { font-size:1.1rem; position:relative; width:100%; border:0; color:#333 !important; margin:0.5em 0 0.5em 0; padding:0; } form.formauth > div.connected { padding:4rem 0; } form.formauth input { font-size:0.9rem; position:relative; width:100%; height:auto; line-height:2em; display:inline-block; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; margin:0 0 0.5em 0; padding:0.2em 0.5em; } form.formauth button { font-size:1.1rem; position:relative; width:100%; border:0; border-radius:0; background-color:rgba(42,154,63,1) !important; color:#fff !important; margin:1em 0 0.5em 0; padding:0.5em 0.5em; } form.formauth button:hover { background-color:rgba(1,189,68,1) !important; } form.formauth > div.required { font-size:0.6rem; margin:0.2em 0 0.2em 0; text-align:right; font-style:italic; } form.formauth > div.regles { font-size:0.8rem; text-align:left; margin:0.5em 0 2em 0; } form.formauth label.consentementrgpd { font-size:0.6rem !important; margin-bottom:2em !important; position:relative; text-align:left; } form.formauth label.consentementrgpd input[type="checkbox"] { font-size:1em !important; position:absolute !important; padding-top:0 !important; padding-bottom:0 !important; position:relative !important; left:0 !important; top:2em !important; transform:scale(1) !important; } form.formauth label.consentementrgpd input[type="checkbox"] + span { font-size:1em !important; padding-left:3em !important; text-align:left !important; display:inline-block; } form.formauth label.consentementrgpd input[type="checkbox"] + span:before { top:0.4em !important; left:0.25em !important; width:1.8em !important; height:1.8em !important; border:1px solid #999999 !important; border-radius:15% !important; } form.formauth label.consentementrgpd input[type="checkbox"] + span:after { top:0.5em !important; left:0.35em !important; width:1.6em !important; height:1.6em !important; border:1px solid #999999 !important; border-radius:15% !important; background-color:#999999 !important; } form.formauth a { text-decoration:none; } form.formauth a:hover { text-decoration:none; color:#bb2a00; } form.formauth strong { font-weight:400; } #ul-auth { font-size:0.9rem; clear:both; display:block; width:33.33%; margin:0 auto 4rem auto; padding:0; } #ul-auth li { clear:both; display:block; width:auto; list-style-type:none; margin:0; padding:0; text-align:right; } #ul-auth li a { position:relative; padding-top:0.5em; font-size:0.8em; opacity:0.9; text-transform:uppercase; } #ul-auth li a.inscription { display:block; width:100%; opacity:1; text-align:center; background-color:#bb2a00; color:#fff; font-size:1.2em; margin:4em 0 0.5em 0; padding:0.5em 0.5em; } #ul-auth li a:hover { text-decoration:none; opacity:1; } .fullwidth { width:100%; height:auto; margin-left:auto; margin-right:auto; overflow:hidden; } .masquer { height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } #tarteaucitronRoot { font-size:14px !important; } #tarteaucitron .tarteaucitronBorder { overflow-y:clip !important; padding:0 0 30px 0 !important; } a.tarteaucitronSelfLink { bottom:0 !important; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } .liquide { width:100%; } .fullwidth { max-width:2560px; } .totalwidth { max-width:2560px; } #en2mots { background-color:#ffffff; width:100%; max-width:2560px; margin:0 auto; position:relative; } /* AFFICHAGE spécifique IE/EDGE */ body.edge #products-container > a:nth-child(n):hover:before, body.ie #products-container > a:nth-child(n):hover:before { background-color:rgba(253,146,19,0.50); } body.edge #products-container > a:nth-child(2n):hover:before, body.edge #products-container > a:nth-child(2n):hover:before { background-color:rgba(83,197,104,0.50); } body.edge #products-container > a:nth-child(3n):hover:before, body.edge #products-container > a:nth-child(3n):hover:before { background-color:rgba(22,59,94,0.50); } /* AFFICHAGE MAXI */ @media (min-width:2560px) { html { font-size:20px; } .liquide { width:2560px; } .litebox-overlay .litebox-inline-html { width:960px; } } @media (min-width:2300px) { #products-container h2 { padding-left:3rem; padding-right:5rem; font-size:4rem; } #products-container p { padding-left:9.8rem; padding-right:5rem; top:12rem; } #products-container p:before { left:3rem; } #products-container p:after { left:4.2rem; } } /* AFFICHAGE ECRAN LARGE */ @media (min-width:2000px) { html { font-size:20px; } #menu-background { width:48rem; } #metiers-container ul { width:70%; } #metiers-container.open div.infos .detail.current > img { width:100%; } #metiers-lottie svg { width:90% !important; margin:0 5%; } #metiers-container div.infos .detail > div p { padding-left:15rem; } #societe-container .intro { padding-top:6rem; padding-left:7.5rem; } #societe-container .intro img, #societe-container .intro svg { width:18rem; height:4.43rem; } #societe-container h2 { font-size: 1.4rem; padding:4rem 0 3rem 0; } #identification { width:25%; } #coords h3 { font-size:1.2rem; } h1 > span { padding-top:0; padding-bottom:0; top:73%; transform:translateY(-50%); height:1em; line-height:1em; } h1 > span span { height:1em; line-height:1em; } .interne h2 { padding-top:3rem; padding-bottom:1rem; } .interne div.textevisuel > div { padding-top:5rem; padding-right:17rem; } #page-clients h1 > span { padding-top:0; padding-bottom:0; top:50%; } #container-carte .intro { padding-top:8rem; } #container-highlights h2 { font-size:40px; font-size:2vw; } #container-highlights > div > div { font-size:18px; font-size:0.9vw; } #page-contact h1 > span { padding-top:0; padding-bottom:0; } #page-contact h2 { font-size:1.6rem; } #page-news h1 > span { padding-top:0; padding-bottom:0; } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (max-width:500px) { html { font-size:24px; font-size:3vw; } .liquide { width:100%; } a.ancre { top:-10rem; } div.nosmartphone br { display: none; content: ' '; clear:none; } header .liquide { width:100%; } header #logo { margin:1rem 0 1rem 1rem; width:11.4rem; height:3rem; } .scroll header #logo { margin:0.7rem 0 0.5rem 1rem; } h1 { text-align:center; font-size:3rem; overflow:hidden; } h2 { text-align:center; font-size:3rem; } h3 { text-align:center; } p { text-align:center; } #preload > div.logo { width:70%; height:70%; } #logo-container .baseline { left:5rem; padding-right:2rem; } #logo-container .baseline span:nth-child(3) { line-height:1em; } body.scroll #logo-container .logo { left:7.5rem; } body.scroll #logo-container .baseline { display:none; } .interne #logo-container .logo { left:7.5rem; } .interne #logo-container .baseline { display:none; } a#downloads { display: none; } #menu-container { left:-100%; } #menu-container #menu-background { width:100%; } #menu-container.sousmenu #menu-background { width:100%; } #menu-background > div { width:100%; top:6rem; transform:none; } ul#menu > li { padding-bottom:1.6rem; } ul#menu > li > ul { position:relative; display:block; padding-top:0; top:0; left:0; width:100%; max-width:100%; height:auto; max-height:0; transition:padding-top 50ms linear 500ms, max-height 500ms linear 0ms; } ul#menu > li:hover > ul, ul#menu > li > a.hover ~ ul { padding-top:1em; max-height:20rem; width:100%; transition:padding-top 50ms linear 0ms, max-height 500ms linear 50ms; } ul#menu > li.sousarbo:hover > a, ul#menu > li.sousarbo > a.hover { border-color: transparent; } ul#menu > li > ul > li { text-align:right; left:0; } ul#menu > li > ul > li a { left:0; transition:left 0ms linear 0ms; opacity:1; } footer { text-align:center; } .interne footer h2 { text-align:center; } #identification { width:100%; font-size:1.3rem; } #sociaux { position:relative; display:block; width:auto; margin:2rem auto 3rem auto; text-align:center; top:0; } #coords h2 { font-size:2rem; } #coords h3 { font-size:1.8rem; } #contact { width:100%; margin-top:2rem; font-size:1.4rem; border:0; } #contact h3 { border-left:0; padding-left:0; } #contact div { padding-left:0; font-size:1.2rem; } #contact .pays { font-size:1.3rem; } #distributors { width:100%; border-left:0; padding-left:0; margin-top:3rem; } #distributors ul { width:100%; } #distributors ul:nth-of-type(2n) { margin-left:0; } #distributors li { font-size:1.5rem; padding:1rem 0.3rem; margin:0 0 1rem 0; } #distributors h4 { font-size:1.2rem; padding:0 0 0 1rem; } #distributors h4:after { top:-0.4rem; font-size:2rem; } #distributors li.show h4:after { right:0.80rem; top:-0.55rem; } #distributors li .detail { font-size:1.3rem; } #products-container > a { text-align:left; width:100%; padding-top:48%; background-position:center bottom; } #products-container > a.trackreport { background-color:#00ff00; margin:0.5rem 0; } #products-container > a h2 { font-size:3.6rem; text-align:left; top:3rem; } #products-container > a p { text-align:left; top:9rem; } #products-container > a.trackimage:before { background-color:rgba(253,146,19,0.70); } #products-container > a.trackreport:before { background-color:rgba(83,197,104,0.80); } #products-container > a.fallsensor:before { background-color:rgba(22,59,94,0.60); } #expertise-container div.zonetitre { position:relative; width:100%; height:20rem; } #expertise-container h2 { padding-bottom:11rem; } #expertise-container h2 .puce { left:20rem; bottom:1rem; } #expertise-container h2:before { left:19.5rem; bottom:0.9rem; } #expertise-container h2:after { left:20.85rem; bottom:1.7rem; width:6rem; } #expertise-container div.visuel { transform:none; box-shadow: none; } #expertise-container div.visuel div { left:0; transform:none; } #expertise-container ul { position:relative; display:block; padding:0; height:auto; width:100%; } #expertise-container li { width:100%; height:auto; margin:1rem 0 4rem; } #expertise-container li:before { top:0; left:0; width:100%; height:1px; } #expertise-container li h3 { text-align:left; font-size:2.2rem; height:auto; padding-bottom:4rem; } #expertise-container li h3:before { background-image: none; } #expertise-container li p { font-size:1.2rem; text-align:left; } #expertise-container li a { font-size:1.2rem; position:relative; margin-top:2rem; left:0; bottom:unset; } #societe-container .intro { width:100%; padding:3rem 3rem 4rem 3rem; text-align:center; } #societe-container .intro img, #societe-container .intro svg { width:18rem; height:4.45rem; } #societe-container h2 { font-size:1.7rem; padding-top:3rem; } #societe-container p { font-size:1.4rem;} #societe-container .map { width:100%; } #societe-container a { font-size:1.5rem; } #customers-container ul { } #customers-container li { width:32%; padding-bottom:21.5%; } #customers-container li:nth-child(-n+6) { display:none; } #customers-container li:nth-child(-n+3) { display:inline-block; } #customers-container a { font-size:1.5rem; } #news-container h2 { width:20%; } #news-container h2 img, #news-container h2 svg { width:6rem; height:2rem; left:0.5rem; top:0.5rem; } #news-container ul li { height:4rem; width:100%; } #news-container ul li div.pubdate { font-size:1.1rem; padding:0 0 0.5rem 0; } #news-container ul li div.content { font-size:0.75rem; } #news-container ul li div.visuel { width:6rem; } #news-container > div > a.all { font-size:0.75rem; position:absolute; width:10%; padding:0.5rem; margin:0 2.5%; top:50%; transform:translateY(-50%); font-weight:600; } #metiers-container { background:none; height:auto; } #metiers-lottie { display:none; } #metiers-container li:before { display:none; } #metiers-container ul { width:100%; height:auto; margin:0; padding:0; } #metiers-container li { display:inline-block; height:auto; width:100%; padding:0; margin:0; max-height:4.5rem; overflow:hidden; transition:max-height 0ms linear 0ms; } #metiers-container li.current { max-height:50rem; transition:max-height 300ms linear 200ms; } #metiers-container li .bouton { z-index:2; position:relative; display:block; width:100%; height:4.5rem; top:0 !important; } #metiers-container.open li.current .bouton { box-shadow:none; } #metiers-container li:nth-child(2n) .bouton { background-color:rgb(61,76,95); } #metiers-container li:hover .bouton { transform: none; } #metiers-container li .bouton h3 { position:absolute; left:0; top:50%; transform: translateY(-50%); width:100%; height:auto; padding:0 3rem; } #metiers-container li .bouton div { display:none; } #metiers-container li .detailinfos { display:block; } #metiers-container li .detailinfos h3 { display:none; } #metiers-container li .detailinfos p { z-index:1; position:relative; font-size:1.4rem; color:#ffffff; background-color:rgb(55,55,55); margin:0; padding:2rem 3rem; height:auto; text-align:right; } #metiers-container li .detailinfos > img { z-index:1; position:relative; width:150%; max-width:150%; transform:translateX(-25%); } #metiers-container div.infos { display:none !important; } h1 > img { width:160%; max-width:160%; } h1 > span { padding:0 0 0.3rem 2rem; font-size:2.4rem; text-align:left; } .interne h2 { margin:0; padding:2rem 0 2rem 2rem; width:100%; font-size:1.6rem; text-align:left; } .interne div.textevisuel { width:100%; margin:0; } .interne div.textevisuel > div { width:100%; padding:0 2rem 2rem 2rem; font-size:1.2rem; } .interne div.textevisuel > img { width:100%; } .interne div.textevisuel div.request { height:7rem; margin-top:2rem; text-align:center; } .interne div.textevisuel div.request a { position:relative; right:unset; bottom:unset; font-size:1.4rem; } .page-produits div.modules { padding:1.5rem 8% 6rem 8%; background-size:40%; } .page-produits div.modules h2 { padding:2rem 0 2rem 0; } .page-produits div.modules:after { left:0; width:0; top:0; height:0; } .page-produits div.modules li h3 { font-size:1.4rem; line-height:1.4em; width:100%; text-align:left; padding:1rem 1.5rem 1rem 2rem; } .page-produits div.modules li > div { max-height:0; opacity:1; font-size:1.3rem; position:relative; top:0; left:0; width:100%; max-width:100%; height:auto; padding:0; overflow:hidden; border:0; } .page-produits div.modules li > div:before { display:none; } .page-produits div.modules li > div:after { display:none; } .page-produits div.modules li.openmodule div { max-height:100rem; padding:2rem 2rem 2rem 2rem; border-bottom:1px solid #cccccc; } .page-produits div.modules li > div p { font-size:1.3rem; text-align:justify; } #page-fallsensor div.modules { padding:1.5rem 8% 6rem 8%; } #page-fallsensor div.modules h2 { display:block; } #page-fallsensor div.modules li img { display:none; } #page-fallsensor div.modules li:after { display:none; } #page-fallsensor div.modules li h3 { font-size:1.4rem; line-height:1.4em; margin:0; height:auto; padding:1rem 1.5rem 1rem 2rem; border-bottom:1px solid #cccccc; width:100%; } #page-fallsensor div.modules li h3:before {display:block; } #page-fallsensor div.modules li h3:after { right:0.5rem; width:0.5em; height:0.5em; border-width: 2px 2px 0 0; top:50%; transform: translateY(-50%) rotate(45deg); } #page-fallsensor div.modules li > div { top:0; left:0; max-width:100%; } #page-fallsensor .controls { width:100%; margin:0 0 2rem 0; } #container-equipe { margin-top:2rem; } #container-equipe > div:first-of-type { width:100%; height:16rem; } #container-equipe > div:last-of-type { width:100%; } #container-equipe h2 { font-size:1.6rem; padding:0 0 2rem 0; } #container-equipe p { font-size:1.2rem; } #container-carte .intro { width:100%; padding:2rem 2rem; } #container-carte .map { width:100%; } #container-carte .intro h2 { font-size:1.6rem; padding:0 0 2rem 0; } #container-carte .intro p { font-size:1.2rem; text-align:justify; } #container-carte a { position:relative; display:inline-block; font-size:1.5rem; left:50%; transform:translateX(-50%); margin:2rem auto; } #container-highlights { height:55rem; } #container-highlights > div { height:auto; } #container-highlights > div h3 { left:21rem !important; top:1.5rem !important; height:5rem !important; width:10rem !important; } #container-highlights > div > div { left:2rem !important; top:8rem !important; width:29.3rem !important; height:30rem !important; font-size:1.2rem; border-left-width:0.5rem; border-right-width:0.5rem; } #container-highlights > div:not(.current) h3 { left:100% !important; } #container-highlights > div:not(.current) > div { left:-150% !important; } #container-highlights ul { position:relative; margin-top:37rem; text-align:left; padding:0 1.5rem 0 1.5rem; } #container-highlights ul li { width:4rem; height:4rem; padding:0.4rem; margin:0 0.5rem; } #container-highlights ul li:first-of-type { margin:0 0.5rem; } #container-highlights ul li:before { display:none; } #container-highlights > div span { display:none; } #page-clients h1 > span { padding-left:8%; padding-bottom:0.5rem; font-size:2rem; } #page-clients h2 { margin: 2rem 0; } #page-clients ul { margin: 2rem 0; } #page-clients li > .infos h3 { font-size:2.8rem; } #page-clients li > .infos > div div { font-size:1.3rem; } ul#filtre { width:80%; } ul#filtre > li { display:block; margin-bottom:1rem; } ul#filtre > li a { margin-right:0; padding-right:0; border-right:0; font-size:1.3rem; } #page-news h1 span { font-size:2.4rem; padding:0 0 0.3rem 2rem; } #page-news > ul#listenews { width:80%; } #page-news > ul#listenews li > div:first-of-type { width:100%; text-align:left;} #page-news > ul#listenews li > div:last-of-type { width:100%; margin:0 0 0 0; padding:2rem 0 2rem 0; text-align:left; } #page-news .pubdate { height:4rem; font-size:1.4rem; } #page-news .pubdate span:nth-of-type(2) { font-size:0.9em; } #page-news .reseau { width:4rem; height:4rem; } #page-news .visuel { float:right; margin:0.5rem auto 0 auto; } #page-news .titre { position:relative; top:0; left:0; height:auto; padding-bottom:2rem; text-align:left; font-size:1.6rem; } #page-news p { text-align:left; font-size:1.4rem; } #page-news a.link { text-align:left; font-size:1.4rem; } #page-news a.suite { text-align:left; font-size:1.4rem; } #page-news a.masquer { text-align:left; font-size:1.4rem; } #page-news > ul#listenews li:after { width:100%; } ul#share > li { width:2.4rem; height:2.4rem; } ul#share > li a { font-size:1.2rem; } .news-pagination { width:90%; text-align:right; margin-right:0; } .news-pagination .pages span { font-size:1.8rem; padding:0 1.5rem; } .news-pagination .pages a { font-size:1.8rem; padding:0 1.5rem; } .news-pagination .pages a img, .news-pagination .pages a svg { height:1.3rem; } #page-expertiserd h2 { padding:0 2rem; font-size:1.6rem; } #page-expertiserd > div { font-size:1.4rem; padding:0 2rem; } #page-expertiserd p { text-align:left; } #page-expertiserd > ul > li h3 { font-size:2rem; text-align:left; } #page-expertiserd > ul > li h4 { font-size:1.4rem; } #page-expertiserd > ul > li div { font-size:1.4rem; } #page-expertiserd > ul { margin:3rem auto; padding:0 1rem; } #page-expertiserd > ul > li { border:0; border-top:1px solid #999; margin:2rem 0; padding:2rem 1rem; } #page-expertiserd > ul > li > img { position:relative; right:0; top:0; transform:none; width:100%; height:auto; } #page-expertiserd ul.logos { display:block; margin:3rem 0; text-align:center; width:100%; } #page-expertiserd ul.logos > li { display:block; margin:0; text-align:center; width:100%; } #page-expertiserd ul.logos img { max-height:10rem; max-width:20rem; } #page-contact h1 span { font-size:2.4rem; padding:0 0 0.3rem 2rem; } #page-contact > div > div { width:100%; margin:0; padding:0; } #page-contact > div > form { border-left:0; width:100%; margin:0; padding:0; } #page-contact > div > div:first-of-type h2 { position:relative; } #page-contact h2 { text-align:left; font-size:2.4rem; } #contact-map { border-left:0; width:100%; margin:4rem 0; padding:0; } #contact-coords { width:100%; font-size:1.5rem; border:0; } #contact-coords div { padding-left:0; font-size:1.5rem; } #contact-coords .phone a { font-size:2rem; } #contact-coords .pays { font-size:1.6rem; } #contact-coords a { font-size:1.3rem; } #contact-coords > a i { padding-top:1rem; font-size:1.6rem; } #form-contact label { width:100%; padding:0; font-size:2rem; } #form-contact label.consentementrgpd { font-size:1.5rem; } #form-contact button { font-size:2.4rem; } #form-contact .asterisque { font-size:1.6rem !important; padding:2rem 0;} #form-contact input[type="checkbox"]#contact-consentementrgpd + span { padding-left:3rem !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd + span:before { top:0.1rem !important; width:2rem !important; height:2rem !important; } #form-contact input[type="checkbox"]#contact-consentementrgpd + span:after { top:0.6rem !important; left:0.5rem !important; width:1rem !important; height:1rem !important; } #div-auth { width:100%; } /* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */ @media screen and (-webkit-min-device-pixel-ratio:0) { textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; } input,select { height:28px !important; } } } /* AFFICHAGE MINI */ @media (max-width:300px) { html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } }