/* Theme Name: Zoah Design 2022 Theme URI: https://www.commparlimage.ca/garage/lilianarodriguez/wp Description: Thème unique pour Zoah Design Author: Jordan Ouellet Author URI: https://www.commparlimage.ca Template: blankslate Version: 1.0.0 Text Domain: zoahdesign */ /********************************************************************************************************************/ html{ font-size: 18px; font-family: 'Nunito', sans-serif; font-weight:200; } html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; text-decoration: none; } h1{ font-weight: 500; } img, fieldset { border: 0; } /* set image max width to 100% */ img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } /* set html5 elements to block */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ul li { list-style-type: none; } #human{display:none !important;} html, body { width: 100%; height: 100%; scroll-behavior: smooth; } /* INITIALISATION ***************************************************************************************************/ .table{display:table;} .flex{display:flex;} .grid{display:grid;} /********************************************************************************************************************/ /* BACKGROUNDS */ /********************************************************************************************************************/ :root { /*#d1ab7c #696969*/ --first-color: #CD815B; --second-color: #C2C2C2; --font-color: #4C4C4C; /*invert(73%) sepia(44%) saturate(301%) hue-rotate(353deg) brightness(89%) contrast(89%)*/ --filter-first-color: invert(65%) sepia(9%) saturate(7074%) hue-rotate(328deg) brightness(109%) contrast(62%); --filter-white: invert(100%) sepia(0%) saturate(104%) hue-rotate(184deg) brightness(114%) contrast(100%); --filter-gray: invert(40%) sepia(0%) saturate(1918%) hue-rotate(255deg) brightness(95%) contrast(75%); } .wrap{position:relative; margin:0 auto; width: 1400px;} .specialheight{min-height:760px;} .bold{font-weight:700;} .light{font-weight:300;} .flex{display:flex;} body.no-scroll{overflow: hidden;} .dark-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2;} .blue-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--my-color); opacity: 0.6;} .shadow{ width:80%; padding-bottom:7%; z-index:-1; margin: auto; background:url(img/shadow.png) no-repeat top center/contain; } .anchor{position:relative; visibility:hidden; top:-150px; display:block;} .overlay{position: fixed; width: 100%; height: 100%; background-color: #000; visibility: hidden; opacity: 0; z-index: 1001; transition: all 0.6s; } .overlay.appear{visibility: visible; opacity: 0.3;} .centered{text-align: center;} .small-width-centered{width: 65%; margin: auto; text-align: center;} /********************************************************************************************************************/ .sous-titre h2{font-size: 30px; text-transform: uppercase; padding-bottom: 10px; width: max-content; border-bottom: 5px solid var(--my-color);} .sous-titre p{font-size:24px; line-height: 1.6em;} .btn-color{display: block; width: max-content; color: var(--first-color); font-weight: 500; text-transform: uppercase; background-color: transparent; border: 2px solid var(--first-color); padding: 5px 30px; border-radius: 30px; transition: all 0.3s; } .btn-color:hover{border-radius: 0; background-color: var(--first-color); color: #fff;} #page-loading-cover{position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 1100;} #page-loading-cover .wrap{height: 100%;} #page-loading-cover img{width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: var(--filter-first-color); transition: all 1s; } /********************************************************************************************************************/ #nav{position: fixed; width: 100%; z-index: 1000; top: 0; background-color: #fff; box-shadow: 0 0 10px #00000066; transition: all 0.8s; } #nav .top{background-color: #00000033; padding: 10px 0; text-align: right; margin-bottom: 20px;} #nav .top .item{display: inline-flex; gap: 10px; align-items: center; margin-left: 20px; transition: all 0.3s; } #nav .top .item:hover{opacity: 0.7;} #nav .top .item a{color: #fff; font-weight: 400;} #nav .grid{grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: 20px 0;} #nav .grid .left{display: flex; gap: 50px; align-items: center;} #nav .grid .logo img{width: 200px; filter: var(--filter-first-color); transition: all 0.3s;} #nav .grid .logo img:hover{opacity: 0.7;} #nav .grid .menu{display: flex; align-items: center; justify-content: flex-end; gap: 30px;} #nav .grid .menu > li > a, #nav .menu-item-has-children > a{display: block; text-transform: uppercase; color: #000; font-weight: 300; font-size: 18px; padding: 25px 0 10px; transition: all 0.3s; } #nav .grid .menu > li > a:hover{color: var(--first-color);} #nav .grid .menu > li.dropdown > a{display: flex; align-items: center; gap: 10px;} #nav .grid .menu > li.dropdown > a img{width: 10px; transition: 0.3s;} #nav .grid .socials{display: flex; gap: 15px; justify-content: flex-end;} #nav .grid .socials a{height: 21px; filter: var(--filter-first-color); transition: all 0.3s; } #nav .grid .socials a:hover{opacity: 0.7;} #nav .grid .menuicon{display: none; cursor: pointer; opacity: 1; transform: translateX(0); filter: var(--filter-first-color); transition: all 0.3s; } #nav .grid .menuicon:hover, #nav .bottom .closeicon:hover{opacity: 0.7;} #nav .right{text-align: right;} #nav .right .donation-btn{display: inline-block; font-size: 14px; padding: 5px 15px; margin-right: 25px;} #nav .right .cart{display: inline-block; position: relative; top: 8px; width: 24px; height: 24px; background-image: url(img/icons/cart.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: auto; } #nav .right .cart .cart-count{display: inline-block; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background: var(--first-color); color: #fff; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; line-height: 22px; font-size: 0.8em; font-weight: 300; } #nav .sub-menu{display: none; position: absolute; width: 200px; text-align: left; box-shadow: 0 5px 10px #00000033;} #nav .sub-menu li{background-color: var(--first-color);} #nav .sub-menu a{display: block; padding: 10px; font-size: 16px; color: #fff; font-weight: 300; transition: all 0.4s; } #nav .sub-menu a:hover{padding-left: 15px; background-color: #E09E7B;} /*#dbbd98*/ #nav .menu-item-has-children:hover > a{color: var(--first-color) !important;} #nav .menu-item-has-children:hover > a img{filter: var(--filter-first-color); transform: rotate(180deg);} #nav .menu-item-has-children:hover .sub-menu{display: block;} /* MOBILE MENU */ #mobile-menu{position: fixed; right: -50%; top: 0; background-color: var(--first-color); height: 100%; width: 50%; padding: 30px; box-sizing: border-box; z-index: 1002; overflow-y: scroll; -ms-overflow-style: none; overflow-x: hidden; scrollbar-width: none; transition: all 0.6s; } #mobile-menu::-webkit-scrollbar{display: none;} #mobile-menu.show{right: 0;} #mobile-menu .closeicon{display: block; margin: 0 0 10px auto; cursor: pointer; transition: all 0.3s; } #mobile-menu .closeicon:hover{opacity: 0.7;} #mobile-menu h2{color: #fff; font-size: 20px; text-transform: uppercase; font-weight: 500; margin-bottom: 10px;} #mobile-menu .menu{position: relative; left: 0; padding-left: 15px; border-left: 1px solid #fff; margin-bottom: 30px; visibility: visible; opacity: 1;} #mobile-menu .menu li{border: 1px solid transparent; border-radius: 0 20px; margin-bottom: 5px; transition: all 0.3s;} #mobile-menu .menu li:hover{border: 1px solid #ffffff33;} #mobile-menu .menu li:hover a{padding-left: 15px;} #mobile-menu .menu li a{display: block; color: #fff; font-size: 16px; font-weight: 400; text-transform: uppercase; padding: 10px; transition: all 0.3s; } #mobile-menu .menu .sub-menu{display: none; padding-bottom: 10px;} #mobile-menu .menu .sub-menu li{margin: 0 10px;} #mobile-menu .menu .sub-menu li a{font-size: 14px; opacity: 0.7;} #mobile-menu .socials{display: flex; gap: 30px; flex-direction: column; padding-left: 25px; border-left: 1px solid #fff;} #mobile-menu .socials img{filter: var(--filter-white);} #mobile-menu .socials a{display: flex; gap: 10px; text-transform: uppercase; color: #fff; font-size: 16px; font-weight: 400; transition: all 0.3s; } #mobile-menu .socials a:hover{opacity: 0.7;} /********************************************************************************************************************/ #accueil-top{position: relative; height: 100vh;} #accueil-top .slider{height: 100vh;} #accueil-top .slider .slide{position: relative; overflow: hidden;} #accueil-top .slider .slide:before{content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000000; opacity: 0.4; z-index: 1;} #accueil-top .slider .slogan{position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: max-content; color: #fff; text-align: center; margin: auto; z-index: 5;} #accueil-top .slider .slogan h1, #accueil-top .slider .slogan h2{font-size: 48px; text-transform: uppercase; font-weight: 200;} #accueil-top .slider .slogan h1 span, #accueil-top .slider .slogan h2 span{font-weight: 500;} #accueil-top .slider .slogan a{display: block; width: max-content; color: #fff; font-size: 24px; text-transform: uppercase; border: 2px solid #fff; border-radius: 30px; margin: 30px auto 0; padding: 5px 50px; transition: all 0.3s; } #accueil-top .slider .slogan a:hover{background-color: #fff; color: var(--first-color); border-radius: 0;} #accueil-top .prevArrow{position: absolute; top: 0; bottom: 0; left: 50px; height: max-content; margin: auto; z-index: 5; cursor: pointer; filter: var(--filter-white); transition: all 0.3s; } #accueil-top .nextArrow{position: absolute; top: 0; bottom: 0; right: 50px; height: max-content; margin: auto; z-index: 5; cursor: pointer; filter: var(--filter-white); transition: all 0.3s; } #accueil-top .prevArrow:hover, #accueil-top .nextArrow:hover{opacity: 0.7;} #accueil-top .coords{display: flex; justify-content: center; gap: 50px; position: absolute; left: 0; right: 0; bottom: 50px; margin: auto;} #accueil-top .coords a{align-items: center; color: #fff; gap: 10px; font-weight: 400; transition: all 0.3s; } #accueil-top .coords a:hover{color: var(--first-color);} /********************************************************************************************************************/ #accueil-content h2{color: var(--font-color); font-size: 36px; font-weight: 500; text-transform: uppercase;} #accueil-content .over-title{color: #000 !important; font-size: 21px; font-weight: 700; margin: 0 0 10px !important;} #accueil-content .sous-titre{color: var(--first-color); font-size: 24px; font-weight: 300; text-transform: uppercase;} #accueil-content > *, #accueil-content > .wrap > *{margin-top: 100px;} #accueil-content .text p{color: var(--font-color); margin: 30px 0;} /*********/ #accueil-content .apropos{display: flex; align-items: center; gap: 50px;} #accueil-content .apropos img{height: 450px; object-fit: cover;} #accueil-content .services .flex{justify-content: center; gap: 50px; flex-wrap: wrap; padding-top: 30px;} #accueil-content .services .flex .service{display: flex; align-items: center; gap: 30px; border: 2px solid transparent; border-radius: 0 20px; padding: 15px; box-sizing: border-box; cursor: pointer; transition: all 0.3s; } #accueil-content .services .flex .service:hover{border: 2px solid var(--first-color);} #accueil-content .services .flex .service h2{font-family: 'Nunito', sans-serif; color: var(--first-color); font-size: 24px; text-align: center;} #accueil-content .services .flex .service .icon{width: 48px; height: 64px; filter: var(--filter-first-color);} #accueil-content .services .flex .service .arrow{width: 18px; filter: var(--filter-first-color);} #accueil-content .portfolio{text-align: center;} #accueil-content .portfolio .grid{grid-template-columns: repeat(3, 1fr); gap: 50px; margin: 30px 0 50px;} #accueil-content .portfolio .grid .portfolio-projet{position: relative; background-color: var(--first-color); overflow: hidden;} #accueil-content .portfolio .grid img{display: block; width: 100%; height: 400px; object-fit: cover; transition: all 0.3s; } #accueil-content .portfolio .grid .portfolio-projet:hover img{opacity: 0.6; transform: scale(1.05);} #accueil-content .portfolio .grid .projet-titre{position: absolute; bottom: 20px; max-width: 95%; background-color: #fff; color: var(--font-color); padding: 5px 50px 5px 15px; text-align: left; visibility: hidden; opacity: 0; box-sizing: border-box; transition: 0.4s; transform: translateX(-100%); } #accueil-content .portfolio .grid .projet-titre h3{color: var(--font-color); font-weight: 500; text-transform: uppercase;} #accueil-content .portfolio .grid .projet-titre *{transform: translateX(-30px); opacity: 0; transition: all 0.4s; } #accueil-content .portfolio .grid .projet-titre.slideIn{visibility: visible; opacity: 1; transform: translateX(0);} #accueil-content .portfolio .grid .projet-titre.show *{transform: translateX(0); opacity: 1;} #accueil-content .portfolio .btn-color{margin: auto;} #accueil-content .temoignages{display: flex; align-items: center; position: relative; height: 450px; background: url('img/bande-pattern.png') no-repeat center center/cover; background-color: var(--second-color); } #accueil-content .temoignages .tem-slider{position: relative; width: 80%; margin: auto; z-index: 1;} #accueil-content .temoignages .tem-slider .slide{text-align: center;} #accueil-content .temoignages .tem-slider .slide img{margin: 0 auto 50px;} #accueil-content .temoignages .tem-slider .slide .message{color: #fff; font-size: 24px; font-weight: 500;} #accueil-content .temoignages .tem-slider .slide .nom{color: #fff; margin-top: 30px;} #accueil-content .temoignages .tem-arrows{display: flex; align-items: center; justify-content: space-between; width: 100%; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 0;} #accueil-content .temoignages .tem-prevArrow, #accueil-content .temoignages .tem-nextArrow{cursor: pointer; filter: var(--filter-white); transition: all 0.3s;} #accueil-content .temoignages .tem-prevArrow:hover, #accueil-content .temoignages .tem-nextArrow:hover{opacity: 0.7;} #accueil-content .contact{position: relative;} #accueil-content .contact:after{content: ''; display: block; position: absolute; top: 0; bottom: 0; width: 100%; height: 40%; background-color: #AFAFAF; margin: auto; z-index: -2;} #accueil-content .contact .form-container{background-color: var(--second-color);} #accueil-content .contact .form{display: flex; align-items: center; justify-content: space-between; gap: 150px; padding: 50px; box-sizing: border-box;} #accueil-content .contact form{display: flex; flex-direction: column; gap: 30px; flex-basis: 100%;} #accueil-content .contact form h2{color: #fff;} #accueil-content .contact form input[type="text"]{appearance: none; font-family: 'Nunito', sans-serif; color: var(--first-color); font-size: 18px; border: none; padding: 15px 10px;} #accueil-content .contact form textarea{appearance: none; font-family: 'Nunito', sans-serif; height: 100px; color: var(--first-color); font-size: 18px; border: none; padding: 15px 10px;} #accueil-content .contact form .btn-color{appearance: none; font-family: 'Nunito', sans-serif; color: #fff; font-size: 18px; border: 2px solid #fff; cursor: pointer;} #accueil-content .contact form .btn-color:hover{color: var(--first-color); background-color: #fff;} #accueil-content .contact .coords{display: flex; flex-direction: column; gap: 30px; flex-basis: 100%;} #accueil-content .contact .coords .flex{align-items: center; gap: 15px; color: #fff; font-size: 24px; font-weight: 500;} #accueil-content .contact .coords img{width: 64px; filter: var(--filter-white);} #accueil-content .villes{display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--font-color); font-size: 16px; text-align: center; line-height: 1.6em; margin-top: 30px;} #accueil-content .partenaires{display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 100px; width: 60%; margin: auto;} #accueil-content .partenaires a{transition: all 0.3s;} #accueil-content .partenaires a:hover{opacity: 0.7;} #accueil-content .partenaires img{display: block; margin: auto;} #accueil-content .donation-banner{position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; padding: 50px 0;} #accueil-content .donation-banner:before{display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--first-color); opacity: 0.8; } #accueil-content .donation-banner .text h2, #accueil-content .donation-banner .text p{color: #fff;} #accueil-content .donation-banner .btn-color{color: #fff; border: 2px solid #fff;} #accueil-content .donation-banner .btn-color:hover{color: var(--first-color); background-color: #fff;} /********************************************************************************************************************/ /* PAGE STYLE */ #page-top .header-img{position: relative; height: 600px; margin-bottom: 50px;} #page-top .header-img:after{content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000000; opacity: 0.2;} #page-top .titre h1, #general-page .titre h1{ color: var(--first-color); font-weight: 500; text-transform: uppercase; text-align: center; margin-bottom: 50px; } #page-top .titre h1:after, #general-page .titre h1:after{ content: ''; display: block; width: 150px; height: 2px; background-color: var(--first-color); margin: 10px auto 0; } #page-top.projet .titre h1{margin-bottom: 10px;} #page-top.colour-spacer{background-color: var(--first-color); height: 150px; margin-bottom: 75px;} #page-top .titre .flex{justify-content:space-between;} #page-top .titre .flex h1::after{margin:10px 0 0 !important; margin-bottom:15px !important;} #page-top .titre .flex .section-recherche{color:#222;} .page-content p{color: var(--font-color); line-height: 1.6em;} .page-content h2{color: var(--first-color); font-size: 36px; font-weight: 500; text-transform: uppercase; margin-bottom: 30px;} .page-content .wrap > *:not(:last-child){margin-bottom: 100px;} /********************************************************************************************************************/ /* À PROPOS */ #apropos .image{position: relative;} /*#apropos .image:after{content: 'Photo en collaboration avec Nivo Construction'; display: block; position: absolute; bottom: 0; left: 0; background-color: #ffffffe6; font-size: 14px; padding: 5px;}*/ #apropos .top{text-align: center;} #apropos .top p{margin-bottom: 50px;} #apropos .valeurs .grid{grid-template-columns: repeat(3, 1fr); gap: 50px; text-align: center;} #apropos .valeurs .grid h3{color: var(--font-color); text-transform: uppercase; margin-bottom: 10px;} #apropos .equipe .info{display: flex; align-items: center; gap: 50px;} #apropos .equipe .info img{width: 100%; object-fit: cover;} #apropos .equipe .info-member{margin: 30px 0;} #apropos .equipe .info-member h3{color: var(--font-color); text-transform: uppercase;} #apropos .equipe .info-member h3:after{content: ''; display: block; width: 100px; height: 1px; background-color: var(--first-color); margin: 10px 0;} #apropos .equipe .info-member .bio p{margin-top: 15px;} #apropos .equipe .members{display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 50px;} #apropos .equipe .members img{display: block; width: 100%; height: 600px; object-fit: cover;} #apropos .btn-color{margin: auto;} #apropos .img-top, #apropos .img-bottom{display: block; width: 65%; margin-left: auto; margin-right: auto;} #apropos .img-bottom{margin-bottom: 30px;} #apropos .img-credits{font-size: 14px; color: var(--font-color); font-style: italic; text-align: center;} /********************************************************************************************************************/ /* SERVICES #services .flex{flex-direction: column; gap: 50px;} #services .service{position: relative; padding: 50px; overflow: hidden; cursor: pointer;} #services .service:hover:before{opacity: 0.3;} #services .service:before{content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.4; z-index: 1; transition: all 0.3s; } #services .service .content{display: none; position: relative; z-index: 2;} #services .service .titre{display: flex; align-items: center; gap: 20px; position: relative; z-index: 2;} #services .service .titre h2{color: #fff; margin: 0;} #services .service .titre .icon{width: 64px; filter: var(--filter-white);} #services .service .titre .arrow{filter: var(--filter-white); margin-left: auto; transform: rotate(0); transition: all 0.5s; } #services .service .titre .arrow.open{transform: rotate(180deg);} #services .service p{color: #fff; margin: 30px 0;} #services .service .btn-color{display: flex; align-items: center; gap: 20px; color: #fff; border: 2px solid #fff;} #services .service .btn-color img{width: 12px; transition: all 0.3s; filter: var(--filter-white)} #services .service .btn-color:hover{color: var(--first-color); border-radius: 0; background-color: #fff;} #services .service .btn-color:hover img{filter: var(--filter-first-color);} /********************************************************************************************************************/ /* SERVICE INDIVIDUEL */ #service-single .desc{text-align: center;} #service-single .desc p:not(:last-child){margin-bottom: 15px;} #service-single .images{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;} #service-single .images a{background-color: var(--first-color); overflow: hidden;} #service-single .images img{display: block; width: 100%; height: 400px; object-fit: cover; transition: all 0.6s; } #service-single .images img:hover{opacity: 0.6; transform: scale(1.1);} #service-single .services .list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 50px;} #service-single .services .list .column{display: flex; flex-direction: column; gap: 30px;} #service-single .services .list .flex{align-items: center; gap: 15px; color: var(--font-color); font-weight: 500;} #service-single .services .list .flex img{width: 32px; filter: var(--filter-gray);} #service-single .btns{display: flex; gap: 50px; justify-content: center;} #service-single .procedure .etapes{display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; text-align: center;} #service-single .procedure .etapes .etape{flex-basis: 30%;} #service-single .procedure .etapes .etape h2{width: max-content; color: #fff; background-color: var(--first-color); padding: 0 15px; margin: 0 auto 15px; border-radius: 50%;} .service-single-2 .projet-services .services{margin-bottom: 100px;} .service-single-2 .projet-services .texte-img{display: flex; align-items: center; gap: 50px;} .service-single-2 .projet-services .texte-img > *{width: 100%;} .service-single-2 .projet-services .texte-img img{min-width: 0;} .service-single-2 .projet-services .texte-img ul li{list-style-type: disc; list-style-position: inside; color: var(--font-color); line-height: 1.6em;} .service-single-2 .projet-services .texte-img ul li::marker{color: var(--first-color);} /********************************************************************************************************************/ /* PORTFOLIO */ #portfolio .tabs{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px;} #portfolio .tabs a{display: block; color: var(--first-color); text-transform: uppercase; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.3s; } #portfolio .tabs a:hover{color: var(--second-color);} #portfolio .tabs a.selected{color: var(--second-color); border-bottom: 2px solid var(--second-color);} #portfolio .tabs p{color: var(--first-color);} #portfolio .gallery{position: relative; margin-top: 50px;} #portfolio .gallery .transition{display: none; position: absolute; width: 100%; height: 100%; background-color: #fff; z-index: 5;} #portfolio .gallery .transition.active{transform: translateX(100%);} #portfolio .gallery .transition img{position: absolute; width: 512px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; filter: var(--filter-first-color);} #portfolio .gallery .grid{grid-template-columns: repeat(4, 1fr); gap: 30px;} #portfolio .gallery .grid a{background-color: var(--first-color); overflow: hidden;} #portfolio .gallery .grid img{display: block; width: 100%; height: 300px; object-fit: cover; transition: all 0.3s; } #portfolio .gallery .grid img:hover{opacity: 0.6; transform: scale(1.05);} #portfolio .gallery .grid:last-child{margin-bottom: 100px;} #portfolio .portfolio-gallery{display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;} #portfolio .portfolio-gallery .portfolio-projet{position: relative; background-color: var(--first-color); overflow: hidden;} #portfolio .portfolio-gallery .portfolio-projet img{display: block; width: 100%; height: 400px; object-fit: cover; transition: all 0.6s; } #portfolio .portfolio-gallery .portfolio-projet:hover img{opacity: 0.6; transform: scale(1.1);} #portfolio .portfolio-gallery .portfolio-projet .projet-titre{position: absolute; bottom: 20px; max-width: 95%; background-color: #fff; color: var(--font-color); padding: 5px 50px 5px 15px; text-align: left; visibility: hidden; opacity: 0; box-sizing: border-box; transition: 0.4s; transform: translateX(-100%); } #portfolio .portfolio-gallery .portfolio-projet .projet-titre h3{color: var(--font-color); font-weight: 500; text-transform: uppercase;} #portfolio .portfolio-gallery .portfolio-projet .projet-titre *{transform: translateX(-30px); opacity: 0; transition: all 0.4s; } #portfolio .portfolio-gallery .portfolio-projet .projet-titre.slideIn{visibility: visible; opacity: 1; transform: translateX(0);} #portfolio .portfolio-gallery .portfolio-projet .projet-titre.show *{transform: translateX(0); opacity: 1;} /********************************************************************************************************************/ /* PORTFOLIO (SINGLE) */ #portfolio-single .summary h2{font-size: 24px; font-weight: 400; margin-bottom: 15px;} #portfolio-single .summary .text > *:not(:last-child){margin-bottom: 15px;} #portfolio-single .summary .info .info-section h3{font-weight: 300; color: var(--first-color); margin-bottom: 5px;} #portfolio-single .summary .info .info-section > *:not(h3){margin-left: 10px;} #portfolio-single .summary .info .info-section .flex{align-items: center; gap: 10px;} #portfolio-single .summary .info .info-section .flex img{width: 24px; filter: var(--filter-gray);} #portfolio-single .gallery { position: relative; /* pour Masonry */ } #portfolio-single .gallery a { float: left; width: 50%; /* 2 colonnes */ padding: 0 8px 15px; /* 30px vertical entre les items, 30px entre les colonnes */ box-sizing: border-box; background-color: var(–first-color); overflow: hidden; } #portfolio-single .gallery img { display: block; width: 100%; height: auto; /* important pour un vrai masonry */ object-fit: cover; transition: all 0.6s; } #portfolio-single .gallery img:hover { opacity: 0.6; transform: scale(1.1); } /* Responsive : 1 colonne sur mobile si tu veux */ @media (max-width: 768px) { #portfolio-single .gallery a { width: 100%; } } #portfolio-single .btns{display: flex; gap: 50px; justify-content: center;} /********************************************************************************************************************/ /* SOUMISSION */ #soumission .text{text-align: center;} #soumission .form{position: relative; padding: 50px; background-color: var(--second-color); margin-left: auto; margin-top: 50px;} #soumission .form h2{color: #fff; font-size: 30px;} #soumission .form .form-container{display: flex; gap: 50px;} #soumission .form .form-container form{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 60%;} #soumission .form .form-container form input[type="text"]{appearance: none; font-family: 'Nunito', sans-serif; color: var(--first-color); font-size: 16px; padding: 15px; border: none;} #soumission .form .form-container form .select{position: relative;} #soumission .form .form-container form .select select{appearance: none; font-family: 'Nunito', sans-serif; width: 100%; height: 100%; color: var(--font-color); font-size: 16px; border: none; padding: 15px;} #soumission .form .form-container form .select:after{content: ''; display: block; position: absolute; width: 24px; height: 12px; top: 0; bottom: 0; right: 15px; margin: auto; background: url(img/icons/arrow-down.png) no-repeat center center/contain; filter: var(--filter-first-color); pointer-events: none; } #soumission .form .form-container form textarea{appeareance: none; font-family: 'Nunito', sans-serif; grid-column: span 2; height: 100px; color: var(--first-color); font-size: 16px; padding: 15px; border: none;} #soumission .form .form-container form .btn-color{font-family: 'Nunito', sans-serif; color: #fff; border: 2px solid #fff; font-size: 18px; cursor: pointer;} #soumission .form .form-container form .btn-color:hover{color: var(--first-color); background-color: #fff; border-radius: 0;} #soumission .form .form-container .coords{display: flex; flex-direction: column; gap: 30px; width: 40%;} #soumission .form .form-container .coords .flex{align-items: center; gap: 15px; color: #fff; font-weight: 400;} #soumission .form .form-container .coords img{width: 32px; filter: var(--filter-white);} /********************************************************************************************************************/ /* PARTENAIRES */ #partenaires .flex{align-items: center; justify-content: center; gap: 100px;} #partenaires .flex a{transition: 0.3s;} #partenaires .flex a:hover{opacity: 0.7;} /********************************************************************************************************************/ /* CARRIÈRES */ #carrieres .grid{grid-template-columns: repeat(3, 1fr); gap: 50px;} #carrieres .grid .box .main-img{display: block; margin-bottom: 30px;} #carrieres .grid .box .top{position: relative;} #carrieres .grid .box .top .unavailable-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #8f8f8fe6;} #carrieres .grid .box .top .unavailable-box p{position: absolute; top: 50%; left: 50%; width: max-content; transform: translate(-50%, -50%); color: #fff; font-weight: 700;} #carrieres .grid .box .info h3{display: flex; align-items: center; gap: 15px; color: var(--font-color); text-transform: uppercase; margin-bottom: 15px;} #carrieres .grid .box .info h3 img{width: 32px; filter: var(--filter-gray);} #carrieres .grid .box .info p{margin-bottom: 15px;} #carrieres .grid .box .info ul{display: flex; flex-direction: column; gap: 5px; margin-left: 40px;} #carrieres .grid .box .info ul li{list-style-type: disc; color: var(--font-color);} #carrieres .form{position: relative; padding: 50px; background-color: var(--first-color); margin-left: auto; margin-top: 100px;} #carrieres .form h2{color: #fff; font-size: 30px;} #carrieres .form .form-container{display: flex; gap: 50px;} #carrieres .form .form-container form{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%;} #carrieres .form .form-container form input[type="text"]{appearance: none; font-family: 'Nunito', sans-serif; color: var(--first-color); font-size: 16px; padding: 15px; border: none;} #carrieres .form .form-container form .select{position: relative;} #carrieres .form .form-container form .select select{appearance: none; font-family: 'Nunito', sans-serif; width: 100%; height: 100%; color: var(--font-color); font-size: 16px; border: none; padding: 15px;} #carrieres .form .form-container form .select:after{content: ''; display: block; position: absolute; width: 24px; height: 12px; top: 0; bottom: 0; right: 15px; margin: auto; background: url(img/icons/arrow-down.png) no-repeat center center/contain; filter: var(--filter-first-color); pointer-events: none; } #carrieres .form .form-container form .file-input{display: flex; justify-content: space-between; height: 100px; grid-column: span 2; font-size: 16px; background-color: #fff; padding: 15px;} #carrieres .form .form-container form .file-input input{display: none;} #carrieres .form .form-container form .file-input .filenames{font-weight: 400;} #carrieres .form .form-container form .file-input .file-btn{align-self: center; color: var(--first-color); font-weight: 400; border: 1px solid var(--first-color); border-radius: 40px; padding: 5px 15px; cursor: pointer; transition: all 0.3s; } #carrieres .form .form-container form .file-input .file-btn:hover{background-color: var(--first-color); color: #fff; border-radius: 0;} #carrieres .form .form-container form .btn-color{font-family: 'Nunito', sans-serif; color: #fff; border: 2px solid #fff; font-size: 18px; cursor: pointer;} #carrieres .form .form-container form .btn-color:hover{color: var(--first-color); background-color: #fff; border-radius: 0;} #carrieres .form .form-container .coords{display: flex; flex-direction: column; gap: 30px; width: 40%;} #carrieres .form .form-container .coords .flex{align-items: center; gap: 15px; color: #fff; font-weight: 400;} #carrieres .form .form-container .coords img{width: 32px; filter: var(--filter-white);} /********************************************************************************************************************/ /* BLOGUE */ #blogue .blogue-container{display: flex; gap: 50px;} #blogue .blogue-container .main{display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 70%;} #blogue .blogue-container .main .article .top{display: block; position: relative; margin-bottom: 30px;} #blogue .blogue-container .main .article img{display: block;} #blogue.archive .blogue-container .main .article .titre{position: absolute; bottom: 0; width: 100%; background-color: #cf8761e6; padding: 10px; box-sizing: border-box;} #blogue.archive .blogue-container .main .article .titre h3{color: #fff; text-transform: uppercase;} #blogue.archive .blogue-container .main .article .titre p{color: #fff; font-size: 16px;} #blogue.archive .blogue-container .main .article > p{padding-left: 15px; margin: 30px 0; border-left: 1px solid var(--first-color);} #blogue .blogue-container .sidebar{width: 30%; height: max-content; background-color: var(--second-color); padding: 30px; box-sizing: border-box;} #blogue .blogue-container .sidebar .widget_block:not(:last-child){margin-bottom: 10px;} #blogue .blogue-container .sidebar .widget_block h2{font-size: 24px; color: #fff; margin-bottom: 0; padding-bottom: 5px; border-bottom: 1px solid #fff;} #blogue .blogue-container .sidebar .widget_block a{display: block; width: 100%; color: #fff; padding: 10px; box-sizing: border-box; transition: all 0.3s; } #blogue .blogue-container .sidebar .widget_block a:hover{padding-left: 15px; background-color: #B5B4B4;} /* SINGLE ARTICLE BLOGUE */ #blogue.single-article .blogue-container .main{grid-template-columns: auto;} #blogue.single-article .blogue-container .main .article img{width: 65%; margin-bottom: 15px;} #blogue.single-article .blogue-container .main .article .titre{margin-bottom: 15px;} #blogue.single-article .blogue-container .main .article .titre h1{margin-bottom: 0; color:var(--first-color); text-transform:uppercase;} #blogue.single-article .blogue-container .main .article .titre p{width: max-content; padding-bottom: 15px; border-bottom: 1px solid var(--second-color);} #blogue.single-article .blogue-container .main .article .content *{margin-bottom: 15px;} #blogue.single-article .blogue-container .main .article .content *:last-child{margin-bottom: 30px;} /********************************************************************************************************************/ /* CONTACT #contact .text{text-align: center;} #contact .form{position: relative; margin-top: 100px;} #contact .form .image{position: relative; width: 65%; padding: 150px 0; margin-left: auto;} #contact .form .image img{display: block; width: 75%; object-fit: cover;} #contact .form .wrap{height: max-content; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;} #contact .form .form-container{width: 75%; padding: 50px; background-color: var(--first-color); border-radius: 0 40px;} #contact .form .form-container h2{color: #fff; font-size: 30px;} #contact .form .form-container form .flex{gap: 20px; margin-bottom: 30px;} #contact .form .form-container form .flex > *{width: 100%;} #contact .form .form-container form .flex .inputs{display: flex; flex-direction: column; gap: 20px;} #contact .form .form-container form input[type="text"]{appearance: none; font-family: 'Nunito', sans-serif; color: var(--first-color); font-size: 16px; padding: 15px; border: none;} #contact .form .form-container form .select{position: relative;} #contact .form .form-container form .select select{appearance: none; font-family: 'Nunito', sans-serif; width: 100%; height: 100%; color: var(--font-color); font-size: 16px; border: none; padding: 15px;} #contact .form .form-container form .select:after{content: ''; display: block; position: absolute; width: 24px; height: 12px; top: 0; bottom: 0; right: 15px; margin: auto; background: url(img/icons/arrow-down.png) no-repeat center center/contain; filter: var(--filter-first-color); pointer-events: none; } #contact .form .form-container form textarea{appeareance: none; font-family: 'Nunito', sans-serif; grid-column: span 3; color: var(--first-color); font-size: 16px; padding: 15px; border: none; box-sizing: border-box;} #contact .form .form-container form .btn-color{font-family: 'Nunito', sans-serif; color: #fff; border: 2px solid #fff; grid-column-end: 4; font-size: 18px; margin-left: auto; cursor: pointer;} #contact .form .form-container form .btn-color:hover{color: var(--first-color); background-color: #fff; border-radius: 0;} /********************************************************************************************************************/ /* BOUTIQUE */ #boutique .flex .produits{width: 75%; margin-right: 30px;} #boutique .flex .sidebar{width: 25%;} #boutique .flex .sidebar .wc-block-product-categories-list-item > a{display: block; font-size: 14px; padding: 10px; transition: all 0.2s;} #boutique .flex .sidebar .wc-block-product-categories-list-item > a:hover{color: #fff; background-color: var(--first-color);} /*#boutique .flex .sidebar .wc-block-product-categories-list-item:nth-child(even) > a{background-color: #f4f4f4;}*/ #boutique .flex .sidebar .wc-block-product-categories-list-item:nth-child(even) > a:hover{background-color: var(--first-color);} .wc-block-product-categories-list--depth-0 > li > a{background:#f4f4f4;} .product .related{clear:left;} /********************************************************************************************************************/ /* WOOCOMMERCE */ /* Add to cart button */ .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button, body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link), .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{ display: inline-block; width: auto; color: var(--first-color); font-size: 14px; font-weight: 500; text-transform: uppercase; text-align: center; background-color: transparent; border: 2px solid var(--first-color); padding: 10px; border-radius: 30px; margin-right: 10px; transition: all 0.3s; } .woocommerce ul.products li.product .button:hover, .woocommerce div.product form.cart .button:hover, body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover{ border-radius: 0; background-color: var(--first-color); color: #fff; } .woocommerce div.product form.cart{display: flex;} .woocommerce div.product form.cart div.quantity{margin: 0 10px 0 0;} .woocommerce .quantity .qty{height: 100%; border: 1px solid #d4d4d4; box-sizing: border-box;} .woocommerce ul.products li.product .added_to_cart{font-size: 16px; color: var(--first-color); transition: all 0.3s;} .woocommerce ul.products li.product .added_to_cart:hover{opacity: 0.7;} .wc-block-cart .wc-block-cart__submit-container{text-align: center;} /* Product link style */ .woocommerce ul.products li.product .woocommerce-loop-product__link{transition: all 0.3s;} .woocommerce ul.products li.product .woocommerce-loop-product__link:hover{opacity: 0.7;} /* Product title */ .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{ font-weight: 700; } .woocommerce div.product .product_title{ color: var(--first-color); font-size: 1.6em; font-weight: 500; text-transform: uppercase; text-align: left; margin-bottom: 20px; } .woocommerce div.product .product_title:after{ content: ''; display: block; width: 150px; height: 2px; background-color: var(--first-color); margin: 10px 0 0; } /* Product price */ .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{ color: var(--font-color); font-size: 18px; } .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{ color: var(--font-color); font-weight: 700; margin: 15px 0 20px; } /* Other Woocommerce styles */ .woocommerce div.product .product_meta a{color: var(--first-color);} .woocommerce div.product .product_meta a:hover{text-decoration: underline;} .woocommerce-page a{color: var(--first-color);} .woocommerce-page #general-page ul.wc-block-grid__products{justify-content: center; padding-left: 0;} .woocommerce-page #general-page ul.wc-block-grid__products li.wc-block-grid__product{list-style-type: none;} .woocommerce-page #general-page .wp-block-heading{margin: 20px 0 35px;} .woocommerce-message{border-top-color: #ccc;} /* --------------- */ /* Reset de base */ .sidebar .wc-block-product-categories-list { list-style: none; margin: 0; padding: 0; } /* Lien d’item */ .sidebar .wc-block-product-categories-list-item > a { display: block; padding: 10px 12px; text-decoration: none; border-radius: 6px; } /* Hover simple (sans animation) */ .sidebar .wc-block-product-categories-list-item > a:hover { background: #f6f6f6; } /* SOUS-CATÉGORIES : tout affiché, pas d’animations */ .sidebar .wc-block-product-categories-list .wc-block-product-categories-list { /* tout visible, pas de transition */ display: block; max-height: none; opacity: 1; /* indentation + repère visuel */ margin-left: 14px; padding-left: 12px; border-left: 2px solid #eee; } /* Niveau 2+ : on garde une indentation progressive */ .sidebar .wc-block-product-categories-list .wc-block-product-categories-list .wc-block-product-categories-list { margin-left: 14px; padding-left: 12px; border-left: 2px solid #f0f0f0; } /* Légère réduction de padding pour les items enfants */ .sidebar .wc-block-product-categories-list .wc-block-product-categories-list .wc-block-product-categories-list-item > a { padding: 8px 10px; font-size: 0.95em; color:#666; } /* État actif (si WooCommerce/ton template ajoute .current-cat / .current-cat-parent) */ .sidebar .wc-block-product-categories-list-item.current-cat > a, .sidebar .wc-block-product-categories-list-item.current-cat-parent > a { background: #eef6ff; font-weight: 600; } /********************************************************************************************************************/ /* Section Recherche - WooCommerce */ .section-recherche .search-field{position:relative; display:inline-block; padding:10px; border-radius:15px; border:1px solid #ccc; font-size:1em; min-width:400px; color:#666;} .section-recherche button[type="submit"]{display:inline-block; border:0; padding:15px 30px; border-radius:15px; text-indent:-9999px; background:#f4f4f4 url(img/icons/search.png) no-repeat center center; background-size:20px;} .section-recherche button[type="submit"]:hover{background:var(--first-color) url(img/icons/search.png) no-repeat center center; cursor:pointer; background-size:20px;} /********************************************************************************************************************/ #footer{margin-top: 100px; border-top: 3px solid var(--my-color);} #footer .top{background-color: var(--second-color); padding: 15px 0;} #footer .top .wrap{display: flex; justify-content: space-between;} #footer .top .wrap .flex{align-items: center; gap: 10px; color: #fff; font-weight: 500; transition: all 0.3s; } #footer .top .wrap .flex:hover{opacity: 0.7;} #footer .middle{display: grid; grid-template-columns: 1fr auto 1fr; gap: 50px; align-items: center; padding: 50px 0;} #footer .middle .logo a{filter: var(--filter-first-color); transition: all 0.3s; } #footer .middle .logo a:hover{opacity: 0.7;} #footer .middle .logo img{width: 150px;} #footer .middle .menu{display: flex; flex-direction: column; gap: 10px; text-align: center; text-transform: uppercase;} #footer .middle .menu a{color: #000; transition: all 0.3s;} #footer .middle .menu a:hover{color: var(--first-color);} #footer .middle .socials{display: flex; gap: 15px; justify-content: flex-end;} #footer .middle .socials a{filter: var(--filter-first-color); transition: all 0.3s; } #footer .middle .socials a:hover{opacity: 0.7;} #footer .bottom{display: flex; align-items: center; justify-content: space-between; color: #000; padding: 50px 0 20px;} #footer .bottom a{color: #000; transition: all 0.3s;} #footer .bottom a:hover{color: var(--first-color);} #footer .bottom .top-arrow{transition: all 0.3s;} #footer .bottom .top-arrow:hover{opacity: 0.7;} #footer iframe{display: block; width: 100%; height: 400px; border-top: 10px solid var(--first-color); border-left: 0; border-right: 0; border-bottom: 0;} /********************************************************************************************************************/ #general-page{padding: 250px 0 100px; line-height: 1.5em;} #general-page h1, #general-page h2, #general-page h3, #general-page h4{color: var(--first-color);} #general-page h2{margin-bottom: 15px;} #general-page h3, #general-page p{margin-bottom: 20px;} #general-page p + h2, #general-page ul + h2{margin-top: 30px;} #general-page ul, #general-page ol{margin: 0 0 30px 21px;} body:not(.woocommerce-page) #general-page ul li{list-style-type: initial; color: var(--font-color); margin-bottom: 10px;} #general-page a{color:var(--first-color);} #general-page a:hover{color:#222;} /********************************************************************************************************************/ /* Boutique Styling */ .woocommerce-product-details__short-description ul, .woocommerce-product-details__short-description ol{margin:0 0 20px 21px;} .woocommerce-product-details__short-description ul li{list-style:disc; color:var(--font-color); line-height:1.6em;} .woocommerce-product-details__short-description ol li{list-style:decimal; color:var(--font-color); line-height:1.6em;} .woocommerce-product-details__short-description p{margin:0 0 20px;} .woocommerce-product-details__short-description h2, .woocommerce-product-details__short-description h3, .woocommerce-product-details__short-description h4, .woocommerce-product-details__short-description h5, .woocommerce-product-details__short-description h6{margin-bottom:20px;} #footer .top{clear:both;} /********************************************************************************************************************/ .result-message{color: var(--first-color);} #soumission .result-message, #carrieres .result-message{color: #fff; margin-bottom: 30px;} #page-not-found{margin-top: 200px;} #page-not-found h1{font-size: 72px; font-weight: 700; color: var(--first-color); margin-bottom: 30px;} #page-not-found h2{color: var(--font-color); margin-bottom: 30px;} #page-not-found .btn-color{margin: auto;} ::placeholder{color: var(--font-color);} ::-ms-input-placeholder{color: var(--font-color);} :-ms-input-placeholder{color: var(--font-color);} /********************************************************************************************************************/ .footer-boutique{position:relative; box-shadow:1px 1px 15px rgba(0,0,0,0.2); margin-top:120px;} .footer-boutique .section1{position:relative;} .footer-boutique .section1 > .flex{justify-content:space-between; align-self:center;} .footer-boutique .section1 > .flex .left{padding:40px 0; width:10%;} .footer-boutique .section1 > .flex .left img{max-height:150px; width:auto;} .footer-boutique .section1 > .flex .right{padding:40px 0; text-align:right; align-self:center;} .footer-boutique .section1 > .flex .right .btncta-footer{display:inline-block; padding:15px 30px; border:2px solid var(--first-color); color:var(--first-color); border-radius:30px; background:transparent; margin:15px 0 15px 15px; font-weight:bold;} .footer-boutique .section1 > .flex .right .btncta-footer:hover{background:var(--first-color); color:#fff; cursor:pointer;} .footer-boutique .section2{position:relative; background:#eee; padding:40px 0;} .footer-boutique .section2 > .flex{justify-content:space-between;} .footer-boutique .section2 > .flex > .left{color:#666; width:60%; align-self:center; font-size:1.2em; line-height:1.4em;} .footer-boutique .section2 > .flex > .right{width:30%; align-self:center; text-align:right;} .footer-boutique .section2 > .flex > .right .btncta-footer{display:inline-block; padding:15px 30px; border:2px solid var(--first-color); color:var(--first-color); border-radius:30px; background:transparent; margin:15px 0 15px 15px; font-weight:bold;} .footer-boutique .section2 > .flex > .right .btncta-footer:hover{background:var(--first-color); color:#fff; cursor:pointer;} .footer-boutique .section3{position:relative;} .footer-boutique .section3 > .flex{justify-content:space-between;} .footer-boutique .section3 > .flex .left{position:relative; padding:40px 0; align-self:flex-start; width:50%;} .footer-boutique .section3 > .flex .left .flex{justify-content:space-between;} .footer-boutique .section3 > .flex .left .flex .gauche{width:40%; margin-right:9%;} .footer-boutique .section3 > .flex .left .flex .gauche h2{text-transform:uppercase; font-size:1.2em; border-bottom:1px solid #000; padding:0 0 10px; margin-bottom:40px;} .footer-boutique .section3 > .flex .left .flex .gauche h3{text-transform:uppercase; font-size:0.8em; margin:0 0 10px;} .footer-boutique .section3 > .flex .left .flex .gauche a{display:block; color:var(--first-color); font-size:0.8em; margin:0 0 10px; font-weight:bold;} .footer-boutique .section3 > .flex .left .flex .gauche a:hover{color:#000;} .footer-boutique .section3 > .flex .left .flex .droite{width:40%; margin-right:9%;} .footer-boutique .section3 > .flex .left .flex .droite h2{text-transform:uppercase; font-size:1.2em; border-bottom:1px solid #000; padding:0 0 10px; margin-bottom:40px;} .footer-boutique .section3 > .flex .left .flex .droite h3{text-transform:uppercase; font-size:0.8em; font-size:0.8em; margin:0 0 10px;} .footer-boutique .section3 > .flex .left .flex .droite a{display:block; color:var(--first-color); font-size:0.8em; margin:0 0 10px; font-weight:bold;} .footer-boutique .section3 > .flex .left .flex .droite a:hover{color:#000;} .footer-boutique .section3 > .flex .right{position:relative; padding:40px 0; align-self:flex-start; width:50%;} .footer-boutique .section3 > .flex .right iframe{width:100%; height:450px; border:0;} .footer-boutique .section4{position:relative; background:#ccc; padding:10px 0} .footer-boutique .section4 .flex{justify-content:space-between;} .footer-boutique .section4 .flex .left{width:45%; align-self:center;} .footer-boutique .section4 .flex .left a{display:inline-block; margin:0 15px 0 0; color:#000; text-decoration:underline;} .footer-boutique .section4 .flex .left a:hover{color:var(--first-color);} .footer-boutique .section4 .flex .left a img{vertical-align:middle; margin-right:7px;} .footer-boutique .section4 .flex .right{width:45%; text-align:right; align-self:center;} .footer-boutique .section4 .flex .right .pinsvg{width:30px; display:inline-block; vertical-align:middle; margin-right:2px;} .footer-boutique .section4 .flex .right .pinsvg path{fill: var(--first-color); width:20px; height:auto;} .footer-boutique .section4 .flex .right strong{font-weight:bold; color:#000;} .footer-boutique .section4 .flex .right a{color:#000;} .footer-boutique .section4 .flex .right a:hover{color:var(--first-color);} .footer-end{position:relative; padding:15px 0;} .footer-end .flex{justify-content:space-between; align-items:center; font-size:0.8em;} .footer-end .flex a{color:#000; transition:all 0.3s;} .footer-end .flex a:hover{color:var(--first-color);} .footer-end .flex .top-arrow{transition:all 0.3s;} .footer-end .flex .top-arrow:hover{opacity:0.7;} /********************************************************************************************************************/ /* Style Accueil Boutique - Catégories */ .shop-cat-menu { margin: 2rem 0; } .shop-cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px,1fr)); gap: 50px; list-style: none; padding: 0; margin: 0; } .shop-cat-item { } .shop-cat-link { position:relative; display: block; border-radius: 12px; text-decoration: none; background: #fff; transition: all 0.2s ease; width:100%; aspect-ratio:1 / 1; overflow:hidden;} .shop-cat-link:hover { transform: translateY(-15px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); } .shadow-over-img{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:5;} .shop-cat-link img{z-index:5;} .shop-cat-textarea{position:absolute; top:30px; left:30px; z-index:10;} .shop-cat-btn{margin-top:10px; display:inline-block; border-radius:15px; padding:10px; border:2px solid #fff; color:#fff;} .shop-cat-link:hover .shop-cat-btn{background:#fff; color:#222;} .shop-cat-thumb { width: 100%; height: 100% !important; display: block; margin: 0 auto 10px; border-radius: 8px; } .shop-cat-name { display: block; font-weight: 600; color: #fff; font-size: 1rem; margin-top: 0.3rem;} .cpi-free-shipping-banner{background:#ddd; padding:30px; text-align:center; font-size:1.5em; font-weight:600; letter-spacing:0.5px; border-radius:6px; margin-bottom:55px; margin-top:-50px; line-height:1.4em;} .cpi-free-shipping-banner span{color:var(--first-color);} /********************************************************************************************************************/ .single-product div.product::after { content: ""; display: block; clear: both; } /********************************************************************************************************************/ /* COVER CLASS::START */ .tall-img { height: auto; width: 100%; max-height: none; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wide-img { width: auto; height: 100%; max-width: none; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .cover { position: relative; overflow: hidden; } .cover > img{ position:absolute; } /********************************************************************************************************************/ /* CSS MEDIA QUERIES - WIDTH */ @media screen and (max-width: 1600px) { } @media screen and (max-width: 1450px) { .wrap{width:1100px;} #accueil-content .services .flex{gap: 30px;} #accueil-content .services .flex .service{gap: 30px;} #accueil-content .services .flex .service h2{font-size: 24px;} #accueil-content .contact img{width: 475px;} #accueil-content .partenaires{gap: 30px;} .footer-boutique .section1 > .flex .right .btncta-footer, .footer-boutique .section2 > .flex > .right .btncta-footer{font-size:0.9em;} .footer-boutique .section1 > .flex .left, .footer-boutique .section2{padding:20px 0;} .footer-boutique .section2 > .flex > .left{font-size:1em;} .footer-boutique .section3 > .flex .left .flex .gauche h2, .footer-boutique .section3 > .flex .left .flex .droite h2{font-size:1em;} .footer-boutique .section4 .flex .left a, .footer-boutique .section4 .flex .right{font-size:0.8em;} } @media screen and (max-width: 1150px) { .wrap{width:900px;} #nav .grid .menu > li > a, #nav .menu-item-has-children > a{font-size: 14px;} #accueil-top .slider .slogan p{font-size: 48px;} #accueil-content .apropos img{width: 40%;} #accueil-content .portfolio .grid{grid-template-columns: 1fr 1fr;} #accueil-content .portfolio .grid img{height: 300px;} #accueil-content .contact .form{gap: 50px;} #accueil-content .contact .form-container:after{height: 85%;} #apropos .equipe .info img{width: 40%;} #service-single .procedure .etapes .etape{flex-basis: 45%;} #portfolio .gallery .grid{grid-template-columns: repeat(3, 1fr);} #portfolio .portfolio-gallery{grid-template-columns: 1fr 1fr;} #portfolio-single .gallery{grid-template-columns: 1fr 1fr;} #blogue .blogue-container .main{grid-template-columns: auto;} #blogue .blogue-container .sidebar{width: 40%;} #blogue .blogue-container .sidebar .widget_block a{font-size: 16px;} #carrieres .grid{grid-template-columns: 1fr 1fr;} .footer-boutique .section1 > .flex .right .btncta-footer, .footer-boutique .section2 > .flex > .right .btncta-footer{font-size:0.8em;} .footer-boutique .section2 > .flex > .right{width:32%;} .footer-boutique .section4 .flex .left{width:55%;} } @media screen and (max-width: 950px) { .wrap{width:700px;} .small-width-centered{width: 85%;} #nav .grid{display: flex; gap: 0;} #nav .grid .menu, #nav .grid .socials{display: none;} #nav .grid .menuicon{display: block; margin-left: 45px;} #nav .right{margin-left: auto;} #accueil-content .apropos{flex-direction: column;} #accueil-content .apropos img{width: 100%; height: auto;} #accueil-content .apropos .text{text-align: center;} #accueil-content .apropos .text .btn-color{margin: auto;} #accueil-content .contact .wrap:after{display: none;} #accueil-content .contact .form{flex-direction: column; background-color: var(--second-color);} #accueil-content .contact form{flex-basis: 0; width: 100%;} #accueil-content .contact .coords{display: none;} #accueil-content .partenaires{grid-template-columns: repeat(2, 1fr);} #page-top .header-img{height: 500px;} #apropos .top .images{gap: 50px;} #apropos .valeurs .grid{grid-template-columns: auto;} #apropos .equipe .info{flex-direction: column;} #apropos .equipe .members{grid-template-columns: auto;} #apropos .img-top, #apropos .img-bottom{width: 100%;} #service-single .images img{height: 300px;} #service-single .services .list{grid-template-columns: 1fr 1fr;} #service-single .procedure .etapes{grid-template-columns: 1fr 1fr;} .service-single-2 .projet-services .texte-img{flex-direction: column; text-align: center;} .service-single-2 .projet-services .texte-img ul{text-align: left;} #portfolio .gallery .grid{grid-template-columns: 1fr 1fr;} #portfolio-single .summary{flex-direction: column-reverse; gap: 50px;} #portfolio-single .summary .text{width: 100%;} #soumission .form .form-container{flex-direction: column;} #soumission .form .form-container form{width: 100%;} #soumission .form .form-container .coords{display: none;} /*#contact .form .form-container form .flex{flex-direction: column;}*/ #blogue .blogue-container{flex-direction: column-reverse;} #blogue .blogue-container .main{width: 100%;} #blogue .blogue-container .sidebar{width: 100%; margin-bottom: 0;} #blogue.single-article .blogue-container .main .article img{width: 100%;} #carrieres .grid{grid-template-columns: auto;} #boutique .flex{flex-direction: column;} #boutique .flex .produits, #boutique .flex .sidebar{width: 100%;} #boutique .flex .produits{margin-right: 0; margin-bottom: 50px;} #footer .bottom{flex-direction: column; gap: 30px; text-align: center; padding: 0 0 20px 0;} #footer .bottom .top-arrow{order: -1;} #general-page{padding: 200px 0 50px;} .footer-boutique{margin-top:60px;} .footer-boutique .section1 > .flex .left{width:15%; align-self:center;} .footer-boutique .section1 > .flex .right .btncta-footer{margin:5px 0 0;} .footer-boutique .section2 > .flex > .left{font-size:0.9em; width:55%;} .footer-boutique .section2 > .flex > .right{width:45%;} .footer-boutique .section3 > .flex{flex-direction:column;} .footer-boutique .section3 > .flex .left, .footer-boutique .section3 > .flex .right{width:100%;} .footer-boutique .section3 > .flex .right{padding:0 0 40px;} .footer-boutique .section4 .flex{flex-direction:column;} .footer-boutique .section4 .flex .left{width:100%; text-align:center; margin-bottom:20px;} .footer-boutique .section4 .flex .right{width:100%; text-align:center;} #page-top .titre .flex{flex-direction:column;} #page-top .titre h1{order:2; margin-top:50px;} #page-top .titre .flex h1::after{margin:10px auto 0 !important;} #page-top .titre .flex .section-recherche{text-align:center;} .cpi-free-shipping-banner{font-size:1.2em;} } @media screen and (max-width: 750px) { .wrap{width:500px;} #nav .right .donation-btn{display: none;} #mobile-menu{width: 75%; right: -75%;} #accueil-top .slider .slogan h1, #accueil-top .slider .slogan h2{font-size: 48px;} #accueil-top .coords{flex-direction: column; gap: 20px; width: 500px;} #accueil-top .coords a{justify-content: center;} #accueil-content h2{font-size: 24px;} #accueil-content .over-title{font-size: 18px;} #accueil-content .text p, #general-page p{font-size: 14px;} #accueil-content .btn-color{font-size: 14px; padding: 10px 20px;} #accueil-content > *, #accueil-content > .wrap > *{margin-top: 50px;} #accueil-content .apropos img{height: 300px;} #accueil-content .services .flex .service{padding: 5px 30px;} #accueil-content .services .flex .service .icon{width: 48px;} #accueil-content .services .flex .service h2{font-size: 16px;} #accueil-content .portfolio .grid{grid-template-columns: auto; gap: 30px;} #accueil-content .temoignages{height: max-content; padding: 50px 0;} #accueil-content .temoignages .tem-slider .slide img{margin: 0 auto 30px;} #accueil-content .temoignages .tem-slider .slide .message{font-size: 16px;} #accueil-content .contact .form{padding: 30px;} #accueil-content .contact form input[type="text"], #accueil-content .contact form textarea, #accueil-content .contact form .btn-color{font-size: 14px;} #page-top{margin-bottom: 50px;} #page-top.colour-spacer{height: 150px; background-color: transparent; margin-bottom: 0;} .page-content h2{font-size: 24px;} .page-content .wrap > *:not(:last-child){margin-bottom: 50px;} #apropos .valeurs .grid h3{font-size: 18px;} #service-single .images{grid-template-columns: auto;} #service-single .images img{height: 250px;} #service-single .services .list{grid-template-columns: auto; gap: 15px;} #service-single .services .list .column{gap: 15px;} #service-single .procedure .etapes{grid-template-columns: auto;} #service-single .procedure .etapes .etape{flex-basis: 100%;} #service-single .procedure .etapes .etape h2{padding:0 10px;} #service-single .btns{flex-direction: column; gap: 30px;} #service-single .btns a{margin: auto; width:auto; text-align:center;} .service-single-2 .projet-services .services{margin-bottom: 50px;} #portfolio .gallery .grid:last-child{margin-bottom: 50px;} #portfolio .portfolio-gallery{grid-template-columns: auto;} #portfolio-single .btns{flex-direction: column; gap: 30px;} #portfolio-single .btns a{margin:auto;} #soumission .form .form-container h2{font-size: 24px;} #soumission .form .form-container form{grid-template-columns: auto} #soumission .form .form-container form textarea{grid-column: auto} #soumission .form .form-container form .btn-color{grid-column-end: auto;} /*#contact .form{margin-top: 50px;} #contact .form .form-container h2{font-size: 24px;}*/ #carrieres .form .form-container form{grid-template-columns: auto;} #carrieres .form .form-container form .file-input{grid-column: auto; flex-direction: column; gap: 30px; height: max-content;} #carrieres .form .form-container form .file-input .file-btn{align-self: flex-end;} #footer{margin-top: 50px;} #footer .top{padding: 30px 0;} #footer .top .wrap{flex-direction: column; align-items: center; gap: 30px;} #footer .top .wrap .flex{font-size: 14px;} #footer .middle{grid-template-columns: auto; text-align: center;} #footer .middle .socials{justify-content: center;} #footer .bottom, #footer .bottom a{font-size: 14px;} .woocommerce-page #general-page ul.wc-block-grid__products{justify-content: initial;} .theme-twentytwenty .wc-block-grid.has-4-columns .wc-block-grid__product, .woocommerce-page .wc-block-grid.has-4-columns .wc-block-grid__product{ flex: 1 0 50%; max-width: 50%; } .footer-boutique .section1 > .flex{flex-direction:column;} .footer-boutique .section1 > .flex .left{width:100px;} .footer-boutique .section1 > .flex .right{padding:0 0 20px; text-align:center;} .footer-boutique .section2 > .flex{flex-direction:column;} .footer-boutique .section2 > .flex > .left, .footer-boutique .section2 > .flex > .right{width:100%; text-align:center;} .footer-end .flex{flex-direction:column;} .footer-end .flex a{margin-top:10px;} .section-recherche .search-field{min-width:0;} } @media screen and (max-width: 550px) { .wrap{width: 90%;} .small-width-centered{width: 100%;} #nav .top{display: none;} #nav .grid .logo img{max-width: 150px;} #nav.scrolled{top: 0;} #mobile-menu .extra a{font-size: 14px;} #mobile-menu ul li a{font-size: 16px; padding: 5px 10px;} #mobile-menu .socials{gap: 15px;} #page-top, #page-top .header-img{margin-bottom: 30px;} #accueil-top .slider .slogan h1, #accueil-top .slider .slogan h2{font-size: 24px;} #accueil-top .slider .slogan a{font-size: 18px; padding: 10px 20px; border: 2px solid #fff; margin: 20px auto 0;} #accueil-top .coords{width: 90%;} #accueil-top .coords a{font-size: 14px;} #accueil-top .prevArrow{left: 30%;} #accueil-top .nextArrow{right: 30%;} #accueil-top .prevArrow, #accueil-top .nextArrow{width: 15px; top: unset; bottom: 25%;} #accueil-content .services .flex .service{padding: 0; gap: 15px;} #accueil-content .services .flex .service .icon{width: 40px;} #accueil-content .portfolio .grid img{height: 250px;} #accueil-content .temoignages .tem-arrows{position: relative; justify-content: center; gap: 100px; margin: 30px 0 0 0;} #accueil-content .villes{font-size:14px; margin-top: 30px;} #page-top .header-img{height: 350px;} #page-top .titre h1, #general-page .titre h1{font-size: 30px;} #page-top .titre h1:after, #general-page .titre h1:after{width: 100px;} #page-top.colour-spacer{height: 100px;} #apropos .equipe .members img{height: 350px;} #services .service{padding: 20px;} #services .service .titre .icon{width: 48px;} #services .service .titre .arrow{width: 24px;} #services .service svg{display: none;} #service-single .services .list{font-size: 16px;} #service-single .services .list .flex img{width: 24px;} #portfolio .gallery .transition img{width: 256px;} #portfolio .gallery .grid{grid-template-columns: auto;} #portfolio .portfolio-gallery .portfolio-projet img{height: 250px;} #portfolio-single .gallery{grid-template-columns: auto;} #soumission .form{padding: 30px;} #soumission .form h2{font-size: 24px;} #soumission .form .form-container{gap: 30px;} #soumission .form .form-container form input[type="text"], #soumission .form .form-container form .select select, #soumission .form .form-container form textarea, #soumission .result-message{font-size: 14px;} #soumission .form .form-container form .btn-color{margin-left: 0;} /*#contact .form .wrap{position: static;} #contact .form .image{width: 90%; height: 300px; padding: 0; margin: auto;} #contact .form .form-container{width: 100%; box-sizing: border-box; padding: 30px; margin-left: 0; border-radius: 0;} #contact .form .form-container form input[type="text"], #contact .form .form-container form .select select, #contact .form .form-container form textarea, #contact .result-message{font-size: 14px;} #contact .form .form-container form .btn-color{margin-left: 0;}*/ #blogue.archive .blogue-container .main .article .titre h3{font-size:16px;} #footer{margin-top: 75px;} #footer .top .menu ul, #footer .top .coords .info{flex-direction: row; flex-wrap: wrap;} #footer .middle{flex-direction: column; gap: 75px;} #general-page{padding: 150px 0 50px;} .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button{margin-right: 0;} .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button, body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link), .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{ font-size: 0.6em; } .footer-boutique .section1 > .flex .right .btncta-footer, .footer-boutique .section1 > .flex .right .btncta-footer, .footer-boutique .section2 > .flex > .right .btncta-footer{padding:10px 12px;} .footer-boutique .section3 > .flex .left .flex{flex-direction:column;} .footer-boutique .section3 > .flex .left .flex .gauche{width:100%; margin-right:0; margin-bottom:25px; padding-bottom:10px; border-bottom:1px solid #000;} .footer-boutique .section3 > .flex .left .flex .droite{width:100%; margin-right:0;} .cpi-free-shipping-banner{margin-top:-30px;} } /* CSS MEDIA QUERIES - HEIGHT */ @media screen and (max-height: 920px) { } @media screen and (max-height: 810px) { }