* { -o-box-sizing: border-box; box-sizing: border-box; } a{ color:inherit; text-decoration:inherit; } body{ position: relative; overflow-x: hidden; margin: 0; } #ismobile{ display: none; } @media screen and (max-width:900px) { body{ --wp--preset--spacing--20:20px; --wp--preset--spacing--30: 20px; --wp--preset--spacing--40: 20px; --wp--preset--spacing--50: 20px; --wp--preset--spacing--60:20px; --wp--preset--spacing--70: 20px; --wp--preset--spacing--80: 20px; --wp--preset--font-size--normal:18px; } #ismobile{ display: block; } } /*=============================================================*/ /*===== GENERIC ===============================================*/ /*=============================================================*/ p{ text-align: justify;} p:empty{ display: none;} iframe{ display: block;} ol, ul{ padding-left:18px; } @media screen and (max-width:900px) { /*#page br{ display: none; }*/ p{ text-align: left;} section{ text-align: left;} } /*=============================================================*/ /*===== HEADER ================================================*/ /*=============================================================*/ #tete{position: sticky; top: 0; z-index: 1000; max-width: 1460px; margin:0 auto;} body.customize-support #tete{ top: 32px;} @media screen and (max-width:900px) { #tete{position:fixed; width: 100%; } } /* TOPBAR */ #topbar{ background: var(--wp--preset--color--darkblue); color: #ffffff;display: flex; align-items: center; justify-content: flex-end; } #topbar>*{ line-height:40px; padding:0 15px; } #topbar>*:first-child{ padding-right:5px; } #topbar .ico{ padding:0 5px; line-height:inherit;padding:0 3px; } #topbar .ico svg{ display: block; } #topbar .ico:hover svg{ fill:var(--wp--preset--color--lightblue); } #topbar .tel{ margin-left:10px; border-left:1px solid rgba(255,255,255,0.2); } #topbar .tel:hover{background:var(--wp--preset--color--lightblue); } #topbar .mail{ border-left:1px solid rgba(255,255,255,0.2); } #topbar .mail:hover{background:var(--wp--preset--color--lightblue); } @media screen and (min-width:1100px){ #topbar>*:first-child{ display: none;} } @media screen and (max-width:900px) { #topbar{ justify-content:space-between; box-shadow: 0 0 10px rgba(0,0,0,0.2); } #topbar>*:first-child,#topbar .tel{ display: none;} #topbar .mail{ font-size: 14px; border: none; text-decoration: underline;} #topbar .ico{ display: flex; width: 40px; height: 40px; border-right:1px solid rgba(255,255,255,0.2); } #topbar .ico svg{ width:22px; height: 22px; margin:auto;} } /* LANGUES */ #topbar .lang{ display: flex; list-style: none; justify-content: flex-end; margin: 0; padding: 0; font-size: 13px; color: #ffffff; height: 40px;} #topbar .lang li{ padding:0px 12px; } #topbar .lang li:hover{background:var(--wp--preset--color--lightblue); } #topbar .lang li.current-lang { background: #ffffff; color:#09499b; } #topbar .lang a{ display: flex; align-items: center; height: 100%;} #topbar .lang a:hover{ text-decoration: underline; } @media screen and (max-width:900px) { #topbar .lang{ height: 40px; flex: 1; justify-content: flex-end;} #topbar .lang li{ padding:0;border-left:1px solid rgba(255,255,255,0.2); } #topbar .lang a{ width: 40px; height: 40px; justify-content: center;} #topbar .lang span{ display: none;} } header{ overflow: hidden; position:absolute; z-index: 9000; top:0; left:0; display: flex; align-items: center; padding-right:50px; } header:before{ content: ""; display: block; width: 150%; height: 100%; position: absolute; right:10px; top:-1px; z-index: -1; background:var(--wp--preset--color--darkblue); transform: skewX(-30deg) translateZ(0); transform-origin:top left;} header.fixed:before,header.forcefixed:before{ box-shadow: 5px -5px 10px rgba(0,0,0,0.2); } @media screen and (max-width:900px) { header{position:static; padding:0; justify-content: space-between; } header:before{ left:0; width: 100vw; transform:none; background:url("../images/trame.png") center center no-repeat; box-shadow: 0 0 20px rgba(0,0,0,0.3) !important; } } /* LOGO */ #logo{ transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative;display: block; padding:15px 20px 15px 30px; } #logo:before{ box-shadow: 5px -5px 10px rgba(0,0,0,0.2); z-index: -1; background:#ffffff; pointer-events: none; content: ""; width:300%; height:100%; position: absolute; right: 0; top: 0; transform: skewX(-30deg) translateZ(0); transform-origin:bottom left; } #logo svg{transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: block; width:180px; height:140px; object-fit: contain; } header.fixed #logo,header.forcefixed #logo{ padding: 15px 10px 15px 20px;} header.fixed #logo svg,header.forcefixed #logo svg{ width:80px; height:50px; } @media screen and (max-width:900px) { header #logo{ padding:20px 10px 20px 30px !important;} header #logo svg{ width:100px !important; height:70px !important; } } #showmenu{ cursor: pointer;margin-left:90px; margin-right:50px; display: flex; width:68px; height:68px;} #showmenu>*{ margin: auto; } #showmenu>*>*{ display: block;} #showmenu svg{ margin: auto;} #showmenu svg>*{ transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: center center;} #showmenu .t{ line-height: 1; letter-spacing: 0.05em; font-size:0.8em; font-weight:400; text-transform: uppercase; margin-top: 4px;} #showmenu .t:before{ transition:color 0.5s linear;content: "Menu"; display: block; color: #ffffff;} #showmenu.visible .t:before{content: "Fermer"; } #showmenu.visible svg>*{} #showmenu.visible svg>*:nth-child(1){ transform:scaleX(0);} #showmenu.visible svg>*:nth-child(2){ transform: rotate(45deg);} #showmenu.visible svg>*:nth-child(3){ transform: rotate(-45deg);} #showmenu.visible svg>*:nth-child(4){ transform:scaleX(0);} header.fixed #showmenu,header.forcefixed #showmenu{margin-left:40px; margin-right:0px; } @media screen and (max-width:900px) { #showmenu{width: 90px; height: 90px; margin:0 !important; } } #nav{ transition:all 0.7s cubic-bezier(0.25, 1, 0.5, 1);position: fixed; z-index:950;top:40px; width: 100%; opacity: 0; pointer-events:none; } body.customize-support #nav{ top: 72px;} #nav.visible{ opacity:1; pointer-events:all; } #nav nav{ box-shadow: inset 0 4px 3px rgba(0,0,0,0.2); display: block; padding:0; max-width: 1460px; margin:0 auto; background: rgba(9,73,155,0.95); height: calc(100vh - 40px); } @media screen and (max-width:900px) { #nav{ top:148px; bottom: 0; overflow:auto; } #nav nav{ box-shadow:none; } } .mainmenu{ padding:0 0 0 90px; margin: 0; width:25%; list-style: none; position: relative; z-index: 10;} .mainmenu:before{ content: ""; width: 60px; height: 1px; background:#dddddd; display: block; margin:40px 0; } .mainmenu a{ text-decoration: underline;} @media screen and (max-width:900px) { .mainmenu{ padding:30px; width:100%; border-top:1px solid #dddddd; } .mainmenu:before{ content:none; } .mainmenu>*{ padding-left: 55px; position: relative;margin-bottom:10px; } .mainmenu>*:before{ content: ""; display: block; width:48px; height:2px; position: absolute; top: 50%; left: 0; background:var(--wp--preset--color--midgray); } } #prodcat{ padding:70px 0 0 0; margin: 0; width:var(--NavColSize);list-style: none; position: relative;} #prodcat:before{box-shadow: inset 0 4px 3px rgba(0,0,0,0.2); content: ""; position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background:linear-gradient(to bottom,#e6ecf5 190px,#ffffff);} #prodcat a{ display: block; position: relative;padding:16px 0; } #prodcat ul{ transition:all 0.1s linear; opacity: 0; pointer-events: none; font-size: 14px; color: #ffffff; /*background: linear-gradient(to right,transparent,rgba(9,73,155,0.9));*/ background:rgba(9,73,155,1) url("../images/trame-repeat.png"); list-style: none; margin:0; margin-left:var(--NavColSize); padding:122px 0 0 0; width:var(--NavColSize); height:100%; position:fixed; top:0; } body.customize-support #prodcat ul{ top:32px;} #prodcat ul ul{ } #prodcat ul ul ul{ } #nav.fixed #prodcat ul{padding:168px 0 0 0; } #prodcat ul:after{content: ""; pointer-events: none; position: absolute; top: 0; left: 100%; height: 100%; width:4px; background:linear-gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,0)); } #prodcat li{ padding:0; margin: 0; position: relative; /*border-top:1px solid rgba(255,255,255,0.1);*/ } #prodcat ul a{ padding:16px 60px 16px 40px; } #prodcat li.has-child>a:after{ opacity: 0.3; content: ""; position: absolute; background:url("../images/prodcat-fl.svg") center center no-repeat; width: 40px; height: 100%; top: 0; right: 0; } #prodcat>li.has-child>a:after{ background:url("../images/prodcat-fl-root.svg") center center no-repeat; } #prodcat li.has-child:hover>ul{ opacity: 1; pointer-events:auto;} #prodcat li:hover>a{ background: rgba(255,255,255,0.1);text-decoration: underline;} #prodcat li.has-child:hover>a:after{ opacity: 1; background:url("../images/prodcat-fl-on.svg") center center no-repeat; } #prodcat>li.has-child:hover>a:after{ background:url("../images/prodcat-fl-root-on.svg") center center no-repeat; } #prodcat li.on>a{ font-weight: 700; color: #00bdff;text-decoration: underline; } #prodcat>li>a{ display: flex; align-items: center; font-size: 15px; font-weight: 700; padding:10px 0 10px 40px; line-height:1.1; } #prodcat>li>a>*:first-child{ margin-right: 5px; } #prodcat>li.on>a{ color:rgb(9,73,155); color:var(--thishighlightcolor); } #prodcat>li.on>a svg>*{fill:rgb(9,73,155); fill:var(--thishighlightcolor);} @media screen and (max-width:900px) { #prodcat{ padding:30px; width:100%;} #prodcat>li:not(:first-child){ padding-top: 20px; margin-top: 20px; border-top:1px solid #cccccc; } #prodcat a{text-decoration: underline;} #prodcat>li>a{ padding:0; } #prodcat>li>a>span{ font-size: 1.3em;} #prodcat li.has-child>ul{ background: none; color:var(--wp--preset--color--black); opacity: 1;} #nav.visible #prodcat li.has-child>ul{ pointer-events: auto;} #prodcat li.has-child>a:after{ opacity:1; background:url("../images/prodcat-fl-root-on.svg") center center no-repeat; } #prodcat>li.has-child>a.open:after{ transform:rotate(90deg);} #prodcat ul li.has-child>a:after{ content:none; } #prodcat ul{ font-size: inherit; display: none; width: 100%; position: static; height: auto; padding:0 0 0 55px !important; margin: 0; } #prodcat ul:after{content:none; } #prodcat ul ul{ display: none !important;} #prodcat ul a{ padding:5px 0px; } } /*=============================================================*/ /*===== CONTENU ===============================================*/ /*=============================================================*/ #page{ max-width: 1460px; margin:0 auto; box-shadow:0 200px 20px rgba(0,0,0,0.1); position: relative; } #page>section>*{ margin-left:auto; margin-right:auto; max-width:var(--wp--style--global--content-size); } #page>section a{ text-decoration: underline;} #page>section a:hover{ color: var(--wp--preset--color--lightblue);} @media screen and (max-width:900px) { #page>section>*{ width:85%; } } /*=============================================================*/ /*===== ARIANE ================================================*/ /*=============================================================*/ #Ariane{ padding:0px 10px; background: #f5f5f5; border-bottom:2px solid #f5f5f5; font-size: 11px; position:sticky; top:40px; z-index:900;} body.customize-support #Ariane{ top: 72px;} #Ariane p{ margin:0 25px 0 0; padding: 0; display: flex; justify-content: flex-end;} #Ariane p>*{ line-height:40px; padding:0 15px 0 30px; } #Ariane .separator{ display: none;} #Ariane a,#Ariane .last{ position: relative; background: linear-gradient(to right,#ffffff,#f5f5f5); } #Ariane a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width:220px;text-decoration: underline; text-decoration-color:rgba(0,0,0,0.3);} #Ariane a:after,#Ariane .last:after{ content: ""; position: absolute; left:0%; top: 0%; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 15px; border-color: transparent transparent transparent #f5f5f5; } #Ariane a:hover{ color: var(--wp--preset--color--lightblue); text-decoration-color:var(--wp--preset--color--lightblue);} @media screen and (max-width:900px) { #Ariane{ position: static; padding:10px; background: #ffffff; white-space: normal;font-size: 13px;} #Ariane p{ margin:0; display: block; text-align: center;} #Ariane p>*{ line-height: inherit; padding:0; } #Ariane .label{ display: block; } #Ariane .separator{ display:inline-block; margin-left:3px; margin-right: 3px; } #Ariane a{white-space:normal;} #Ariane a, #Ariane .last{ background: none;} #Ariane a:after, #Ariane .last:after{ content:none;} } /*=============================================================*/ /*===== ACCUEIL ===============================================*/ /*=============================================================*/ #forces p{ margin-top:8px; line-height:1.2;} #forces .wp-block-columns.first .wp-block-separator{ display: none;} #forces .wp-block-columns.first .wp-block-image{ margin-top:0 !important; } #forces .wp-block-separator{ background-color:rgba(255,255,255,0.2) !important; color:rgba(255,255,255,0.2) !important; margin:20px 0 !important;} #forces .wp-block-image{ max-width: 50px !important; } @media screen and (max-width:900px) { #forces .wp-block-columns{ gap:0;} #forces .wp-block-separator{ margin:10px 0 !important; display: block !important; } } /*=============================================================*/ /*===== CHIFFRES CLES =========================================*/ /*=============================================================*/ #keys{ display: flex; justify-content: space-between; line-height: 1.2;} #keys>*{ flex: 1;} #keys p{ text-align: center;margin:0; } #keys .counter{ font-family:var(--wp--preset--font-family--gilroy); font-weight: 700; font-size:var(--wp--preset--font-size--gigantic); color:var(--wp--preset--color--lightblue); } @media screen and (max-width:900px) { #keys{ flex-direction: column;} #keys>*{ padding:20px; background:var(--wp--preset--color--lightgray); margin-bottom: 10px;} hr:has(+#keys){ display: none;} } /*=============================================================*/ /*===== ARCHIVES PROD CAT =====================================*/ /*=============================================================*/ /* BANDEAU */ #catheader{ background: var(--wp--preset--color--darkblue); color: #ffffff; position: relative; display: flex; height: 430px; max-width: none !important; overflow: hidden; width: 100% !important; margin-top: -1px; } #catheader.fiche{ height:290px; background: url("../images/trame.png") top center repeat;} #catheader .cache{height:100%;width: 270px; z-index: 2; position: relative;} #catheader .cache>*{ content: ""; overflow: hidden; position: absolute; right:0; border-right:10px solid var(--wp--preset--color--lightblue); display: block; height: 100%; width:200%; transform-origin:bottom left; transform: skewX(-30deg) translateZ(0); } #catheader .cache>*>*{ content: ""; display: block; height: 100%; width:200%; transform: skewX(30deg) translateZ(0); background: url("../images/trame.png") top center no-repeat; } #catheader .vis{height:100%; flex:1; } #catheader .vis img{ display: block; width: 100%; height: 100%; object-fit: cover; } #catheader .vis.opacity img{/* opacity: 0.3; mix-blend-mode:hard-light; filter: grayscale(1); */ filter :url('#wp-duotone-entete') !important;} #catheader .titre{ position: absolute; z-index: 4; align-items: center; display: flex; bottom:40px; left:50px; width: 80%; } #catheader .titre div{ width:80px; height:80px; margin-right:15px; } #catheader .titre div svg{ width:100%; height:100%; object-fit: contain; fill:#ffffff; } #catheader .titre h1{ margin:0; font-size:45px; line-height:1; font-weight:700; text-transform: uppercase; text-shadow:0 0 2px rgba(0,0,0,0.8); } @media screen and (max-width:900px) { #catheader{ display: block; height:auto; overflow:visible; margin-top:148px; color: var(--wp--preset--color--black); } #catheader .cache{ display: none; } #catheader .titre{ display: block; text-align: center; position: static; background:var(--wp--preset--color--lightgray); padding:20px; width:100%; } #catheader .titre div{ flex: none;width:60px; height:60px; margin:0 auto 10px auto; } #catheader .titre div svg{ fill:var(--wp--preset--color--black); } #catheader .titre h1{ font-size:30px; text-shadow:none; } #catheader.fiche{ height:auto; background:none; border-bottom: 1px solid var(--wp--preset--color--midgray);} } /* TEXTES */ #proddesc h2,#longdesc h2{ font-size: 1.6em; } #proddesc h3,#longdesc h3{ font-size: 1.4em; } #proddesc h4,#longdesc h4{ font-size: 1.2em; } /* LISTE CAT */ #biglistecat{ display: flex; justify-content: center; flex-wrap:wrap; list-style: none; margin: 0; padding: 0; } #biglistecat>a{transition:color 0.2s linear; color:#ffffff !important; font-family:"Gilroy","sans-serif"; font-size:14px; text-align: center; margin:10px 10px 30px 10px; width:380px; padding:0 10px 10px 10px; position: relative; font-weight:700; text-decoration: none !important; } #biglistecat>a .vis{ background:#ffffff; box-shadow:0 3px 10px rgba(0,0,0,0.2); display: block; margin-top: -10px; margin-bottom:10px; } #biglistecat>a .vis img{display: block; margin:0px; width:100%; height:auto; } #biglistecat>a .vis img.logo{ filter: grayscale(1); opacity: 0.3; height: 130px; border:30px solid #ffffff; } #biglistecat>a:before{ content: ""; z-index: -2; top:0%; left: 0; position: absolute; width: 100%; height:100%; background:var(--wp--preset--color--darkblue); } #biglistecat>a:after{ transition:height 0.2s linear; content: ""; z-index: -1; bottom:0; left: 0; position: absolute; width: 100%; height:0%; background:var(--wp--preset--color--lightblue); } #biglistecat>a:hover:after{ height:100%; } #biglistecat>a:hover{ color:#ffffff !important; } @media screen and (max-width:900px) { #biglistecat{ gap:30px; } #biglistecat>a{ margin:0; font-size: inherit; } } /*=============================================================*/ /*===== PRODUITS // LISTE =====================================*/ /*=============================================================*/ #grid{ display: flex; flex-wrap: wrap; justify-content: center; gap:30px; margin-bottom: 30px; } #grid .item{ transition:all 0.2s linear; pointer-events: none; cursor: default;background:#ffffff; box-shadow: 0 8px 10px -4px rgba(0,0,0,0.1); border-top:4px solid var(--wp--preset--color--darkblue); overflow: hidden; width:290px; padding:15px; } #grid .item>img{ width:250px; height:250px; object-fit: contain; margin:auto; mix-blend-mode:darken;} #grid .t{ display: block; text-align: center; margin-top:10px; line-height: 1.2; } #grid h2{ font-size:18px; line-height: 1.1; margin:0 0 5px 0; color: var(--wp--preset--color--darkblue); } #grid .bt{ display: block; font-family:var(--wp--preset--font-family--gilroy); font-weight:var(--wp--custom--font-weight--extrabold); font-size:18px; line-height: 1.1; margin:0 0 5px 0; color: var(--wp--preset--color--darkblue); } #grid p{ line-height:1.1; } #grid p:last-child{ margin-bottom:0; } #grid .item .l{ display: flex;justify-content: center; margin-top: 5px; font-family:"Gilroy","sans-serif";} #grid .item .l>*{transition:all 0.2s linear; pointer-events: all; margin:5px; padding:6px 10px; background: var(--wp--preset--color--darkblue); color: #ffffff; border-radius: 3px; display: flex; align-items:center; text-decoration: none !important; } #grid .item .l svg{ margin-right:4px; fill: #ffffff; } #grid .item:hover{ background: #f5f5f5; border-color:var(--wp--preset--color--lightblue); box-shadow: none; } #grid .item:hover .l>*{ background: var(--wp--preset--color--lightblue); } #grid .item .l>*:hover{ background:var(--wp--preset--color--darkgray); } /*=============================================================*/ /*===== PRODUIT // FICHE ======================================*/ /*=============================================================*/ #produit .sticky{ position:sticky; top:150px;} #produit .galerie>*{ margin:0; padding: 0; } #produit .galerie>*:not(:first-child){ border-top:2px solid var(--wp--preset--color--darkgray); padding-top:30px; } #produit .galerie>*:not(:last-child){ margin-bottom:30px;} #produit .galerie figcaption{ font-size:12px; color: var(--wp--preset--color--darkgray); text-align: center; } #produit .galerie img{ margin: auto; } #produit .wp-block-columns{ gap:50px;} #produit .produitcat ul{ list-style: none; margin:0; padding: 0; } #produit .produitcat li{ display: block;margin-bottom:5px; } #produit .produitcat a{ display: inline-block;} #produit .produitcat a:first-child{ color:var(--wp--preset--color--darkblue); text-decoration-color: rgba(255,255,255,0.3); padding:5px; border:2px solid var(--wp--preset--color--darkblue); border-radius: 3px; } #produit .produitcat a:last-child{ font-weight: 700;; } #produit table{ width: 100%; border:2px solid var(--wp--preset--color--midgray); border-collapse: collapse; margin:30px 0; } #produit td{ width: auto; padding:5px; text-align: center; } #produit td:first-child{ text-align:left; } #produit td:not(:first-child){ border-left: 1px solid var(--wp--preset--color--midgray); } #produit tr:nth-child(2n + 1) td{ background:#f5f5f5; } #produit tr:first-child td{ text-align:center; background:var(--wp--preset--color--darkblue); color: #ffffff; } #produit tr:not(:first-child) td{ border-top: 1px solid var(--wp--preset--color--midgray); } #produit .l{ display: flex; flex-wrap: wrap; margin-top: 5px; font-family:"Gilroy","sans-serif"; /*padding-top: 20px;*/ margin-top: 20px; /*border-top: 3px solid var(--wp--preset--color--midgray);*/} #produit .l>*{ margin:5px; padding:6px 10px; background:var(--wp--preset--color--darkblue); color: #ffffff; border-radius: 3px; display: flex; align-items:center; text-decoration: none !important; } #produit .l svg{ margin-right:4px; fill: #ffffff; } #produit .l>*:hover{ background: var(--wp--preset--color--lightblue); color: #ffffff; } @media screen and (max-width:900px) { #produit .wp-block-columns{ gap:20px;} #produit .produitcat{ margin-bottom:30px; } #produit .produitcat ul{ line-height: 1.2; } #produit .produitcat li{ border-left:1px solid var(--wp--preset--color--midgray); padding-left:10px; margin-bottom:10px; } #produit .produitcat a{ display: inline; text-decoration-color:rgba(0,0,0,0.2); } #produit .produitcat a:first-child{ border:none; padding:0; border-radius:0; font-weight: 700; } #produit .l>*{padding:10px 15px; align-items:flex-start; font-size: 13px; margin:0 5px 5px 5px;} #produit .l svg{ } #produit hr{ margin:30px 0; } } .backliste{ width:230px; font-family:"Gilroy","sans-serif"; margin-bottom:20px; padding:6px 10px; background:var(--wp--preset--color--lightblue); color: #ffffff; border-radius: 3px; display: flex; align-items:center; text-decoration: none !important; } .backliste svg{ margin-right:4px; fill: #ffffff; } .backliste span{ width: 100%; text-align: center;} .backliste:hover{ background:var(--wp--preset--color--darkblue); color: #ffffff !important; } @media screen and (max-width:900px) { .backliste{font-size:14px; margin:10px 0 0 0;} } /*=============================================================*/ /*===== PARTENAIRES ===========================================*/ /*=============================================================*/ .wp-block-gallery.partenaires{ margin: auto; justify-content: center; align-items: center !important; } .wp-block-gallery.partenaires figure{ width: auto !important; margin:0 !important; flex:0 !important; } .wp-block-gallery.partenaires figure.wp-block-image img{ max-width:120px !important; max-height: 50px !important; height: auto !important; filter: grayscale(1); opacity: 0.6; } /*=============================================================*/ /*===== CUSTOM FORM ===========================================*/ /*=============================================================*/ .wpcf7-form{ margin:0 auto; max-width:900px; } .wpcf7-form br{ display: none;} .wpcf7-form p{ margin: 0;} .wpcf7-form p>label{ margin:0 0 20px 0; } .wpcf7-form p>label:not(.full){ width:calc(50% - 10px); vertical-align: top; display: inline-block;} .wpcf7-form p>label:not(.full):nth-child(2n + 0){margin-left:20px; } .wpcf7-form p>label.full{ display:block; width: 100%;} .wpcf7-form-control-wrap{ display: block;position: relative; overflow: hidden;} /* INPUT */ .wpcf7-form input[type=text],.wpcf7-form input[type=tel],.wpcf7-form input[type=email],.wpcf7-form textarea{ display: block; width: 100%; font-size: 14px; background:#eceded; border: none; padding:15px 20px; font-family: "Be Vietnam","sans-serif"; } .wpcf7-form textarea{ height: 130px;} /* SELECT */ .wpcf7-form-control-wrap select{-webkit-appearance: none;-moz-appearance: none;appearance: none; font-size: 14px;background: #f0f0f0;width: 105%; height: auto;border: 0; margin: 0;padding:15px;border-radius: 0;overflow: hidden;text-overflow: ellipsis;} label.deroulant>.wpcf7-form-control-wrap:after{ content: '';position: absolute;top: 50%; margin-top: -3px;right:15px; display: block; width: 0; height: 0;border-color: transparent;border-top-color: #444; border-width: 6px;border-style: solid;pointer-events: none;} /* CAPTCHA */ .wpcf7-form .kc_captcha{ display: block; margin:0 0 20px 0;} .wpcf7-form .kc_captcha>*:first-child{ text-align: center;display: block; background: #f0f0f0; } .wpcf7-form .captcha-image{padding:10px !important; background: none !important; text-align: left !important; border: none !important;} .wpcf7-form .cf7ic_instructions{ display: inline-block !important; vertical-align: middle; margin-right: 15px;} .wpcf7-form .captcha-image label{ vertical-align: middle; width:40px !important; height: 40px !important;} .wpcf7-form .captcha-image svg{ width: 40px; height: 40px;} .wpcf7-form .captcha-image svg>*{ fill:#8f8d8d; } .wpcf7-form .captcha-image label > input{ position: absolute;} .wpcf7-form .captcha-image label > input:checked + svg, .captcha-image label > input:focus + svg{ border-color:transparent !important; } .wpcf7-form .captcha-image label > input:checked + svg>*, .captcha-image label > input:focus + svg>*{ fill:#000000; } .wpcf7-form .captcha-image .cf7ic_instructions span{ color: #000000 !important; } /* ERROR */ span.wpcf7-not-valid-tip{ position: absolute; top:calc(50% - 8px); left:-8px; display: block; text-indent: 200%; white-space: nowrap; overflow: hidden;width:16px; height:16px; transform:translateZ(1px) rotate(45deg); background:#FF6700; border:4px solid #ffffff; } div.wpcf7-response-output{ color: #FF6700; border: none !important; margin: 0 !important;text-align: center; font-size: 1.1em;} span.wpcf7-list-item{ margin: 0 !important;} /* ACCEPTANCE */ .wpcf7-acceptance{ display: block; margin:0 0 20px 0; padding:20px; border:2px solid #f0f0f0;} .wpcf7-acceptance input[type="checkbox"]:not(:checked),.wpcf7-acceptance input[type="checkbox"]:checked{position: absolute; opacity: 0; pointer-events: none;} .wpcf7-acceptance label{ cursor:pointer; } .wpcf7-acceptance label>span{ font-size: 12px; position: relative; display: block; margin-left: 30px; width: calc(100% - 40px);} .wpcf7-acceptance label>span:before{ border:1px solid #9da0a2; position: absolute; content:"-"; display:block; left:-30px; background:#ffffff; color: #ffffff; text-align: center; line-height:20px; font-size: 16px; width:20px; } .wpcf7-acceptance [type="checkbox"]:checked + span:before{content:"\2714"; color: #0d1618; } /* SUBMIT */ .wpcf7-form input[type=submit]{ display: block; margin: auto; font-size: 18px; font-weight: 300; cursor: pointer;background: #201c1b; color: #ffffff; border: none; padding:15px 30px; font-family: "Be Vietnam","sans-serif"; } .wpcf7-form input[type=submit]:not(:disabled):hover{background:#000000;} .wpcf7-form input[type=submit]:disabled{ opacity: 0.5;} .wpcf7 .ajax-loader{ margin:5px auto; } /*=============================================================*/ /*===== GUTENBERG =============================================*/ /*=============================================================*/ .alignfull{ width: 100% !important; max-width:none !important; } .alignmid{ max-width:1100px !important; margin-left:auto; margin-right:auto; } .alignwide{ max-width:var(--wp--style--global--wide-size) !important; margin-left:auto; margin-right:auto; } .alignsmall{ max-width:900px !important; margin-left:auto; margin-right:auto; } .fullheight{ min-height: 100vh; } .halfwidth{ width: 50%;} .alignright{ margin-left:auto; margin-right: 0; } img{ display:block; max-width:100%; height:auto;} .wp-block-cover:first-child{ min-height:600px; } .wp-block-image{ margin:0; position:relative; } .wp-block-image img{ display:block; height:auto;} .wp-block-image:not(.is-resized) img{ width:100%; } .wp-block-image.is-resized img{ max-width: 100%;} .wp-block-button__link{ font-size: 13px; font-weight: 500; padding: 7px 10px; line-height:1; } .wp-block-separator.is-style-default{ max-width:140px !important; } .wp-block-separator:not(.is-style-default){ margin-top:calc( var(--wp--style--block-gap) * 2 ); margin-bottom:calc( var(--wp--style--block-gap) * 2 ); } @media screen and (max-width:900px) { .wp-block-cover:first-child{ min-height:250px !important; margin-top: 148px; } .wp-block-spacer{ max-height:20px; } .wp-block-media-text__content .wp-block-spacer{ display: none;} .wp-block-media-text .wp-block-media-text__content{ padding:0; } .wp-block-media-text + .wp-block-media-text{ margin-top:30px; } .wp-block-columns.services{ width: 85%;} } /*=============================================================*/ /*===== FOOTER ================================================*/ /*=============================================================*/ footer{ overflow-x: hidden; } footer>*{ margin-left:auto; margin-right:auto; max-width:1300px; } footer a{ text-decoration: underline; text-decoration-color:var(--wp--preset--color--midgray);display: inline-block; line-height: normal; } footer a:hover{ color: var(--wp--preset--color--lightblue);} #footer{ position: relative; padding:50px 70px; font-size: 13px; } #footer:before{ content: "";position: absolute; z-index: -1; left: 50%; margin-left: -60vw; width:120vw; height: calc(100% - 140px); top: 70px; background:#dddddd; } #footer .wp-block-column{ position:relative;} #footer .wp-block-column:not(:first-child){ margin-left:40px; } #footer .wp-block-column>ul{ display: flex; height: 100%; list-style: none;margin: 0; padding: 0; } #footer .wp-block-column>ul>li{ flex: 1; break-inside: avoid; position: relative; } #footer .wp-block-column>ul>li:before{ content: ""; position: absolute; top: 0; left:-21px; height:100%; width:1px; background:#dcdcdc; } #footer .wp-block-column>ul>li:not(:first-child){ margin-left:40px; } #footer .wp-block-column>ul>li>a{ color:var(--wp--preset--color--darkblue); font-weight: 700; } #footer .wp-block-column>ul>li>ul{ list-style: none; margin: 0; padding: 0; } #footer .wp-block-column>ul>li>ul>li{ margin-top:3px; } #footer .wp-block-column ul ul ul{ display: none; } #footer .wp-block-column ul ul ul ul{ display: none; } #footer .ico{ padding-left:24px; position: relative; line-height:18px !important; } #footer .ico:before{ content: ""; width:18px; height:18px; position: absolute; top: 0; left:0; } #footer .ico.adresse:before{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJDYWxxdWVfMSIgeD0iMCIgeT0iMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTggMTgiPgogIDxzdHlsZT4KICAgIC5zdDB7ZmlsbDpub25lfS5zdDF7ZmlsbDojMzMzfQogIDwvc3R5bGU+CiAgPHBhdGggZD0iTTkuNCAxLjZoLS44Yy0xLjUuMS0zIDEtNCAyLjMtLjkgMS4zLTEuMSAyLjgtLjcgNC4xLjUgMS40IDEuMiAyLjggMi4zIDQuNC4zLjQuNi45IDEuMSAxLjQuMy40LjYuOCAxIDEuM2wuNC41Yy4xLjEuMi4yLjMuNC4yLS4zLjQtLjUuNi0uOGwuMi0uMi45LTEuMmMuNC0uNi44LTEgMS4xLTEuNCAxLjItMS43IDEuOS0zLjEgMi40LTQuNS4zLTEuMyAwLTIuNy0uOS0zLjktMS0xLjQtMi40LTIuMy0zLjktMi40em0tLjYgOC42Yy0xLjkgMC0zLjQtMS41LTMuNC0zLjRTNyAzLjQgOC44IDMuNHMzLjQgMS41IDMuNCAzLjQtMS41IDMuNC0zLjQgMy40eiIgY2xhc3M9InN0MCIvPgogIDxjaXJjbGUgY3g9IjguOCIgY3k9IjYuOCIgcj0iMS43IiBjbGFzcz0ic3QwIi8+CiAgPHBhdGggZD0iTTE0LjYgMi45QzEzLjQgMS4yIDExLjQuMSA5LjQgMGgtLjhjLTIgLjEtNCAxLjItNS4zIDMtMS4yIDEuNy0xLjUgMy42LTEgNS40LjUgMS41IDEuNCAzLjEgMi42IDQuOC4zLjUuNy45IDEuMSAxLjUuMy40LjYuOCAxIDEuM2wuNC41LjkgMS4yYy4xLjIuNC4zLjYuM2guMmMuMyAwIC41LS4xLjctLjNsMS4yLTEuNS4yLS4yLjktMS4yYy40LS42LjgtMSAxLjEtMS41IDEuMy0xLjggMi4xLTMuNCAyLjYtNXYtLjFjLjQtMS44IDAtMy43LTEuMi01LjN6bS0uNCA0LjljLS41IDEuNC0xLjIgMi45LTIuNCA0LjUtLjMuNC0uNi45LTEuMSAxLjRsLS45IDEuMi0uMi4yLS42LjljLS4xLS4xLS4yLS4zLS40LS40bC0uMy0uNmMtLjQtLjUtLjctLjktMS0xLjMtLjQtLjUtLjgtMS0xLjEtMS40LTEuMS0xLjYtMS45LTMtMi4zLTQuNC0uNC0xLjItLjItMi43LjctMy45IDEtMS40IDIuNS0yLjMgNC0yLjNoLjhjMS41LjEgMyAuOSAzLjkgMi4yLjkgMS4yIDEuMiAyLjYuOSAzLjl6IiBjbGFzcz0ic3QxIi8+CiAgPHBhdGggZD0iTTguOCAzLjRDNyAzLjQgNS41IDQuOSA1LjUgNi44czEuNSAzLjQgMy40IDMuNCAzLjQtMS41IDMuNC0zLjRjLS4xLTEuOS0xLjYtMy40LTMuNS0zLjR6bTAgNS4yYy0xIDAtMS43LS44LTEuNy0xLjcgMC0xIC44LTEuNyAxLjctMS43czEuNy44IDEuNyAxLjdjLjEuOS0uNyAxLjctMS43IDEuN3oiIGNsYXNzPSJzdDEiLz4KPC9zdmc+Cg=="); } #footer .ico.tel:before{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJDYWxxdWVfMSIgeD0iMCIgeT0iMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTggMTgiPgogIDxzdHlsZT4KICAgIC5zdDB7ZmlsbDojMzMzfQogIDwvc3R5bGU+CiAgPHBhdGggZD0iTTEwLjIgMTEuOGMtLjMtLjMtLjctLjMtMSAwbC0uNy43Yy0uMy4zLS45LjMtMS4yIDBMNC4xIDkuMmMtLjMtLjMtLjMtLjkgMC0xLjJsLjctLjdjLjItLjMuMi0uNyAwLTFMMi43IDQuMmMtLjItLjItLjYtLjItLjktLjEtLjIuMi0uNC4zLS42LjUtMS42IDEuNi0xLjYgNC4zIDAgNmw0LjcgNC43Yy44LjggMS45IDEuMyAzIDEuM3MyLjItLjQgMy0xLjNjLjItLjIuNC0uNC41LS42LjItLjMuMS0uNi0uMS0uOWwtMi4xLTJ6IiBjbGFzcz0ic3QwIi8+CiAgPHBhdGggZD0iTTE0LjYgMS41SDkuOUM4IDEuNSA2LjQgMyA2LjQgNC45YzAgMS4zLjcgMi40IDEuNyAzLS4xLjQtLjMuOC0uNiAxLjItLjMuMy4xLjcuNC42IDEuMy0uMyAyLjQtMSAzLjEtMS40aDMuNWMxLjkgMCAzLjQtMS41IDMuNC0zLjRzLTEuNC0zLjQtMy4zLTMuNHptLTUgNC4xYy0uNCAwLS44LS4zLS44LS44cy4zLS44LjgtLjguOC4zLjguOC0uMy44LS44Ljh6bTIuNiAwYy0uNCAwLS44LS4zLS44LS44cy4zLS44LjgtLjguOC41LjguOS0uMy43LS44Ljd6bTIuNiAwYy0uNCAwLS44LS4zLS44LS44cy4zLS44LjgtLjhjLjQgMCAuOC4zLjguOHMtLjQuOC0uOC44eiIgY2xhc3M9InN0MCIvPgo8L3N2Zz4K"); } #footer .ico.email:before{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgPHBhdGggZmlsbD0iIzMzMyIgZD0iTTEgMy4xYy0uNiAwLTEgLjUtMSAxdjkuOGMwIC42LjUgMSAxIDFoMTZjLjYgMCAxLS41IDEtMVY0LjFjMC0uNi0uNS0xLTEtMUgxem0xLjIgMS4yaDEzLjZsLTYuNiA1LjljLS4xLjEtLjMuMS0uNCAwTDIuMiA0LjN6bS0xIC44IDQuNiA0LjFMMS4yIDEzVjUuMXptMTUuNiAwVjEzbC00LjYtMy44IDQuNi00LjF6TTYuOCAxMCA4IDExLjFjLjYuNSAxLjUuNSAyLjEgMGwxLjItMS4xIDQuNSAzLjdIMi4zTDYuOCAxMHoiLz4KPC9zdmc+Cg=="); } #footer .afaq{ position:absolute; bottom:0; right:0;} @media screen and (max-width:900px) { #footer{ width:90%; padding:30px; font-size: inherit; margin-top: 30px; } #footer p{ text-align: left;} #footer .wp-block-column:not(:first-child){ display: none;} } #subfooter{ display: flex; font-size: 13px; margin-top:30px; margin-bottom:60px; } #subfooter>*:last-child{ flex: 1; text-align: right; } #subfooter ul{ display: inline-block; list-style: none; margin: 0; padding: 0;} #subfooter ul>*{ display: inline-block;} #subfooter ul>*:not(:last-child):after{ content: "|"; padding:0 6px; } #subfooter a{ text-decoration: underline; text-decoration-color:rgba(0,0,0,0.3); } #subfooter a:hover{ text-decoration-color:var(--wp--preset--color--lightblue); } @media screen and (max-width:900px) { #subfooter{ width:85%; text-align: center; flex-direction: column; justify-content: center;} #subfooter>*:last-child{ text-align: inherit;} } /*=============================================================*/ /*===== SCROLLBAR =============================================*/ /*=============================================================*/ html{ scrollbar-color:#111111 #f5f5f5; scrollbar-width: thin; } html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background-color: #f5f5f5; } html::-webkit-scrollbar-thumb { border-radius:0px; border:0px solid transparent; background-clip: content-box; background-color:#111111; }