/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* 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:Montserrat, sans-serif; font-size:1.5625rem; font-weight:400; line-height:1.4; background-color:rgba(255,255,255,1); color:#272343; 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:Montserrat, sans-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:inherit; } body.desktop .fromrte a:hover { text-decoration:none; color:#FAC80A; } 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:#F4F4F4; border-color:transparent; color:#272343; line-height:1.4; height:1.4em; 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.groupe-plb.fr/_chartes_/plb/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:#272343; } select.placeholder { color:#C7C7C7 !important; } ::placeholder { font-style:normal; color: #C7C7C7; opacity: 1; } :-ms-input-placeholder { font-style:normal; color: #C7C7C7; } ::-ms-input-placeholder { font-style:normal; color: #C7C7C7; } :-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 transparent !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:#272343 !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:Montserrat, sans-serif; font-size:inherit; font-weight:400; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); 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:rgba(22,22,22,1); background-color:transparent; border-color:rgba(22,22,22,1); 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); } .liquide { position:relative; width:90%; width:90vw; margin-left:auto; margin-right:auto; } h1, h2, h3, h4, h5, h6 { margin:0; padding:0; position:relative; font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; text-align:left; } main h1, main h2, main h3, main h4, main h5, main h6 { font-family:Montserrat, sans-serif; } div { margin:0; padding:0; position:relative; display:block; font-size:inherit; } span { margin:0; padding:0; position:relative; display:inline; font-size:inherit; } a, a:link, a:active, a:visited, a:focus { margin:0; padding:0; cursor:pointer; font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; } body.desktop a:hover { color:inherit; text-decoration:none; outline-color:transparent; } a.ancre { display:block; position:absolute; left:0; top:0; height:1px; width:100%; } button { margin:0; padding:0; cursor:pointer; position:relative; display:inline-block; vertical-align:baseline; font-family:Montserrat, sans-serif; font-size:inherit; line-height:inherit; font-weight:inherit; text-align:center; color:inherit; background-color:transparent; border:0; width:auto; outline-color:transparent; } body.desktop button:hover { color:inherit; text-decoration:none; outline-color:transparent; } svg { margin:0; padding:0; border:0; position:relative; display:inline-block; vertical-align:middle; height:auto; width:auto; } p { margin:0; padding:1em 0 0 0; font-size:inherit; word-wrap:break-word; text-align:left; } nav ul { list-style-type:none; } .fromrte ul { list-style-type:none; } .fromrte a { color:inherit; } body.desktop .fromrte a:hover { color:#FAC80A; } label { margin:0; padding:0; position:relative; display:inline-block; vertical-align:top; font-weight:400; } label > span { display:inline-block; vertical-align:middle; } :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active { font-family:Montserrat, sans-serif !important; font-size:1.15em !important; outline: 2px solid #F4F4F4 !important; transition: background-color 0s 600000s, color 0s 600000s; } input, textarea, select { margin:0; padding:0.5em 1em; background-color:#F4F4F4; color:#272343; line-height:1.4; height:initial; font-family:Montserrat, sans-serif; position:relative; display:inline-block; vertical-align:middle; font-size:inherit; outline:0; 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:calc(5 * 1.4em + 2 * 0.5em); } select { padding-right:calc(1em + 2 * 1em) !important; background-image:url(https://www.groupe-plb.fr/_chartes_/plb/ressources/images/contribution/dropdown.svg); background-size:1em; background-position: calc(100% - 1em) center !important; background-repeat: no-repeat; } select::-ms-expand { display:none; } select option { color:#272343; } select.placeholder { color:#C7C7C7 !important; } input[type="radio"], input[type="checkbox"], input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { padding:0; position:absolute; left:0em; top:0.18em; height:1em; width:1em; transition:all 200ms; transform-origin: 50% 50%; /* pour être certain du point d'origine du scale pour la case et la coche */ } input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:''; border:1px solid transparent; background-color:transparent; /* Pour que les éléments before et after soient correctement alignés, on ajoute systématiquement une border */ } input[type="radio"], input[type="checkbox"] { opacity:0; } input[type="radio"] + span, input[type="checkbox"] + span { margin:0; padding:0 0 0 1.6em; position:relative; cursor:pointer; } input[type="radio"] + span:before, input[type="checkbox"] + span:before { border-color:#272343; } input[type="radio"] + span:after, input[type="checkbox"] + span:after { background-color:#272343; } input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius:0; } input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius:50%; } input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0; transform: scale(0); } input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1; transform: scale(0.5); } input[type="file"] { background-color:transparent !important; border:0 !important; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ header { z-index:1000; position:absolute; left:0; top:0; width:100%; height:auto; background-color:rgba(255,255,255,1); color:#272343; overflow:visible; transition:background-color 300ms ease 0ms; } .scroll header { position:fixed; } body.showmenu header { height:100%; } body.showmenu header { background-color:rgba(255,255,255,1); border:0; } header nav.liquide { padding-top:1.6em; } a.logo { font-size:1em; position:relative; display:inline-block; vertical-align:top; margin:0; padding:0; } header a.logo { z-index:3; padding:0.65em 0 0.6em 0; } header a.logo svg { height:3.2em; } .scroll a.logo { } a.logo svg { width:auto; height:4.5em; } button#showhidemenu { z-index:4; position:absolute; display:inline-block; top:1em; right:0; width:1.6em; height:1.6em; margin:0; padding:0; background-color:transparent; border:0; } button#showhidemenu > svg { color:#FAC80A; position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } body.showmenu button#showhidemenu > svg { color:#FAC80A; } 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 ul.navlink { font-size:0; line-height:1; padding:0; margin:0; position:absolute; top:0; color:rgba(255,255,255,1); } header ul.navlink li { display:inline-block; vertical-align:top; line-height:1; margin-right:1em; padding:0.2em 0 0.4em 0; } header ul.navlink li:last-of-type { margin-right:0; } header ul.navlink li a { position:relative; display:inline-block; vertical-align:middle; padding:0; line-height:1; } header ul.navcontact { z-index:5; left:0; width:100%; } header ul.navcontact:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translateX(-50%); background-color:#54524D; } header ul.navcontact li { margin-right:2em; } header ul.navcontact span { font-size:0.6em; font-weight:500; display:inline-block; vertical-align:middle; padding-left:1em; text-transform:uppercase; line-height:1; } header ul.navcontact svg { height:0.85em; width:auto; display:inline-block; vertical-align:bottom; } header ul.navcontact li.contact svg { height:0.75em; } header ul.navcontact li a { color:rgba(255,255,255,1); } body.desktop header ul.navcontact li a:hover { color:#FAC80A; } ul.navsociaux li a { position:relative; font-size:1em; width:1em; height:1em; border-radius:0.15em; } ul.navsociaux svg { height:0.75em; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } ul.navsociaux li.facebook svg { height:0.65em; } header ul.navsociaux { z-index:6; right:0; width:auto; } header ul.navsociaux li { padding:0.3em 0 0.3em 0; } header ul.navsociaux li a { background-color:rgba(255,255,255,1); color:#54524D; } body.desktop header ul.navsociaux li a:hover { background-color:#FAC80A; color:#54524D; } header ul#menu { z-index:1; font-size:0; position:absolute; left:0; top:0; } header ul#menu > li { display:inline-block; vertical-align:top; margin-top:calc(1.6em + 0.65em + (3.2em - 0.25em) / 2 ); margin-left:4em; line-height:1; } header ul#menu > li:first-of-type { margin-left:calc((3.2em * 132.567 / 58.849) + 4em); } header ul#menu > li button { font-weight:600; font-size:0.95em; color:#272343; line-height:1; white-space:nowrap; } body.desktop header ul#menu > li > button:hover { font-weight:600; } body.desktop header ul#menu > li button:hover { color:#FAC80A; } header ul#menu svg { display:none; vertical-align:top; height:0.8em; width:auto; margin-left:0.6em; transform:translateY(0.15em); } header ul#menu svg polyline { stroke-width:10; } header ul#menu > li > ul > li { display:inline-block; vertical-align:top; padding:1.5em 1em 1em 1em; } header ul#menu > li > ul span, header ul#menu > li > ul button.service { color:#FAC80A; font-size:0.95em; font-weight:700; text-transform:uppercase; white-space:nowrap; } header ul#menu > li > ul button { font-weight:500; font-size:0.85em; color:#54524D; line-height:1; margin-top:1em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAIN */ main { overflow:hidden; transition:margin 500ms linear 0ms; } .scroll main { } body > div.interne:not(.catalogue):not(.plb-secu):not(.ltp):not(.accessoires) main { z-index:10; overflow:visible; } main section { overflow:hidden; } main section img { max-width:100%; } .fromrte { font-size:0.95em; } .fromrte li:before { content:'•'; font-size:1em; position:relative; display:inline-block; padding-right:0.5em; line-height:1.5; } .fromrte a { color:#FAC80A; } body.desktop .fromrte a:hover { text-decoration:none; color:#FAC80A; } .fromrte a.fleche { font-weight:700; } body.desktop .fromrte a.fleche:hover { font-weight:900; } .fromrte a.fleche:after { content:''; position:relative; display:inline-block; vertical-align:middle; height:0.6em; width:2em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-rte.svg') right center no-repeat; background-size:contain; } .fromrte img { display:inline-block; width:100%; height:auto !important; border-radius:calc(0.6em * 1 / 0.95); padding:0; margin:2.4em 0; } .fromrte img.half { width:calc(50% - 1.2em - 3px); } .fromrte img.half:nth-of-type(2n + 1) { margin-left:0; margin-right:1.2em; } .fromrte img.half:nth-of-type(2n + 2) { margin-left:1.2em; margin-right:0; } main section:not(.groupe) .fromrte li { margin-top:1.3em; } main section:not(.groupe) .fromrte li { line-height:1.5; padding-left:2em; } main section:not(.groupe) .fromrte li:before { content:''; width:0.65em; height:0.65em; padding:0; margin:0; position:absolute; left:0; top:0.45em; } main section:not(.groupe) .fromrte ul:not(.accordion) li:before { background-color:#FAC80A; border-radius:50%; } main section:not(.groupe) .fromrte h2 + ul > li:first-of-type { margin-top:0; } main section:not(.groupe) .fromrte h3 + ul > li:first-of-type { margin-top:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* BLOCS */ main nav { z-index:950; margin:0 auto; margin-top:calc(-3em - 7em); padding:7em 0 0 0; text-align:center; display:block; width:auto; transform:translateY(1.5em); } main nav > div { margin:0 auto; padding:0; text-align:center; position:relative; display:inline-block; width:100%; overflow:hidden; border-radius:0.6em; } main nav > div:not(.mobile) { width:auto; max-width:100%; background-color:rgba(255,255,255,1); box-shadow: 0px -0.15em 0.3em #00000010; } main nav > div.mobile { display:none; } main nav ul { font-size:0; position:relative; display:block; width:auto; margin:0 auto; padding:0; white-space:nowrap; } main nav li { z-index:1; display:inline-block; vertical-align:middle; width:auto; text-align:center; line-height:1; opacity:1; } 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:not(#listemag-nav) li:not(:last-of-type):not(:nth-of-type(6)):before { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); height:1.2em; width:0.7px; background-color:#FAC80A; } main nav li button { font-weight:500; border-radius:0.6em; padding:1em 1em; width:calc(100% + 2px); transform:translateX(-1px); } main nav li.current button { font-weight:500; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } body.desktop main nav li button:hover { color:inherit; } main nav li button > span { opacity:0.8; font-size:0.95em; text-transform:uppercase; } main nav li.current button > span { opacity:1; } body.desktop main nav li button:hover > span { opacity:1; } main nav ul.filter li:first-of-type { margin-left:3.85em; } main nav ul.filter li:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:1.2em; width:0.7px; background-color:#FAC80A; } main nav .btnall { z-index:2; position:absolute; left:0; top:50%; transform:translateY(-50%); text-align:center; line-height:1; background:rgba(255,255,255,1); } main nav .btnall button { font-weight:700; border-radius:0.6em; padding:1em 1em; width:calc(100% + 2px); transform:translateX(-1px); background-color:rgba(245,245,245,1); } main nav .btnall.current button { font-weight:700; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } main nav .btnall button > span { opacity:1; font-size:0.8em; } main nav .btnall.current button > span { opacity:1; } body.desktop main nav .btnall button:hover > span { opacity:1; } main nav .btnfirst { z-index:2; position:absolute; left:0; top:50%; transform:translateY(-50%); text-align:center; line-height:1; background:rgba(255,255,255,1); } main nav .btnfirst button { font-weight:700; border-radius:0.6em; padding:1em 1em; width:calc(100% + 2px); transform:translateX(-1px); background-color:rgba(245,245,245,1); } main nav .btnfirst.current button { font-weight:700; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } body.desktop main nav .btnfirst button:hover { color:#272343; } main nav .btnfirst button > span { opacity:1; font-size:0.8em; text-transform:uppercase; } body.desktop main nav .btnfirst button:hover > span { opacity:1; } main nav .btnprevnext { z-index:2; position:absolute; right:0; top:50%; transform:translateY(-50%); background:rgba(255,255,255,1); border-radius:0 0.6em 0.6em 0; } main nav .btnprevnext:before { content:''; position:absolute; left:0; top:0; height:100%; width:6em; background:transparent linear-gradient(90deg, transparent 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; transform:translateX(calc(-100% + 2px)); } main nav .btnprevnext button { display:inline-block; vertical-align:middle; width:auto; text-align:center; line-height:1; padding:1em 0.3em; } main nav .btnprevnext button:nth-of-type(2) { margin-right:0.8em; } main nav .btnprevnext button svg { transform:rotate(90deg); margin:0; width:0.6em; } main nav .btnprevnext button:nth-of-type(2) svg { transform:rotate(-90deg); } .filterliste li { opacity:0; max-width:0; display:none; } .filterliste li.display { opacity:1; max-width:100%; display:inline-block; } .blocintro { color:#272343; margin-top:3.6em; text-align:center; } .blocintro h1 { text-align:inherit; margin-bottom:1.1em; } .blocintro h1 > span { font-size:2.1em; font-weight:900; line-height:1.5; } .blocintro h2 { text-align:inherit; } .blocintro h2 > span { display:block; font-size:1.75em; padding-bottom:0.4em; font-weight:900; line-height:1.5; } .blocintro .fromrte { text-align:inherit; font-size:0.95em; font-weight:500; line-height:1.5; max-width:calc(24.65em * 100 / 95); margin:0 auto; } .blocintro .fromrte p { text-align:inherit; } .blocintro .patchwork { display:block; height:5.55em; width:100%; text-align:center; } .blocintro .patchwork svg { height:100%; width:auto; } .blocresume { min-height:20.75em; color:transparent; border-radius:0.6em; overflow:hidden; } .blocresume .resume { z-index:2; color:#272343; position:relative; } .blocresume h2, .blocresume h3 { margin-bottom:1.4em; line-height:1.3; font-weight:900; } .blocresume h2 > span, .blocresume h3 > span { font-size:1.75em; } .blocresume h2 > span > span, .blocresume h3 > span > span { display:block; } .blocresume .fromrte { font-size:0.95em; line-height:1.5; } .blocresume .illustration { z-index:1; position:absolute; overflow:hidden; border-radius:0.6em; } .blocresume .illustration > svg { position:absolute; width:100%; height:auto; transform-origin:center center; } .blocresume .illustration > svg.ellipse { opacity:0.74; right:0; } .blocresume button { z-index:3; font-weight:700; position:absolute; left:3.1em; right:2.7em; bottom:2.3em; color:#FAC80A; text-align:left; } .blocresume button > span { font-size:0.95em; position:relative; display:inline-block; vertical-align:middle; text-align:left; max-width:calc(100% - 3.8em); } .blocresume button > svg { position:relative; display:inline-block; vertical-align:middle; height:1em; margin-left:1.5em; width:auto; } body.desktop button:hover { color:inherit; } section:not(.home):not(.groupe).blocresume button { color:#272343; border-radius:0.6em; text-transform:uppercase; padding:1.1em 3.55em; left:50%; bottom:0; right:initial; transform:translate(-50%,50%); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } section:not(.home):not(.groupe).blocresume button > span { text-align:center; max-width:initial; } body.desktop section:not(.home):not(.groupe).blocresume button:hover { color:rgba(255,255,255,1); } ul.listeresumes { display:flex; flex-wrap:wrap; flex-direction:row; width:100%; gap:2.4em; margin:2.4em 0; } li.blocresume { min-height:24.25em; padding:2.3em 3.1em 0 3.1em; width:calc(50% - (2.4em / 2)); } li.blocresume:nth-of-type(4n + 1) { background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } li.blocresume:nth-of-type(4n + 2) { background-color:#272343; } li.blocresume:nth-of-type(4n + 3) { background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } li.blocresume:nth-of-type(4n + 4) { background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } li.blocresume:nth-of-type(4n + 1) .resume { color:#272343; } li.blocresume:nth-of-type(4n + 2) .resume { color:rgba(255,255,255,1); } li.blocresume:nth-of-type(4n + 3) .resume { color:#272343; } li.blocresume:nth-of-type(4n + 4) .resume { color:rgba(255,255,255,1); } li.blocresume:nth-of-type(4n + 1) button { color:#272343; } li.blocresume:nth-of-type(4n + 2) button { color:#FAC80A; } li.blocresume:nth-of-type(4n + 3) button { color:#272343; } li.blocresume:nth-of-type(4n + 4) button { color:#FAC80A; } li.blocresume.marine { background: transparent linear-gradient(180deg, #272343 0%, #47667E 100%) 0% 0% no-repeat padding-box; } li.blocresume.ciel { background: transparent linear-gradient(0deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } li.blocresume.gris { background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } li.blocresume.jaune { background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } li.blocresume.marine .resume { color:rgba(255,255,255,1); } li.blocresume.ciel .resume { color:#272343; } li.blocresume.gris .resume { color:rgba(255,255,255,1); } li.blocresume.jaune .resume { color:#272343; } li.blocresume.marine button { color:rgba(255,255,255,1); } li.blocresume.ciel button { color:#272343; } li.blocresume.gris button { color:rgba(255,255,255,1); } li.blocresume.jaune button { color:#272343; } body.desktop li.blocresume button:hover { color:rgba(255,255,255,1); } body.desktop li.blocresume:nth-of-type(4n + 3) button:hover { color:#FAC80A; } body.desktop li.blocresume.marine button:hover { color:rgba(255,255,255,1); } body.desktop li.blocresume.ciel button:hover { color:#272343; } body.desktop li.blocresume.gris button:hover { color:rgba(255,255,255,1); } body.desktop li.blocresume.jaune button:hover { color:#272343; } button.showhidefull { font-weight:700; margin-left:auto; margin-right:auto; margin-bottom:4em; left:50%; transform:translateX(-50%); border-radius:0.6em; text-align:center; width:auto; display:inline-block; color:rgba(255,255,255,1); background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; padding:0.8em 1.3em; text-transform:uppercase; } button.showhidefull > svg { width:0.8em; height:auto; color:inherit; transform:rotate(-90deg); margin-right:1em; } button.showhidefull > span { font-size:0.8em; } button.showhidefull > span:nth-of-type(1) { display:inline-block; } button.showhidefull > span:nth-of-type(2) { display:none; } .showfull button.showhidefull > span:nth-of-type(1) { display:none; } .showfull button.showhidefull > span:nth-of-type(2) { display:inline-block; } .forcefull button.showhidefull { display:none; } .blocmain { padding:5.35em 3.7em 3.6em 3.7em; } .blocmain h2 { margin-bottom:1.2em; } .blocmain h2 > span { font-size:1.75em; font-weight:900; line-height:1.3; } .blocmain .fromrte { font-size:0.95em; line-height:1.5; } .blocmain button { margin:3.85em 0; font-weight:700; position:relative; color:#FAC80A; text-align:left; } body.desktop .blocmain button:hover { color:rgba(255,255,255,1); } .blocmain button > span { font-size:0.95em; position:relative; display:inline-block; vertical-align:middle; text-align:left; max-width:calc(100% - 3.8em); } .blocmain button > svg { position:relative; display:inline-block; vertical-align:middle; height:1em; margin-left:1.5em; width:auto; } .blocformation { min-height:20.75em; color:transparent; border-radius:0.6em; overflow:hidden; } .blocformation .resume { z-index:2; color:#272343; position:relative; } .blocformation h2, .blocformation h3 { margin-bottom:1.4em; line-height:1.3; font-weight:900; } .blocformation h2 > span, .blocformation h3 > span { font-size:1.75em; } .blocformation h2 > span > span, .blocformation h3 > span > span { display:block; } .blocformation .fromrte { font-size:0.95em; line-height:1.5; } .blocformation .illustration { z-index:1; position:absolute; overflow:hidden; border-radius:0.6em; top:0; bottom:0; width:40%; } .blocformation .illustration > svg { position:absolute; width:100%; height:auto; transform-origin:center center; left:0; top:50%; } .blocformation button { margin:3.85em 0; font-weight:700; position:relative; color:#FAC80A; text-align:left; } body.desktop .blocformation button:hover { color:rgba(255,255,255,1); } .blocformation button > span { font-size:0.95em; position:relative; display:inline-block; vertical-align:middle; text-align:left; max-width:calc(100% - 3.8em); } .blocformation button > svg { position:relative; display:inline-block; vertical-align:middle; height:1em; margin-left:1.5em; width:auto; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL */ section.home { margin:2.4em auto; } #home-bandeau { margin:0 auto; border-radius:0; } #home-bandeau img { width:100%; height:auto; border-radius:0.6em; } #home-recherche { border-radius:0.6em; overflow:visible; text-align:center; padding:0 2.7em; margin-top:-5em; height:10em; background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #home-recherche:after { content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } #home-recherche h2 { text-align:center; padding:1.35em 0; } #home-recherche h2 svg { width:1.4em; height:1.4em; display:inline-block; vertical-align:middle; margin-right:1.2em; } #home-recherche h2 > span { font-size:1.5em; font-weight:600; display:inline-block; vertical-align:middle; } #home-recherche form { text-align:center; } #home-recherche label { text-align:left; margin-right:2.4em; margin-bottom:1em; } #home-recherche select { font-size:0.95em; font-weight:500; width:17.5em; background-color:rgba(255,255,255,1); border-radius:0.35em; padding-right:calc(1em + 2* 1em - 0.5em) !important; } #home-recherche option { font-weight:500; } #home-recherche button { font-size:0.95em; font-weight:500; width:12em; background-color:#54524D; color:rgba(255,255,255,1); border-radius:0.35em; padding:0.5em 1em; text-transform:uppercase; text-align:center; } #home-services { background: transparent linear-gradient(90deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #home-services .resume { color:rgba(255,255,255,1); } body.desktop #home-services button:hover { color:rgba(255,255,255,1); } #home-actu ul.listeresumes { margin:0; } #home-actu li.blocresume { min-height:26.25em; } #home-actu li.blocresume:nth-of-type(1) { background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #home-actu li.blocresume:nth-of-type(2) { background-color:#272343; } #home-actu li.blocresume:nth-of-type(1) .resume { color:#272343; } #home-actu li.blocresume:nth-of-type(2) .resume { color:rgba(255,255,255,1); } #home-documentation { color:#BAE8E8; background: transparent linear-gradient(67deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } body.desktop #home-documentation button:hover { color:#272343; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE LE GROUPE */ #groupe-intro { margin-top:0; text-align:left; overflow:visible; } #groupe-intro h1 { margin-bottom:1.85em; } #groupe-intro:before { content:''; position:absolute; left:50%; transform:translate(-50%); top:0; bottom:0; width:100vw; background-color:#272343; } #groupe-intro .resume { color:rgba(255,255,255,1); position:relative; padding:3em 1.7em 4em 1.7em; } #groupe-intro .visuel { min-height:12.8em; left:50%; width:100vw; transform:translateX(-50%); overflow:hidden; background-position:center center; background-repeat:none; background-size:cover; } #groupe-nav > div { box-shadow: 0px 0.15em 0.3em #00000010; } #groupe-nav li { min-width:13em; } section.groupe { margin:2.7em auto; border-radius:0.6em; overflow:hidden; } #groupe-plb-loc { margin-top:4.2em; color:#BAE8E8; background: transparent linear-gradient(293deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } body.desktop #groupe-plb-loc button:hover { color:rgba(255,255,255,1); } #groupe-plb-gtx { color:#54524D; background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #groupe-plb-gtx .resume { color:rgba(255,255,255,1); } body.desktop #groupe-plb-gtx button:hover { color:rgba(255,255,255,1); } #groupe-plb-env { color:#FAC80A; background: transparent linear-gradient(270deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #groupe-plb-env button { color:rgba(255,255,255,1); } body.desktop #groupe-plb-env button:hover { color:#272343; } #groupe-plb-secu { color:#272343; background: transparent linear-gradient(90deg, #272343 0%, #47667E 100%) 0% 0% no-repeat padding-box; } #groupe-plb-secu .resume { color:rgba(255,255,255,1); } #groupe-plb-secu button { color:rgba(255,255,255,1); } body.desktop #groupe-plb-secu button:hover { color:#FAC80A; } #groupe-formations { color:#272343; margin-top:5.1em; margin-bottom:5.6em; text-align:center; } #groupe-formations .fromrte { text-align:inherit; font-size:0.95em; font-weight:500; line-height:1.5; max-width:25em; margin:0 auto; } #groupe-formations .fromrte p { text-align:inherit; } #groupe-formations button { font-weight:700; color:#272343; border-radius:0.6em; text-transform:uppercase; margin-top:1.3em; padding:1.15em 2.15em; background: transparent linear-gradient(0deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } #groupe-formations button > span { text-align:center; } body.desktop #groupe-formations button:hover { color:rgba(255,255,255,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE NOS SERVICES */ #services li.blocresume.marine { background: #272343; } #services li.blocresume.ciel { background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } #services li.blocresume.gris { background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #services li.blocresume.jaune { background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #services li.blocresume.marine .resume { color:rgba(255,255,255,1); } #services li.blocresume.ciel .resume { color:#272343; } #services li.blocresume.gris .resume { color:rgba(255,255,255,1); } #services li.blocresume.jaune .resume { color:#272343; } #services li#services-autres.blocresume.ciel { background: #E3F6F5; } #services li#services-autres.blocresume.ciel .illustration path:first-of-type { filter:drop-shadow(0.3em 0.5em 0.2em rgb(0 0 0 / 0.1)); } #services li#services-autres.blocresume.ciel button { display:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES CATALOGUE - Liste et Détail */ #catalogue-intro { margin-bottom:4.6em; } #catalogue-nav { margin-bottom:-0.4em; } #catalogue-nav li button > span { font-size:0.8em; padding-top:0.1em; padding-bottom:0.1em; text-transform:none; } #catalogue-liste { overflow:visible; min-height:20em; } #catalogue-liste:before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:13.5em; background:transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 61%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box;; } #catalogue-liste ul { width:100%; display:flex; list-style-type:none; flex-wrap:wrap; flex-direction:row; gap:1.6em; padding:4em 0; margin:0; justify-content:center; } #catalogue-liste li { cursor:pointer; width:17.55em; padding-top:13.05em; text-align:center; } #catalogue-liste li h2 { text-align:center; } #catalogue-liste li h2 > span { font-size:1em; font-weight:400; line-height:1.4; display:block; text-align:center; } #catalogue-liste li h2 > span.chauffeur { color:#272343; font-weight:700; font-size:0.5em; display:inline-block; text-transform:uppercase; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; border-radius:0.7em; padding:0.9em 1.3em; margin-top:1em; } #catalogue-liste li h2 b { display:block; font-weight:900; color:#54524D; } #catalogue-liste li .visuel { position:absolute; left:0; top:0; width:100%; height:13.05em; background:transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/losange.svg') center center no-repeat; background-size:contain; } #catalogue-liste li .visuel img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:auto; } #catalogue-liste li .fichedetail { display:none; } #service-contenu-accessoires { overflow:visible; } #accessoires-liste li { margin-top:1em; margin-bottom:3.2em; list-style-type:none; cursor:pointer; padding-bottom:2em; } #accessoires-liste li:last-of-type { margin-bottom:calc(3.2em * 1.75); } #accessoires-liste li h3 { padding-top:0; } #accessoires-liste li .visuel { width:100%; height:10em; border:1px solid #fff; box-shadow: 0em 0em 0.5em 0.1em #00000010; border-radius:0.6em; overflow:hidden; } #accessoires-liste li .visuel img { position:absolute; left:0; top:0; width:100%; height:100%; } #accessoires-liste li .savoirplus { position:absolute; bottom:0; right:0; font-weight:700; } body.desktop #accessoires-liste li .savoirplus:hover { color:#FAC80A; } #accessoires-liste li .savoirplus svg { transform:rotate(-90deg); margin:0; width:1em; height:auto; margin-left:1em; } #accessoires-liste li .fichedetail { display:none; } #catalogue-detail, #accessoires-detail { z-index:99999; background-color:rgba(255,255,255,1); position:fixed; top:0; left:100vw; width:100vw; height:100vh; overflow:hidden; opacity:0; transition:left 500ms ease 0ms, opacity 500ms ease 0ms; } body.showdetail #catalogue-detail, body.showdetail #accessoires-detail { left:0; opacity:1; } #catalogue-detail > svg, #accessoires-detail > svg { z-index:2; cursor:pointer; position:absolute; right:1.8em; top:0.8em; width:1.6em; height:auto; color:#FAC80A; stroke-width:5; } body.showdetail { overflow:hidden; } #catalogue-detail .fichedetail, #accessoires-detail .fichedetail { z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; width:100%; height:100%; padding:0; margin:0; } .fichedetail .liquide { overflow-x:visible; } .fichedetail .intro { padding:5em 0; overflow:visible; min-height:15.15em; } #accessoires-detail .fichedetail .intro { min-height:22em; } .fichedetail .intro:before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; background-color:#272343; } .fichedetail .intro p { margin:0; } .fichedetail .visuel { width:100%; height:auto; } #accessoires-detail .fichedetail .visuel { width:15em; } .fichedetail .visuel img { position:relative; width:100%; height:auto; } .fichedetail .intro h2, .fichedetail .intro h3, .fichedetail .intro .fromrte { z-index:3; max-width:35.25em; } .fichedetail .intro h2, .fichedetail .intro h3 { line-height:1.5; padding-bottom:1.1em; } .fichedetail .intro h2 > span, .fichedetail .intro h3 > span { font-size:2.1em; font-weight:900; color:#FAC80A; } .fichedetail .intro h3 > span { font-size:1.4em; } .fichedetail .intro .fromrte { font-size:0.95em; color:rgba(255,255,255,1); } .fichedetail .descriptif { padding:1px 0 5em 0; } .fichedetail .fromrte h3 { margin-top:calc(2.8em / 1.75); margin-bottom:0.5em; font-size:1.75em; font-weight:900; color:#272343; } .fichedetail .fromrte h4, .fichedetail .fromrte h5, .fichedetail .fromrte h6 { margin-top:1.5em; margin-bottom:0.5em; font-size:1.25em; font-weight:700; color:#272343; } .fichedetail p { margin-top:2.8em; text-align:left; } .fichedetail h3 + p, .fichedetail h4 + p { margin-top:0; } .fichedetail p + p { margin-top:0; } .fichedetail li { text-align:left; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE GRANDS TRAVAUX */ #tab-plb-gtx.service-tab-plb-gtx section:not(.service-bandeau):not(.crosslinks) { margin:1.5em auto 0 auto; } #tab-plb-gtx.service-tab-plb-gtx section#double-boutons { margin-top:0; } #gtx-main { z-index:1; overflow:visible; color:rgba(255,255,255,1); } #gtx-main:before { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100vw; height:calc(100% + 7.5em); background-color:#272343; } #gtx-main .fromrte li:before { top:50%; transform:translateY(-50%); } body.desktop .blocformation button:hover { color:#272343; } .blocplus { margin-top:4em; text-align:left; overflow:visible; } .blocplus > svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11em; height:auto; } .blocplus h2 { line-height:1; margin-bottom:1.85em; } .blocplus h2 > span { font-size:2.1em; font-weight:900; } .blocplus .resume { color:#272343; font-weight:500; padding:2.5em 0 3em 0; } .blocplus .fromrte li:not(last-of-type) { margin-bottom:1.3em; } .blocplus .fromrte li:before { background-color:#272343; top:50%; transform:translateY(-50%); } .blocplus .visuel { overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:cover; } .blocplus { display:flex; flex-flow:column wrap; flex-direction:row; } .blocplus > div { width:100%; } .blocplus > div:nth-of-type(2n+1):before { content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:100vw; background-color:#E3F6F5; } #simple-bouton { z-index:3; margin:0 auto 0 auto; padding-bottom:5em; overflow:visible; } #simple-bouton > button { overflow:visible; font-weight:400; position:absolute; padding:2.05em 1.6em 1.35em 1.65em; top:100%; left:50%; transform:translate(-50%,-85.5%); width:13.15em; height:9.3em; background: transparent linear-gradient(0deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; border-radius:0.6em; } #simple-bouton > button:after { content:''; position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } #simple-bouton > button b { font-weight:700; display:block; } #double-boutons { overflow:visible; padding:1.6em 0; margin-top:0; } #double-boutons:before { content:''; position:absolute; left:50%; width:100vw; top:0; height:100%; transform:translateX(-50%); background: transparent linear-gradient(15deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } #double-boutons button { font-weight:700; } #double-boutons button > span { font-size:0.95em; position:relative; display:inline-block; vertical-align:middle; text-align:left; } #double-boutons button > svg { position:relative; display:inline-block; vertical-align:middle; height:1em; margin-left:1.5em; width:auto; } #double-boutons > button:nth-of-type(1) { text-transform:uppercase; position:relative; border-radius:0.6em; padding:1.1em 3.55em 1.2em 3.55em; line-height:1; color:rgba(255,255,255,1); background-Color:#272343; } body.desktop #double-boutons button:nth-of-type(1):hover { color:#FAC80A; } body.desktop #double-boutons button:nth-of-type(2):hover { color:#FAC80A; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE FORMATIONS */ section.formations { margin:2.4em auto; } #formations-bloc { z-index:2; overflow:visible; color:#54524D; background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #formations-bloc .resume { color:rgba(255,255,255,1); } #formations-liste { margin-bottom:6.25em; } #formations-liste li { margin:4.25em auto; } #formations-liste li h2 > span { font-size:2.1em; font-weight:900; color:#FAC80A; } #formations-liste li h3 { margin:1.2em 0; } #formations-liste li h3 > span { font-size:1.75em; font-weight:900; color:#272343; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES SERVICE */ #service-intro { margin-bottom:4.6em; } .plb-loc #service-intro { margin-bottom:3em; } #service-nav { margin-bottom:-1.7em; } #service-nav ul.plb-gtx li:first-of-type { margin-left:5.65em; } #service-nav ul.plb-env li:first-of-type { margin-left:11.5em; } #service-nav ul.plb-secu li:first-of-type { margin-left:8.18em; } #service-nav ul li:before:not(first-of-type) { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:1.2em; width:0.7px; background-color:#FAC80A; } #service-nav li button > span { font-size:0.8em; padding-top:0.1em; padding-bottom:0.1em; text-transform:none; } .service-tab { display:none; overflow:visible; } .service-tab.current { display:block; } .service-tab .blocresume { z-index:2; margin:1.5em auto 0 auto; overflow:visible; color:#BAE8E8; background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } .service-tab .blocresume .resume { color:#272343; } .service-tab-plb-gtx .blocresume { color:#54524D; background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .service-tab-plb-gtx .blocresume .resume { color:rgba(255,255,255,1); } .service-tab-plb-secu .blocresume { color:#272343; background: transparent linear-gradient(90deg, #272343 0%, #47667E 100%) 0% 0% no-repeat padding-box; } .service-tab-plb-secu .blocresume .resume { color:rgba(255,255,255,1); } .service-bandeau { margin:-3.7em auto 0 auto; border-radius:0; } .service-bandeau img { width:100%; height:auto; border-radius:0.6em; } .service-contenu { z-index:3; margin:4em auto 4em auto; } .service-contenu h2 { padding-top:3.2em; padding-bottom:0.7em; font-size:calc(1.75em * 100 / 95); font-weight:900; color:#272343; } .service-contenu h2:first-of-type { padding-top:0; } .service-contenu h3 { padding-top:3.2em; padding-bottom:1em; font-size:calc(1.25em * 100 / 95); font-weight:700; color:#272343; text-transform:uppercase; } .service-contenu h2 + h3 { padding-top:0; } #service-contenu-bloc2 { padding-top:6em; overflow:visible; } #service-contenu-bloc2:before { content:''; position:absolute; top:0; height:12em; left:50%; width:100vw; transform:translate(-50%); background: transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } .fromrte a.btn { white-space:normal; font-weight:700; display:inline-block; margin-top:1em; text-transform:uppercase; position:relative; border-radius:0.6em; padding:1.1em 3.55em 1.2em 3.55em; line-height:1; color:rgba(255,255,255,1); background-Color:#272343; } body.desktop .fromrte a.btn { color:rgba(255,255,255,1); } body.desktop .fromrte a.btn:hover { color:#FAC80A; } #service-contenu-bloc3 { padding-top:6em; overflow:visible; color:rgba(255,255,255,1); padding:4em 0; margin-bottom:0; } #service-contenu-bloc3:before { content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translate(-50%); background-color: #272343; } #service-contenu-bloc3 h2, #service-contenu-bloc3 h3 { color:rgba(255,255,255,1); } #service-contenu-bloc3 ul.accordion h3 { display:inline-block; font-weight:400; cursor:pointer; color:rgba(255,255,255,1); padding:0.1em 0 0 0; margin:0; text-align:left; font-size:1em; text-transform:none; } #service-contenu-bloc3 ul.accordion > li > p { padding-top:0; max-height:0; height:auto; overflow:hidden; transition:max-height 0ms ease 0ms; } #service-contenu-bloc3 ul.accordion > li.open > p { padding-top:1em; max-height:100em; } #service-contenu-bloc3 ul.accordion > li.open h3 > svg > g { transform:scaleY(1); } #service-contenu-bloc3 ul.accordion > li:before { content:''; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/accordionbullet.svg') center center no-repeat; background-size:100%; } #service-contenu-bloc3 ul.accordion > li.open:before { transform:rotate(90deg); } .service-contenu.product { z-index:1; color:rgba(255,255,255,1); overflow:visible; margin:0 auto; padding:4em 0; } .service-contenu.product:before { content:''; position:absolute; width:100vw; top:0; bottom:0; left:50%; transform:translateX(-50%); background-color:#272343; } #service-contenu-eclairagedecarbone-product.service-contenu.product:before { bottom:-5em; } .service-contenu.product h2 { color:rgba(255,255,255,1); } .service-contenu.product button { font-weight:700; width:100%; background: transparent linear-gradient(0deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; color:#272343; border-radius:0.6em; padding:1.15em 2.15em; text-transform:uppercase; text-align:center; margin:3em 0 2em 0; } body.desktop .service-contenu.product button:hover { background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; color:#272343; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES ACTUS - Liste & Détail */ .blocintro ul.navsociaux { line-height:1; padding:0; position:relative; color:#272343; margin:0.8em auto 4em auto; width:auto; } .blocintro ul.navsociaux li { display:inline-block; vertical-align:top; line-height:1; margin-left:1.25em; } .blocintro ul.navsociaux li:first-of-type { margin-left:0; } .blocintro ul.navsociaux li a { font-size:2em; background-color:#272343; color:rgba(255,255,255,1); font-weight:500; display:inline-block; vertical-align:top; padding:0; line-height:1; } body.desktop .blocintro ul.navsociaux li a:hover { background-color:#FAC80A; color:rgba(255,255,255,1); } #listeactus-nav .btnall button > span { font-size:0.95em; text-transform:uppercase; } #listeactus-nav .btnall button, #listeactus-nav li button { padding-left:1.325em; padding-right:1.325em; } #listeactus-nav ul.filter li:first-of-type { margin-left:12.65em; } #listeactus-liste { overflow:visible; min-height:20em; } ul.listeactus.listeresumes { gap:1.6em; margin-top:0; margin-bottom:0; padding-top:5em; padding-bottom:5em; } ul.listeactus.listeresumes li.blocresume { min-height:16.65em; padding:2em 2em 0 2em; width:calc((100% * 1 / 3) - (1.6em * 2 / 3)); } ul.listeactus.listeresumes li.blocresume.photo { background-repeat:no-repeat; background-size:cover; background-position:center center; } ul.listeactus.listeresumes li.blocresume.photo:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background: transparent linear-gradient(180deg, #272343 0%, transparent 100%) 0% 0% no-repeat padding-box;} ul.listeactus.listeresumes li.blocresume.photo.double:before { background: transparent linear-gradient(90deg, #272343 0%, transparent 100%) 0% 0% no-repeat padding-box;} ul.listeactus.listeresumes li.blocresume.archive { display:none; padding:0; } .showfull:not(.forcefull) ul.listeactus.listeresumes li.blocresume.archive, .forcefull ul.listeactus.listeresumes li.blocresume.archive.display { display:inline-block; padding:2em 2em 0 2em; } ul.listeactus.listeresumes li.blocresume.double { width:calc((100% * 2 / 3) - (1.6em * 1 / 3)); } ul.listeactus.listeresumes li.blocresume.double .resume { max-width:11.1em; } ul.listeactus.listeresumes li.blocresume h2, ul.listeactus.listeresumes li.blocresume h3 { margin-bottom:1.1em; } ul.listeactus.listeresumes li.blocresume h2 > span, ul.listeactus.listeresumes li.blocresume h3 > span { font-size:1.5em; } ul.listeactus.listeresumes li.blocresume .illustration { height:4em; } ul.listeactus.listeresumes li.blocresume button { z-index:-1; opacity:0; } /*--------*/ /* Détail */ #actu-intro.blocintro { overflow:visible; text-align:left; margin-bottom:3.2em; } #actu-intro.blocintro .dateactu { font-size:0.7em; font-weight:500; margin:0 0 1.5em 0; } #actu-intro.blocintro .fromrte { max-width:100%; } #actu-intro.blocintro .visuel.liquide { left:50%; transform:translateX(-50%); border-radius:0.6em; margin:2.4em 0; overflow:hidden; height:auto; max-height:30em; } #actu-intro.blocintro .visuel.liquide img { position:relative; width:100%; height:auto; border-radius:0.6em; } #actu-content { padding-bottom:7.65em; min-height:20em; } #actu-content .detail h2 { margin-bottom:0.6em; font-size:1.75em; font-weight:900; color:#272343; } #actu-content .detail h2 > span { font-size:1.75em; font-weight:900; line-height:1.4; } #actu-content ul.diaporama { display:flex; flex-wrap:wrap; flex-direction:row; width:100%; gap:1.4em; margin:5em 0 0 0; } #actu-content ul.diaporama li { overflow:hidden; border-radius:0.6em; height:0; padding:0 0 calc((100% * 1 / 3) - (1.4em * 2 / 3)) 0; width:calc((100% * 1 / 3) - (1.4em * 2 / 3)); } #actu-content ul.diaporama li.double { width:calc((100% * 2 / 3) - (1.4em * 1 / 3)); } #actu-content ul.diaporama img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; width:auto; height:auto; } #actu-content .complement h2 span { font-size:0.8em; font-weight:700; color:#FAC80A; text-transform:uppercase; } #actu-content .complement li a { font-size:0.7em; font-weight:500; color:#767676; line-height:2em; } body.desktop #actu-content .complement li a:hover { color:#FAC80A; } #actu-content .complement button.back { text-align:center; line-height:1; font-weight:700; margin-top:1.5em; margin-bottom:3em; border-radius:0.6em; text-align:center; width:100%; display:inline-block; color:rgba(255,255,255,1); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; padding:0.75em 1em; text-transform:uppercase; } #actu-content .complement button.back > span { font-size:0.65em; } body.desktop #actu-content .complement button.back:hover { color:#272343; } #actu-content ul.navsociaux { font-size:0; line-height:1; padding:0; margin:0; color:rgba(255,255,255,1); } #actu-content ul.navsociaux li { display:inline-block; vertical-align:top; line-height:1; margin-right:1em; padding:0.5em 0 0.5em 0; } #actu-content ul.navsociaux li:last-of-type { margin-right:0; } #actu-content ul.navsociaux li a { position:relative; display:inline-block; vertical-align:middle; padding:0; line-height:1; font-size:2em; width:1em; height:1em; border-radius:0.15em; } #actu-content ul.navsociaux svg { height:0.75em; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } #actu-content ul.navsociaux li.facebook svg { height:0.65em; } #actu-content ul.navsociaux li a { background-color:#272343; color:rgba(255,255,255,1); } body.desktop #actu-content ul.navsociaux li a:hover { background-color:#FAC80A; color:rgba(255,255,255,1); } #actu-content .complement .visuel { margin:3em 0; text-align:left; } #actu-content .complement .visuel img { max-width:100%; } #actu-content .complement .visuel svg { max-width:100%; height:auto; } #actu-content .complement .visuel a { font-size:0.95em; font-weight:700; color:#FAC80A; line-height:1.4; text-align:left; } body.desktop #actu-content .complement .visuel a:hover { font-weight:900; color:#FAC80A; } #actu-others > h2 span { font-size:2.1em; font-weight:900; color:#272343; } #actu-others ul.listeactus.listeresumes { padding-top:2.35em; } #actu-others.forcefull ul.listeactus.listeresumes li.blocresume.archive { display:inline-block; padding:2em 2em 0 2em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES MAG TECHNIQUE - Liste & Détail */ #listemag-intro.blocintro .fromrte { max-width:67%; margin-top:1.4em; } main nav#listemag-nav ul#ariane { line-height:1.1; list-style-type:none; white-space:normal; text-align:left; } main nav#listemag-nav ul#ariane > li { display:inline; text-transform:uppercase; color:#272343; } main nav#listemag-nav ul#ariane > li:not(:first-of-type) { margin-left:0.5em; } main nav#listemag-nav ul#ariane > li:not(:first-of-type):before { content:'>'; disply:inline; padding-right:0.5em; } main nav#listemag-nav ul#ariane a { font-size:0.8em; } main nav#listemag-nav ul#ariane > li:last-of-type a { color:#FAC80A; } body.desktop main nav#listemag-nav ul#ariane a:hover { color:#FAC80A; } main nav#listemag-nav { overflow:visible; position:relative; transform:unset; margin:2em auto 0 auto; padding:0; text-align:left; } main nav#listemag-nav > div:not(.mobile) { position:absolute; top:0; left:0; width:20em; background-color:rgba(245,245,245,1); padding:2em 2em; } main nav#listemag-nav .btnall { position:relative; display:block; transform:unset; background:transparent; margin:0; padding:1em 0; } main nav#listemag-nav .btnall button { display:block; width:100%; transform:unset; background:transparent; text-transform:uppercase; } main nav#listemag-nav .btnall button { font-weight:900; } main nav#listemag-nav .btnall.current button { background:unset; color:#FAC80A; } body.desktop main nav#listemag-nav .btnall button:hover { color:#FAC80A; } main nav#listemag-nav ul:not(#ariane) li { display:block; text-align:left; margin:0; padding:1em 0; } main nav#listemag-nav ul:not(#ariane) li.current button { background:unset; color:#FAC80A; } body.desktop main nav#listemag-nav li button:hover { color:#FAC80A; } main nav#listemag-nav button { border-radius:0; text-align:left; padding:0; max-width:100%; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } main nav#listemag-nav button > span { opacity:1; font-size:0.9em; text-transform:unset; } main nav#listemag-nav ul:not(#ariane) li.niv1 { border-top:1px solid rgba(200,200,200,1); } main nav#listemag-nav ul:not(#ariane) li.niv1 button > span { font-weight:700; font-size:1em; text-transform:uppercase; } main nav#listemag-nav ul:not(#ariane) li.niv2 button > span { padding-left:1.5em; } main nav#listemag-nav ul:not(#ariane) li.niv3 button > span { padding-left:calc(2 * 1.5em); } main nav#listemag-nav ul:not(#ariane) li.niv4 button > span { padding-left:calc(3 * 1.5em); } main nav#listemag-nav ul:not(#ariane) li.niv5 button > span { padding-left:calc(4 * 1.5em); } main nav#listemag-nav ul:not(#ariane) li.niv2, main nav#listemag-nav ul:not(#ariane) li.niv3, main nav#listemag-nav ul:not(#ariane) li.niv4, main nav#listemag-nav ul:not(#ariane) li.niv5 { padding-top:0.2em; } #listemag-liste, #listemag-detail { margin-top:0.6em; padding-bottom:4em; } #listemag-liste ul { list-style-type:none; } #listemag-liste ul li { margin-bottom:0.6em; padding-top:1.2em; border-top:1px solid rgba(200,200,200,1); } #listemag-liste ul h2 { margin-top:0; margin-bottom:0em; font-weight:900; line-height:1.4; color:#272343; max-width:100%; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } #listemag-liste ul h2 > span { font-size:1.3em; } #listemag-liste .infos { line-height:1.1; margin-bottom:0.6em; } #listemag-liste .infos > span { font-size:0.8em; text-transform:uppercase; color:rgba(160,160,160,1); } #listemag-liste .infos > span:not(:first-of-type) { margin-left:0.5em; padding-left:0.5em; border-left:1px solid rgba(200,200,200,1); } #listemag-liste ul .fromrte { width:calc(100% - 10em); height:2.5em; line-height:1.2; max-width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #listemag-liste button { line-height:1.2; position:absolute; bottom:0.2em; right:0; } #listemag-liste button > span { font-weight:700; font-size:0.9em; padding-right:2em; } #listemag-liste button > svg { width:2em; height:auto; } body.desktop #listemag-liste button:hover { color:#FAC80A; } #listemag-liste .fromrte.vide { margin-bottom:0.6em; padding-top:2.4em; border-top:1px solid rgba(200,200,200,1); } #listemag-liste .pagination { font-size:0.7em; position:absolute; right:0; padding:0 2em; text-align:center; margin-top:2em; } #listemag-liste .pagination div.currpage { line-height:1; position:relative; display:inline-block; white-space:nowrap; margin:0; padding:0; } #listemag-liste .pagination div.currpage > span { padding:0.2em 0.2em; display:inline-block; vertical-align:middle; } #listemag-liste .pagination div.currpage > input { position:relative; text-align:center; display:inline-block; vertical-align:middle; width:2.2em; padding:0.1em 0.5em; line-height:1; border-radius:0.6em; } #listemag-liste .pagination a { display:block; color:rgba(100,100,100,1); position:absolute; top:50%; transform:translateY(-50%); } #listemag-liste .pagination a svg { position:relative; display:inline-block; } #listemag-liste .pagination a svg { height:1.2em; width:auto; } #listemag-liste .pagination a polyline { stroke-width:10; } #listemag-liste .pagination a.prevpage { left:0; } #listemag-liste .pagination a.prevpage polyline { transform:scaleX(-1); transform-origin:center; } #listemag-liste .pagination a.nextpage { right:0; } body.desktop #listemag-liste .pagination a:hover { color:#FAC80A; } #listemag-detail h1 { margin-top:0; padding-top:0.6em; border-top:1px solid rgba(200,200,200,1); margin-bottom:0; font-size:1.75em; font-weight:900; line-height:1.3; color:#272343; } #listemag-detail .infos { line-height:1.1; margin-bottom:2em; } #listemag-detail .infos > span { line-height:1.2; font-size:0.8em; text-transform:uppercase; color:rgba(160,160,160,1); } #listemag-detail .infos > span:not(:first-of-type) { margin-left:0.5em; padding-left:0.5em; border-left:1px solid rgba(200,200,200,1); } #listemag-detail img { margin-bottom:2em; max-width:100%; border-radius:0.6em; } #listemag-detail .fromrte { margin-bottom:2em; } #listemag-detail .fromrte a { color:inherit; } #listemag-detail .fromrte h2 { margin-top:1.2em; margin-bottom:0.6em; font-size:1.5em; font-weight:700; line-height:1.4; color:#272343; } #listemag-detail .fromrte h3 { margin-top:1.2em; margin-bottom:0.6em; font-size:1.2em; font-weight:500; line-height:1.4; text-transform:uppercase; } #listemag-detail .prevnext { height:2em; text-align:center; border-top:1px solid rgba(200,200,200,1); border-bottom:1px solid rgba(200,200,200,1); margin-top:2em; padding:0; } #listemag-detail .prevnext a { font-size:0.8em; color:rgba(100,100,100,1); position:absolute; top:1.6em; transform:translateY(-50%); } #listemag-detail .prevnext a span, #listemag-detail .prevnext a svg { position:relative; display:inline-block; top:50%; transform:translateY(-50%); } #listemag-detail .prevnext a span { display:none; padding:0 0.3em; line-height:1; } #listemag-detail .prevnext a svg { height:1em; width:auto; } #listemag-detail .prevnext a polyline { stroke-width:10; } #listemag-detail .prevnext a.back { left:50%; transform:translate(-50%, -50%); } #listemag-detail .prevnext a.prev { left:0; } #listemag-detail .prevnext a.prev polyline { transform:scaleX(-1); transform-origin:center; } #listemag-detail .prevnext a.next { right:0; } body.desktop #listemag-detail .prevnext a:hover { color:#FAC80A; } /* PAGE NOS AGENCES */ #agences-intro { overflow:visible; padding-bottom:2.5em; } #agences-intro:after { content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } .listeagences li.blocresume { min-height:29.25em; padding-right:2em; } .listeagences li.blocresume h2 { margin-bottom:1.1em; } .listeagences li.blocresume .adresse { font-size:0.95em; min-height:calc(2.6em * 100 / 95); margin-bottom:calc(1.1em * 100 / 95); } .listeagences li.blocresume .tel { font-size:0.95em; font-weight:900; } .listeagences li.blocresume .illustration { bottom:10em; height:4.5em; } .listeagences li.blocresume button.email { background:transparent !important; bottom:2.3em; } .listeagences li.blocresume button.landingpage { bottom:5em; width:calc(100% - (2 * 3.1em)); background-color:#ccc; color:#fff; padding:0.8em 1em; text-align:center; text-transform:uppercase; font-weight:700; border-radius:0.6em; } .listeagences li.blocresume.marine { background: #272343; } .listeagences li.blocresume.ciel { background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } .listeagences li.blocresume.gris { background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .listeagences li.blocresume.jaune { background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } .listeagences li.blocresume.jaune button.landingpage { color:rgba(255,255,255,1); background-color:#272343; } .listeagences li.blocresume.marine button.landingpage { color:#272343; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } .listeagences li.blocresume.ciel button.landingpage { color:rgba(255,255,255,1); background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .listeagences li.blocresume.gris button.landingpage { color:#272343; background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } body.desktop .listeagences li.blocresume.jaune button.landingpage:hover { color:rgba(255,255,255,1); } body.desktop .listeagences li.blocresume.marine button.landingpage:hover { color:#272343; } body.desktop .listeagences li.blocresume.ciel button.landingpage:hover { color:rgba(255,255,255,1); } body.desktop .listeagences li.blocresume.gris button.landingpage:hover { color:#272343; } .listeagences li.blocresume.jaune button.email { color:#272343; } .listeagences li.blocresume.marine button.email { color:#FAC80A; } .listeagences li.blocresume.ciel button.email { color:#272343; } .listeagences li.blocresume.gris button.email { color:#FAC80A; } body.desktop .listeagences li.blocresume.jaune button.email:hover { color:#272343; } body.desktop .listeagences li.blocresume.marine button.email:hover { color:#FAC80A; } body.desktop .listeagences li.blocresume.ciel button.email:hover { color:#272343; } body.desktop .listeagences li.blocresume.gris button.email:hover { color:#FAC80A; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE DOCUMENTATION */ #documentation ul.listeresumes { gap:1.1em; } #documentation li.blocresume { min-height:14.3em; padding:1.55em 1.65em 0 1.65em; width:calc(25% - (1.1em * 3 / 4)); } #documentation li.blocresume h2 > span { font-size:1.1em; } #documentation li.blocresume a { position:absolute; left:1.65em; right:1.65em; bottom:1.65em; height:4em; display:inline-block; } #documentation li.blocresume a > svg { height:100%; width:auto; } #documentation li.blocresume .illustration { overflow:visible; width:auto; height:5.5em; bottom:1em; top:initial; right:1em; } #documentation li.blocresume .illustration > svg:not(.ellipse) { bottom:0; right:0; height:100%; width:auto; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* LANDING LTP */ section.landingltp { margin:1.5em auto; } #landingltp-bloc { min-height:27.25em; z-index:2; overflow:visible; color:#272343; background: transparent linear-gradient(90deg, #272343 0%, #47667E 100%) 0% 0% no-repeat padding-box; } #landingltp-bloc .resume { color:rgba(255,255,255,1); } #landingltp-bloc button { min-width:27em; color:#272343; border-radius:0.6em; text-transform:uppercase; padding:1.1em 3.55em; left:50%; bottom:0; right:initial; transform:translate(-50%,50%); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #landingltp-bloc button > span { text-align:center; max-width:initial; } body.desktop #landingltp-bloc button:hover { color:rgba(255,255,255,1); } #landingltp-main { z-index:1; overflow:visible; color:#272343; padding-bottom:9em; } #landingltp-main:before { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100vw; height:calc(100% + 7.5em); background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 90%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } #landingltp-main .fromrte li:before { top:50%; transform:translateY(-50%); } #landingltp-criteres { z-index:1; overflow:visible; color:#272343; padding-top:0; margin-top:-4em; } #landingltp-criteres .resume > img { border-radius:0.6em; margin-bottom:0; position:relative; left:50%; transform:translate(-50%, -2.4em); } #landingltp-criteres h2 { color:#FAC80A; margin-bottom:1.2em; } #landingltp-criteres h2 > span { font-size:2.1em; line-height:1.5; font-weight:900; } #landingltp-criteres h3 { color:#272343; margin-bottom:1.2em; } #landingltp-criteres h3 > span { font-size:1.75em; line-height:1.43; font-weight:900; } #landingltp-lumaphore { z-index:1; overflow:visible; color:rgba(255,255,255,1); margin-bottom:0; } #landingltp-lumaphore:before { content:''; position:absolute; left:50%; transform:translate(-50%); top:0; bottom:0; width:100vw; background-color:#272343; } #landingltp-lumaphore h2 { color:#FAC80A; margin-bottom:1.2em; } #landingltp-lumaphore h2 > span { font-size:0.95em; line-height:1.5; font-weight:700; } #landingltp-lumaphore h3 { color:rgba(255,255,255,1); margin-bottom:1.2em; } #landingltp-lumaphore h3 > span { font-size:1.75em; line-height:1.43; font-weight:900; } #landingltp-lumaphore .fromrte b, #landingltp-lumaphore .fromrte strong { font-weight:700; } #landingltp-plus { z-index:1; overflow:visible; color:#272343; padding-top:0; margin-top:0; } #landingltp-plus.blocplus > div:nth-of-type(2n):before { content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:100vw; background-color:#FAC80A; } #landingltp-plus.blocplus > svg { width:10em; } #landingltp-plus.blocplus h2 > span { font-size:1.75em; line-height:1.4; } section.landingagence { margin:2.4em auto; } #landingagence-bloc { z-index:3; margin-bottom:2.4em; min-height:27.25em; overflow:visible; color:#54524D; background: transparent linear-gradient(90deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #landingagence-bloc .resume { color:rgba(255,255,255,1); } #landingagence-bloc button { min-width:27em; color:#272343; border-radius:0.6em; text-transform:uppercase; padding:1.1em 3.55em; left:50%; bottom:0; right:initial; transform:translate(-50%,50%); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #landingagence-bloc button > span { text-align:center; max-width:initial; } body.desktop #landingagence-bloc button:hover { color:rgba(255,255,255,1); } main nav#agence-nav { transform:translateY(10em); } main nav#agence-nav.fix { transform:translateX(-50%); } main nav#agence-nav li button > span { font-size:0.9em; text-transform:none; } #landingagence-prestations { margin-top:3em; z-index:2; color:#272343; overflow:visible; } #landingagence-prestations:before { content:''; position:absolute; left:50%; transform:translate(-50%); top:-16em; height:32em; width:100vw; background:transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } #landingagence-prestations h2 { color:#272343; margin-bottom:1.2em; text-align:center; } #landingagence-prestations h2 > span { font-size:2.1em; line-height:1.5; font-weight:900; } #landingagence-prestations > ul > li { list-style-type:none; margin:2em 0; padding-top:2em; } #landingagence-prestations > ul > li#agence-metz-semi { margin-bottom:6em; } #landingagence-prestations h3 { color:#272343; margin-bottom:1.2em; text-align:left; } #landingagence-prestations h3 > span { font-size:1.75em; line-height:1.43; font-weight:900; } #landingagence-prestations .fromrte ul { padding-bottom:1em; } #landingagence-prestations .fromrte li { padding-left:1.2em; } #landingagence-prestations .fromrte li:before { width:0.5em; height:0.5em; } #landingagence-prestations img { margin-top:0; border-radius:0.6em; position:relative; left:50%; transform:translate(-50%, 0); } #landingagence-prestations > ul > li > div { padding-bottom:4em; } #landingagence-prestations button { color:#272343; border-radius:0.6em; text-transform:uppercase; padding:1.1em 3.55em; left:50%; bottom:0; right:initial; transform:translate(-50%,50%); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #landingagence-prestations button > span { text-align:center; max-width:initial; } body.desktop #landingagence-prestations button:hover { color:rgba(255,255,255,1); } #landingagence-autres { z-index:2; color:#272343; overflow:visible; margin-top:2.4em; } #landingagence-autres h2 { color:#272343; margin-bottom:1.2em; text-align:center; } #landingagence-autres h2 > span { font-size:2.1em; line-height:1.5; font-weight:900; } #landingagence-autres > ul { margin:2.4em 0; } #landingagence-autres > ul > li { list-style-type:none; margin-bottom:0; } #landingagence-autres h3 { cursor:pointer; color:#272343; padding:0.8em 3.4em 0.8em 1.25em; margin-bottom:1.2em; text-align:left; border-radius:0.6em; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #landingagence-autres h3 > span { font-size:1.4em; line-height:1.4; font-weight:700;} #landingagence-autres h3 > svg { position:absolute; right:1.25em; top:50%; transform:translateY(-50%); height:1em; width:auto; } #landingagence-autres h3 > svg > g { transform:scaleY(-1); transition:transform 100ms ease 0ms; transform-origin:center; } #landingagence-autres > ul > li .fromrte { padding-bottom:2.4em; } #landingagence-autres .fromrte li { margin-top:0.8em; line-height:1.5; padding-left:1.2em; } #landingagence-autres .fromrte li:before { width:0.5em; height:0.5em; } #landingagence-autres > ul > li > div { max-height:0; height:auto; overflow:hidden; transition:max-height 0ms ease 0ms; } #landingagence-autres > ul > li.open > div { max-height:100em; } #landingagence-autres > ul > li.open h3 > svg > g { transform:scaleY(1); } #landingagence-pourquoi { padding-top:10em; margin-top:-10em; z-index:1; overflow:visible; color:rgba(255,255,255,1); margin-bottom:6.4em; padding-bottom:6em; } #landingagence-pourquoi.nomargin { padding-top:4em; margin-top:0; } #landingagence-pourquoi:before { content:''; position:absolute; left:50%; transform:translate(-50%); top:0; bottom:0; width:100vw; background-color:#272343; } #landingagence-pourquoi h2 { color:rgba(255,255,255,1); margin-bottom:1.2em; text-align:center; } #landingagence-pourquoi h2 > span { font-size:2.1em; line-height:1.5; font-weight:900; } #landingagence-pourquoi h3 { color:rgba(255,255,255,1); margin-bottom:1.2em; } #landingagence-pourquoi h3 > span { font-size:1.75em; line-height:1.43; font-weight:900; } #landingagence-pourquoi .fromrte b, #landingagence-lumaphore .fromrte strong { font-weight:700; } #landingagence-pourquoi button { position:absolute; margin:0; color:#272343; border-radius:0.6em; text-transform:uppercase; padding:1.1em 2.35em; left:50%; bottom:-6em; right:initial; transform:translate(-50%,50%); background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #landingagence-pourquoi button > span { text-align:center; max-width:initial; } body.desktop #landingagence-pourquoi button:hover { color:rgba(255,255,255,1); } .crosslinks { margin:4em auto; } #crosslinks-agences { margin-bottom:6em; } .crosslinks .listeresumes { justify-content: center; list-style-type:none; } .crosslinks .intro.fromrte { font-size:0.95em; width:80%; text-align:center; margin:1.4em auto 0 auto; } .crosslinks .intro.fromrte p { text-align:center; } .crosslinks h2 { text-align:center; } .crosslinks h2 > span { font-size:2.1em; font-weight:900; line-height:1.5; } .crosslinks li.blocresume h3 { margin-bottom:0.5em; } .crosslinks h3 > span { font-weight:900; line-height:1.4; } .listeservices li.blocresume button { background-color:#ccc; color:#fff; padding:0.8em 0.5em; text-align:center; text-transform:uppercase; font-weight:700; border-radius:0.6em; } .listeservices li.blocresume:nth-of-type(4n + 1) button { color:rgba(255,255,255,1); background-color:#272343; } .listeservices li.blocresume:nth-of-type(4n + 2) button { color:#272343; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } .listeservices li.blocresume:nth-of-type(4n + 3) button { color:rgba(255,255,255,1); background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .listeservices li.blocresume:nth-of-type(4n + 4) button { color:#272343; background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.marine { background: #272343; } .crosslinks li.blocresume.ciel { background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.gris { background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.jaune { background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.marine .resume { color:rgba(255,255,255,1); } .crosslinks li.blocresume.ciel .resume { color:#272343; } .crosslinks li.blocresume.gris .resume { color:rgba(255,255,255,1); } .crosslinks li.blocresume.jaune .resume { color:#272343; } .crosslinks li.blocresume.marine button { color:#272343; background: transparent linear-gradient(180deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.ciel button { color:rgba(255,255,255,1); background: transparent linear-gradient(180deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.gris button { color:#272343; background: transparent linear-gradient(180deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } .crosslinks li.blocresume.jaune button { color:rgba(255,255,255,1); background:#272343; } body.desktop .crosslinks li.blocresume.marine button:hover { color:#272343; } body.desktop .crosslinks li.blocresume.ciel button:hover { color:rgba(255,255,255,1); } body.desktop .crosslinks li.blocresume.gris button:hover { color:#272343; } body.desktop .crosslinks li.blocresume.jaune button:hover { color:rgba(255,255,255,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* CONTACT */ #contact-intro { overflow:visible; padding-bottom:2.5em; margin-bottom:2.4em; } #contact-intro:after { content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } #service-contenu-chauxmax { padding-bottom:5em; } #tab-chauxmax #contact-intro { z-index:2; padding:3.2em 3.8em; margin-top:0; border-radius:0.6em; background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #chauxmax-form { z-index:1; overflow:visible; padding-bottom:0; } #chauxmax-form:before { content:''; position:absolute; top:-12em; bottom:0; left:50%; width:100vw; transform:translate(-50%); background: transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } .contact-form input, .contact-form select, .contact-form textarea { width:100%; border-radius:calc(0.6em / 1.15); background-color:#F4F4F4; color:#272343; font-size:1.15em; padding:1em 1.7em; line-height:1.3; height:auto; font-family:Montserrat, sans-serif; font-weight:600; outline:0; } #chauxmax-form.contact-form input, #chauxmax-form.contact-form select, #chauxmax-form.contact-form textarea { background-color:rgba(255,255,255,1); } #service-contenu-eclairagedecarbone { padding-bottom:5em; } #tab-eclairagedecarbone #contact-intro { z-index:2; padding:3.2em 3.8em; margin-top:0; border-radius:0.6em; background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #eclairagedecarbone-form { z-index:1; overflow:visible; padding-bottom:0; } #eclairagedecarbone-form:before { content:''; position:absolute; top:-12em; bottom:0; left:50%; width:100vw; transform:translate(-50%); background: transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } .contact-form input, .contact-form select, .contact-form textarea { width:100%; border-radius:calc(0.6em / 1.15); background-color:#F4F4F4; color:#272343; font-size:1.15em; padding:1em 1.7em; line-height:1.3; height:auto; font-family:Montserrat, sans-serif; font-weight:600; outline:0; } #eclairagedecarbone-form.contact-form input, #eclairagedecarbone-form.contact-form select, #eclairagedecarbone-form.contact-form textarea { background-color:rgba(255,255,255,1); } #service-contenu-accessoires { padding-bottom:5em; } #tab-accessoires #contact-intro { z-index:2; padding:3.2em 3.8em; margin-top:0; border-radius:0.6em; background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } #accessoires-form { z-index:1; overflow:visible; padding-bottom:0; } #accessoires-form:before { content:''; position:absolute; top:-12em; bottom:0; left:50%; width:100vw; transform:translate(-50%); background: transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } .contact-form input, .contact-form select, .contact-form textarea { width:100%; border-radius:calc(0.6em / 1.15); background-color:#F4F4F4; color:#272343; font-size:1.15em; padding:1em 1.7em; line-height:1.3; height:auto; font-family:Montserrat, sans-serif; font-weight:600; outline:0; } #accessoires-form.contact-form input, #accessoires-form.contact-form select, #accessoires-form.contact-form textarea { background-color:rgba(255,255,255,1); } .contact-form { padding:1.1em 0 6.85em 0; } .contact-form .placeholder { color: #C7C7C7; } .contact-form ::placeholder { color: #C7C7C7; opacity: 1; } .contact-form :-ms-input-placeholder { color: #C7C7C7; } .contact-form ::-ms-input-placeholder { color: #C7C7C7; } .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:#FBC90D; } .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 2.5em 0; } .contact-form label > span { color:#272343; font-weight:700; font-size:1.15em; padding:0 1.7em 0.75em 1.7em; } .contact-form textarea { height:6.45em; resize:none; } .contact-form input[type="checkbox"] + span:before, .contact-form input[type="checkbox"] + span:after { top:0.1em !important; } .contact-form input[type="checkbox"] + span:before { border-color:#272343 !important; } .contact-form input[type="checkbox"] + span:after { background-color:#FAC80A !important; } .contact-form label.consentementrgpd { margin-bottom:1em; } .contact-form .consentementrgpd span { color:#272343; outline:0; font-size:0.75em; font-weight:400; padding-right:0; padding-bottom:0; } .contact-form .consentementrgpd input { width:0.7em; padding:0.3em 0 0 0; } .contact-form .asterisque { display:inline-block; padding:0.5em; margin-bottom:3em; border:0; width:auto; color:#272343; outline:0; font-size:0.75em; } .contact-form form button { border-radius:calc(0.6em / 1.15); font-weight:700; background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; display:block; width:100%; color:#272343; text-transform:uppercase; font-size:1.15em; padding:1em; } body.desktop .contact-form form button:hover { font-weight:700; color:rgba(255,255,255,1); } .contact-form .reponse { text-align:center; padding:8em 0 6em 0; color:#272343; font-weight:500; text-transform:uppercase; } .jconfirm .jconfirm-holder { max-width:80%; margin:0 auto; } .jconfirm .jconfirm-box div.jconfirm-title-c { font-family:Montserrat, sans-serif; } .jconfirm .jconfirm-box .jconfirm-buttons button { font-family:Montserrat, sans-serif; border-radius:0; } .btn-primary { background-color:#FBC90D; border-color:#FBC90D; } body.desktop .btn-primary:hover { border-color:#FBC90D; background-color:rgba(255,255,255,1); color:#FBC90D; } .succes { font-size:1.2em; } .erreur { color:#ff0000; margin:2em 0 3em 0; } .erreur ul { list-style-type:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ANIMATION SCROLL */ .scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; } .scrollanim { opacity:1; transition:opacity 1500ms ease 0ms, transform 900ms ease 0ms; } .scrollanim.frombottom.init { opacity:0; transform:translateY(50%); transform:translateY(200px); } .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 */ section.mentionslegales { display:block; margin:2.4em auto; } section.mentionslegales h1 > span { font-size:2.1em; font-weight:900; color:#272343; } section.mentionslegales h2 { padding-top:1.5em; padding-bottom:0.5em; font-size:1.75em; font-weight:900; color:#272343; } section.mentionslegales p { text-align:left; } section.mentionslegales li { text-align:left; } section.mentionslegales a { color:#272343; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ section#page-authentification { width:30%; margin:0 auto 6em auto; } section#page-authentification h1 { text-transform:uppercase; margin:4em 0 0 0; } section#page-authentification input { width:100%; border-radius:calc(0.6em / 1.15); background-color:#F4F4F4; color:#272343; font-size:1.15em; padding:1em 1.7em; line-height:1.3; height:auto; font-family:Montserrat, sans-serif; font-weight:600; outline:0; margin-bottom:0.5em; } section#page-authentification .btn-primary { border-radius:calc(0.6em / 1.15); font-weight:700; background: transparent linear-gradient(0deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; display:block; width:100%; color:#272343; text-transform:uppercase; font-size:1.15em; padding:1em; margin-top:2em; } body.desktop section#page-authentification .btn-primary:hover { font-weight:700; color:rgba(255,255,255,1); } .interne .section-auth { width:30%; margin:0 auto; } .section-auth h1 { font-size:1.6em; text-transform:uppercase; margin:4em 0 0 0; } .section-auth form { padding-top:2em; } .section-auth .reponse { padding-top:2em; } .section-auth input { width:100%; border-radius:calc(0.6em / 1.15); background-color:#F4F4F4; color:#272343; font-size:1.15em; padding:1em 1.7em; line-height:1.3; height:auto; font-family:Montserrat, sans-serif; font-weight:600; outline:0; } #ul-auth { margin-top:4em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ERREUR 404 */ #erreur-404 { overflow:visible; margin:0 auto 6.8em auto; text-align:center; color:#272343; } #erreur-404:after { content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,25%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } #erreur-404 svg { width:9.2em; height:auto; transform:translateY(2.5em); } #erreur-404 h1 { text-align:center; line-height:1; } #erreur-404 h1 > span { font-size:10.35em; font-weight:900; line-height:1; } #erreur-404 h2 { color:#FAC80A; font-weight:700; text-align:center; } #erreur-404 p { text-align:center; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { z-index:1; overflow:hidden; position:relative; background-color:#272343; color:#E3F6F5; text-align:center; } footer > nav > ul { display:flex; padding:4em 0 6em 0; width:100%; text-align:left; } footer > nav > ul > li { width:27%; } footer > nav > ul > li:last-of-type { width:19%; } footer > nav > ul ul { margin-top:1.4em; } footer > nav > ul ul > li { margin-bottom:0.85em; } footer > nav > ul ul > li:last-of-type { margin-bottom:0; } footer h3 { font-size:1.5em; font-weight:600; } footer button { color:rgba(255,255,255,1); } body.desktop footer button:hover { color:#FAC80A; } footer > nav h2 { text-align:center; color:#E3F6F5; margin-top:4.45em; line-height:1.5; } footer > nav h2 > span { display:block; font-size:0.95em; font-weight:500; color:#FAC80A; } footer > nav h2 b { display:block; font-size:2.65em; font-weight:600; padding:0; } footer > nav > span { font-size:1.15em; padding:calc(0.5em / 1.15) calc(1.5em / 1.15); display:inline-block; width:auto; margin:1em auto; font-weight:700; border-radius:0.5em; background-color:#FAC80A; color:rgba(255,255,255,1); } footer .copyright { background-color:transparent; color:#47667E; margin:0 auto; padding:0 0 1em 0; text-align:right; line-height:1; } footer .copyright h2 { height:1em; font-size:1em; color:rgba(255,255,255,1); font-weight:900; display:inline-block; vertical-align:top; position:absolute; left:0; top:0; width:auto; margin:0; padding:0; line-height:1; } footer .copyright h2 > span { position:absolute; left:0; top:50%; transform:translateY(-50%); display:inline-block; vertical-align:top; } footer .copyright h2 > span svg { height:1.5em; } footer .copyright ul.navlink { font-size:0; line-height:1; padding:0; margin:0; position:relative; color:#47667E; } footer .copyright ul.navlink li { display:inline-block; vertical-align:top; line-height:1; margin-left:2em; } footer .copyright ul.navlink li span, footer .copyright ul.navlink li a { font-size:0.7em; font-weight:500; position:relative; display:inline-block; vertical-align:top; padding:0; line-height:1; color:inherit; } body.desktop footer .copyright ul.navlink li a:hover { color:#FAC80A; } footer .copyright ul.navsociaux { z-index:6; position:absolute; top:0; width:auto; } footer .copyright ul.navsociaux li { margin-left:1em; } footer .copyright ul.navsociaux li:first-of-type { margin-left:7em; } footer .copyright ul.navsociaux li a { font-size:1.25em; background-color:#47667E; color:#272343; } body.desktop footer .copyright ul.navsociaux li a:hover { background-color:#FAC80A; color:#272343; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* COOKIE CONSENT */ .cc_container { background-color:#54524D !important; font-family:Montserrat, sans-serif !important; font-size:0.7em !important; font-weight:400 !important; } .cc_container a.cc_more_info, .cc_container a.cc_more_info:link, .cc_container a.cc_more_info:visited, .cc_container a.cc_more_info:active { color:#FAC80A !important; } body:desktop .cc_container a.cc_more_info:hover, .cc_container a.cc_more_info:active { color:#FAC80A !important; } .cc_container .cc_btn, .cc_container .cc_btn:visited { background-color:#FAC80A !important; color:rgba(255,255,255,1) !important; font-family:Montserrat, sans-serif !important; font-size:1em !important; font-weight:700 !important; max-width:12em !important; } body:desktop .cc_container a.cc_btn:hover, .cc_container a.cc_btn:active { color:#FAC80A !important; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, ul.navlink li, header ul#menu li, main nav li, .contact-form label { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ #en2mots { opacity:0; background-color:rgba(255,255,255,1); width:100%; max-width:100%; margin:0 auto; position:relative; } main section { width:100%; 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); } /* 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:1280px) { html { font-size:12.8px; } /* .liquide { max-width:calc(0.9 * 1280px); } */ #groupe-intro .resume { padding-top:calc(3.5em + 1vw) !important; padding-bottom:calc(4.5em + 1vw) !important; } #gtx-plus > div { height:calc(18em + 4vw) !important; } } /* 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, ul.navlink li, header ul#menu li, main nav li, .contact-form label { font-size:1.5625rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:calc((1118 / 1280) * 100%); width:calc((1118 / 1280) * 100vw); } .liquide { max-width:1118px; } .liquide.expand { width:calc((1228 / 1280) * 100%); width:calc((1228 / 1280) * 100vw); } .liquide.expand { max-width:1228px; } .liquide.contract { width:calc((950 / 1280) * 100%); width:calc((950 / 1280) * 100vw); } .liquide.contract { max-width:950px; } button#showhidemenu { display:none; } header ul#menu { width:100%; } header ul#menu > li { position:initial; } header ul#menu > li > ul { position:absolute; display:flex; flex-wrap:nowrap; opacity:0; padding:0; left:0; width:100%; height:auto; max-height:0; overflow:hidden; background-color:rgba(255,255,255,1); border-radius:0.5em; transition:opacity 500ms ease 0ms, max-height 500ms ease 0ms; } header ul#menu > li > ul > li { padding:1.5em 1.5em 1.5em 1.5em; width:25%; } body.desktop header ul#menu > li:hover > ul, header ul#menu > li > button.hover + ul { opacity:1; max-height:80vh; } header ul#menu > li > button > svg { display:inline-block; } main { padding-top:calc(1.6em + 0.65em + 0.6em + 3.2em); } main nav:not(#listemag-nav).fix { position:fixed; top:0; left:50%; transform:translateX(-50%); margin-top:0 !important; } main nav:not(#listemag-nav).fix > div { box-shadow: 0px 0.15em 0.3em #00000010 !important; } .mobonly { display:none !important; } section:not(.home):not(.groupe).blocresume .resume, #gtx-bloc.blocresume .resume { padding-bottom:5em; } section:not(.home):not(.groupe).blocresume button > span { white-space:nowrap; } li.blocresume .illustration { overflow:visible; bottom:4.2em; left:3.1em; height:5.5em; right:3.1em; } li.blocresume .illustration > svg { height:100%; width:auto; bottom:0; transform-origin:bottom left; } .home.blocresume .resume { padding:4.25em 50% 0 3.1em; } .home.blocresume .fromrte { max-width:19em; } .home.blocresume .illustration { position:absolute; right:0; bottom:0;top:0; width:50%; } .home.blocresume .illustration > svg { top:50%; transform:translateY(-50%); right:0; } .home.blocresume .illustration > svg.ellipse { width:92%; } #home-services .resume { color:rgba(255,255,255,1); padding-right:40%; } #home-services .illustration { width:53%; } #groupe-intro .resume { padding:3.5em calc(50% + 3.5em) 4.5em 0; } #groupe-intro .visuel { position:absolute; left:50%; transform:none; top:0; bottom:0; width:50vw; overflow:hidden; } .groupe.blocresume .resume { padding:2.4em 3.3em 0 3.7em; } .groupe.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; } .groupe.blocresume .illustration > svg { top:50%; transform:translateY(-50%); } .groupe.blocresume .illustration > svg.ellipse { width:92%; } .groupe.blocresume .illustration > svg:not(.ellipse) { width:90%; } .groupe.blocresume button { left:3.7em; } .groupe.blocresume:nth-of-type(2n+2) .illustration { left:0; } .groupe.blocresume:nth-of-type(2n+2) .illustration > svg { left:0; } .groupe.blocresume:nth-of-type(2n+2) .illustration > svg.ellipse { transform:translateY(-50%) rotate(180deg); } .groupe.blocresume:nth-of-type(2n+2) .illustration > svg:not(.ellipse) { transform:translateY(-50%) translatex(-10%); } .groupe.blocresume:nth-of-type(2n+2) .resume { padding:2.4em 3.3em 0 40%; } .groupe.blocresume:nth-of-type(2n+2) button { left:40%; } .groupe.blocresume:nth-of-type(2n+1) .illustration { right:0; } .groupe.blocresume:nth-of-type(2n+1) .illustration > svg { right:0; } .groupe.blocresume:nth-of-type(2n+1) .resume { padding:2.4em 40% 0 3.7em; } #groupe-plb-loc .illustration > svg:not(.ellipse) { transform:translateY(-50%) scale(0.9) translate(-10%,-10%); } li#services-footer-catalogue.blocresume .illustration > svg { transform:translateX(-5%); } li#services-footer-gtx.blocresume .illustration > svg { transform:scale(1.2) translateY(-8%); } li#services-footer-desamiantage.blocresume .illustration > svg { transform:scale(2.2) translate(-25%,19%); } li#services-footer-ltp.blocresume .illustration > svg { transform:scale(1.2) translate(0,0); } .fichedetail .visuel { position:absolute; right:0; top:50%; transform:translateY(-50%); width:22em; height:auto; } .fichedetail .visuel img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:auto; } .gtx.blocresume .resume { padding:2.4em 3.3em 0 3.7em; } .gtx.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; } .gtx.blocresume .illustration > svg { top:50%; transform:translateY(-50%); } .gtx.blocresume .illustration > svg.ellipse { width:92%; } .gtx.blocresume .illustration > svg:not(.ellipse) { width:90%; } #gtx-bloc .illustration { right:0; } #gtx-bloc .illustration > svg { right:0; } #gtx-bloc .resume { padding:3.75em 40% 0 3.7em; } .blocformation .illustration { left:0; } .blocformation .illustration > svg { left:0; } .blocformation .illustration > svg:not(.ellipse) { transform:translateY(-50%) translatex(-10%); } .blocformation .resume { padding:2.4em 3.3em 0 40%; } .blocformation button { left:40%; } .blocplus .resume { position:absolute; top:50%; transform:translateY(-50%); } .blocplus .visuel { position:absolute; top:0; bottom:0; width:50vw; } .blocplus > div { height:20em; } .blocplus > div:nth-of-type(2n+1) .resume { padding:2.5em 0 3em calc(50% + 3.5em); } .blocplus > div:nth-of-type(2n+1) .visuel { right:50%; } .blocplus > div:nth-of-type(2n+2) .resume { padding:3.6em calc(50% + 3.5em) 3.6em 0; } .blocplus > div:nth-of-type(2n+2) .visuel { left:50%; } #double-boutons > button:nth-of-type(2) { position:absolute; top:50%; right:0; transform:translateY(-50%); } .formations.blocresume .resume { padding:2.9625em 40% 0 3.7em; } .formations.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; right:0; } .formations.blocresume .illustration > svg { top:50%; transform:translateY(-50%); right:0; } .formations.blocresume .illustration > svg.ellipse { width:92%; } .formations.blocresume .illustration > svg:not(.ellipse) { width:85%; } .service.blocresume .resume { padding:4.1305em 40% 0 3.7em; } .service.desamiantage.blocresume .resume { padding-top:5.125em; } .service.eaux.blocresume .resume { padding-top:4.1305em; } .service.ecoresponsabilite.blocresume .resume { padding-top:5.9805em; } .service.blocresume .resume h2 { width:28em; } .service.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; right:0; } .service.blocresume .illustration > svg { top:50%; transform:translateY(-50%); right:0; } .service.blocresume .illustration > svg.ellipse { width:92%; } .service.blocresume .illustration > svg:not(.ellipse) { width:85%; } .service.blocresume.plb-loc .illustration > svg:not(.ellipse) { width:90%; } .service.blocresume.plb-env .illustration > svg:not(.ellipse) { width:90%; } .service.blocresume.plb-secu .illustration > svg:not(.ellipse) { width:79%; } .service.blocresume.desamiantage .illustration > svg:not(.ellipse) { width:85%; right:5%; } .service.blocresume.chauxmax .illustration > svg:not(.ellipse) { width:75%; right:5%; } .service.blocresume.epandage .illustration > svg:not(.ellipse) { width:75%; right:5%; } .service.blocresume.approvisionnement .illustration > svg:not(.ellipse) { width:75%; right:5%; } #accessoires-liste li { padding-left:12em; min-height:10em; } #accessoires-liste li .visuel { position:absolute; left:0; top:0; width:10em; height:10em; } ul.listeactus.listeresumes li.blocresume .illustration { left:2em; right:2em; bottom:2em; } #actu-content .detail { padding-left:12.65em; } #actu-content .complement { position:absolute; left:0; top:0; width:10.3em; } #documentation li.blocresume .illustration { } li#documentation-plaquette-plb-grands-travaux.blocresume .illustration > svg { transform:scale(0.8) translate(15%,-8%); } li#documentation-traitement-des-eaux-amiantees.blocresume .illustration > svg { transform:scale(1.6) translate(-18%,19%); } li#documentation-plaquette-ltp.blocresume .illustration > svg { } li#documentation-notre-eclairage-decarbone.blocresume .illustration > svg { } main nav#listemag-nav, #listemag-liste, #listemag-detail { padding-left:calc(20em + 2em); } #listemag-liste, #listemag-detail { min-height:50em; } #listemag-detail .prevnext a span.nomob { display:inline-block; } .landingltp.blocresume .resume { padding:2.4em 3.3em 0 3.7em; } .landingltp.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; } .landingltp.blocresume .illustration > svg { top:50%; transform:translateY(-50%); } .landingltp.blocresume .illustration > svg.ellipse { width:92%; } .landingltp.blocresume .illustration > svg:not(.ellipse) { width:60%; right:10%; } #landingltp-bloc .illustration { right:0; } #landingltp-bloc .illustration > svg { } #landingltp-bloc .resume { padding:3.75em 40% 5em 3.7em; } #landingltp-criteres .resume > img { width:calc(100% + (2 * 3.7em)); max-width:calc(100% + (2 * 3.7em)); } #landingltp-plus.blocplus > div { height:21.2em; } .landingagence.blocresume .resume { padding:2.4em 3.3em 0 3.7em; } .landingagence.blocresume .illustration { position:absolute; bottom:0; top:0; width:40%; } .landingagence.blocresume .illustration > svg { top:50%; transform:translateY(-50%); } .landingagence.blocresume .illustration > svg.ellipse { width:92%; } .landingagence.blocresume .illustration > svg:not(.ellipse) { width:80%; } #landingagence-bloc .illustration { right:0; } #landingagence-bloc .illustration > svg { right:0; } #landingagence-bloc .illustration > svg:not(.ellipse) { right:1em; } #landingagence-bloc .resume { padding:3.75em 40% 5em 3.7em; } #landingagence-prestations { padding-top:6em; margin-top:0; } #landingagence-prestations h2 { transform:translateY(-5em); } #landingagence-prestations img { width:calc(100% + (2 * 3.7em)); max-width:calc(100% + (2 * 3.7em)); } #landingagence-prestations button { white-space:nowrap; } #landingagence-pourquoi button { white-space:nowrap; } .crosslinks h3 > span { font-size:1em; } #crosslinks-services ul.listeresumes { gap:0.55em; } #crosslinks-services li.blocresume { min-height:13.85em; width:calc((100% / 3) - (0.55em * 2 / 3)); padding:1.35em 1.4em 0 1.4em; } #crosslinks-services .fromrte { font-size:0.8em; } #crosslinks-services_old .fromrte { font-size:0.6em; } #crosslinks-services li.blocresume button { padding:0.4em 0.2em 0.6em 0.2em; width:calc(100% - (2 * 1.4em)); left:1.4em; right:1.4em; bottom:1.15em; } #crosslinks-services li.blocresume button > span { font-size:0.6em; max-width:100%; line-height:1; } #crosslinks-services h3 > span { font-size:1.2em; } #crosslinks-services_old h3 > span { font-size:0.9em; } #crosslinks-agences ul.listeresumes { gap:0.7em; } #crosslinks-agences li.blocresume { width:calc((100% / 4) - (0.7em * 3 / 4)); padding:1.35em 1.675em 0 1.775em; } #crosslinks-agences li.blocresume .illustration { bottom:7.972em; height:2.2em; left:1.775em; right:1.675em; } #crosslinks-agences li.blocresume button { padding:0.6em 0.2em; width:calc(100% - (2 * 1.775em)); left:1.775em; right:1.675em; } #crosslinks-agences .listeagences li.blocresume { min-height:15.4em; } #crosslinks-agences li.blocresume button > span { font-size:0.8em; max-width:100%; } #crosslinks-agences li.blocresume button > svg { position:absolute; right:0; top:50%; transform:translateY(-50%); height:0.7em; } #crosslinks-agences li.blocresume button.email { bottom:1.472em; padding:0; } #crosslinks-agences li.blocresume button.landingpage { bottom:3.222em; } #crosslinks-clients ul.listeresumes { gap:2em; } #crosslinks-clients li { width:calc((100% / 5) - (2em * 4 / 5)); padding:0; } .contact-chauxmax .blocintro h1 > span { display:inline-block; max-width:67%; margin-bottom:0.5em; } .contact-chauxmax .blocintro .fromrte { max-width:67%; } .contact-form label.nom, .contact-form label.societe, .contact-form label.email, .contact-form label.telephone, .contact-form label.service, .contact-form label.agence, .contact-form label.norue, .contact-form label.complement, .contact-form label.cp, .contact-form label.ville, .contact-form label.nbgilets, .contact-form label.nbbatons, .contact-form label.nbpiles, .contact-form label.nbbatteries { width:50%; } .contact-form label.nom, .contact-form label.email, .contact-form label.service, .contact-form label.norue, .contact-form label.cp, .contact-form label.nbgilets, .contact-form label.nbpiles { padding-right:1.35em; } .contact-form label.societe, .contact-form label.telephone, .contact-form label.agence, .contact-form label.complement, .contact-form label.ville, .contact-form label.nbbatons, .contact-form label.nbbatteries { padding-left:1.35em; } .contact-form label.complement, .contact-form label.nbbatons { padding-top:2.45em; } } /* 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, ul.navlink li, header ul#menu li, main nav li, .contact-form label { font-size:1.5625rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:950px), (orientation:landscape) and (max-width:500px) { html { font-size:10px; font-size:1vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, ul.navlink li, header ul#menu li, main nav li, .contact-form label { font-size:5.1282051282051rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:94.6%; width:94.6vw; } .liquide.expand { width:100%; width:100vw; } div.nosmartphone br { display: none; content: ' '; clear:none; } .deskonly { display:none !important; } header { overflow:hidden; } header nav.liquide { padding-top:0; } header ul.navlink { display:none; } header a.logo svg { height:2.4em; } header nav:before { z-index:2; content:''; position:absolute; top:0; height:calc(0.65em + 0.6em + 2.4em); left:50%; transform:translateX(-50%); width:104vw; background-color:rgba(255,255,255,1); } header ul#menu { padding-top:calc(0.65em + 0.6em + 2.4em); height:0; overflow:hidden; background:transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } body.showmenu header ul#menu { height:100vh; left:50%; transform:translateX(-50%); width:100vw; overflow:auto; } body.showmenu header ul.navcontact { display:block; top:18.8rem; } header ul.navcontact li.contact { display:none; } header ul.navcontact li { margin:0 1.5em; padding:0.4em 0 0.6em 0; } header ul.navcontact li a { font-size:1.4em; } header ul#menu > li { margin-left:0; margin-top:2em; display:block; padding:0 2.3em; } header ul#menu > li:first-of-type { margin-left:0; margin-top:calc(0.65em + 0.6em + 2.4em + 2em + 1.4em); } header ul#menu > li:last-of-type { margin-bottom:6em; } header ul#menu > li > button { font-size:1.2em; } header ul#menu > li > ul span, header ul#menu > li > ul button.service { color:rgba(255,255,255,1); font-weight:600; text-transform:none; } header ul#menu > li > ul span > svg, header ul#menu > li > ul button.service > svg { display:inline-block; } header ul#menu > li > ul button.service > svg { display:none; } header ul#menu > li > ul > li { padding:1em 1em 0.5em 1em; } header ul#menu > li > ul > li:first-of-type { padding-top:1.5em; } header ul#menu > li > ul > li > span > svg polyline, header ul#menu > li > ul > button.service > svg polyline { transform-origin:center; transform:rotate(-90deg); transition:transform 500ms ease 0ms; } header ul#menu > li > ul > li > span.hover > svg polyline, header ul#menu > li > ul > button.service.hover > svg polyline { transform:rotate(0deg); } header ul#menu > li > ul > li > ul { padding-bottom:0.3em; opacity:0; max-height:0; overflow:hidden; transition:opacity 500ms ease 0ms, max-height 500ms ease 0ms; } header ul#menu > li > ul > li > span.hover + ul { opacity:1; max-height:100vh; } main { padding-top:calc(0.65em + 0.6em + 2.4em); } #home-bandeau img { border-radius:0; } .blocintro { margin-top : 1.6em; } .blocintro h1 > span { font-size:1.7em; line-height:1.4; } .blocintro h2 > span { font-size:1.7em; line-height:1.4; } .blocintro .resume { padding-left:1.7em; padding-right:1.7em; } .chauxmax #contact-intro { padding-left:0; padding-right:0; } main nav > div:not(.mobile) { display:none; } main nav > div.mobile { display:inline-block; } main nav > div.mobile { overflow:visible; min-height:10.7em; background: transparent linear-gradient(90deg, #FAC80A 0%, #FADB61 100%) 0% 0% no-repeat padding-box; } main nav > div.mobile:after { content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%); width:4em; height:4em; background: transparent url('https://www.groupe-plb.fr/_chartes_/plb/ressources/images/navigation/fleche-cadre-verticale.svg') center center no-repeat; background-size:contain; } main nav > div.mobile h2 { text-align:center; padding:1.35em 0; } main nav > div.mobile h2 svg { width:1.2em; height:1.2em; display:inline-block; vertical-align:middle; margin:0 0 0.2em 0; } main nav > div.mobile h2 > span { display:block; font-size:1.2em; font-weight:600; vertical-align:middle; line-height:1.33; } main nav > div.mobile select { font-size:0.95em; font-weight:500; width:calc(100vw - 3em); background-color:rgba(255,255,255,1); border-radius:0.35em; padding-right:calc(1em + 2* 1em - 0.5em) !important; } main nav > div.mobile option { font-weight:500; } .blocresume .resume { padding:2.4em 1.7em 21em 1.7em; } .blocresume h2 > span { font-size:1.45em; } .blocresume .illustration { width:100%; height:21em; bottom:0; right:0; border-radius:0 0 0.6em 0.6em; } .blocresume .illustration > svg.ellipse { width:107%; top:0; } .blocresume .illustration > svg:not(.ellipse) { width:85%; bottom:5.2em; left:50%; transform:translateX(-50%); } .blocresume button { left:1.7em; right:1.7em; bottom:2.4em; } .blocresume button > svg { margin-left:1.3em; } section:not(.home):not(.groupe).blocresume button {min-width:15em; padding:1.1em 2.3em; } li.blocresume { padding:0; width:100%; } #home-recherche { height:18.5em; margin-top:-3em; padding:0 1.7em; } #home-recherche h2 svg { width:1.2em; height:1.2em; margin:0 0 0.2em 0; } #home-recherche h2 > span { display:block; font-size:1.2em; line-height:1.33; padding:0 1.7em; } #home-recherche label { width:100%; margin-right:0; } #home-recherche select { width:100%; } #home-recherche button { width:100%; } #home-services { background: transparent linear-gradient(213deg, #54524D 0%, #767676 100%) 0% 0% no-repeat padding-box; } #home-services .resume { padding-bottom:15em; } #home-services .illustration { height:15.5em; overflow:visible; } #home-services.blocresume .illustration > svg:not(.ellipse) { width:80%; left:100%; transform:translateX(-100%); } #home-actu li.blocresume { min-height:0; padding-bottom:5em; } #home-actu li.blocresume .resume { padding-bottom:1.7em; } #home-actu li.blocresume .illustration { position:relative; height:auto; bottom:initial; right:initial; } #home-actu li.blocresume .illustration > svg:not(.ellipse) { position:relative; width:60%; height:auto; left:50%; transform:translateX(-50%) !important; bottom:initial; right:initial; } #home-documentation { background: transparent linear-gradient(208deg, #BAE8E8 0%, #E3F6F5 100%) 0% 0% no-repeat padding-box; } #groupe-nav { display:none; } #groupe-plb-loc { margin-top:2.3em; } #groupe-ltpservices.blocresume .illustration > svg:not(.ellipse) { width:75%; } #groupe-plb-gtx.blocresume button > svg { transform:translateX(-3.5em); } #groupe-plb-env.blocresume button > svg { transform:translateX(-2.2em); } #services li.blocresume { min-height:0; } #services .blocresume .resume { padding:9.4em 1.7em 6em 1.7em; } #services .blocresume .resume h2 { text-align:center; } #services .blocresume .illustration { overflow:visible; top:1.7em; bottom:initial; right:initial; height:6em; } #services .blocresume .illustration > svg:not(.ellipse) { bottom:0; height:100%; width:auto; } #tab-chauxmax #contact-intro { padding-left:0; padding-right:0; } #tab-eclairagedecarbone #contact-intro { padding-left:0; padding-right:0; } #tab-accessoires #contact-intro { padding-left:0; padding-right:0; } .service.blocresume.plb-secu .illustration > svg:not(.ellipse) { width:75%; bottom:2.7em; transform:translateX(-50%) translateY(10%) scale(0.9); } .service.blocresume.chauxmax .illustration > svg:not(.ellipse) { width:75%; bottom:2.7em; } .service.blocresume.balayage .illustration > svg:not(.ellipse) { width:68%; bottom:3.2em; } .service.blocresume.lavage .illustration > svg:not(.ellipse) { width:68%; bottom:3.2em; } .service.blocresume.epandage .illustration > svg:not(.ellipse) { width:63%; bottom:4em; } .service.blocresume.approvisionnement .illustration > svg:not(.ellipse) { width:63%; bottom:4em; } .service-bandeau { margin-top:-0.7em; } li#services-footer-desamiantage.blocresume .illustration > svg { transform:translate(-50%, 5%) scale(2.2); } #accessoires-liste li { padding-bottom:4em; margin-bottom:5.2em; } #accessoires-liste li .visuel { width:calc(100vw - 3em); height:calc(100vw - 3em); margin-bottom:1em; } .fichedetail .liquide { width:calc(100vw - 4.6em); } .fichedetail .intro { padding:3.4em 0 2.8em 0; } .fichedetail .intro h2 > span { font-size:1.7em; } .fichedetail .intro h3 > span { font-size:1.2em; } .fichedetail h3 { font-size:1.55em; } .fichedetail .visuel { width:100vw; left:50%; transform:translateX(-50%); } #accessoires-detail .fichedetail .visuel { width:calc(100vw - 3em); height:calc(100vw - 3em); margin-top:1em; } .blocmain { padding:4em 1.5em 0 1.5em; } .blocmain button > svg { margin-left:1.3em; } .blocformation { min-height:0; } .blocformation .resume { padding:17.4em 1.7em 6em 1.7em; } .blocformation .illustration { overflow:visible; top:1.7em; bottom:initial; right:initial; height:14em; width:100%; } .blocformation .illustration > svg:not(.ellipse) { bottom:0; top:0; left:10%; height:100%; width:auto; } .blocformation button { position:absolute; left: 1.7em; right: 1.7em; bottom: 2.4em; margin:0; } .blocformation button > svg { margin-left:1.3em; } .blocplus.liquide { width:calc(100vw - 3em); } .blocplus > svg { top:calc(50% + 1em + 14.5em); } .blocplus .visuel { width:100vw; left:50%; transform:translateX(-50%); height:14.5em; } .service-tab-plb-gtx section.gtx.blocresume, .service-tab-plb-gtx section.service-bloc.blocresume, #tab-plb-gtx.service-tab-plb-gtx section#gtx-bloc.gtx.blocresume { margin-top:8em; } .service-tab-plb-env section.service-bloc.blocresume { margin-top:8em; } .service-tab-plb-secu section.service-bloc.blocresume, .service-tab-plb-secu section.landingltp.blocresume { margin-top:8em; } .approvisionnement.blocresume h2 > span { font-size:1.35em; } #gtx-plus.blocplus .resume { padding: 3.5em 0 3em 0; } #gtx-plus.blocplus h2 > span { font-size:1.75em; } #double-boutons.liquide { width:calc(100vw - 3em); } #double-boutons > button:nth-of-type(1) { padding:1.1em 2.3em 1.2em 2.3em; margin-bottom:2em; } #double-boutons > button:nth-of-type(1) > span { line-height:1.3; text-align:center; } #double-boutons > button:nth-of-type(2) > span { max-width:calc(100% - 3em); } #double-boutons button > svg { margin-left:0.6em; } #formations-bloc.blocresume .illustration > svg:not(.ellipse) { bottom:3.2em; } #formations-liste.liquide { width:calc(100vw - 3em); } .service-bloc { margin-top:8em; } .service-bloc.blocresume .resume { padding-bottom:16em; } .service-bloc.blocresume .illustration > svg:not(.ellipse) { bottom:0.7em; } #service-bloc-ecoresponsabilite.blocresume .illustration > svg:not(.ellipse) { width:65%; } .service-bandeau.liquide { width:100vw; } .service-bandeau img { border-radius:0; } .service-contenu.liquide { width:calc(100vw - 3em); } .service-contenu h2 { font-size:1.75em; } #listeactus-intro { z-index:2; } #listeactus-nav.liquide { z-index:1; width:100vw; border-radius:0; padding-top:3.5em; } main nav#listeactus-nav > div.mobile { min-height:12em; border-radius:0; background: transparent linear-gradient(180deg, #BAE8E8 0%, rgba(255,255,255,1) 100%) 0% 0% no-repeat padding-box; } main nav#listeactus-nav > div.mobile h2 { padding-top:2.7em;} ul.listeactus.listeresumes li.blocresume, ul.listeactus.listeresumes li.blocresume.double { min-height:0; width:100%; padding:2em; } .showfull:not(.forcefull) ul.listeactus.listeresumes li.blocresume.archive, .forcefull ul.listeactus.listeresumes li.blocresume.archive.display { padding:2em; } ul.listeactus.listeresumes li.blocresume .resume { padding:0; } ul.listeactus.listeresumes li.blocresume .illustration { overflow:visible; position:relative; width:100%; } ul.listeactus.listeresumes li.blocresume .illustration > svg { height:100%; width:auto; bottom:-0.5em; left:0; right:initial; top:initial; transform:none; } ul.listeactus.listeresumes { padding-bottom:1.5em; } .fromrte img.half { width:100%; } .fromrte img.half:nth-of-type(2n+1) { width:100%; margin-left:0; margin-right:0; } .fromrte img.half:nth-of-type(2n+2) { width:100%; margin-left:0; margin-right:0; margin-top:0; } #actu-content.liquide { width:calc(100vw - 3em); } #actu-content .complement { margin-top:2.4em; } #actu-content ul.diaporama li, #actu-content ul.diaporama li.double { width:100%; height:8em; } #actu-others h2.liquide { text-align:center; width:calc(100vw - 3em); } #actu-others.forcefull ul.listeactus.listeresumes li.blocresume.archive { min-height:0; width:100%; padding:2em; } #documentation.liquide { width:calc(100vw - 3em); } #documentation li.blocresume { width:100%; min-height:0; } #documentation li.blocresume .resume { padding:0 0 6em 0; } #documentation li.blocresume h2 { margin-bottom:0; } #documentation li.blocresume .illustration { overflow:visible; width:auto; height:4em; bottom:1em; top:initial; right:4em; } #documentation li.blocresume .illustration > svg:not(.ellipse) { bottom:0; right:0; height:100%; width:auto; } li#documentation-traitement-des-eaux-amiantees.blocresume .illustration > svg { transform:translate(-50%, 5%) scale(1.8); } #listemag-intro.blocintro h1 > span { font-size:1.5em; } #listemag-intro.blocintro .fromrte { max-width:100%; } main nav#listemag-nav div.mobile { margin-bottom:4em; } main nav#listemag-nav ul#ariane > li { display:block; text-align:left; } #listemag-liste ul .fromrte { width:calc(100% - 3em); height:5em; -webkit-line-clamp: 4; } #listemag-liste button > span { display:none; } #listemag-liste .pagination { position:relative; width:100%; margin-top:4em; } #listemag-detail .prevnext a span.mobonly { display:inline-block; } .listeagences li.blocresume .resume { padding:2.4em 1.7em 3.4em 1.7em; } .listeagences li.blocresume button.landingpage { padding:0.8em 0; } .listeagences li.blocresume .illustration { overflow:visible; width:auto; left:4.4em; height:6em; bottom:9em; top:initial; right:initial; } .listeagences li#agences-savoie.blocresume .illustration { left:5.6em; } .listeagences li.blocresume .illustration > svg:not(.ellipse) { bottom:0; left:0; right:initial; height:100%; width:auto; } section.mentionslegales.liquide { width:calc(100vw - 3em); } section.mentionslegales h1 > span { font-size:1.7em; } section.mentionslegales h2 { font-size:1.3em; } #landingltp-bloc.blocresume .illustration > svg:not(.ellipse) { width:60%; bottom:3em; } #landingltp-bloc button { min-width:15em; padding:1.1em 2.3em; } #landingltp-criteres h2 > span { font-size:1.45em; } #landingltp-criteres h3 > span { font-size:1.45em; } #landingltp-lumaphore h3 > span { font-size:1.45em; } #landingltp-plus.blocplus h2 > span { font-size:1.45em; } #landingltp-plus.blocplus > svg { display:none; } #landingltp-efficacite { margin: 0em auto; } .blocintro .patchwork { height:auto; } .blocintro .patchwork svg { width:100%; height:auto; } #landingagence-bloc.blocresume .illustration > svg:not(.ellipse) { transform:translateX(-50%) translateY(20%) scale(0.9); } #landingagence-bloc button { min-width:15em; padding:1.1em 2.3em; } .metz #landingagence-bloc.blocresume .illustration > svg:not(.ellipse) { transform:translateX(-50%) translateY(20%) scale(0.9); } #landingagence-prestations h2 > span { font-size:1.55em; } #landingagence-prestations h3 > span { font-size:1.45em; } #landingagence-prestations { margin-top:6em; padding-left:1.5em; padding-right:1.5em; } #landingagence-prestations > ul > li > div { padding-bottom:2.4em; } #landingagence-prestations button { display:none; } #landingagence-autres h2 { text-align:center; width:calc(100vw - 3em); } #landingagence-autres > div.liquide { width:calc(100vw - 3em); } #landingagence-autres h2 > span { font-size:1.45em; } #landingagence-autres h3 > span { font-size:1.2em; } #landingagence-autres > div:last-of-type a { display:block; } #landingagence-pourquoi h2 > span { font-size:1.45em; } #landingagence-pourquoi { padding-top:4em; margin-top:2.4em; padding-left:1.5em; padding-right:1.5em; } #landingagence-pourquoi button { display:none; } .contact-chauxmax .blocintro h1 > span { display:inline-block; font-size:1.5em; margin-bottom:0.5em; } #tab-eclairagedecarbone #contact-intro.blocintro h2 > span { font-size:1.6em; } #tab-accessoires #contact-intro.blocintro h2 > span { font-size:1.6em; } .listeservices li.blocresume { min-height:23.25em; } .listeservices li.blocresume .resume { padding-bottom:2.3em; } .crosslinks h2 > span { font-size:1.45em; } #crosslinks-services .blocresume h3 > span { font-size:1.25em; } #crosslinks-services .listeservices li.blocresume { min-height:18em; } #crosslinks-agences { margin-bottom:2.7em; } #crosslinks-agences .listeagences li.blocresume { min-height:20.25em; } #crosslinks-agences .listeagences li.blocresume { padding-right:0; } #crosslinks-agences.crosslinks h3 > span { font-size:1.25em; } #crosslinks-agences .listeagences li.blocresume .illustration > svg:not(.ellipse) { left:-0.8em; height:4.5em; } #crosslinks-agences .listeagences li.blocresume .resume { padding: 2.4em 1.7em 1.4em 1.7em; } #crosslinks-clients .listeresumes { width:12em; margin:2.4em auto; } footer > nav h2 b { font-size:1.85em; padding:0 1em; } footer > nav > span { margin-bottom:2em; } footer > nav > ul { display:none; } footer .copyright h2 { display:none; } footer .copyright { text-align:center; padding-bottom:2em; } footer .copyright ul.navlink { position:relative; display:block; } footer .copyright ul.navlink li:first-of-type { margin-left:0; } footer .copyright ul.navsociaux li a { font-size:2.2em; border-radius:0.125em; } footer .copyright ul.navcopyright li { display:block; margin-top:1em; margin-left:0; text-align:center; } footer .copyright ul.navcopyright li:first-of-type { margin-top:1.5em; } } /* 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; } }