/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RESET */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { position:relative; display:block; } body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Lora, serif; font-size:1rem; font-weight:400; line-height:1.4; background-color:rgba(255,255,255,1); color:#0F131C; text-align:left; overflow-x:clip; overflow-y:scroll; } body.noscrollbar { overflow-y:hidden; } #en2mots { display:block; width:100vw; overflow-y:visible; overflow-x:clip; } header, main, section, article, aside, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-y:visible; overflow-x:clip; } h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Lora, serif; font-size:1em; font-weight:700; color:inherit; } main h1, main h2, main h3, main h4, main h5, main h6 { 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; } body.desktop .fromrte a { text-decoration:none; color:#0F131C; } body.desktop .fromrte a:hover { text-decoration:none; color:#0F131C; } img { margin:0; padding:0; border:0; } main img { max-width:100vw; } 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; } b, strong, i, span { word-wrap:break-word; } 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:rgba(0,0,0,1); } .litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { max-width:960px; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Mise en forme spécifique des formulaires */ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ fieldset { margin:0; padding:0; border:0; } 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); border-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; resize:none; } select { background-image:url(https://www.pantec.fr/_chartes_/pantec/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; } ::placeholder { font-style:normal; color: rgba(54,54,54,0.55); opacity: 1; } :-ms-input-placeholder { font-style:normal; color: rgba(54,54,54,0.55); } ::-ms-input-placeholder { font-style:normal; color: rgba(54,54,54,0.55); } :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active { font-size:1em !important; -webkit-background-clip:text; } /* 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:400; } button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Lora, serif; font-size:inherit; font-weight:400; text-align:center; background-color:#A3BA99; border:1px solid #A3BA99; color:rgba(255,255,255,1); margin:0; padding:0.5em 1em; width:auto; outline:0; } body.desktop button:hover, body.desktop a.button:hover { color:#A3BA99; background-color:rgba(255,255,255,1); border-color:#A3BA99; text-decoration:none; outline:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ANIMATION SCROLL */ .scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; } .scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; } .scrollanim.frombottom.init { opacity:0; transform:translateY(50%); } .scrollanim.frombottom { opacity:1; transform:translateY(0); } .scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); } .scrollanim.fromtop { opacity:1; transform:translateY(0); } .scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); } .scrollanim.fromleft { opacity:1; transform:translateX(0); } .scrollanim.fromright.init { opacity:0; transform:translateX(50%); } .scrollanim.fromright { opacity:1; transform:translateX(0); } .scrollanim.typescript span.word { opacity:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* BURGER */ button#showhidemenu { z-index:1200; position:absolute; display:inline-block; top:2em; right:0; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; } button#showhidemenu > svg { position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; } button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); } button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,0) scaleX(1.25) rotate(0deg); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,14%) scaleX(1) rotate(45deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); } body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,-14%) scaleX(1) rotate(-45deg); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header nav ul > li, .home-realisations ul:before, .home-realisations ul:after, .home-realisations li, .home-pictos li, .interne.agence section ul.visuels li, .agence-equipe ul li, .agence-equipe ul:before, main nav button, .listereals li, .listeactu li, .detailreal .infosplus li, .galerie li, .contact-form label, footer .copyright span.credits > span { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ #en2mots { opacity:0; } .liquide { margin:0 auto; padding:0; } body.noscrollbar { height:0; overflow-y:hidden; } body.windows.noscrollbar, body.windows.noscrollbar header, body.windows.noscrollbar header nav > div { max-width:calc(100% - 17px); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ header { z-index:1000; position:absolute; left:0; top:0; width:100%; height:auto; background-color:rgba(255,255,255,1); color:#0F131C; overflow:visible; transition:background-color 300ms ease 0ms; } header:after { content:''; background-color:#A3BA99; position:absolute; height:0.7px; width:100vw; left:50%; transform:translateX(-50%); top:7.25em; } .scroll header { position:fixed; } body.showmenu header { height:100%; } header:before { content:''; background-color:rgba(255,255,255,1); position:absolute; right:0; top:0; height:7.25em; width:0; } .scroll header:before { width:100%; } body.showmenu header { background-color:#0F131C; border:0; } body.showmenu header:before { width:0; } body.showmenu a.logo svg > g > g:nth-of-type(2) { fill:rgba(255,255,255,1); } a.logo { font-size:1em; position:relative; display:inline-block; vertical-align:top; margin:0; padding:0; } header a.logo { z-index:2; padding:1.2em 0 1.55em 0; } .scroll a.logo { } a.logo svg { width:auto; height:4.5em; } header a.logo svg > g > g:nth-of-type(1) { fill:#A3BA99; } header a.logo svg > g > g:nth-of-type(2) { fill:#1C305E; transition:fill 300ms ease 0ms; } header a.logo svg > g > g:nth-of-type(3) { fill:#A3BA99; } body:not(.scroll) .accueil a.logo svg > g > g:nth-of-type(2) { fill:rgba(255,255,255,1); } body:not(.scroll) .accueil header { background-color:#0F131C; border:0; border-color:#0F131C; } button#showhidemenu { z-index:1200; position:absolute; display:inline-block; top:2.125em; right:0; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; } button#showhidemenu > svg { color:#A3BA99; position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } body.showmenu button#showhidemenu > svg { color:#A3BA99; } button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; } button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); } button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,0) scaleX(1.25) rotate(0deg); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); } body.desktop button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,14%) scaleX(1) rotate(45deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); } body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,-14%) scaleX(1) rotate(-45deg); } header nav { z-index:1; overflow:visible; position:absolute; display:inline-block; vertical-align:top; width:calc(50% - (7.25em / 2)); height:auto; right:0; top:0; margin:0; padding:0; text-align:left; } header nav > ul { position:relative; display:block; margin:0; padding:0; } header nav > ul > li { position:initial; display:inline-block; vertical-align:top; width:auto; height:100%; padding:0; } header nav > ul > li > ul { display:inline-block; } header nav > ul > li > ul > li { z-index:2; display:inline-block; vertical-align:top; width:auto; height:100%; overflow:hidden; } header nav button { font-weight:700; background-color:transparent; border:0; margin:0 1em; padding-left:0.5em; padding-right:0.5em; line-height:1; } header nav > ul > li > button { font-family:itc; text-transform:uppercase; color:#A3BA99; padding-top:3.125em; padding-bottom:3.125em; } header nav > ul > li > ul > li > button { font-style:italic; color:#0F131C; padding-top:3.125em; padding-bottom:3.125em; } body.desktop header nav button:hover { cursor:pointer; background-color:transparent; } body.desktop header nav > ul > li > button:hover, body.desktop header nav > ul > li.current > button { color:#1C305E; } body.desktop header nav > ul > li > ul > li > button:hover { color:#1C305E; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAIN */ .liquide { width:90%; margin:0 auto; } .fromrte ul { list-style-type:none; margin-left:0; } .fromrte ul li { padding:0.1em 1em 0.1em 1.5em; } .fromrte ul li:before { content:''; background: transparent url('https://www.pantec.fr/_chartes_/pantec/ressources/images/navigation/triangle.svg') center center no-repeat; transform: rotate(-90deg); position:absolute; left:0; top:0.5em; width:0.7em; height:0.7em; background-size:contain; } a.back { display:inline-block; width:auto; margin:1em 0; font-family:itc, sans-serif; font-weight:400; text-transform:uppercase; } body.desktop a.back:hover { color:#A3BA99; } a.back span { display:inline-block; vertical-align:middle; } a.back svg { transform:rotate(90deg); display:inline-block; vertical-align:middle; margin-right:1.5em; width:1.5em; height:1.5em; } body.desktop .fromrte a:hover { text-decoration:none; color:#A3BA99; } main { margin:0; padding:0; display:block; position:relative; width:100%; overflow-x:hidden; overflow-y:hidden; transition:margin 300ms linear 0ms; } main { padding-top:calc(7.25em - 2px); } .scroll main { } section.defaut { text-align:center; padding-bottom:3rem; } section.defaut img { max-width:100%; } main h1, main h2, main h3, main h4, main h5, main h6 { color:inherit; } input, textarea { border:2px solid #A3BA99; background-color:rgba(255,255,255,1); padding:1.5em 1.35em; line-height:1.3; height:auto; color:#0F131C; font-family:itc,sans-serif; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL */ h2.typescript > span { display:block; text-align:center; color:#1C305E; font-size:2.4em; line-height:1.2; font-weight:400; font-family:itc,sans-serif; } h2.typescript > span > span { display:inline-block; padding:0; margin:0; width:auto; height:auto; } h2.typescript > span i { font-weight:400; font-style:italic; font-family:Lora,serif; } h2.typescript > span b { color:#A3BA99; font-weight:400; font-style:italic; font-family:Lora,serif; } .home-valeurs h2.typescript > span b { color:rgba(255,255,255,1); } .parici { position:absolute; height:7.25em; width:auto; } .parici svg { position:relative; padding:0; margin:0; height:100%; width:auto; } section button { font-family:itc,sans-serif; margin-top:3em; text-transform:uppercase; padding:1em 2.5em; text-align:center; line-height:1; } section button > svg, section button > span { position:relative; display:inline-block; vertical-align:middle; line-height:1; } section button > svg { transform:rotate(-90deg); width:1em; height:2em; margin-right:2em; } body.desktop section button:hover { cursor:pointer; } .navbtn > li { backdrop-filter: saturate(150%) blur(30px); list-style-type:none; cursor:pointer; position:absolute; bottom:0; width:5.7em; height:5.7em; background-color:rgba(255,255,255,0.5); border:0; overflow:hidden; } .navbtn > li svg { color:rgba(255,255,255,1);position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-90deg); height:50%; width:auto; } .navbtn > li.prev { left:0; } .navbtn > li.prev svg { transform:translate(-50%,-50%) rotate(90deg); } .navbtn > li.next { right:0; } body.desktop .navbtn > li:hover svg { color:#1C305E; } .home-intro .parici { color:rgba(255,255,255,1); overflow:visible; } .home-intro .parici svg > path:first-of-type { fill:#2B498F; } .home-intro { background-color:#0F131C; } .home-intro > .liquide { padding-top:7.25em; padding-bottom:10.75em; } .home-intro h1 { font-size:1em; line-height:1.2; padding:3em 10em 3em 0; width:50%; } .home-intro h1:before { content:''; opacity:0.2; position:absolute; top:0; left:100%; transform:translateX(-50%); width:100vw; height:0.7px; background-color:rgba(255,255,255,1); } .home-intro h1:after { content:''; opacity:0.2; position:absolute; bottom:0; left:100%; transform:translateX(-50%); width:100vw; height:0.7px; background-color:rgba(255,255,255,1); } .home-intro h1 > span { position:relative; font-size:5.6em; color:rgba(255,255,255,1); font-weight:400; font-family:itc,sans-serif; } .home-intro h1 > span b { display:block; color:#A3BA99; font-weight:400; font-style:italic; font-family:Lora,serif; } .home-intro .slider { position:absolute; } .home-intro .slides { z-index:1; position:absolute; left:0; top:0; right:0; bottom:0; } .home-intro .slide { z-index:1; overflow:hidden; position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; opacity:0; transition: opacity 1200ms linear 0ms; } .home-intro .fadein { z-index:5; opacity:1; transition: opacity 1000ms linear 200ms; } .home-intro .slide img { z-index:11; position:absolute; width:calc(100% + 2px); height:auto; bottom:0; left:50%; transform:translateX(-50%); object-fit:cover; object-position:center; } .home-intro ul#diaporama-nav { z-index:2; position:absolute; left:1.7em; bottom:1.7em; right:1.7em; height:auto; } .home-entreprise { text-align:center; padding:8em 0; overflow:visible; } .home-entreprise .picto svg { height:6em; width:auto; margin-bottom:3em; } .home-entreprise h2 { font-size:1em; margin-bottom:3em; } .home-entreprise p { text-align:center; } .home-realisations { background-color:#1C305E; margin-top:10em; padding:2em 0; overflow:visible; } .home-realisations .parici { color:#2B498F; position:absolute; left:85%; top:0; transform:translateY(-200%); } .home-realisations .filigrane { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; } .home-realisations .filigrane svg { position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); height:auto; } .home-realisations .liquide:before { content:''; position:absolute; top:-2em; bottom:-2em; left:calc(50% - 5.7em); width:0.7px; background-color:rgba(255,255,255,1); opacity:0.2; } .home-realisations .liquide:after { content:''; position:absolute; top:77.7%; left:50%; transform:translateX(-50%); width:100vw; height:0.7px; background-color:rgba(255,255,255,1); opacity:0.2; } .home-realisations .filigrane:after { content:''; position:absolute; top:50%; left:calc(50% - 5.7em); right:0; height:0.7px; background-color:rgba(255,255,255,1); opacity:0.2; } .home-realisations ul.reals { font-size:0; width:auto; white-space:nowrap; } .home-realisations ul.reals li { transition:width 800ms ease 0ms, margin 800ms ease 0ms, opacity 800ms ease 0ms; z-index:2; opacity:1; display:inline-block; vertical-align:middle; margin-left:0; margin-right:3.5em; width:20em; height:32em; text-align:center; white-space:normal; transform:translate(calc(-1 * (20em + 3.5em)), -10em); } .home-realisations .visuel { transition:width 800ms ease 0ms, height 800ms ease 0ms, margin 800ms ease 0ms; z-index:1; position:absolute; right:0; top:50%; transform:translateY(-50%); width:20em; height:20em; } .home-realisations .visuel > img { position:absolute; left:0; top:0; width:100%; height:auto; } .home-realisations .infos { transition:opacity 100ms ease 0ms; opacity:0; display:inline-block; z-index:2; position:absolute; left:0; top:0; width:75%; height:100%; text-align:left; color:rgba(255,255,255,1); } .home-realisations ul.reals li:first-of-type { opacity:0; } .home-realisations ul.reals li:last-of-type { opacity:0; } .home-realisations ul.reals li.firsthide { opacity:0; } .home-realisations ul.reals li.lasthide { opacity:0; } .home-realisations ul.reals li:first-of-type.current { opacity:1; } .home-realisations ul.reals li:last-of-type.lastshow { opacity:1; } .home-realisations ul.reals li.current { width:50%; margin-right:5.7em; } .home-realisations ul.reals li.current .visuel { width:32em; height:32em; box-shadow: 0px 0px 5em #2B498F4E; } .home-realisations ul.reals li.current .infos { transition:opacity 500ms ease 800ms; opacity:1; } .home-realisations .picto { color:#0F131C; display:inline-block; margin-left:5em; width:6.5em; height:6.5em; } .home-realisations .picto svg { position:absolute; left:0; top:0; height:100%; width:100%; } .home-realisations h2 { font-size:1em; color:rgba(255,255,255,1); margin-top:3em; margin-bottom:2em; text-shadow:0px 0px 20px #0000004f; } .home-realisations h2 > span { font-size:4.5em; line-height:1.2; font-weight:400; font-style:italic; } .home-realisations h2 > span > span { display:block; font-size:0.6em; } .home-realisations .soustitre { width:calc((45em - 32em - 1em) * (1 / 0.75)); font-family:itc, sans-serif; font-size:0.75em; line-height:1.4; text-transform:uppercase; margin-bottom:0.75em; } .home-realisations .localisation { width:calc((45em - 32em -1em) * (1 / 0.75)); font-size:0.75em; line-height:1.2; font-style:italic; } .home-realisations a { position:absolute; left:0; bottom:0; font-family:itc,sans-serif; font-weight:500; text-transform:uppercase; color:#A3BA99; text-decoration:underline; } body.desktop .home-realisations a:hover { color:rgba(255,255,255,1); text-decoration:underline; } .home-realisations button { border:0; } .home-realisations ul#realisations-nav { z-index:2; position:absolute; left:50%; top:77.7%; transform:translate(-50%,-50%); width:calc((2 * 5.7em) - 1px); height:auto; } .home-realisations ul#realisations-bullets { position:absolute; left:0; bottom:0; opacity:0; } .home-pictos { margin:2vw 0 1vw 0; padding:0; overflow:hidden; height:10vw; } .home-pictos ul { font-size:0; width:auto; white-space:nowrap; } .home-pictos li { display:inline-block; vertical-align:top; width:12.5vw; height:auto; text-align:center; white-space:normal; } .home-pictos li > span { position:relative; display:inline-block; margin:0 auto; width:80%; height:auto; text-align:center; } .home-pictos li > span:nth-of-type(2) { color:#2B498F; height:4em; display:inline-block; vertical-align:middle; text-transform:uppercase; font-weight:500; font-family:itc,sans-serif; } .home-pictos li > span:nth-of-type(2) > span { position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); } .home-pictos li svg { position:relative; width:60%; height:auto; } .home-valeurs { background-color:#A3BA99; text-align:center; padding:8em 0; overflow:visible; } .home-valeurs .entete { color:#1C305E; font-weight:500; font-family:itc,sans-serif; text-transform:uppercase; margin-bottom:2em; } .home-valeurs h2 { font-size:1em; margin-bottom:3em; } .home-valeurs p { text-align:center; } .home-valeurs button { border-color:rgba(255,255,255,1); } .home-valeurs .visuel img { position:relative; margin:0; padding:0; display:inline-block; } .home-actu { background-color:#0F131C; color:rgba(255,255,255,1); padding:12em 0 6em 0; overflow:visible; } .home-actu > .liquide { padding-left:20em; } .home-actu .visuel { position:absolute; left:0; top:0; width:17em; height:17em; overflow:visible; } .home-actu .visuel > img { z-index:1; position:absolute; left:0; top:0; width:100%; height:auto; } .home-actu .visuel.mask:after { z-index:2; content:''; background-color:#A3BA99; opacity:0.5; position:absolute; left:0; top:0; width:100%; height:100%; } .home-actu .visuel > svg { z-index:3; display:none; display:block; position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); height:auto; } .home-actu h2 { font-size:1em; margin-bottom:2em; color:#A3BA99; font-weight:500; font-family:itc,sans-serif; } .home-actu h2 > span { font-size:2.35em; } .home-actu h2 > span b { font-weight:500; color:rgba(255,255,255,1); } .home-actu .intro { font-style:italic; margin-bottom:2em; } .home-actu a { font-family:itc,sans-serif; font-weight:500; text-transform:uppercase; color:#A3BA99; text-decoration:underline; } body.desktop .home-actu a:hover { color:rgba(255,255,255,1); text-decoration:underline; } .home-actu button { color:rgba(255,255,255,1); background-color:transparent; border:0; } body.desktop .home-actu button:hover { color:#A3BA99; background-color:transparent; } .home-actu .parici { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); } .interne section > .liquide { padding:0 2em 4em 2em; } .interne section h1 { text-align:left; font-family:itc,sans-serif; font-size:1em; font-weight:500; padding-top:2em; } .interne section:not(.detail) h1:after { content:''; position:absolute; left:50%; transform:translate(-50%); bottom:0; width:100vw; height:0.7px; background-color:#A3BA99; } .interne section h1 > span { display:inline-block; font-size:5.6em; line-height:1; } .interne section h1 > span i { font-family:Lora,serif; font-weight:400; font-style:italic; } .interne section:not(.detail) h1 > span { position:absolute; left:0; bottom:0.15em; } .interne.agence section.agence-intro h1 { height:8.6em; } .interne.agence section h1:after { display:none; } .interne section.agence-intro .intro { padding:3em 2em 24em 0; width:calc(50% - (7.25em / 2)); } .interne section.agence-intro .liquide { padding-bottom:0; } .interne section.agence-intro .depuis { position:absolute; left:calc(50% + (7.25em / 2)); bottom:0.85em; font-size:2.4em; color:#A3BA99; font-family:Lora,serif; font-style:italic; font-weight:400; } .interne.agence section ul.visuels { position:initial; list-style-type:none; } .interne.agence section ul.visuels li { overflow:hidden; } .interne.agence section ul.visuels li img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; width:100%; height:auto; } section.agence-expertise { overflow:visible; } .interne section.agence-expertise .liquide { padding-top:10em; padding-bottom:0; overflow:visible; } .agence-expertise h2.typescript { margin-bottom:6em; } .agence-expertise .expertise { z-index:2; padding-top:calc(7.25em + 4em); padding-bottom:4em; color:rgba(255,255,255,1); } .agence-expertise .expertise:before { content:''; background-color:#0F131C; position:absolute; top:7.25em; left:50%; transform:translateX(-50vw); width:calc(100vw - ((100vw - 100%) / 2 ) + 2em); bottom:0; } .agence-expertise .resume { display:inline-block; position:relative; } .agence-expertise h3 { color:rgba(255,255,255,1); font-size:1.5em; font-family:itc,sans-serif; font-weight:500; padding-bottom:1em; } .agence-expertise strong { color:#A3BA99; font-family:Lora,serif; font-style:italic; font-weight:400; } .agence-expertise .triangle { z-index:3; position:absolute; left:calc(100% - 27em); top:0; transform:translateX(-100%); width:5.5em; height:auto; color:#A3BA99; } .agence-expertise .visuel img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:100%; width:auto; min-width:100%; min-height:100%; } .agence-expertise .competences { z-index:1; padding-top:4em; padding-bottom:6em; color:rgba(255,255,255,1); overflow:visible; } .agence-expertise .competences:before { content:''; background-color:#1C305E; position:absolute; top:0; left:50%; transform:translateX(-50vw); width:calc(100vw - ((100vw - 100%) / 2 ) + 2em); bottom:0; } .agence-expertise .competences ul { list-style-type:none; } .agence-expertise .competences ul li { padding:0.1em 1em 0.1em 2em; } .agence-expertise .competences ul li:before { content:''; background: transparent url('https://www.pantec.fr/_chartes_/pantec/ressources/images/navigation/triangle.svg') center center no-repeat; transform: rotate(-90deg); position:absolute; left:0; top:0.5em; width:0.7em; height:0.7em; background-size:contain; } .agence-expertise button { position:absolute; top:100%; left:50%; transform:translate(-50%,-50%); margin:0; } .agence-expertise .liquide > div .parici { z-index:3; position:absolute; left:calc(100% - (27em - 2em)); top:100%; transform:translate(-50%,-50%); } .agence-expertise .liquide > .parici { color:#2B498F; position:absolute; left:100%; bottom:-12em; transform:translate(-100%,100%); } .agence-equipe h2 { font-family:itc,sans-serif; font-weight:500; color:#A3BA99; } .agence-equipe h2 > span { position:absolute; display:inline-block; font-size:5.6em; left:0; bottom:0.15em; line-height:1; } .agence-equipe ul { font-size:0; list-style-type:none; } .agence-equipe ul li { display:inline-block; vertical-align:top; width:100%; height:0; padding-bottom:100%; margin-bottom:2em; overflow:hidden; } .agence-equipe ul li > div { display:block; padding:0; margin:0; position:absolute; left:0; top:0; width:100%; height:100%; } .agence-equipe ul li .photo img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; } .agence-equipe ul li .infos:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#2B498F; opacity:0.8; } .agence-equipe ul li .infos > div { color:rgba(255,255,255,1); text-align:center; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:auto; padding:1em 2em; } .agence-equipe ul li .infos h3 { font-family:itc,sans-serif; font-weight:500;color:#A3BA99; font-size:1.5em; padding-bottom:1em; text-transform:uppercase; } .agence-equipe ul li .infos .fonction { font-weight:700; } .agence-equipe ul li .infos .descriptif { text-align:center; font-style:italic; } .agence-equipe ul li .infos { opacity:0; transition:opacity 300ms ease 0ms; } .agence-equipe ul li:hover .infos, .agence-equipe ul li.hover .infos { opacity:1; } .interne section.agence-philosophie .liquide { padding-top:18em; padding-bottom:6em; overflow:hidden; } .agence-philosophie .parici { color:#2B498F; position:absolute; left:50%; top:6em; transform:translateX(-50%); } .agence-philosophie .entete { text-align:center; color:#1C305E; font-weight:500; font-family:itc,sans-serif; text-transform:uppercase; margin-bottom:2em; } .agence-keywords { text-align:left; padding:0; overflow:visible; } .agence-keywords .fromrte { padding:5em 0; } .agence-keywords p { color:#1C305E; text-align:left; } .agence-keywords .visuel img { position:relative; margin:0; padding:0; display:inline-block; } .interne section.listereals .liquide { padding-top:2em; } .listereals .picto { color:#A3BA99; display:inline-block; width:6.5em; height:6.5em; } .listereals .picto:after { content:''; position:absolute; height:0.7px; width:50vw; background-color:#A3BA99; } .listereals .picto svg { position:absolute; left:0; top:0; height:100%; width:100%; } .listereals .picto span { display:none; } .listereals ul { font-size:0; } .listereals li { display:none; vertical-align:top; width:100%; margin:0 0 2em 0; } .listereals.showfull li { display:inline-block; } .listereals li img { position:relative; width:100%; height:auto; padding:0; margin:0; } .listereals li button { padding:1em 1.5em; position:absolute; border:0; left:0; bottom:0; width:80%; height:auto; max-width:80%; max-height:80%; background-color:rgba(255,255,255,1); color:#0F131C; text-transform:none; text-align:left; } .listereals li button > span:nth-of-type(1) { font-family:Lora, serif; display:block; font-size:0.75em; font-weight:700; color:#0F131C; font-style:italic; } .listereals li button > span:nth-of-type(2) { padding-top:0.5em; display:block; font-size:0.75em; font-weight:400; color:#A3BA99; font-family:itc,sans-serif; } .listereals li button > span > span { display:block; } .listereals button.showhidefull { margin-left:auto; margin-right:auto; text-align:center; width:100%; }: .listereals button.showhidefull > span:nth-of-type(1) { display:inline-block; } .listereals button.showhidefull > span:nth-of-type(2) { display:none; } .listereals.showfull button.showhidefull > span:nth-of-type(1) { display:none; } .listereals.showfull button.showhidefull > span:nth-of-type(2) { display:inline-block; } .listereals li:nth-of-type(1) { display:inline-block; } .listereals li:nth-of-type(2) { display:inline-block; } .listereals li:nth-of-type(3) { display:inline-block; } .listereals li:nth-of-type(4) { display:inline-block; } .listereals li:nth-of-type(5) { display:inline-block; } .listereals li:nth-of-type(6) { display:inline-block; } .listereals li:nth-of-type(7) { display:inline-block; } .listereals li:nth-of-type(8) { display:inline-block; } .listereals li:nth-of-type(9) { display:inline-block; } .listereals li:nth-of-type(10) { display:inline-block; } .listereals li:nth-of-type(11) { display:inline-block; } .listereals li:nth-of-type(12) { display:inline-block; } .interne.actu section.listeactu > .liquide { padding:0 0 0 0; } .listeactu ul { list-style-type:none; } .listeactu li { width:100%; display:inline-block; vertical-align:top; padding:2em 0; } .listeactu li:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:0.7px; width:100vw; background-color:#A3BA99; } .listeactu li .visuel { width:auto; display:inline-block; vertical-align:top; } .listeactu li .visuel img, .listeactu li .visuel svg { position:absolute; left:50%; top:50%; width:100%; height:auto; transform:translate(-50%,-50%); } .listeactu li.photo .visuel { width:15em; height:15em; } .listeactu li.picto .visuel { width:2em; height:2em; transform:rotate(-90deg); } .listeactu li .resume { display:inline-block; vertical-align:top; padding:0 0 0 3em; } .listeactu li.photo .resume { width:calc(100% - 15em - 6px); } .listeactu li.picto .resume { width:calc(100% - 2em - 6px); } .listeactu h2 { font-family:itc,sans-serif; font-weight:700; color:#1C305E; padding-bottom:1em; } .listeactu h2 > span { font-size:1.75em; } .listeactu .intro { font-style:italic; padding-bottom:1em; } .listeactu a { font-family:itc,sans-serif; font-weight:500; text-transform:uppercase; color:#A3BA99; text-decoration:underline; } body.desktop .listeactu a:hover { color:#0F131C; text-decoration:underline; } .interne section.detail { overflow:visible; } .interne section.detail > .liquide { padding-bottom:0; padding-left:0; padding-right:0; } .interne section.detail h1 { margin-bottom:1.2em; } .interne section.detail h1 > span > span { display:block; font-size:0.8em; } main nav ul { position:relative; display:block; list-style-type:none; padding:0; margin:0; } main nav li { display:inline-block; vertical-align:top; padding:0; margin:0; } main nav button { cursor:pointer; background-color:transparent; color:rgba(255,255,255,1); text-align:center; border:0; padding:2em 2em; text-transform:uppercase; font-weight:400; font-family:itc,sans-serif; } main nav button.current { color:#A3BA99; } main nav .liquide > button { transform:translateX(-2em); } body.desktop main nav .liquide button:hover { background-color:transparent; color:#A3BA99; } main nav button span { display:inline-block; vertical-align:middle; } main nav button svg { transform:rotate(90deg); display:inline-block; vertical-align:middle; margin-right:1.5em; width:1.5em; height:1.5em; } main nav .prevnext { font-size:0; } main nav .prevnext button { position:relative; display:inline-block; vertical-align:top; width:50%; height:100%; } main nav .prevnext button:nth-of-type(2) svg { transform:rotate(-90deg); margin-right:0; margin-left:1.5em; } main nav .prevnext button:nth-of-type(1) { background-color:#A3BA99; color:rgba(255,255,255,1); } main nav .prevnext button:nth-of-type(2) { background-color:#0F131C; color:rgba(255,255,255,1); } body.desktop main nav .prevnext button:hover:nth-of-type(1) { background-color:#A3BA99; color:#0F131C; } body.desktop main nav .prevnext button:hover:nth-of-type(2) { background-color:#0F131C; color:#A3BA99; } main nav.navfiltrereals { background-color:#1C305E; } main nav.navfiltrereals .liquide > div { position:absolute; right:0; top:0; } main nav.navfiltrereals .liquide > div > button { display:none; } main nav.navfiltrereals .liquide > div > button svg { color:rgba(255,255,255,1); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:50%; width:auto; } main nav.navfiltrereals .liquide > div > button:nth-of-type(1) svg { transform:translate(-50%,-50%) rotate(0deg); } main nav.navfiltrereals .liquide > div > button:nth-of-type(2) svg { transform:translate(-50%,-50%) rotate(90deg); } main nav.navfiltrereals .liquide > div > button:nth-of-type(3) svg { transform:translate(-50%,-50%) rotate(-90deg); } body.desktop main nav.navfiltrereals .liquide > div > button:hover svg { color:#A3BA99; } main nav.navdetailreal { background-color:#1C305E; } .detailreal h2 { font-family:itc,sans-serif; color:#0F131C; font-weight:400; } .detailreal h2 > span.soustitre { display:inline; font-size:3em; font-family:Lora,serif; font-style:italic; padding-right:0.2em; } .detailreal h2 > span.localisation { display:inline-block; font-size:0.75em; color:#A3BA99; } .detailreal h2 > span.accroche { display:block; font-size:0.75em; text-transform:uppercase; color:#1C305E; padding-top:0.5em; } .detailreal .picto { position:absolute; color:#A3BA99; display:inline-block; left:0; top:0; transform:translate(calc(-100% - 1.5em), 2em); width:6.5em; height:6.5em; } .detailreal .picto svg { position:absolute; left:0; top:0; height:100%; width:100%; } .detailreal h3 { cursor:pointer; padding:2em 0; display:inline-block; width:auto; } .detailreal h3 span { display:inline-block; vertical-align:middle; text-transform:uppercase; font-weight:500; font-family:itc,sans-serif; } .detailreal h3 svg { transition:transform 300ms linear 0ms; transform:rotate(-90deg); display:inline-block; vertical-align:middle; margin-right:1.5em; width:1.5em; height:1.5em; } .detailreal .infosplus > div { display:none; padding-bottom:2em; } .detailreal .infosplus > ul { display:none; list-style-type:none; font-size:0; } .detailreal .infosplus > ul:before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:0.7px; background-color:#A3BA99; } .detailreal .infosplus > ul > li { padding:1em 2em; display:inline-block; vertical-align:top; font-weight:700; font-family:itc,sans-serif; } .detailreal .infosplus > ul > li:after { content:''; position:absolute; bottom:0; left:100%; width:0.7px; height:100%; background-color:#A3BA99; } .detailreal .infosplus h4 { text-transform:uppercase; font-size:0.75em; font-weight:400; font-family:itc,sans-serif; padding-bottom:1em; color:#1C305E; } .detailreal .infosplus li i { display:block; font-size:0.75em; font-weight:400; font-style:italic; font-family:Lora,serif; } .detailreal .infosplus > ul ul { display:block; list-style-type:none; font-size:0; } .detailreal .infosplus > ul ul > li { text-transform:uppercase; display:block; font-weight:700; font-family:itc,sans-serif; } .detailreal .infosplus.open h3 svg { transform:rotate(0deg); } .detailreal .infosplus.open > div { display:block; } .detailreal .infosplus.open > ul { display:flex; } .detailactu .date { color:#A3BA99; font-size:0.75em; font-family:itc,sans-serif; font-weight:400; } .detailactu .categorie { color:#1C305E; font-size:0.75em; font-family:itc,sans-serif; font-weight:400; text-transform:uppercase; } .detailactu a.weblink { color:#0F131C; display:inline-block; width:auto; text-transform:uppercase; font-family:itc,sans-serif; font-weight:400; margin-top:3em; } body.desktop .detailactu a.weblink:hover { color:#A3BA99; } .detailactu a.weblink span { display:inline-block; vertical-align:middle; } .detailactu a.weblink svg { transform:rotate(-90deg); display:inline-block; vertical-align:middle; margin-right:1.5em; width:1.5em; height:1.5em; } .detailactu .fromrte { margin:3em 0 1.5em 0; } .detailactu .fromrte h2 { color:#A3BA99; font-size:1.5em; font-family:itc,sans-serif; font-weight:700; text-transform:uppercase; margin-top:2em; margin-bottom:0.5em; } .detailactu .detail { padding-bottom:2em; } section.galerie > .liquide { padding:0 0 4em 0; } section.galerie ul { font-size:0; list-style-type:none; margin:0; padding:0; display:block; width:100%; } section.galerie li { width:90vw; height:90vw; margin-bottom:1em; display:inline-block; vertical-align:top; } section.galerie li > img { display:block; position:absolute; left:0; top:0; width:100%; height:auto; } section.galerie li > .legende { cursor:pointer; background-color:rgba(255,255,255,1); color:#0F131C; position:absolute; padding:1em; left:0.5em; bottom:0.5em; width:auto; height:auto; max-width:2em; max-height:2em; overflow:hidden; } section.galerie li > .legende:before { opacity:1; content:'i'; font-size:1.35em; font-weight:700; font-style:italic; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } section.galerie li > .legende > span { opacity:0; max-width:0; font-size:0.75em; font-weight:700; font-style:italic; } section.galerie li > .legende.open { padding:1em 1.5em; left:0; bottom:0; max-width:80%; max-height:80%; } section.galerie li > .legende.open:before { opacity:0; } section.galerie li > .legende.open > span { opacity:1; } .interne.contact section h1 { color:#1C305E; } .interne section.contact-coords { overflow:visible; } .interne section.contact-coords .liquide { padding-bottom:0; } .contact-coords .coords { font-family:itc,sans-serif; color:#1C305E; } .contact-coords .coords:before { content:''; position:absolute; left:0; top:0; bottom:0; width:0.7px; background-color:#A3BA99; } .contact-coords .coords > div { height:7em; width:100%; } .contact-coords .coords > div:first-of-type:after { content:''; position:absolute; left:0; top:100%; height:0.7px; width:calc(50vw - (7.25em / 2)); background-color:#A3BA99; } .contact-coords .coords > div > div { display:block; position:absolute; left:4em; right:0; top:50%; transform:translateY(-50%); } .contact-coords .adresse { font-family:Lora,serif; font-style:italic; font-weight:400; } .contact-coords .telephone { color:#A3BA99; font-weight:700; padding-bottom:0.5em; } .contact-coords .email { font-weight:500; } body.desktop .contact-coords a:hover { text-decoration:none; } #page-googlemap { width:100vw; height:15em; } #googlemap { position:absolute; left:0; top:0; width:100%; height:100%; } .contact-form ::placeholder { color: rgb(234,236,240); opacity: 1; } .contact-form :-ms-input-placeholder { color: rgb(234,236,240); } .contact-form ::-ms-input-placeholder { color: rgb(234,236,240); } .contact-form h2 { font-family:itc,sans-serif; font-weight:500; margin:4em 0 2em 0; padding:2em 0; color:#A3BA99; } .contact-form h2 span { z-index:2; font-size:2.35em; background-color:rgba(255,255,255,1); padding-right:1.5em; } .contact-form h2:before { z-index:1; content:''; position:absolute; left:50%; top:100%; width:100vw; transform:translateX(-50%); height:0.7px; background-color:#A3BA99; } .contact-form form { position:relative; width:100%; padding-bottom:6em; } .contact-form fieldset { display:block; position:relative; font-size:0; border:0; outline:0; width:100%; margin:0; padding:0; max-width:100%; } .contact-form label { width:100%; margin:0 0 4em 0; } .contact-form input { outline:0; } .contact-form textarea { height:15em; outline:0; } .contact-form .file { display:block; width:100%; padding-bottom:2.5em; } .contact-form .file span:not(.help) { display:inline-block; width:auto; cursor:pointer; color:rgba(255,255,255,1); background-color:#A3BA99; border:1px solid #A3BA99; padding:1em 2.5em; text-transform:uppercase; font-family:itc,sans-serif; font-weight:500; } body.desktop .contact-form .file span:not(.help):hover { color:#A3BA99; background-color:rgba(255,255,255,1); } .contact-form .file input[type=file]::file-selector-button { display:none; } .contact-form .file input { display:inline-block; padding:0.5em 1em; border:0; width:auto; color:#A3BA99; outline:0; font-size:0.8em; font-weight:400; } .contact-form .help { width:auto; position:absolute; bottom:0; left:0; display:inline-block; font-size:0.75em; font-style:italic; font-family:Lora,serif; color:#A3BA99; line-height:1.25; } .contact input[type="checkbox"] + span:before, .contact input[type="checkbox"] + span:after { top:0.1em !important; } .contact input[type="checkbox"] + span:before { border-color:#0F131C !important; } .contact input[type="checkbox"] + span:after { background-color:#1C305E !important; } .contact-form .consentementrgpd span { color:#1C305E; outline:0; font-size:0.75em; font-family:itc,sans-serif; } .contact-form .asterisque { padding:0.5em; border:0; width:auto; color:#1C305E; outline:0; font-size:0.75em; font-style:italic; font-family:Lora,serif; } .contact-form button { background-color:#1C305E; border-color:#1C305E; position:absolute; right:0; bottom:0; } body.desktop .contact-form button:hover { color:#1C305E; border-color:#1C305E; } .contact-form .reponse { text-align:center; font-family:itc,sans-serif; padding:8em 0 6em 0; color:#A3BA99; font-weight:500; text-transform:uppercase; } .contact input[type="checkbox"] { position:absolute !important; padding-top:1em !important; padding-bottom: 0 !important; left: 0 !important; top:0 !important; transform: scale(1) !important; } .jconfirm .jconfirm-holder { max-width:80%; margin:0 auto; } .jconfirm .jconfirm-box div.jconfirm-title-c { font-family:itc,sans-serif; } .jconfirm .jconfirm-box .jconfirm-buttons button { font-family:itc,sans-serif; border-radius:0; } .btn-primary { background-color:#A3BA99; border-color:#A3BA99; } body.desktop .btn-primary:hover { border-color:#A3BA99; background-color:rgba(255,255,255,1); color:#A3BA99; } .succes { font-size:1.2em; } .erreur { color:#ff0000; margin:2em 0 3em 0; } .erreur ul { list-style-type:none; } .interne.mentionslegales section h1 { color:#1C305E; } .interne.authentification section h1 { color:#1C305E; } .interne.erreur section:before { content:''; position:absolute; left:50%; transform:translateX(-50%); width:80%; top:0; height:100%; background: transparent url('https://www.pantec.fr/_chartes_/pantec/ressources/images/navigation/fili404.svg') center top no-repeat; background-size:100%; } .interne.erreur section h1 { color:#1C305E; } .interne.erreur section h2 { color:#A3BA99; font-family:itc,sans-serif; font-weight:500; font-size:2.35em; padding:1.4em 0 1.2em 0; text-align:left; } .interne.erreur section p { color:#1C305E; } .interne.erreur section ul { list-style-type:none; margin-top:2em; } .interne.erreur section ul li { margin-bottom:0.8em; text-transform:uppercase; font-family:itc,sans-serif; font-weight:700; } .interne.erreur section ul li a { color:#2B498F; text-decoration:underline; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ANIMATION SCROLL */ .scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; } .scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; } .scrollanim.frombottom.init { opacity:0; transform:translateY(50%); } .scrollanim.frombottom { opacity:1; transform:translateY(0); } .scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); } .scrollanim.fromtop { opacity:1; transform:translateY(0); } .scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); } .scrollanim.fromleft { opacity:1; transform:translateX(0); } .scrollanim.fromright.init { opacity:0; transform:translateX(50%); } .scrollanim.fromright { opacity:1; transform:translateX(0); } .scrollanim.typescript span.word { opacity:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MENTIONS LEGALES */ .mentionslegales section { display:block; margin:0 auto; color:#1C305E; } .mentionslegales section h2 { font-size:2.35em; color:#A3BA99; text-transform:uppercase; font-weight:500; font-family:itc,sans-serif; padding-top:1.5em; padding-bottom:0.5em; } .mentionslegales section p { text-align:left; } .mentionslegales section li { text-align:left; } .mentionslegales section strong { font-family:Lora,serif; font-weight:700; font-style:italic; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ .authentification { width:30%; margin:0 auto; } .interne .section-auth h1 > span { font-size:2.2em; } .section-auth form { padding-top:2em; } .section-auth .reponse { padding-top:2em; } .section-auth input { display:block; width:100%; margin:0.5em auto 0 auto; } .section-auth .btn { font-size:1em; border-radius:0; border-color:#A3BA99; padding:1.5em 2.5em; } body.desktop .section-auth .btn:hover { border-color:#A3BA99; background-color:rgba(255,255,255,1); color:#A3BA99; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { z-index:900; position:relative; background-color:#0F131C; color:rgba(255,255,255,1); text-align:left; } footer nav > .liquide { padding-top:7.25em; } footer nav > .liquide:after { content:''; position:absolute; top:7.25em; bottom:0; right:0; width:0.7px; background-color:#A3BA99; opacity:0.21; } footer a.logo svg > g > g { fill:rgba(255,255,255,1); } footer nav > div > ul { display:block; padding-top:1em; } footer nav > div > ul:before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:0.7px; background-color:#A3BA99; } footer nav > div > ul > li { display:inline-block; vertical-align:top; } footer nav > div > ul > li > button { background-color:transparent; color:#2B498F; padding:0 1em; margin-bottom:1.5em; border:0; font-weight:700; font-family:itc,sans-serif; text-transform:uppercase; } body.desktop footer nav > div > ul > li > button:hover { background-color:transparent; color:#2B498F; } footer nav > div > ul > li > ul > li { list-style-type:none; display:block; padding:0; margin:0 0 1em 0; } footer nav > div > ul > li > ul > li > button { cursor:pointer; background-color:transparent; color:rgba(255,255,255,1); padding:0 1em; border:0; font-weight:400; font-family:Lora,serif; font-style:italic; } body.desktop footer nav > div > ul > li > ul > li > button:hover { background-color:transparent; color:#A3BA99; } footer nav div.coords { display:block; padding:0 1em 0 1em; } footer nav div.adresse { font-style:italic; } footer nav div.telephone { font-family:itc,sans-serif; font-weight:700; margin:1.5em 0; } body.desktop footer nav div.telephone a:hover { text-decoration:none; } footer nav a.ecrire { font-family:itc,sans-serif; font-weight:500; text-transform:uppercase; color:#A3BA99; text-decoration:underline; } body.desktop footer nav a.ecrire:hover { color:rgba(255,255,255,1); text-decoration:underline; } footer .parici { position:absolute; bottom:14em; left:85%; color:rgba(255,255,255,1); } footer .parici svg > path { transform:rotate(180deg); transform-origin:center; color:#A3BA99; } footer .copyright { background-color:#1C305E; margin:0; padding:1em 0; text-align:left; line-height:1; } footer .copyright > div > span:not(.credits), footer .copyright > div > a { font-family:itc,sans-serif; font-weight:400; padding:0 1em; line-height:1; display:inline-block; vertical-align:middle; color:rgba(255,255,255,1); } footer .copyright > div > a { font-weight:500; text-transform:uppercase; margin-left:2em; padding-left:0.5em; padding-right:0.5em; } body.desktop footer .copyright > div > a:hover { text-decoration:none; color:#A3BA99; } footer .copyright span.credits { font-style:italic; } footer .copyright span.credits a { color:#A3BA99; text-transform:none; line-height:1; position:relative; display:inline; } body.desktop footer .copyright span.credits a:hover { text-decoration:none; color:#A3BA99; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } #en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:2560px; margin:0 auto; position:relative; } /* AFFICHAGE PANORAMIC */ /* Attention, le style panoramic n'est pas ajouté sur body mais sur html html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; } */ /* AFFICHAGE FONT MAXI */ @media (min-width:2000px) { html { font-size:20px; } .liquide { max-width:calc(0.9 * 2000px); } } /* AFFICHAGE MAXI */ @media (min-width:2560px) { .litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:951px), (orientation:landscape) and (min-width:501px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header nav ul > li, .home-realisations ul:before, .home-realisations ul:after, .home-realisations li, .home-pictos li, .interne.agence section ul.visuels li, .agence-equipe ul li, .agence-equipe ul:before, main nav button, .listereals li, .listeactu li, .detailreal .infosplus li, .galerie li, .contact-form label, footer .copyright span.credits > span { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:90em; } .interne.agence section > .liquide { width:90em; } .home-entreprise > .liquide, .home-valeurs > .liquide, .home-actu > .liquide, footer nav > .liquide, .interne section > .liquide, .interne section > .liquide, .interne.agence section.agence-equipe > .liquide, .interne.agence section.agence-keywords > .liquide, h2.typescript { width:50em; margin-left:auto; margin-right:auto; } header:before { width:calc(50% - (7.25em / 2)); } body:not(.scroll) .accueil header:after { content:''; opacity:0.2; position:absolute; left:calc(50% - (7.25em / 2)); top:0; height:calc(2 * 7.25em); width:0.7px; background-color:rgba(255,255,255,1); } body:not(.scroll) .contact a.logo svg > g > g:nth-of-type(2) { fill:rgba(255,255,255,1); } body:not(.scroll) .contact header { background-color:#0F131C; } body:not(.scroll) .mentionslegales a.logo svg > g > g:nth-of-type(2) { fill:rgba(255,255,255,1); } body:not(.scroll) .mentionslegales header { background-color:#0F131C; } body:not(.scroll) #en2mots.erreur a.logo svg > g > g:nth-of-type(2) { fill:rgba(255,255,255,1); } body:not(.scroll) #en2mots.erreur header { background-color:#0F131C; } button#showhidemenu { display:none; } header nav > ul { white-space:nowrap; overflow:visible; height:7.25em; padding-left:3em; } header nav > ul > li > ul { white-space:nowrap; overflow:visible; padding-left:3em; padding-right:3em; position:absolute; left:0; top:100%; height:0; width:auto; display:inline-block; opacity:0; transition:height 0ms ease 0ms, opacity 0ms ease 0ms; } header nav > ul > li > ul:before { height:100%; backdrop-filter: saturate(150%) blur(30px); background-color:rgba(255,255,255,0.5); z-index:1; content:''; position:absolute; left:0; top:0; right:0; } body.desktop header nav > ul > li:hover > ul:before { } body.desktop header nav > ul > li:hover > ul, header nav > ul > li.hover > ul { height:7.25em; opacity:1; } body.desktop header nav > ul > li:first-of-type:hover:before { z-index:10; content:''; background-color:rgba(255,255,255,0.01); position:absolute; left:0; width:25em; bottom:0; height:3.125em; } .parici { left:0; bottom:1.75em; } .home-intro .slider { left:calc(50% - (7.25em / 2)); right:0; top:0; bottom:0; } .home-realisations button { margin-top:0; position:absolute; right:0; top:77.7%; transform:translateY(-100%); } .home-valeurs .visuel { position:absolute; top:0; bottom:0; width:auto; display:inline-block; } .home-valeurs .visuel.first { left:0; text-align:left; } .home-valeurs .visuel.last { right:0; text-align:right; } .home-valeurs .visuel img { height:100%; width:auto; } .home-actu button { position:absolute; right:1.5em; bottom:-0.25em; padding:0 0.5em; margin-top:0; } main nav ul { position:absolute; top:0; padding-left:2em; left:6.5em; display:inline-block; overflow:hidden; width:calc(100% - 6.5em - 8em); white-space:nowrap; } main nav ul:before { content:''; position:absolute; left:0; top:50%; width:0.7px; height:2em; transform:translateY(-50%); background-color:#A3BA99; } main nav li { opacity:0; width:auto; } main nav li:nth-of-type(1), main nav li:nth-of-type(2), main nav li:nth-of-type(3), main nav li:nth-of-type(4), main nav li:nth-of-type(5), main nav li:nth-of-type(6) { opacity:1; } main nav.navfiltrereals .liquide > div { top:50%; transform:translateY(-50%); } main nav.navfiltrereals .liquide > div > button:nth-of-type(2) { display:inline-block; margin-right:3em; } main nav.navfiltrereals .liquide > div > button:nth-of-type(3) { display:inline-block; } main nav.navdetailactu { z-index:2; position:absolute; left:50%; width:100vw; transform:translateX(-50%); } main nav .prevnext { position:absolute; width:50vw; height:100%; top:0; left:50%; } main nav.navfooter { display:none; } .interne section > .liquide:before { z-index:1; content:''; position:absolute; left:0; top:0; height:100%; width:0.7px; background-color:#A3BA99; } .interne.contact section > .liquide:before, .interne.mentionslegales section > .liquide:before, .interne.authentification section > .liquide:before, .interne.erreur section > .liquide:before, .interne section:not(.detail) h1 { height:14em; } .interne.contact section.contact-form > .liquide { padding-left:0; padding-right:0; } .interne.contact section.contact-form > .liquide:before { display:none; } .contact-form label.nom, .contact-form label.prenom, .contact-form label.telephone, .contact-form label.email { width:50%; } .contact-form label.nom, .contact-form label.telephone { padding-right:2em; } .contact-form label.prenom, .contact-form label.email { padding-left:2em; } .interne.agence section > .liquide { width:90%; } .interne section.agence-intro .liquide:after { content:''; position:absolute; left:50%; transform:translate(-50%); bottom:0; width:100vw; height:0.7px; background-color:#A3BA99; } .interne.agence section ul.visuels { position:initial; list-style-type:none; } .interne.agence section ul.visuels li { position:absolute; width:15em; height:15em; } .interne.agence section ul.visuels li:nth-of-type(1) { width:calc(50vw + (7.25em / 2)); height:calc(100% - 7.25em); top:0; left:calc(50% - (7.25em / 2)); } .interne.agence section ul.visuels li:nth-of-type(2) { bottom:0; left:0; } .interne.agence section ul.visuels li:nth-of-type(3) { bottom:0; left:17em; } .interne.agence section ul.visuels li:nth-of-type(4) { bottom:0; left:34em; } .interne section.agence-expertise .liquide:after { content:''; position:absolute; right:0; top:0; bottom:0; width:0.7px; background-color:#A3BA99; } .agence-expertise .visuel { z-index:2; right:-2em; top:0; bottom:0; position:absolute; width:27em; overflow:hidden; } .agence-expertise .resume { width:calc(100% - (27em + 2em)); } .agence-expertise .competences ul { width:60em; column-count:2; column-gap:0; } .interne section.agence-philosophie > .liquide:before { display:none; } .interne section.agence-equipe { margin-top:10em; overflow:visible; } .interne section.agence-equipe > .liquide:before { top:-10em; height:24em; } .agence-equipe h2 { height:14em; } .agence-equipe h2:after { content:''; position:absolute; left:50%; transform:translate(-50%); bottom:0; width:100vw; height:0.7px; background-color:#A3BA99; } .agence-equipe ul li { display:inline-block; vertical-align:top; width:40%; height:0; padding-bottom:40%; margin-bottom:10em; overflow:hidden; } .agence-equipe ul li:nth-of-type(2n+1) { transform:translateX(-2em); } .agence-equipe ul li:nth-of-type(2n+2) { transform:translate(calc(50% + 2em), 50%); } .agence-equipe ul:before { content:''; position:absolute; left:50%; width:calc(50% + ((10em + 4em) / 2) + 3em); top:4em; height:calc(100% - 4em); background: transparent url('https://www.pantec.fr/_chartes_/pantec/ressources/images/navigation/filitrombi.svg') center top no-repeat; background-size:100%; } .agence-equipe ul li { overflow:visible; } .agence-equipe ul li:before, .agence-equipe ul li:after { position:absolute; background-color:#A3BA99; } .agence-equipe ul li:nth-of-type(1):before { content:''; left:100%; top:100%; width:0.7px; height:10em; } .agence-equipe ul li:nth-of-type(1):after { content:''; left:100%; top:100%; height:0.7px; width:calc(10em + 2em + 2em); } .agence-equipe ul li:nth-of-type(2):before { content:''; left:0; top:0; width:0.7px; height:50%; transform:translateY(-100%); } .agence-equipe ul li:nth-of-type(2):after { content:''; left:100%; top:100%; width:0.7px; height:10em; } .agence-equipe ul li:nth-of-type(3):after { content:''; left:100%; top:0; height:0.7px; width:calc((100vw - (10em + 2em + 2em)) / 2); transform:translateX(-100%); } .agence-equipe ul li:nth-of-type(4):after { content:''; left:0; top:0; height:0.7px; width:calc((100vw - (10em + 2em + 2em)) / 2); } .interne section.agence-keywords .liquide { padding-left:0; padding-right:16em; padding-bottom:0; } .interne section.agence-keywords > .liquide:before { left:50%; top:0; transform:translateX(-50%); width:100vw; height:0.7px; } .agence-keywords .visuel { position:absolute; top:0; bottom:0; width:auto; display:inline-block; } .agence-keywords .visuel.first { left:0; text-align:left; } .agence-keywords .visuel.last { right:0; text-align:right; } .agence-keywords .visuel img { height:100%; width:auto; } .agence-keywords .keywords { position:absolute; top:0; bottom:0; width:16.3em; right:0; transform:translateX(-100%); } .agence-keywords .keywords:before { content:''; position:absolute; left:0; top:0; bottom:0; width:0.7px; background-color:#A3BA99; opacity:0.21; } .agence-keywords ul { list-style-type:none; position:absolute; top:50%; transform:translateY(-50%); width:100%; height:auto; } .agence-keywords ul li { color:#1C305E; display:block; font-size:2.35em; text-align:right; padding:0.1em 0.9em; font-style:italic; } .agence-keywords ul li:nth-of-type(2n+2) { color:#A3BA99; } .interne section.listereals .liquide { padding-left:0; padding-right:0; padding-top:7.25em; } .listereals .picto { position:absolute; left:0; top:0; transform:translate(calc(-100% - 1.5em), 7.25em); } .listereals .picto:after { right:-4em; bottom:-1.5em; } .listereals ul:before { z-index:1; content:''; position:absolute; background-color:#A3BA99; left:0; top:0; height:0.7px; width:calc(100vw - ((100vw - 100%) / 2)); } .listereals ul:after { content:''; position:absolute; background-color:#A3BA99; right:0; top:0; width:0.7px; height:7.25rem; transform:translateY(-100%); } .listereals li { width:calc((100% - (2 * 2.5vw)) / 3); margin:0 2.5vw 2.5vw 0; } .listereals li:nth-of-type(3n+3) { margin-right:0; } .listereals li:nth-of-type(3n+3):after { content:''; position:absolute; background-color:#A3BA99; right:0; top:-2.5vw; width:0.7px; bottom:0; } .listereals button.showhidefull { margin-left:35%; margin-right:35%; text-align:center; width:30%; }: .interne section.detailreal > .liquide { padding-left:0; padding-right:0; } .detailreal .content { padding-left:2em; padding-right:2em; } .detailreal h3 { padding-left:2em; padding-right:2em; } .detailreal .fromrte { padding-left:2em; padding-right:2em; } .detailreal .infosplus > ul:before { left:0; width:calc(100vw - ((100vw - 100%) / 2)); transform:none; } .detailreal .infosplus > ul ul > li { width:auto; padding:0 0 0 1em; margin-left:1em; display:inline-block; vertical-align:top; } .detailreal .infosplus > ul ul > li:first-of-type { padding-left:0; margin-left:0; } .detailreal .infosplus > ul ul > li:not(:first-of-type):before { content:''; position:absolute; left:0; top:50%; width:0.7px; height:1em; transform:translateY(-50%); background-color:#A3BA99; } section.galerie ul:after { content:''; position:absolute; width:calc(100vw - ((100vw - 100%) / 2)); left:0; top:0; height:0.7px; background-color:#A3BA99; } section.galerie li { width:15em; height:15em; margin-left:2.5em; margin-bottom:2.5em; } section.galerie li:nth-of-type(1) { width:32.5em; height:32.5em; } section.galerie li:nth-of-type(3) { position:absolute; right:0; top:17.5em; } section.galerie li:nth-of-type(3n+1) { margin-left:0; } .interne.actu section.listeactu > .liquide { width:90%; } .interne.actu section.listeactu > .liquide:before { left:50%; } .bricklayer-column-sizer { width: 50%; } ul.bricklayer .bricklayer-column:nth-of-type(2) li { padding-right:3em; } ul.bricklayer .bricklayer-column:nth-of-type(3) li { padding-left:3em; } ul.bricklayer .bricklayer-column:nth-of-type(2) li:after { width:50vw; left:100%; transform:translateX(-100%); } ul.bricklayer .bricklayer-column:nth-of-type(3) li:after { left:0; transform:none; } .detailactu .content { padding-left:2em; padding-right:2em; padding-bottom:3em; } .interne.contact section h1 > span { width:58%; font-size:5.2em; } .contact-coords .coords { position:absolute; left:calc(50% + (7.25em / 2)); top:0; right:0; } .contact-form h2:before { left:0; transform:translateY(-50%); top:50%; } .interne.erreur section { min-height:40em; } footer a.logo { position:absolute; left:1em; top:calc(7.25em + 1em); } footer nav > .liquide:before { content:''; position:absolute; top:7.25em; bottom:0; left:0; width:0.7px; background-color:#A3BA99; opacity:0.21; } footer nav > div > ul { display:flex; justify-content:right; align-items:top; } footer nav > div > ul > li { display:inline-block; vertical-align:top; padding:0 0 10em 0; } footer nav > div > ul > li:last-of-type:before { content:''; position:absolute; top:-1em; bottom:0; left:0; width:0.7px; background-color:#A3BA99; opacity:0.21; } footer nav > div > ul > li:nth-of-type(1) { width:10em; } footer nav > div > ul > li:nth-of-type(2) { width:14em; } footer nav > div > ul > li:nth-of-type(3) { width:13em; } footer .copyright span.credits { font-size:0; position:absolute; right:0; top:50%; transform:translateY(-50%); } footer .copyright span.credits > span:not(:first-of-type) { padding-left:2em; } footer .copyright span.credits > span:not(:first-of-type):before { content:''; background-color:#2B498F; position:absolute; left:1em; top:50%; transform:translate(-50%,-50%); width:0.3em; height:0.3em; border-radius:50%; } } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (orientation:portrait) and (min-width:951px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px) { html { font-size:10px; font-size:1vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header nav ul > li, .home-realisations ul:before, .home-realisations ul:after, .home-realisations li, .home-pictos li, .interne.agence section ul.visuels li, .agence-equipe ul li, .agence-equipe ul:before, main nav button, .listereals li, .listeactu li, .detailreal .infosplus li, .galerie li, .contact-form label, footer .copyright span.credits > span { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ #page-googlemap { height:25em; } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:950px), (orientation:landscape) and (max-width:500px) { html { font-size:24px; font-size:3vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header nav ul > li, .home-realisations ul:before, .home-realisations ul:after, .home-realisations li, .home-pictos li, .interne.agence section ul.visuels li, .agence-equipe ul li, .agence-equipe ul:before, main nav button, .listereals li, .listeactu li, .detailreal .infosplus li, .galerie li, .contact-form label, footer .copyright span.credits > span { font-size:1.7rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:90vw; } div.nosmartphone br { display: none; content: ' '; clear:none; } a.logo svg { height:3em; } header a.logo { z-index:2; margin-left:5vw; padding-bottom:1em; } header a.logo svg > g > g:nth-of-type(3) { display:none; } body:not(.scroll) .accueil header:after { background-color:rgba(255,255,255,1); opacity:0.2; } body.showmenu header:after { background-color:rgba(255,255,255,1); opacity:0.2; } body.scroll.showmenu header:after { background-color:rgba(255,255,255,1); opacity:0.2; } header:after { top:5.2em; } header:before { height:5.2em; } body.showmenu header:before { background-color:rgba(255,255,255,1); opacity:0.2; top:5.2em; height:calc(100% - 5.2em); bottom:0; right:1.8em; width:0.7px; } button#showhidemenu { z-index:11; position:fixed; width:2em; height:2em; top:1.5em; right:5vw; } header nav { width:100%; } header nav > ul { display:none; padding-top:5.2em; } header nav > ul li { position:relative; display:block; width:100%; margin:0; padding-left:5vw; padding-bottom:1px; } header nav > ul > li:after { content:''; background-color:rgba(255,255,255,1); opacity:0.2; position:absolute; height:0.7px; width:100vw; left:50%; transform:translateX(-50%); bottom:0; } header nav > ul > li > button { display:block; margin:1em 0; padding:0.5em 0 0.5em 0; } header nav > ul > li > ul > li > button { font-weight:400; color:rgba(255,255,255,1); display:block; margin:0 0 1em 0; padding:0.5em 0 0.5em 1em; } header nav > ul > li > ul { position:relative; display:block; } header nav > ul > li > ul > li { display:block; } body.showmenu header { position:fixed; height:100%; overflow:hidden; } body header > div.liquide { height:100%; overflow:hidden; padding-left:0; padding-right:0; width:100vw; } body.showmenu header nav { z-index:1; height:100%; overflow-y:auto; } body.showmenu header nav:before { z-index:10; content:''; position:fixed; left:0; top:0; width:100%; height:5.2em; background-color:#0F131C; } body.showmenu header nav > ul { display:block; padding-bottom:4em; } body.showmenu header nav > ul > li > ul { opacity:1; } main { padding-top:calc(5.2em - 2px); } h2.typescript > span { font-size:1.3em; } section button { width:100%; font-size:0.8em; padding:1.5em 0.5em; } .parici { height:5em; } .home-intro .liquide { padding-top:0; padding-bottom:0; } .home-intro h1 { z-index:10; padding:calc(75vw - 3.8em) 0 7em 0; width:100%; } .home-intro h1 > span { font-size:2.5em; } .home-intro h1:before { display:none; top:2px; left:50%; } .home-intro h1:after { left:calc(75vw - 5vw); top:0; width:0.7px; height:100%; } .home-intro .slider { left:0; top:0; width:75vw; height:75vw; } .home-intro ul#diaporama-nav { display:none; } .home-intro .parici { bottom:1em; right:0; } .home-entreprise { padding-top:0; } .home-entreprise .liquide { transform:translateY(-1.5em); } .home-entreprise h2 > span { padding:0 0.5em; } .home-realisations { margin-top:0; } .home-realisations .filigrane { width:500%; } .home-realisations .parici { display:none; } .home-realisations .liquide:before { left:78%; } .home-realisations .liquide:after { top:22em; left:78%; width:75vw; transform:translateX(-100%); } .navbtn > li { width:3.6em; height:3.6em; } .home-realisations ul#realisations-nav { left:78%; top:4.2em; width:calc((2 * 3.6em) - 1px); } .home-realisations ul.reals li { margin-left:0; margin-right:10vw; width:100%; height:22em; transform:translate(calc(-100% - 10vw), -5em); } .home-realisations ul.reals li.current { margin-left:0; margin-right:10vw; width:100%; height:22em; } .home-realisations .visuel { top:0; transform:translateY(0); right:22%; width:78%; height:13.8em; } .home-realisations ul.reals li.current .visuel { right:22%; width:78%; height:13.8em; } .home-realisations .infos { width:100%; height:calc(100% + 4em); padding:0 5%; } .home-realisations .picto { display:none; } .home-realisations h2 { margin-top:10.5em; } .home-realisations h2 > span { font-size:2.5em; } .home-realisations a { font-size:0.8em; left:5%; } .home-realisations button { margin-bottom:1em; } .home-pictos { margin-top:10vw; height:33vw; } .home-pictos li { width:33vw; font-size:0.9rem; } .home-valeurs { padding:calc(10em + 4em) 0; } .home-valeurs .visuel { position:absolute; width:100vw; left:50%; transform:translateX(-50%); height:10em; overflow:hidden; display:inline-block; } .home-valeurs .visuel.first { top:0; } .home-valeurs .visuel.last { bottom:0; } .home-valeurs .visuel img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; height:auto; width:100%; display:inline-block; } .home-valeurs h2 { margin-bottom:0; } .home-valeurs h2 span { font-size:1.2em; } .home-actu { padding-top:6em; padding-bottom:2em; } .home-actu .parici { display:none; } .home-actu > .liquide { padding-left:0; padding-top:15em; } .home-actu .visuel { width:12em; height:12em; } .home-actu h2 > span { font-size:2em; } .home-actu button { width:auto; margin-top:2.5em; padding:0 0.5em; } .interne section > .liquide { padding:0 0 4em 0; } .interne section h1 { height:8em; } .interne section h1 > span { font-size:2.4em; left:0; bottom:0.4em; } .interne section.detail h1 { padding-top:1em; height:auto; } .interne section.detail h1 > span { bottom:initial; } .interne.agence section.agence-intro h1 { height:6em; } .interne section.agence-intro .intro { padding:1em 0 2em 0; width:100%; } .interne section.agence-intro .depuis { display:none; } .interne.agence section ul.visuels { font-size:0; width:400vw; transform:translateX(calc(20vw - 5vw)); } .interne.agence section ul.visuels li { display:inline-block; vertical-align:top; width:60vw; height:60vw; } .interne.agence section ul.visuels li:nth-of-type(4) { transform:translateX(-400%); } .interne.agence section ul.visuels li img { min-width:90%; min-height:90%; width:90%; } .interne section.agence-expertise .liquide { padding-top:4em; } .agence-expertise .expertise { padding-top:calc(10em + 2em); } .agence-expertise .expertise:before { top:0; width:100vw; } .agence-expertise .triangle { display:none; } .agence-expertise .visuel { position:absolute; display:block; width:100vw; height:10em; left:50%; transform:translateX(-50%); top:0; } .agence-expertise .liquide > div .parici { left:50%; } .agence-expertise .competences:before { width:100vw; } .agence-expertise .liquide > .parici { display:none; } .interne section.agence-equipe { margin-top:4em; } .interne section.agence-equipe .liquide { padding-bottom:0; } .agence-equipe h2 { text-align:center; height:6em; } .agence-equipe h2 > span { width:100%; text-align:center; font-size:2.5em; bottom:1em; } .interne section.agence-philosophie .liquide { padding-top:4em; } .agence-philosophie .parici { display:none; } .agence-keywords .fromrte { padding:0; } .agence-keywords .keywords { display:none; } .agence-keywords .first { display:none; } .agence-keywords .last { position:relative; width:100%; height:10em; } .agence-keywords .visuel img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:auto; } main nav { padding-bottom:3em; } main nav.navfiltrereals { padding-bottom:0; } main nav .liquide > button { padding-top:1em; padding-bottom:1em; } main nav ul li button { padding-top:0; padding-bottom:1em; } main nav ul li:last-of-type { padding-bottom:1em; } main nav .prevnext { position:absolute; width:100vw; left:50%; height:3em; transform:translateX(-50%); } main nav .prevnext button { padding:0; height:3em; } main nav .prevnext button svg { position:absolute; top:50%; } main nav .prevnext button span { position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); font-size:0.75em; } main nav .prevnext button:nth-of-type(1) svg { left:5vw; transform:translateY(-50%) rotate(90deg); } main nav .prevnext button:nth-of-type(2) svg { right:5vw; transform:translateY(-50%) rotate(-90deg); } main nav .prevnext button:nth-of-type(1) span { padding:0 3em 0 4em; text-align:right; } main nav .prevnext button:nth-of-type(2) span { padding:0 4em 0 3em; text-align:left; } main nav ul { width:100%; } main nav li { width:100%; } main nav.navfiltrereals ul { max-height:0; opacity:0; transition: max-height 300ms linear 0ms, opacity 300ms linear 0ms; } main nav.navfiltrereals.open ul { max-height:30em; opacity:1; } main nav.navfiltrereals .liquide > div { top:0.5em; right:-5vw; } main nav.navfiltrereals .liquide > div > button:nth-of-type(1) { display:inline-block; padding:1.25em; transition:transform 300ms linear 0ms; transform:scaleY(1); } main nav.navfiltrereals.open .liquide > div > button:nth-of-type(1) { transform:scaleY(-1); } main nav.navfooter { background-color:transparent; margin-bottom:3em; } .listereals .picto { transform:translateY(-1.5em); width:3.5em; height:3.5em; } .listereals .picto:after { left:0; bottom:-0.5em; width:100vw; transform:translateX(-5vw); } .listereals .picto span { font-size:1.5em; font-family:itc,sans-serif; font-weight:500; color:#1C305E; display:inline-block; width:calc(90vw - 3em); position:absolute; left:3em; top:50%; transform:translateY(-50%); padding:0 0.5em; text-align:center; text-transform:uppercase; } .listereals .picto span:before { content:''; position:absolute; top:50%; transform:translateY(-50%); height:3em; left:0; width:0.7px; background-color:#A3BA99; } .detailreal .content { margin-left:6em; padding-bottom:4em; } .detailreal .content:before { content:''; position:absolute; top:0; bottom:0; left:-1.5em; width:0.7px; background-color:#A3BA99; } .detailreal .content:after { content:''; position:absolute; bottom:0; left:50%; height:0.7px; width:100vw; transform:translateX(calc(-50% - 3em)); background-color:#A3BA99; } .interne section.detailreal h1 > span { font-size:1.7em; } .detailreal h2 > span.soustitre { font-size:1.6em; } .detailreal .picto { width:3.5em; height:3.5em; transform:translate(-6em, 1em); } .detailreal h3 { position:absolute; padding:0; left:6em; top:-1.5em; transform:translateY(-100%); } .detailreal h3 > svg { width:calc(0.8em * 1.5); height:calc(0.8em * 1.5); margin-right:calc(0.8em * 1.5); } .detailreal h3 > span { font-size:0.8em; } .detailreal .fromrte { padding-top:1em; padding-bottom:1em; } .detailreal .infosplus.open > ul { display:block; } .detailreal .infosplus > ul:not(:first-of-type):before { display:none; } .detailreal .infosplus > ul > li { display:block; width:100%; padding:1em 0; } .detailreal .infosplus > ul > li:after { left:50%; height:0.7px; width:100vw; transform:translateX(-50%); } .listeactu li.photo .visuel { width:90vw; height:90vw; } .listeactu li.picto .visuel { position:absolute; left:0; top:2.1em; width:1.5em; height:1.5em; } .listeactu li.photo .resume { width:100%; padding-left:0; padding-top:1em; } .listeactu li.picto .resume { width:100%; padding-left:0; } .listeactu li.picto h2 { padding-left:2.5em; } .listeactu li h2 > span { font-size:1.3em; } .detailactu .content { padding-bottom:3em; } .interne section.galerie > .liquide { padding:1em 0 2em 0; } .contact-coords .coords > div:first-of-type:after { left:50%; width:100vw; transform:translateX(-50%); bottom:0; height:0.7px; } .contact-coords .coords:before { left:50%; width:100vw; transform:translateX(-50%); top:100%; height:0.7px; } .contact-coords .coords > div { height:5em; } .contact-coords .coords > div > div { left:0; } .contact-form label { margin-bottom:2em; } .contact-form label.file { width:100%; } .contact-form .file input { display:block; width:100%; overflow:hidden; } .contact-form .file input[type=file]::file-selector-button { display:inline-block; opacity:0; width:1px; } .contact-form .file span:not(.help) { width:100%; text-align:center; } .mentionslegales section h2 { font-size:1.2em; } /* FOOTER */ footer .parici { left:70%; bottom:16em; } footer nav > .liquide { padding-top:3em; padding-bottom:3em; } footer nav > .liquide:after { top:3em; right:35%; } footer a.logo { position:absolute; left:0; top:6em; } footer a.logo svg { height:4.5em; } footer nav > div > ul { padding-top:10em; } footer nav > div > ul > li { display:block; width:65%; } footer nav > div > ul > li:nth-of-type(1) { display:none; } footer nav > div > ul > li:nth-of-type(2) { display:none; } footer nav > div > ul > li > button { padding-left:0; } footer nav div.coords { padding-left:0; padding-right:0.1em; } footer .copyright { padding:1em 0; } footer .copyright > div > span:not(.credits), footer .copyright > div > a { padding:0; margin:1em 0; } footer .copyright span { display:block; padding:0; margin:1em 0; } } /* AFFICHAGE MINI */ @media (max-width:300px) { body { overflow-x:scroll; } html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { width:300px; margin-top:0 !important; } footer { width:300px; } }