@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); /*GENERAL*/ html { height: 100%; } * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } BODY { height: calc(100% - 147px); margin: 0; font-family: 'Open Sans',sans-serif; font-size: 14px; color: #353535; overflow-x: hidden; } h1 { margin: 0; padding: 10px 0 10px; font-family: 'Open Sans',sans-serif; /*text-align: center;*/ font-size: 26px; font-weight: 600; color: #010101; } h2 { margin: 0; padding: 10px 0 10px; font-family: 'Open Sans',sans-serif; /*text-align: center;*/ font-size: 26px; font-weight: 600; color: #010101; } #page-accueil h1, #page-accueil h2 { text-align: center; } h3 { margin: 5px 0; padding: 0; font-family: 'Open Sans',sans-serif; text-align: center; font-size: 14px; font-weight: 400; color: #010101; } h1 > a, h2 > a, h3 > a { text-decoration: none; } table { border-spacing: 0; } table td { margin: 0; padding: 0; } hr { display: block; width: 50px; margin: 20px auto; padding: 0; max-width: 100%; border: 0; border-top: 6px solid #925954; } hr.small { border-top-width: 1px; margin: 0 auto 10px; } a img { border: 0; } a { color: #696969; } a:active, a:focus { color: #696969; } .center { justify-content: center; text-align: center; } .block { display: block; } .left { text-align: left; } .right { text-align: right; } .small { font-size: 11px; } .middle { display: flex!important; align-items: center!important; } .row > *.middle { display: inline-flex!important; height: 100%; vertical-align: middle; } .pull-right { float: right; } .middle.center { justify-content: center; } .disable { color: #BDBDBD; } .lead { font-weight: 700; font-size: 16px; } .ariane { list-style: none; margin: 10px 0; padding: 0; } .ariane > li { display: inline-block; margin: 0; padding: 10px 3px; vertical-align: middle; font-style: normal; font-weight: 300; font-size: 14px; line-height: 14px; /*color: #86888B;*/ } .ariane > li:not(:first-child) > i { /*color: #BABDBE;*/ } .ariane a { font-style: normal; font-weight: 400; font-size: 14px; line-height: 14px; /*color: #34393C;*/ text-decoration: none; } li.middle { display: inline-flex!important; vertical-align: middle; } .ok { color: #1ABA16; } .nok { color: #BA1616; } .clear { clear: both; } .absolute { position: absolute!important; top: 0; height: 100%; } .absolute.right { right: 0; width: 50%; } .absolute.left { left: 0; width: 50%; } .highlight_bloc { padding: 30px!important; color: #FFF; } .highlight_bloc h2 { margin: 0 0 15px; padding: 25px 0 10px; color: #FFF; } .highlight_bloc hr { border-color: #FFF; } .circle { display: inline-block; width: 27px; height: 27px; margin: 10px; border-radius: 100%; text-align: center; font-size: 17px; line-height: 27px; vertical-align: middle; color: #f3f2f2; background-color: #FFF; } /*.titre-article { margin: 0; text-align: justify; font-size: 20px; color: #f3f2f2; }*/ .container { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0 20px; max-width: 1200px; } .liste { width: 90%; margin: 0 auto; padding: 0; list-style: none; } .liste > li { display: table; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid #FFF; } .liste > li > span { display: table-cell; padding: 10px 5px; text-align: left; } .liste > li > span:first-child + span { text-align: right; } .center { text-align: center; } .fade-c > *, .fade { opacity: 0; transition: opacity ease-in-out 0.4s,transform ease-in-out 0.5s; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .fade-c.visible > *, .fade.visible { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } .fade-c.visible >:nth-child(2) { transition-delay: 0.3s; } .fade-c.visible >:nth-child(3) { transition-delay: 0.6s; } .fade-c.visible >:nth-child(4) { transition-delay: 0.9s; } .fade-c.visible >:nth-child(5) { transition-delay: 1.2s; } .fade-c.visible >:nth-child(6) { transition-delay: 1.5s; } .fade-c.visible >:nth-child(7) { transition-delay: 1.8s; } .row { margin: 0 -10px; padding: 0; font-size: 0; list-style: none; } .row.no-auto-width { display: inline-block; } .row > * { display: inline-block; margin: 0; padding: 0 10px; font-size: 15px; /*font default*/ vertical-align: top; } .row > .col-1 { width: 8.333333%; } .row > .col-2 { width: 16.666667%; } .row > .col-3 { width: 25%; } .row > .col-4 { width: 33.33%; } .row > .col-5 { width: 41.666667%; } .row > .col-6 { width: 50%; } .row > .col-7 { width: 58.333333%; } .row > .col-8 { width: 66.66%; } .row > .col-9 { width: 75%; } .row > .col-10 { width: 83.333333%; } .row > .col-11 { width: 91.666667%; } .row > .col-12 { width: 100%; } .acordeon > li > div:first-child + div { display: none; } .acordeon > li > div:first-child > i:first-child:before { content: "\f067"; } .acordeon > li > div:first-child > i { padding: 5px 7px; background-color: #fff; color: #f3f2f3; border-radius: 5px; } .acordeon > li.select > div:first-child > i { padding: 5px 7px; background-color: #f3f2f3; color: #fff; border-radius: 5px; } .acordeon > li.select > div:first-child + div { display: block; } .acordeon > li.select > div:first-child > i:first-child:before { content: "\f068"; } /*FORMULAIRE*/ #captchagc, #captchagc * { box-sizing: border-box; outline: none; } #captchagc { position: relative; background-color: #E7E7E7; border: 1px solid #D6D6D6; width: 250px; height: 70px; overflow: hidden; margin: 10px auto; } #captchagc > img:nth-of-type(1) { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; z-index: 2; margin: 0!important; } #captchagc > img:nth-of-type(2) { position: absolute; top: 40px; left: 25px; width: 25px; height: 25px; z-index: 3; margin: 0!important; animation: 3s ease-out 1s infinite running captchagc; } @keyframes captchagc { 0% { left: 25px; } 25% { left: 25px; } 50%{ left: 210px; } 100%{ left: 210px; } } #captchagc > img:nth-of-type(1) + div { position: absolute; top: 14px; right: 14px; border: 1px solid #535353; border-radius: 4px; width: 41px; height: 40px; background-color: #FFF; z-index: 1; } #captchagc > img:nth-of-type(1) + div.accept { border: 1px solid #F3990C; } #captchagc > img:nth-of-type(1) + div.hover { border: 1px solid #1CD129; } #captchagc:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ">>>>>>>>"; font-family: 'Open sans', sans-serif; font-size: 17px; } #captchagc.valid:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background-color: rgba(255,255,255,0.9); z-index: 3; } #captchagc > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; opacity: 0; transition: ease-in-out 200ms opacity, ease-in-out 200ms left; } #captchagc.valid > i:nth-of-type(1) { opacity: 1; left: 17%; } #captchagc > i:nth-of-type(1):before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; padding: 5px; color: #12D954; font-size: 30px; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #FFF; border: 2px solid #12D954; } #captchagc > i:nth-of-type(2) { position: absolute; top: 23px; left: 113px; z-index: 5; font-size: 25px; opacity: 1; } #captchagc.valid > img:nth-of-type(1) { top: 18px!important; left: 197px!important; } #captchagc.valid > img:nth-of-type(2) { display: none; } form { display: inline; } .button, .button:active, .button:focus, .bouton, .bouton:active, .bouton:focus { display: inline-block; margin: 10px; padding: 5px 30px; border: 0; border-radius: 20px; text-decoration: none; font-size: 15px; font-weight: 600; color: #FFF; line-height: 25px; background-color: #925954; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; cursor: pointer; } .button > i, .bouton > i { margin-right: 5px; vertical-align: middle; } .button:hover, .bouton:hover { background-color: #535353; } .bouton_pdf { display: inline-block; margin: 10px; padding: 10px 15px; border: 2px solid #925954; text-decoration: none; color: #010101; background-color: #FFF; transition: 200ms ease-in-out color, 200ms ease-in-out background-color; } .bouton_pdf:before { content: "\e094"; font-family: "Font Awesome 6 Pro"; font-weight: 400; margin-right: 5px; } .bouton_pdf:hover { color: #FFF; background-color: #925954; } input[type='text'], input[type='password'], select, textarea { margin: 2px 0; padding: 6px; border: 1px solid #CCC; border-radius: 2px; outline: none; font-family: 'Open Sans',sans-serif; font-size: 14px; } select { padding: 4px 6px; } textarea { padding: 6px; } input[type='text']:focus, input[type='password']:focus, select:focus, textarea:focus { border: 1px solid #925954; outline: none; } fieldset { margin: 0; padding: 0; border: 0; } fieldset > legend { text-align: center; font-size: 16px; font-weight: bold; } fieldset > ul { margin: 0; padding: 0; font-size: 0; list-style: none; } fieldset > ul > li { display: inline-block; width: 50%; margin: 0; padding: 0; font-size: 14px; vertical-align: middle; } fieldset > ul > li .input { display: block; width: 100%; padding: 5px; text-align: left; font-size: 0; } fieldset > ul > li .input > label { display: block; font-weight: 400; font-size: 16px; padding: 3px 0; } fieldset > ul > li .input > div > * { font-size: 14px; } fieldset > ul > li .input > div > input, fieldset > ul > li .input > div > select, fieldset > ul > li .input > div > textarea { display: inline-block; width: 100%; font-size: 14px; } fieldset > ul > li.double { width: 100%; } /*NOTIFICATIONS*/ .notification { margin: 10px; padding: 10px 20px; border-radius: 3px; text-align: left; color: #FFF; } .notification.small { margin: 0; } .notification:before { display: inline-block; margin: 0 10px 0 0; font-family: "Font Awesome 6 Pro"; font-size: 18px; vertical-align: middle; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notification > span { display: inline-block; width: calc(100% - 40px); vertical-align: middle; } .notification.closable:after { content: "\f00d"; position: absolute; top: 50%; right: 0; margin: 0 10px 0 0; font-family: "Font Awesome 6 Pro"; font-size: 18px; vertical-align: middle; transform: translateY(-50%); cursor: pointer; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notification.absolute { position: absolute; top: 0; right: 0; left: 0; } .notification.validation, .button.validation { background-color: #37bc9b; } .notification.validation:before { content: "\f00c"; } .notification.information, .button.information { background-color: #5D9CEC; } .notification.information:before { content: "\f05a"; } .notification.erreur, .button.erreur { background-color: #F05050; } .notification.erreur:before { content: "\f06a"; } .notification.alert, .button.alert { background-color: #f0bd50; } .notification.alert:before { content: "\f071"; } .notification.disable, .button.disable { background-color: #A2A2A2; } /*SITE*/ iframe div { padding: 206px !important; } #site { position: relative; width: 100%; height: 100%; margin: 0 auto; } /*HEADER*/ #header_top { background-color: #333333; color: #fff; } #header_top > .container > span { display: inline-block; padding: 5px; } #header_top a { text-decoration: none; color: #FFF; font-weight: 700; } header { /*z-index: 55;*/ /*position: fixed;*/ /*top: 0;*/ /*right: 0;*/ /*left: 0;*/ text-align: left; background-color: rgba(255,255,255,1); box-shadow: 0 2px 2px rgba(0,0,0,0.1); transition: background-color 0.5s ease; /*border-top: 10px solid #89514C;*/ } /*header > .container { height: 100px; transition: height 0.5s ease; } .scroll { background-color: rgba(255,255,255,1) !important; box-shadow: 0 2px 2px rgba(0,0,0,0.1) !important; transition: background-color 0.5s ease; } header.scroll > .container { height: 60px; }*/ #logo { /*display: flex; position: absolute; align-items: center;*/ height: 100%; max-height: 100px; } #logo > img { /*width: 175px;*/ /*height: 80%;*/ /*transition: width ease-in-out 0.15s;*/ height: 100%; max-height: 100px; } /*.menuTop { width: 100%; border-bottom: 1px solid #ededed; padding: 10px 0; } .menuTop > .container { height: 100px; }*/ #recherche { display: inline-block; border: 1px solid #CCC; background-color: #FFF; margin: 10px 0 10px 10px; } #recherche > input { border: 0; margin: 0; vertical-align: middle; width: calc(100% - 28px); } #recherche > button { background: unset; border: 0; margin: 0; padding: 7px; vertical-align: middle; } #recherche:has(input:focus) { border: 1px solid #925954; } /*MENU*/ .burger { display: none; z-index: 2; position: absolute; top: 0; right: 0; width: 30px; /*height: 100%;*/ margin: 0 20px; text-align: left; cursor: pointer; align-items: center; } .burger > div { position: relative; display: inline-block; width: 100%; height: 75px; } .burger .icon-left { position: absolute; top: 37px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } .burger .icon-left:before { content: ""; position: absolute; top: -10px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } .burger .icon-left:after { content: ""; position: absolute; top: 10px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } .burger .icon-right { position: absolute; top: 37px; left: 15px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } .burger .icon-right:before { content: ""; position: absolute; top: -10px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } .burger .icon-right:after { content: ""; position: absolute; top: 10px; width: 15px; height: 3px; background-color: #3b3b3b; transition-duration: 0.5s; } body.nav-open .burger .icon-left { background: transparent; transition-duration: 0.5s; } body.nav-open .burger .icon-left:before { background-color: #3b3b3b; transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px); } body.nav-open .burger .icon-left:after { background-color: #3b3b3b; transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px); } body.nav-open .burger .icon-right { background: transparent; transition-duration: 0.5s; } body.nav-open .burger .icon-right:before { background-color: #3b3b3b; transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px); } body.nav-open .burger .icon-right:after { background-color: #3b3b3b; transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px); } #menu { padding: 0; height: 100%; } #menu > div:first-child { display: grid; grid-template-columns: 450px 1fr; align-items: center; border-bottom: 1px solid #CCC; } #menu > div:first-child + div > ul { display: flex; text-align: center; } #menu ul { display: inline-block; margin: 0; padding: 0; list-style: none; } #menu ul > li { display: inline-flex; align-items: center; position: relative; vertical-align: middle; } /*#menu ul > li:first-child > a { padding: 7px 8px 8px; } #menu ul > li:last-child { border-right: none; }*/ #menu ul > li > a { display: block; position: relative; padding: 10px 8px; overflow: hidden; text-decoration: none; font-size: 15px; color: #000000; /*font-weight: 600;*/ border-bottom: 2px solid transparent; text-transform: uppercase; font-weight: 600; } #menu > div:first-child + div > ul > li > a { font-size: 13px; } #menu ul > li > a.button { padding: 5px 15px; } #menu ul > li.sous-menu > a { padding: 10px 20px 10px 10px; } #menu ul > li > a > i { line-height: 25px; } #menu ul > li > a > .fa-angle-down { position: absolute; top: calc(50% - 2px); right: 4px; font-size: 17px; transition: top 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #menu ul > li > a:hover > .fa-angle-down.down1 { top: 120%; } #menu ul > li > a > .fa-angle-down.down2 { top: -20%; } #menu ul > li > a:hover > .fa-angle-down.down2 { top: calc(50% - 2px); } #menu ul > li > ul { z-index: 3; position: absolute; top: 100%; padding: 0 5px; max-height: 0; min-width: 100%; overflow: hidden; text-align: left; list-style: none; background-color: #fff; box-shadow: 1px 1px 4px #3a3a3a; transition: max-height ease-in-out 0.2s; } #menu ul > li > ul > li { padding: 5px 0; display: block; } #menu ul > li > ul > li:first-child { padding-top: 15px; } #menu ul > li > ul > li:last-child { padding-bottom: 15px; } #menu ul > li:hover ul { max-height: 500px; } #menu ul > li > ul > li { white-space: nowrap; } #menu ul > li > ul > li > a { display: block; padding: 5px; text-decoration: none; font-size: 15px; white-space: nowrap; color: #666; } #menu ul > li > ul > li > a:hover, #menu ul > li > ul > li > a.select { color: #925954; } /*SLIDER ACCUEIL*/ .mouse { max-width: $mouse-width; width: 100%; height: 38px; } .scroll_slide { animation-name: scroll_slide; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform, opacity; opacity: 1; } .scroll_slide-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } @keyframes scroll_slide { 0%, 20% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(36px) scaleY(2); opacity: 0; } } #slider_accueil { z-index: 1; position: relative; width: 100%!important; overflow: hidden; } #slider_accueil > ul { position: relative!important; width: 100%; } #slider_accueil > ul > li { position: relative!important; width: 100%; padding-top: 32%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } #slider_accueil > ul > li > a { display: block; position: absolute; top: 0; width: 100%; height: 100%; } #slider_accueil img { margin: 0; } #slider_accueil > ul > li video { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #slider_accueil .boutonPagination { background: transparent!important; width: 10px!important; height: 10px!important; opacity: 1!important; border: 1px solid #FFF; } #slider_accueil .boutonPagination.select { background: #FFF!important; } #slider_accueil .boutonsPagination { left: 50%; bottom: 180px!important; transform: translateX(-50%); right: initial!important; } #slider_accueil .CJSlider-navigation-gauche > i, #slider_accueil .CJSlider-navigation-droite > i { text-shadow: 1px 1px 4px #555; font-size: 62px; color: rgb(255,255,255); cursor: pointer; } #slider_accueil .CJSlider-navigation-gauche > i { right: 10px; } #slider_accueil .CJSlider-navigation-droite > i { left: 10px; } #slider_accueil .slide-contenu { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slide-contenu .container { position: relative; top: 0; height: 100%; } #slider_accueil .slide-contenu > .container > div { position: absolute; bottom: 25px; left: 0; } #slider_accueil .slide-contenu .slide-titre { display: inline-block; padding: 5px 50px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 27px; color: #FFF; background-color: rgba(229, 64, 137, 0.98); } #slider_accueil .slide-contenu .slide-texte { display: block; margin: 0 0 0 30px; padding: 10px 20px; max-width: 490px; text-decoration: none; font-size: 17px; color: #FFF; background-color: rgba(0,0,0,0.9); } #slider_accueil .slide-contenu .slide-texte a { text-shadow: none; } #page-accueil #contacts { background-color: rgb(0 0 0 / 60%); text-align: center; color: #FFFFFF; font-size: 16px; padding: 20px 0; position: absolute; bottom: 0; width: 100%; } #page-accueil #contacts .contact-titre { color: #C09650; } #page-accueil #contacts > div:not(.contact-titre) { display: inline-flex; display: inline-flex; width: 100%; max-width: 950px; justify-content: center; } #page-accueil #contacts > div > div { text-align: left; padding: 5px; width: 100%; max-width: 400px; font-size: 0; } #page-accueil #contacts > div > div > img { display: inline-block; vertical-align: top; /*font-size: 40px;*/ margin: 40px 10px 0 10px; height: 50px; } #page-accueil #contacts > div > div > div { display: inline-block; vertical-align: middle; width: calc(100% - 70px); height: 105px; font-size: 14px; } #page-accueil #contacts > div > div > div .contact-titre { font-weight: 700; margin: 0 0 15px; } #page-accueil #contacts > div > div > div .contact-adresse { margin: 0; } #page-accueil #contacts > div > div > div .contact-telephone { margin: 0; } #page-accueil #contacts > div > div > div .contact-telephone a { color: #FFF; text-decoration: none; } #page-accueil #contacts > div > div > div .contact-email { margin: 0; } #page-accueil #contacts > div > div > div .contact-email a { color: #FFF; text-decoration: none; } #page-contact #contact { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 2fr; text-align: center; width: 100%; row-gap: 40px; margin-bottom: 40px; } #page-contact #contact .contact-picto { font-size: 40px; color: #925954; padding: 10px; } #page-contact #contact .contact-titre { font-weight: 600; color: #010101; font-size: 16px; padding: 10px 0; } #page-contact #contact .contact-texte { display: inline-flex; height: 70px; align-items: center; font-size: 12px; } #page-contact #contact .contact-texte a { text-decoration: none; } /*CONTENT*/ #content { position: relative; /*margin-top: 120px;*/ min-height: calc(100% - 35px); } #slider_accueil + #content { padding-top: 0; } #slider_accueil + #content { margin-top: 0; } #content .contenu img { margin: 5px; } #content .contenu img[align='left'] { margin: 5px 20px 5px 0; } #content .contenu img[align='right'] { margin: 5px 0 5px 20px; } #content .contenu img[align='absmiddle'] { margin: 5px; } #content .sous_pages { margin: 0; padding: 0; text-align: center; } #content .sous_pages > li { display: inline-block; width: 48%; margin: 1%; padding: 0; list-style: none; } #content .sous_pages > li > a { display: inline-block; width: 100%; padding: 30px 0; border-radius: 5px; text-decoration: none; text-transform: uppercase; color: #fff; background-color: #696969; } #content .sous_pages > li > a:hover { background-color: #858585; } #couverture { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; height: 250px; background-color: #f2f2f2; } .contenu { padding: 40px 0; } .contenu-articles { padding: 40px 0; } .article { } .contenu-conclusion { } .bloc3d { z-index: 8; position: relative; margin: 20px auto; padding-left: 0; text-align: center; font-size: 0; list-style: none; } .bloc3d > li { display: inline-block; width: 222px; height: 155px; margin: 5px; max-width: 435px; border-radius: 4px; font-size: 15px; vertical-align: top; color: #fff; perspective: 500px; } .bloc3d > li > a { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; color: white; /*background-color: rgb(219,219,219);*/ background-position: 50% 50%; background-size: cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; perspective: 500px; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .bloc3d > li > a.anim { box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; -webkit-animation: leave-animation 0.5s forwards cubic-bezier(0.18,2.07,1,1); -moz-animation: leave-animation 0.5s forwards cubic-bezier(0.18,2.07,1,1); -o-animation: leave-animation 0.5s forwards cubic-bezier(0.18,2.07,1,1); animation: leave-animation 0.5s forwards cubic-bezier(0.18,2.07,1,1); -ms-animation: leave-animation 0.5s forwards cubic-bezier(0.18,2.07,1,1); } @keyframes leave-animation { 100% { transform: rotateX(0deg) rotateY(0deg); } } .bloc3d i { position: absolute; top: 40%; left: 50%; color: #925954; transform: translate(-50%,-50%); } .bloc3d .titre-bloc { position: absolute; bottom: 10px; left: 0; width: 100%; padding: 3px 10px; text-align: left; text-transform: uppercase; font-size: 13px; font-weight: bold; letter-spacing: 2px; color: #333; /*background-color: rgba(255,255,255,0.9);*/ text-align: center; } .bloc3d .prix-bloc { position: absolute; bottom: 40px; left: 10px; width: 100px; height: 100px; padding: 40px 0; text-align: center; font-size: 20px; color: #FFF; transform: rotate(15deg); } .bloc3d .btn-bloc { position: absolute; bottom: 10px; left: 0; padding: 3px 10px; text-align: left; text-transform: uppercase; font-size: 13px; font-weight: bold; letter-spacing: 2px; color: #333; background-color: rgba(255,255,255,0.9); } .parallax { margin: 0; padding: 0; /*min-height: 450px;*/ color: white; background-attachment: fixed; background-image: url(../img/parallax.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .parallax h2 { text-align: center; color: #FFF; } #a-propos { position: relative; } #a-propos:before { content: ""; position: absolute; transform: skewX(6deg); width: 100%; height: calc(100% + 30px); background-color: #925954e6; z-index: 1; margin: -15px 0; } #a-propos hr { border-color: #FFF; } #a-propos > div { position: relative; z-index: 2; padding: 30px; height: 455px; } #a-propos > div em { display: block; text-align: center; } #carte { margin: 35px 0; } #carte path { fill: #E6E6E6!important; stroke: #B9B5B2!important; } #carte circle { fill: #925954!important; stroke: none!important; } #carte-label { position: absolute; background-color: #FFF; padding: 5px; border-radius: 3px; } table { border-spacing: 0; } table td { margin: 0; padding: 0; } .CJEditeur_body table > tbody > tr:first-child > th, .CJEditeur_body table > tbody > tr:first-child > td, #produit table > tbody > tr:first-child > th, #produit table > tbody > tr:first-child > td { /*background-color: #925954!important; color: #FFF; text-shadow: 1px 1px 0px #666;*/ text-align: center; padding: 6px; } .CJEditeur_body table > tbody > tr > td, #produit table > tbody > tr > td { color: #925954; /*border-right: 1px solid #925954; border-bottom: 1px solid #925954;*/ text-align: center; vertical-align: middle; width: initial!important; } .CJEditeur_body table > tbody > tr > td p, #produit table > tbody > tr > td p { margin: 0!important; padding: 0!important; } .CJEditeur_body table > tbody > tr:not(:first-child):nth-child(odd) > th, #produit table > tbody > tr:not(:first-child):nth-child(odd) > th, .CJEditeur_body table > tbody > tr:not(:first-child):nth-child(odd) > td, #produit table > tbody > tr:not(:first-child):nth-child(odd) > td { background-color: rgba(0,0,0,0.20); } #produit { display: grid; grid-template-columns: repeat(5, 1fr); /*grid-template-rows: repeat(4, 1fr);*/ grid-column-gap: 40px; grid-row-gap: 20px; } #produit .produit-photos { grid-area: 1 / 1 / 3 / 3; } #produit .produit-photos .slide-for .slick-slide > a { display: block; position: relative; width: 100%; height: 300px; overflow: hidden; } #produit .produit-photos .slide-for .slick-slide > a:after { content: "\f00e"; position: absolute; bottom: 10px; right: 10px; color: #FFF; font-size: 25px; font-family: "Font Awesome 6 Pro"; font-weight: 400; text-shadow: 0px 0px 2px rgb(0 0 0 / 50%); } #produit .produit-photos .slide-for .slick-slide > a img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; object-fit: cover; } #produit .produit-photos .slide-nav .slick-slide > div { position: relative; width: calc(100% - 6px); height: 100px; overflow: hidden; padding: 0 3px; margin: 6px 0; } #produit .produit-photos .slide-nav .slick-slide > div img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; object-fit: cover; } #produit .produit-resume { grid-area: 1 / 3 / 2 / 6; padding: 0 0 20px; min-height: 220px; } .produit-resume > p, .produit-resume > p > span, .produit-resume > p > span > b, .produit-resume > div > p, .produit-resume > div > p > span, .produit-resume > div > p > span > b { margin: initial!important; position: initial!important; display: inline-block!important; line-height: initial!important; } #produit .produit-resume table { width: 100%; } #produit .produit-contact { grid-area: 2 / 3 / 3 / 6; background-color: #f2f2f2; /*max-height: 200px;*/ } #produit .produit-contact > div:first-child { width: 250px; height: 100%; background-image: url(../img/contact-image.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } #produit .produit-contact > div:first-child + div { width: calc(100% - 250px); padding: 20px; } #produit .produit-contact > div:first-child + div .produit-contact-titre { display: block; margin: 0 0 10px; font-weight: 600; font-size: 18px; } #produit .produit-contact > div:first-child + div .produit-contact-agence a { text-decoration: none; } #produit .produit-description { grid-area: 3 / 1 / 4 / 6; } #produit .produit-fiche-technique { grid-area: 4 / 1 / 5 / 6; } #produit .produit-fiche-technique .produit-fiche-technique-titre { font-size: 24px; font-weight: 700; color: #010101; } #produit .produit-complement { grid-area: 5 / 1 / 6 / 6; } #accueil-familles { margin: 40px 0; } #accueil-familles em { display: block; text-align: center; } #accueil-familles ul, #familles ul, #categories ul, #sous-categories ul, #brochures ul, #produits ul, #services ul { list-style: none; margin: 20px 0; padding: 0; display: block; /*align-items: center;*/ /*justify-content: center;*/ font-size: 0; text-align: center; } #accueil-familles ul > li, #familles ul > li, #categories ul > li, #sous-categories ul > li, #brochures ul > li, #produits ul > li, #services ul > li { display: inline-block; margin: 0; padding: 10px; width: 100%; /*max-width: 290px;*/ max-width: 232px; font-size: 14px; } .slide { margin: 0 auto; max-width: 1400px; } .slide > div { margin: 0 30px; max-width: 1400px; } .slick-prev:before, .slick-next:before { color: #000; font-family: "Font Awesome 6 Pro"; font-weight: 300; } .slick-next { right: -15px; } .slick-prev { left: -15px; } .slick-prev:before { content: "\f104"; } .slick-next:before { content: "\f105"; } .famille, .categorie, .sous-categorie, .brochure, .produit, .service { position: relative; display: block; /*padding-top: 70%;*/ width: 100%; height: 310px; max-width: 290px; overflow: hidden; transition: 200ms transform ease-in-out, 200ms box-shadow ease-in-out; border: 1px solid rgba(0,0,0,0.2); background-color: #FFF; text-decoration: none; } .slide .famille, .slide .categorie, .slide .brochure, .slide .sous-categorie, .slide .produit { width: 245px; margin: 50px auto; } .sous-categorie { height: 350px; } .categorie { /*height: 440px;*/ height: 350px; } .brochure { /*height: 440px;*/ height: 350px; } .produit { height: 350px; } .service { height: 160px; } .famille:hover, .categorie:hover, .brochure:hover, .sous-categorie:hover, .produit:hover, .service:hover { /*transform: scale(1.1); box-shadow: 0 0 30px rgba(0,0,0,0.5);*/ transform: scale(1.05); box-shadow: 0 0 10px rgb(0 0 0 / 40%); z-index: 2; } .categorie > div:first-child, .produit > div:first-child, .brochure > div:first-child { position: relative; height: calc(100% - 80px); } .famille img, .categorie > div > img, .sous-categorie img, .brochure > div > img, .produit > div > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; height: 100%; vertical-align: middle; margin: 0!important; } .famille > div { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 40px; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); } .categorie > div:first-child + div, .produit > div:first-child + div, .brochure > div:first-child + div { text-align: center; } .sous-categorie > div { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; /*padding: 40px;*/ background-color: rgba(0,0,0,0.35); transition: ease-in-out 200ms background-color; } .sous-categorie:hover > div { background-color: rgba(0,0,0,0.80); } /*.produit > div { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 40px; }*/ .service > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); vertical-align: middle; width: 100%; } .famille .famille-titre, .categorie .categorie-titre, .sous-categorie .sous-categorie-titre, .brochure .brochure-titre, .produit .produit-titre { font-family: 'Open Sans',sans-serif; font-weight: 600; /*font-size: 22px;*/ font-size: 17px; color: #FFF; padding: 10px 0; /*height: 130px;*/ height: 80px; display: flex; justify-content: center; align-items: center; } .categorie .categorie-titre, .produit .produit-titre, .brochure .brochure-titre { color: #000; padding: 2px 5px; } .sous-categorie .sous-categorie-titre { font-size: 15px; text-transform: uppercase; height: 100px; } .famille-accroche, .famille-description { margin: 0 0 15px; } /*.produit .produit-titre { position: relative; color: #000; font-size: 15px; text-transform: uppercase; height: 100px; }*/ /*.produit .produit-titre:after { position: absolute; content: ""; border-top: 2px solid #000; width: 50%; left: 50%; transform: translateX(-50%); bottom: 0; }*/ .service .service-titre { color: #000; padding: 3px 10px; width: 100%; font-weight: bold; } .famille .famille-titre > span, .categorie .categorie-titre > span, .sous-categorie .sous-categorie-titre > span, .brochure .brochure-titre > span, .produit .produit-titre > span { } .famille .famille-bouton, .categorie .categorie-bouton, .sous-categorie .sous-categorie-bouton, .brochure .brochure-bouton, .produit .produit-bouton { font-family: 'Open Sans',sans-serif; font-weight: 300; font-size: 18px; color: #FFF; border: 1px solid #FFF; background-color: rgba(0,0,0,0.20); text-align: center; padding: 10px 20px; } #partenaires { padding: 30px 0; /*background-color: #f2f2f2;*/ } #partenaires ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } #partenaires ul > li { margin: 20px; padding: 0; vertical-align: middle; } #partenaires ul > li > img { max-width: 100px; } /*Page partenaires*/ #partenaires-liste { margin: 0; padding: 0; text-align: center; font-size: 0; list-style: none; } #partenaires-liste > li { display: inline-block; width: 200px; height: 180px; margin: 10px; padding: 15px; overflow: hidden; text-align: center; font-size: 14px; transition: ease-in-out 200ms box-shadow; } #partenaires-liste > li > a { display: block; margin: 0; padding: 0; text-decoration: none; } #partenaires-liste > li:hover { -webkit-box-shadow: 0 0 3px 0 #656565; -moz-box-shadow: 0 0 3px 0 #656565; box-shadow: 0 0 3px 0 #656565; -o-box-shadow: 0 0 3px 0 #656565; filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=3); } #partenaires-liste > li img { height: initial; margin: 0; max-width: 100%; } #partenaires-liste > li > a > .partenaires-liste-titre { color: #044D71; } /*Les actualités*/ #actualites-liste { margin: 0; padding: 0; font-size: 0; list-style: none; } #actualites-liste > div > a { font-size: 0; background-color: #f5f5f5; display: block; margin: 0px 0px 20px 0px; text-decoration: none; } #actualites-liste > div > a > div { display: inline-block; font-size: 16px; vertical-align: top; } #actualites-liste > div > a > div:first-child { position: relative; width: 100%; height: 200px; background-color: #ededed; overflow: hidden; } #actualites-liste > div > a > div:first-child > img { position: absolute; margin: 0; max-width: 100%; max-height: 100%; left: 50%; transform: translate(-50%, -50%); top: 50%; } #actualites-liste > div > a > div:first-child + div { position: relative; padding: 0 10px 10px 10px; max-height: 80px; height: 80px; } #actualites-liste > div > a > div > .actualite-effect { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; z-index: 1; color: #fff; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 200ms; } #actualites-liste > div > a:hover > div > .actualite-effect { opacity: 1; background-color: rgba(0,0,0,0.3); } #actualites-liste > div > a > div > h2 { font-size: 16px; color: rgb(47, 60, 78); font-weight: bold; text-transform: uppercase; line-height: 1.501; text-align: left; } /*Une actualité*/ .actualite-top { margin-top: 35px; overflow: hidden; } .actualite-date { width: 145px; text-align: center; overflow: hidden; background-color: #f5f5f5; padding: 0px 5px 5px 5px; margin: 0; } .actualite-date-jour { font-size: 25px; color: #f3f2f3; text-transform: uppercase; display: block; } .actualite-date-mois { font-size: 15px; color: rgb(47, 60, 78); text-transform: uppercase; text-align: left; } .actualites-content { margin: 0; padding: 0; } .actualites-content img { margin: 0 !important; width: 100%; } .actualite-texte { text-align: justify !important; } .actualite-titre { font-size: 16px; color: rgb(20, 36, 64); font-weight: bold; text-transform: uppercase; line-height: 1.501; } /*Galerie*/ #galerie-liste { width: 100%; padding-left: 0; text-align: center; font-size: 0; list-style: none; } #galerie-liste > li { display: inline-flex; position: relative; width: calc(25% - 10px); margin: 5px; padding-top: 20%; overflow: hidden; vertical-align: top; } #galerie-liste > li .titre { display: flex; z-index: 2; position: absolute; bottom: 10px; left: 0; align-items: center; justify-content: center; width: calc(100% - 10px); height: 50px; margin: 5px; padding: 5px; border-radius: 3px; font-size: 18px; color: #FFF; background-color: rgba(0,0,0,0.7); transition: ease-in-out 200ms bottom; } #galerie-liste > li .titre > span { display: inline-block; } #galerie-liste > li:hover .titre { bottom: -100%; } #galerie-liste > li > a { display: block; position: absolute; top: 0; width: 100%; height: 100%; background-color: #CCC; } #galerie-liste > li > a > .mask { z-index: 3; position: absolute; top: 100%; width: 100%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-animation: 150ms forwards linear; animation: 0.15s forwards linear; } #galerie-liste > li > a > .mask > i { position: absolute; top: 50%; left: 50%; font-size: 45px; color: white; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #galerie-liste > li > a > .mask > span { display: block; position: absolute; top: 50%; left: 50%; width: 95%; text-align: center; font-size: 15px; color: white; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #galerie-liste > li > a > .mask > span > i { font-size: 45px; } #galerie-liste > li img.portrait { width: 100%; height: auto!important; max-width: 100%!important; } #galerie-liste > li img.landscape { width: auto; height: 100%!important; max-height: 100%; } /*FAQ*/ #faq { list-style: none; margin: 0; padding: 0; } #faq > li { background-color: #F2F2F2; margin: 1px; padding: 5px; } #faq > li > .question { padding: 5px; cursor: pointer; } #faq > li > .reponse { padding: 5px; font-style: italic; } /*Galerie photos ?*/ .item { position: relative; float: left; width: calc(33.33333% - 10px); background-color: #000; overflow: hidden; margin: 5px; } .item:after { content: ''; display: block; background-color: inherit; opacity: 0.9; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: scale(2) translateX(-75%) translateY(-75%) translateZ(0) rotate(-28deg); transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0.3; } .item:hover:after { transform: scale(2) translateX(0%) translateY(0%) translateZ(0) rotate(-28deg); } .item:hover .item-image { transform: scale(1.2) translateZ(0); } .item:hover .item-text { opacity: 1; transform: translateY(0); } .item-image { height: auto; backface-visibility: hidden; transform: translateZ(0); transition: transform 750ms cubic-bezier(0.23, 1, 0.32, 1); } .item-image::before { content: ""; display: block; padding-top: 75%; overflow: hidden; } .item-image img { position: absolute; top: 0; left: 0; line-height: 0; margin: 0 !important; } .item-image img.landscape { width: auto; height: 100%!important; max-height: 100%; transform: translateX(0); } .item-image img.portrait { width: 100%; height: auto!important; max-width: 100%!important; transform: translateY(-25%); } .item-text { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; text-align: center; z-index: 1; color: #fff; transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 500ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 300ms; transform: translateY(-20%); } .item-text-wrapper { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .item-text-title { font-size: 36px; padding: 0 15px; margin: 5px 0 0 0; } @keyframes in-top { 0% { top: -100%; left: 0%; opacity: 1; } 100% { top: 0%; left: 0%; opacity: 1; } } @keyframes in-bottom { 0% { top: 100%; left: 0%; opacity: 1; } 100% { top: 0%; left: 0%; opacity: 1; } } @keyframes in-right { 0% { top: 0%; left: 100%; opacity: 1; } 100% { top: 0%; left: 0%; opacity: 1; } } @keyframes in-left { 0% { top: 0%; left: -100%; opacity: 1; } 100% { top: 0%; left: 0%; opacity: 1; } } #galerie-liste > li > a > .mask.in-top { -webkit-animation-name: in-top; animation-name: in-top; } #galerie-liste > li > a > .mask.in-bottom { -webkit-animation-name: in-bottom; animation-name: in-bottom; } #galerie-liste > li > a > .mask.in-right { -webkit-animation-name: in-right; animation-name: in-right; } #galerie-liste > li > a > .mask.in-left { -webkit-animation-name: in-left; animation-name: in-left; } @keyframes out-top { 0% { top: 0%; left: 0%; opacity: 1; } 100% { top: -100%; left: 0%; opacity: 1; } } @keyframes out-bottom { 0% { top: 0%; left: 0%; opacity: 1; } 100% { top: 100%; left: 0%; opacity: 1; } } @keyframes out-right { 0% { top: 0%; left: 0%; opacity: 1; } 100% { top: 0%; left: 100%; opacity: 1; } } @keyframes out-left { 0% { top: 0%; left: 0%; opacity: 1; } 100% { top: 0%; left: -100%; opacity: 1; } } #galerie-liste > li > a > .mask.out-top { -webkit-animation-name: out-top; animation-name: out-top; } #galerie-liste > li > a > .mask.out-bottom { -webkit-animation-name: out-bottom; animation-name: out-bottom; } #galerie-liste > li > a > .mask.out-right { -webkit-animation-name: out-right; animation-name: out-right; } #galerie-liste > li > a > .mask.out-left { -webkit-animation-name: out-left; animation-name: out-left; } #galerie-liste > li img { z-index: 1; position: absolute; top: 50%; left: 50%; margin: 0; max-height: 100%; max-width: 100%; transform: translate(-50%, -50%); } #charte > div { margin-bottom: 30px; } /*Mentions légales*/ #mentions { font-size: 0; } #mentions h2, #mentions h3 { margin: 0; padding: 0 0 10px; text-align: left; text-align: center; font-size: 16px; } #mentions > div { margin: 10px 0 10px; padding: 10px; font-size: 14px; background-color: #F6F6F6; } #mentions > div:first-child, #mentions > div:first-child + div { display: inline-block; width: calc(50% - 5px); margin: 10px 0 0; min-height: 280px; vertical-align: top; } #mentions > div:first-child { margin-right: 5px; } #mentions > div:first-child + div { margin-left: 5px; } /*AUTRES SLIDERS*/ .slider_galerie { clear: both; } .slider_galerie > div:first-child { display: inline-block; width: 50%; margin-right: auto; margin-left: auto; overflow: hidden; vertical-align: top; background-color: #D3D3D3; } .slider_galerie > div:first-child > ul { position: relative!important; top: 0!important; width: 100%; height: 100%!important; margin: 0; } .slider_galerie > div:first-child > ul > li { position: relative!important; top: 0!important; width: 100%; height: 100%!important; margin: 0; padding-top: 75%; } .slider_galerie > div:first-child > ul > li > a { display: block; width: 100%; height: 100%!important; } .slider_galerie > div img { margin: 0!important; vertical-align: middle; } .slider_galerie > div:first-child > ul > li > a > img { position: absolute; top: 50%; left: 50%; width: initial!important; height: initial!important; max-height: 100%; max-width: 100%; transform: translate(-50%,-50%); } .slider_galerie > div:first-child + div { display: inline-block; position: relative; width: 50%!important; height: 100%!important; vertical-align: top; background-color: #EAEAEA; } .slider_galerie > div:first-child + div > div { padding-top: 75%; } .slider_galerie > div:first-child + div > div > div { position: absolute!important; top: 0; height: 100%!important; padding: 2px; overflow: auto!important; white-space: initial!important; } .slider_galerie > div:first-child + div > div > div > img { height: 100px!important; margin: 2px!important; } .slider_galerie .boutonPagination.select { background-color: #f3f2f2!important; } .slider_galerie > div.CJSlider > div:nth-child(2) , .slider_galerie > div.CJSlider > div:nth-child(3) { position: absolute; top: 50%; left: 10px; text-shadow: 0 0 1px rgba(0,0,0,0.8); font-size: 30px; color: #FFF; opacity: 0.7; transform: translateY(-50%); cursor: pointer; } .slider_galerie > div.CJSlider > div:nth-child(3) { right: 10px; left: initial; } .slider_galerie_miniatures > span { display: inline-block; position: relative; width: 90px; height: 90px; margin: 0; margin: 1px; padding: 0; overflow: hidden; vertical-align: middle; } .slider_galerie_miniatures > span > img { position: absolute; top: 50%; left: 50%; width: initial!important; height: initial!important; max-height: 170%!important; max-width: 210%!important; transform: translate(-50%,-50%); } .nuage { text-align: center; } /*FOOTER*/ footer { color: rgba(255,255,255,0.6); background-color: #7E7E7E; } footer a { color: rgba(255,255,255,0.6); text-decoration: none; } footer .footer-titre { color: #FFF; font-weight: 700; } footer hr { border-color: #FFF; margin: 10px 0; } footer ul { list-style: none; margin: 0; padding: 0; } footer > div:first-child { padding: 30px 0 20px; } footer > div:first-child > div > div { vertical-align: middle; } footer > div:first-child + div { padding: 0 0 20px; text-align: center; font-size: 13px; } footer iframe { display: inline-block; vertical-align: middle; } /*Divers*/ #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine { background-color: #000!important; } #cboxOverlay { background: none; backdrop-filter: saturate(0) blur(4px); transition: 200ms ease-in-out backdrop-filter; opacity: 1!important; } #cboxWrapper > div:first-child, #cboxWrapper > div:last-child, #cboxMiddleLeft, #cboxMiddleRight { display: none; } #cboxContent { padding: 10px; margin: 10px; box-shadow: 0 0 5px 2px rgb(0 0 0 / 30%); } #cboxPrevious { left: 10px; bottom: 5px; border: 0; } #cboxNext { left: 37px; bottom: 5px; border: 0; } #cboxTitle { bottom: 9px; } #cboxCurrent { left: 68px; bottom: 9px; } #cboxClose { right: 10px; bottom: 5px; border: 0; } /*Tablette*/ @media screen and (max-width:860px) { .row > * { display: block!important; width: initial!important; padding: initial!important; } #slider_accueil > ul > li { padding-top: 50%; } header { width: 100%; position: fixed; z-index: 3; top: 0; } header > .container { padding: 0; } #logo > img { margin-left: 15px; } #recherche { width: calc(100% - 20px); margin: 30px 10px 20px; } .burger { display: inline-flex; z-index: 2; } #menu { position: relative; z-index: 1; width: 100%; border-radius: 0 !important; background-color: rgba(255,255,255,0.9); transition: ease-in-out 300ms opacity,ease-in-out 300ms padding,ease-in-out 300ms height; } #menu ul .fa-home-lg:before { content: "Accueil"; font-family: 'Open Sans',sans-serif; font-weight: 600; font-size: 20px; } body.nav-close #menu { height: 75px; /*opacity: 0;*/ overflow: hidden; padding: 0; } body.nav-open #menu { position: fixed; width: 100%; height: 100%; /*padding: 140px 40px 0;*/ overflow: auto; /*opacity: 1; */ } #menu ul { width: 100%; } #menu ul > li { display: block; border-bottom: 1px solid rgba(0,0,0,0.5); text-align: left; height: initial; } #menu ul > li:first-child > a, #menu ul > li > a { display: block; padding: 20px 10px; font-size: 16px; } #menu > div:first-child + div > ul > li > a { font-size: 16px; } #menu ul > li > a:not(.button,.bouton) { border-bottom: 0!important; } #menu ul > li > ul, #menu ul > li > a > .fa-angle-down { display: none; } #menu ul > li.sous-menu > a { padding: 20px 10px; } #page-accueil #contacts { position: relative!important; } #page-accueil #contacts > div:not(.contact-titre) { flex-wrap: wrap; } #slider_accueil .boutonsPagination { display: none!important; } .CJSlider-navigation-gauche, .CJSlider-navigation-droite { top: 20%!important; } .parallax { background-position: center 0!important; } .ariane { overflow: auto; white-space: nowrap; height: 34px; } #contacts > div:not(.contact-titre) { display: block; } #site { padding-top: 75px; } #produit { display: block; grid-template-columns: initial; grid-template-rows: initial; } #produit .table { width: 100%; overflow-x: auto; } #produit .produit-contact { display: block!important; } #produit .produit-contact > div { width: initial!important; } #produit .produit-contact > div:first-child { height: 150px; } #a-propos > div { height: initial; } #page-contact #contact { display: block; } #content .contenu img { max-width: 100%; height: initial; } /*#galerie-liste > li { width: 75%; padding-top: 50%; }*/ .parallax { overflow: hidden; } .absolute.left, .absolute.right { position: relative!important; width: 100%; height: inherit; } footer > div > div #infos_site, footer > div > div #infos_complementaires { display: block; position: relative; right: inherit; left: inherit; padding: 5px; text-align: center; } iframe { max-width: 100%; } /*#content img { height: initial!important; max-width: 100%; }*/ } /*Mobiles*/ @media screen and (max-width:430px) { #logo > img { width: 60%; } #menu > div:first-child { display: block; } #menu > div:first-child .right { text-align: left; display: flex; flex-direction: column-reverse; } #menu > div:first-child + div > ul { display: block; } #slider_accueil > ul > li { padding-top: 70%; } #contacts { position: relative; } fieldset > ul > li, fieldset > ul > li .row { display: block; width: 100%; margin: 0; } .row > *.middle { display: block!important; } #page-services .contenu-article > div { display: block!important; } #page-services .contenu-article > div img { margin: 0!important; } #partenaires ul { display: block; text-align: center; } #partenaires ul > li { display: inline-block; } #mentions > div:first-child, #mentions > div:first-child + div { display: block; width: initial; } footer > div > div { display: block; position: relative!important; top: initial!important; right: initial!important; left: initial!important; text-align: center; } footer iframe { display: block; width: 100%; margin: 5px 0; } footer .row, footer .row > * { width: 100%!important; margin: 0; } footer hr { margin: 10px auto; } /*#header_top { text-align: center; } #slider_accueil { margin-top: 110px; } #slider_accueil > ul > li { padding-top: 70%; } .bloc3d > li { display: block; width: 100%; margin: 15px auto; } #a-propos { overflow: hidden; } .parallax > div { padding: 0; } .liste { width: 100%; } */ }