/* ====== GLOBAL ====== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); * {box-sizing: border-box} ::selection {color: #222;background: #eddfcf} html,body {margin: 0;padding: 0;min-width: 320px;scroll-behavior: smooth;font-family: 'Montserrat', sans-serif;background:#fff} a {text-decoration: none;transition: all 0.3s} a.link,button.link {padding: 16px 25px;font-weight: 700;text-transform: uppercase;font-size: 14px;border-radius:40px} a.link.black {background: rgba(18, 18, 18, .9);color: #ececec;border: 1px solid #181818;display:inline-block} a.link.black small {color:#CDA274;transition: all 0.3s} a.link.black.active, a.link.black:hover {background: rgba(205,162,116,.8);color: #fff;border: 1px solid #CDA274} a.link.black:hover small {color:#fff} a.link.gold,button.link.gold {background: rgba(205,162,116,.8);color: #fff;border: 1px solid #CDA274} a.link.gold.active, a.link.gold:hover, button.link.gold.active, button.link.gold:hover {background: rgba(18, 18, 18, .9);color: #ececec;border: 1px solid #181818;cursor:pointer} p {font-size: 18px;line-height: 1.8;margin: 0;padding: 0} p.small {font-size: 15px;line-height: 1.8;margin: 0;padding: 0} h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0} h1 {font-size:60px} h1.small {font-size:50px} h2 {font-size: 40px;font-weight: 600} h2.small {font-size:30px} h3 {font-size: 24px;font-weight: 600} h4 {font-size: 18px;font-weight: 600} ul {list-style: none; margin: 0; padding: 0} ul.check li {list-style-image: url('../img/check.svg');margin-left:24px;margin-bottom:10px;padding-left: 5px;line-height: 1.8} button {outline: none;border:none;transition: all 0.3s} section.pad {padding: 120px 0} .opacity {opacity: 0;} @media (max-width:1920px){ p {font-size: 16px} h1 {font-size: 55px} h2 {font-size: 35px} h3 {font-size: 22px} h4 {font-size: 15px} h1.small {font-size:50px} } @media (max-width:1680px){ section.pad {padding: 100px 0} p {font-size: 15px} p.small {font-size: 13px} h1 {font-size: 48px} h2 {font-size: 32px} } @media (max-width:1366px){ p {font-size: 14px} h1 {font-size: 40px} h2 {font-size: 28px} } @media (max-width:1024px){ a.link,button.link {padding: 16px 25px;font-size: 12px;border-radius:40px} section.pad {padding: 80px 0} } @media (max-width:680px){ h1 {font-size: 40px} h1.small {font-size:40px} h2 {font-size: 18px} } .arobase::before { content: "\000040"; } /* Titre */ .titre {margin-bottom: 50px} .titre strong {font-size:14px;color:#CDA274;text-transform: uppercase;font-weight: 600;letter-spacing: 1px} .titre strong span {font-size:12px;display: inline-block;background: #CDA274;height: 8px;width: 8px;border-radius: 50%;margin-right: 10px} .titre strong span:nth-child(2) {margin-left: 10px} .titre h2 {line-height: 1.2;margin: 10px 0;color: #303030} .titre hr {height: 5px;width: 80px;border: 0;background: #CDA274;margin: 40px 0} .titre a {margin-top: 50px;display: inline-block} @media (max-width:1920px){ .titre strong {font-size:12px} } @media (max-width:1024px){ .titre h2 {margin: 10px 0 30px 0} .titre strong span {display: none} } /* FAQ SEO */ .faq-seo {background:#f5f5f5;text-align:left} .faq-seo .titre {text-align:center} .faq-seo .titre p {max-width:780px;margin:0 auto;color:#504242} .faq-seo .faq-list {display:grid;grid-template-columns:repeat(2, 1fr);gap:22px} .faq-seo article {background:#EDE0D0;border-radius:10px;padding:32px} .faq-seo article h3 {color:#322A2A;margin-bottom:14px;line-height:1.35} .faq-seo article p {color:#504242} @media (max-width:1024px){ .faq-seo .faq-list {grid-template-columns:1fr} .faq-seo article {padding:24px} } /* ToTop */ #totop {position:fixed;background:#303030;padding:15px 15px 10px 15px;bottom: -50px;right: 10px;z-index: 99;border-radius: 5px;cursor: pointer;transition: all 0.3s} #totop:hover {background: #000;transition: all 0.3s} #totop .arrow {border: solid white;border-width: 0 4px 4px 0;display: inline-block;padding: 4px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg)} #tomenu {position: fixed;top:-50px;right:10px;background:#303030;z-index: 99;border-radius: 5px;cursor: pointer;transition: all 0.3s} #tomenu.hamburger {padding-right: 20px;height: 40px;width: 40px;margin-top: 0px} #tomenu .hamburger-inner, #tomenu .hamburger-inner::before, #tomenu .hamburger-inner::after {background-color: #fff;position: absolute} @media (max-width:1024px){ #tomenu.hamburger {margin-top: 0px} } /* Container */ .container {width: 1280px; margin: 0 auto} .container-fluid {width: 1800px; margin: 0 auto} @media (max-width:1920px){.container-fluid{width: 1400px}.container{width: 1200px}} @media (max-width:1680px){.container-fluid{width: 1400px}} @media (max-width:1440px){.container-fluid{width: 90%;margin: 0 auto}} @media (max-width:1366px){.container {width: 900px;margin: 0 auto}} @media (max-width:1024px){.container {width: 90%}} /* ====== MENU ====== */ #menu {position: relative;height: 125px;width:100%;background: #fff;z-index: 99;transition: all 0.3s ease;line-height: 125px} #menu nav {} #menu nav .logo-content {height: 195px;width: 100%;left:0;top:20px;text-align: center;position: absolute} #menu nav .logo-content img.logo {width: 268px;height: 195px;margin: 0 auto;z-index: 1;margin-left: 70px} #menu nav ul {width: auto;position: absolute} #menu nav ul li {display: inline-block;vertical-align: middle} #menu nav ul li a img {position: absolute;margin-top: -20px;height: 35px;width: 35px} #menu nav ul li a {display: block;color: #181818;padding: 0 15px;font-size: 11px;font-weight: 600;text-transform: uppercase;text-decoration: underline;text-underline-offset: 10px;text-decoration-color: rgba(0, 0, 0, 0);text-decoration-thickness: 1px} #menu nav ul li:first-child {margin-right: 30px} #menu nav ul li a:hover, #menu nav ul li.active a {color: #000;text-decoration-color: rgba(0, 0, 0, .5)} #menu nav ul.second {position: relative;width: auto;padding-right: 40px;float: right} #menu nav ul.second li {margin: 0} .hamburger {background: transparent;margin-top: -5px;display: block;height: 50px;width: 50px;cursor: pointer;float: right;padding-left: 30px} .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 18px;height: 2px;background-color: #000;position: absolute} .hamburger-inner::before, .hamburger-inner::after {content: "";display: block} .hamburger-inner::before {top: -6px} .hamburger-inner::after {bottom: -6px} #tomenu.hamburger {width: 40px;height: 40px;padding: 0 19px 0 0} @media (max-width:1920px){ #menu {height: 100px;line-height: 100px} #menu nav .logo-content {height: 150px} #menu nav .logo-content img.logo {height: 150px;width: 206px;margin: 0 auto;z-index: 1;margin-left: 60px} #menu nav ul li a {padding: 0 10px} } @media (max-width:1680px){ #menu nav .logo-content {height: 100px;width: 100%;left:0;top:0px;text-align: left;position: absolute;z-index: 0} #menu nav .logo-content img.logo {height: 100px;width: 137px;margin: 0 auto 0 5%;z-index: 1} #menu nav {text-align: right} #menu nav ul {position: relative} #menu nav ul li a img {margin-top: -15px;height: 25px;width: 25px;margin-left: 20px;display: none} #menu nav ul li:first-child {margin-left:0px} #menu nav ul li a {padding: 0 0 0 15px;;font-size: 12px} #menu nav ul {width: auto;display:inline-block} #menu nav ul.second {float: none;padding-right: 0px} #menu nav ul.second li:first-child {margin-right: 0px} } @media (max-width:1366px){ #menu nav ul li a {padding: 0 5px;font-size: 10px} } @media (max-width:1024px){ #menu {height: 75px} #menu nav ul.first, #menu nav ul.second li:nth-child(1), #menu nav ul.second li:nth-child(2), #menu nav ul.second li:nth-child(3) {display: none} .hamburger {margin-top: -32px} } /* ====== Right-Sidebar ====== */ .overlay {position: fixed;width: 100%;height: 100%;z-index: 99;top:0;display: none} .overlay.open {display: block;background: rgba(18,18,18, .5)} #right-sidebar {width: 320px;height: 100%;background: #181818;position: fixed;right: -320px;top: 0;transition: .25s ease-in-out;z-index: 666;opacity: 0} #right-sidebar.open {width: 320px;right: 0;opacity: 1;height: 100%} #right-sidebar .content {margin: 55px 0 0 0} #right-sidebar .content a img {height: 100px;width: 137px;margin-left: 35px} #right-sidebar .content ul.right-menu {margin-top: 50px;min-height:500px} #right-sidebar .content ul.right-menu li {display: block;vertical-align: middle} #right-sidebar .content ul.right-menu li a {padding: 25px 0 25px 35px;font-size: 12px;font-weight: 600;text-transform: uppercase;color: #f1f1f1;border-left: 0px solid #181818;transition: .2s ease-in-out;display: block} #right-sidebar .content ul.right-menu li:hover a, #right-sidebar .content ul.right-menu li.active a {color: #eddfcf;border-left: 5px solid #eddfcf;background: #111} #right-sidebar .content .copyright {position: fixed;bottom: 40px;width: 320px;margin-left: 35px} #right-sidebar .content .copyright a {font-size: 13px;color: #f1f1f1;font-weight: 300} #right-sidebar .content .copyright a:hover {opacity: .9} #right-sidebar .content .copyright a strong{color:#eddfcf} @media (max-width:1366px){ #right-sidebar .content {margin: 20px 0 0 0px} #right-sidebar .content ul.right-menu {margin-top: 20px} #right-sidebar .content ul.right-menu li {margin-bottom: 0px} #right-sidebar .content ul.right-menu li a {padding: 20px 0 20px 35px} } /* ====== zero ====== */ #zero {clear: both;background: #eddfcf url("../img/bg-3.webp") no-repeat center;background-attachment: fixed;padding: 120px 0 80px 0} #zero h1,#zero h2 {color:#514343;font-size: 25px;font-weight:700;text-transform:uppercase} #zero hr {width: 80px;border: none;height: 2px;background-color:#CDA274;margin: 20px auto} #zero .box {display: flex;overflow: hidden} #zero .item {flex: 1;text-align: center} #zero .item .content {width: 95%;height: 100%;margin: 0 auto;background: rgba(255,255,255,.5);border-radius: 10px;padding: 40px 50px;transition: all 0.25s linear} #zero .item .content p {text-align: justify;text-align-last: center;color:#514343;margin: 0px 0 30px 0} #zero .item .content img {width: 300px;height: 371px} #zero .item:hover .content {background: #fff} .quick-themes {display: none} @media (max-width:1920px){ #zero {padding: 90px 0 80px 0} } @media (max-width:1680px){ #zero .item .content {width: 95%;padding: 40px 30px} #zero .item .content img {width: 100%;height: auto} } @media (max-width:1366px){ #zero {padding: 40px 0} } @media (max-width:1024px){ .quick-themes {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1px;background: #d3af86;position: relative;z-index: 1;padding: 30px 0;} .quick-themes a {color: #322A2A;text-align: center;padding: 12px 8px;font-size: 11px;font-weight: 700;text-transform: uppercase;line-height: 1.25} .quick-themes a small {display: block;color: #fff;font-size: 10px;margin-bottom: 2px} #zero {background-size: 75%;background-attachment: fixed} #zero .box {display: block} #zero .item {display: block;width: 100%;margin-bottom: 40px;flex:none} #zero .item .content img {width: 200px;height: 248px} } /* ====== sub-zero ====== */ .sub-zero {padding: 100px 0 100px 0} .sub-zero .col .element-img {height: 400px;width: 400px;padding:0;display: inline-block;vertical-align: center} .sub-zero .col .element-img img {width: 350px;height:330px} .sub-zero .col .element-text {padding: 20px;width: calc(100% - 400px);display: inline-block;vertical-align: center} .sub-zero .col .element-text p {text-align: justify} @media (max-width:1024px){ .sub-zero {padding: 80px 0 25px 0} .sub-zero .col .element-img {width: 100%;height: auto;text-align: center;margin-bottom: 40px} .sub-zero .col .element-img img {width: 250px;height:236px} .sub-zero .col .element-text {width: 100%;padding: 0;text-align: center} .sub-zero .col .element-text p {text-align: center} } /* ====== SECTION 2 ====== */ #section2 {text-align: center;background: #f1f1f1 url("../img/decoratrice-interieur-charlotte-gourdon.webp") no-repeat center;background-attachment: fixed;background-size: cover} #section2.papeterie {text-align: center;background: #f1f1f1 url("../img/papeterie-cadeaux.webp") no-repeat center;background-attachment: fixed;background-size: cover} #section2 h2 {color: #fff;mix-blend-mode: difference} .grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 40px;margin-bottom: 100px} .grid .column .element {height: 100%;background: rgba(255,255,255,.8);padding: 0px 50px;margin-top: 20px;box-shadow: 0 0 20px rgba(66, 66, 66, .05);border-radius: 15px;transition: all 0.2s linear} #section2.papeterie .grid .column .element {padding: 50px} .grid .column .element.elem2 {margin-top: 60px} .grid .column .element img {height: 150px;width: 167px;margin: 60px 0 20px 0} #section2.papeterie .grid .column .element img {margin: 20px 0 20px 0} .grid .column .element h3 {margin-bottom: 20px} .grid .column .element a {display: inline-block;margin-top: 30px;padding: 20px;color: #CDA274;font-size: 13px;font-weight: 600;text-transform: uppercase;text-decoration: underline;text-underline-offset: 10px;text-decoration-color: #CDA274;text-decoration-thickness: 1px} .grid .column .element a:hover {color: #919191;text-decoration-color: rgba(0, 0, 0, 0)} .grid .column .element:hover {background: rgba(255,255,255,.99)} @media (max-width:1366px){ .grid {grid-gap: 20px} .grid .column .element {padding: 0px 20px} } @media (max-width:1024px){ #section2 {background-attachment: scroll;background: #f1f1f1} .grid {display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin-bottom: 0px} .grid .column .element.elem2 {margin-top: 40px} .grid .column .element.elem3 {margin-top: 60px} } @media (max-width:768px){.grid {display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 10px}} /* ====== FLEX ====== */ #section3 {background: #fff url("../img/bg-1.webp") no-repeat center;background-attachment: fixed} .flex {display: flex;text-align: justify;text-align-last: left} .flex .flex-item {flex: 1;} .flex .flex-item.left {padding-right: 80px} .flex .flex-item.left h3 {margin-bottom: 30px;color: #CDA274;text-align: left} .flex .flex-item.left ul {margin: 30px 0 60px 0} .flex .flex-item.left p strong.prix {color: #CDA274} .flex .flex-item.left p {color: #000} .flex .flex-item.left small.txt {font-size: .9rem;line-height: 1.8;color: #333;border-left: 1px solid #CDA274;display: block;padding-left: 20px} .flex .flex-item.left p.tarif {color: #CDA274} .flex .flex-item.right {margin-top: 27px} .flex .flex-item.right img.one {width: 608px;height: 501px;margin-top: 40px} .flex .flex-item.right .text {display: inline-block;vertical-align: middle} .flex .flex-item.right .text h4{margin: 0;text-transform: uppercase;letter-spacing: 1px} .flex .flex-item.right .text p {color: #000} .flex .flex-item.right .text p.keyword {color: #CDA274;margin: 0px 0 0;line-height: 2;margin-bottom: 20px} .flex .flex-item.right .text .button {margin-top: 2rem} .flex .flex-item.right .text hr {width: 100%;height: 1px;border: none;background: #d6b981;margin: 40px auto 40px auto} .flex p {color: #5c5a5b} @media (max-width:1024px){#section3 {background-size: 75%;background-attachment: fixed}.grid2 {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px}} @media (max-width:768px){.grid2 {display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 10px}} @media (max-width:1366px){ .flex .flex-item {flex: 1} .flex .flex-item.left {width: 60%;padding-right: 80px} .flex .flex-item.right {width: 40%} .flex .flex-item.left h3{font-size: 1.1rem} .flex .flex-item.left ul li img {width: 18px} } @media (max-width:1365px){ .flex {display: block;width: 90%;margin: 50px auto 0 auto} .flex .flex-item {flex: none;display: block;width: 100%} .flex .flex-item.left {width: 100%;padding: 0;margin-left:0;margin-right: 0;} .flex .flex-item.right {width: 100%} .flex .flex-item.right .text h4 {margin-top: 50px} .flex .flex-item.right img.one {width: 304px;height: 251px;margin: 50px auto 0 auto} .flex .flex-item.right img.two {width: 100%;height: auto;margin: 20px auto 0 auto} } .confiance {margin: 0 auto 65px auto;border-top: 1px solid #999;padding-top: 50px} .confiance.second {border-top:none} .confiance.no-border {border:none;margin-top: 50px} .confiance img {width: 300px;height: 100px;margin-bottom: 20px} .confiance h4 {text-transform: uppercase;letter-spacing: 1px} .confiance a {color: #CDA274} .confiance a:hover {text-decoration: underline;} .grid2 {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin-top: 60px} .grid2 .column .element {height: 100%;padding: 0;text-align: center;background: #fff} .grid3 {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin-top: 60px} .grid3 .column .element {height: 100%;padding: 0;text-align: center;background: #fff} @media (max-width:1366px){ .confiance img {width: 250px;height: 83px} .grid2,.grid3 {display: grid;grid-template-columns: repeat(2, 1fr)} .grid2 .column:nth-child(1), .grid3 .column:nth-child(1), .grid2 .column:nth-child(2), .grid3 .column:nth-child(2) {margin-bottom: 60px} } @media (max-width:1024px){ .confiance {text-align: center;} .grid2,.grid3 {display: grid;grid-template-columns: repeat(1, 1fr)} .grid2 .column:nth-child(1), .grid2 .column:nth-child(2), .grid2 .column:nth-child(3), .grid2 .column:nth-child(4), .grid3 .column:nth-child(1), .grid3 .column:nth-child(2), .grid3 .column:nth-child(3), .grid3 .column:nth-child(4) {margin-bottom: 40px} } /* avis */ #avis {text-align: center;background:url("../img/decoratrice-interieur-blois-orleans-tours.webp") no-repeat center;padding: 100px 0;border-radius: 25px;background-attachment: fixed;background-size: cover} #avis img.logo {width: 500px;height: 202px} #avis p.icon-text, #avis h2 {color: #eddfcf} #avis ul {display: flex;height: 100%;margin-top: 60px} #avis ul li {flex: 1;padding: 20px 0} #avis ul li .item {display: block;width: 100%;padding: 50px 0 80px 0} #avis ul li .item.item-1 {background: #CDA274;height: 100%;border-radius: 15px 0 0 15px} #avis ul li .item.item-1 strong {display: block;font-size: 7rem;color: #fff} #avis ul li .item.item-1 .liste-etoile {display: block;margin-bottom: 60px} #avis ul li .item.item-1 img.etoile {width: 132px;height: 24px} #avis ul li .item.item-1 img.google {width: 30px;height: 30px} #avis ul li .item.item-1 a {background: #fff;color: #CDA274;text-shadow:none} #avis ul li .item.item-1 a:hover {color: #333} #avis ul li .item.item-2, #avis ul li .item.item-3 {padding-top: 80px} #avis ul li .item.item-2 {background:rgba(255,255,255,.8);height: 100%} #avis ul li .item.item-3 {background:rgba(255,255,255,.8);border-left: 1px solid #DDDDDB;height: 100%;border-radius: 0 15px 15px 0} #avis ul li .item.item-2 h5, #avis ul li .item.item-3 h5 {font-size: 1.2rem;margin-bottom: 20px} #avis ul li .item.item-2 p.small, #avis ul li .item.item-3 p.small {padding: 0 40px;font-style: italic;color: #666} #avis ul li .item.item-2 img.etoile, #avis ul li .item.item-3 img.etoile {width: 70px;height: 13px;margin-top: 20px} #avis ul li .item.item-2 p small, #avis ul li .item.item-3 p small {font-weight: 700} #avis ul li .item.item-2 p small span, #avis ul li .item.item-3 p small span {color: #999;font-weight: 400} @media (max-width:1920px){#avis ul li .item.item-1 strong {font-size: 6rem}} @media (max-width:1366px){ #avis ul li .item.item-2 p.small, #avis ul li .item.item-3 p.small {padding: 0 45px} } @media (max-width:1024px){ #avis img.logo {display: none} #avis ul {display: block;height: 100%;width: 92%;margin: 0px auto 0 auto;} #avis ul li .item.item-1,#avis ul li .item.item-2,#avis ul li .item.item-3 {border-radius: 15px;} #avis ul li .item.item-1 {background: #CDA274;height: 100%;padding: 50px 0;} #avis ul li .item.item-1 .liste-etoile {margin-bottom: 40px} #avis ul li .item.item-1 img.google {width: 20px;height: 20px} #avis ul li .item.item-1 strong {font-size: 5rem} #avis ul li .item.item-2, #avis ul li .item.item-3 {padding: 50px 0 20px 0;} #avis ul li .item.item-2 p.small, #avis ul li .item.item-3 p.small {padding: 0 40px} #avis ul li .item.item-3 {border-left: none} } /* ====== Footer ====== */ footer .bottom {padding: 50px 0;margin-top: 50px} footer .bottom img {margin-left: 0px} footer .bottom .widget {display: inline-block;width: 25%;vertical-align: top} footer .bottom .widget h6 {font-size: 16px;color: #000;font-weight: 600;margin-bottom: 20px} footer .bottom .widget p {font-size: 14px;color: #909090} footer .bottom .widget a {color: #CDA274;text-decoration: underline;text-underline-offset: 2px;} footer .bottom .widget a:hover {text-decoration: none} footer .bottom .widget a.item {color: #CDA274} footer .copyright {text-align: center;font-size: .8rem;background: #333;color: #f1f1f1;padding: 10px 5%;letter-spacing: 0px;line-height: 1.8;} footer .copyright a {color: #CDA274;text-underline-offset: 2px;text-decoration: underline} footer .copyright span {color: #CDA274} @media (max-width:1366px){ footer .bottom .widget.widget4 a {font-size: 11px} } @media (max-width:1023px){ footer .bottom {padding: 0 0 50px 0;width: 90%;margin:0px auto 0 auto;text-align: center} footer .bottom .widget {display: block;width: 100%;margin-top: 50px;} footer .bottom img {margin-left: 50px} footer .bottom .widget h6 {margin-bottom: 10px} } /* ====== MENTIONS LEGALES ====== */ .mentions-legales {background: #151515;display: flex;flex-direction: column;height: 100%;align-self: center;align-items: center;justify-content: top} .mentions-legales .container {margin: 50px 0} .mentions-legales a.retour {font-size: 1.2rem;color: #CDA274;border: 1px solid #CDA274;opacity: .9;padding: 18px 40px 20px 40px;float:right} .mentions-legales h1 {color: #CDA274;margin-bottom: 40px} .mentions-legales p {color: #eddfcf} .mentions-legales p strong {color: #fff} .mentions-legales a {color:#CDA274} /* ====== 404 ====== */ .erreur404 {background: #151515;display: flex;flex-direction: column;height: 100vh;align-self: center;align-items: center;justify-content: center;text-align: center} .erreur404 h1 {font-size: 5rem;color: #CDA274} .erreur404 h2 {font-size: 2rem;color:#fff;margin-bottom: 150px} .erreur404 a {font-size: 1.2rem;color: #CDA274;border: 1px solid #CDA274;opacity: .9;padding: 18px 40px 20px 40px} /* ========== hero ========== */ .hero {clear: both;margin: 0 auto} .hero-cell {width: 100%;height: auto;padding: 120px 0 50px 0;border-radius: 15px;position: relative;background: #eddfcf url("../img/bg-2.webp") no-repeat center;background-size: 50%} .hero-cell .text {margin: 0;text-align: center;width: 100%} .hero-cell .text h1 {color:#322A2A;} .hero-cell .text h2 {margin-bottom: 20px;color:#CDA274;font-weight: 400} .hero-cell .text p {margin: 0 auto 40px auto;width: 45%} .hero-cell .text a {display: inline-block;} @media (max-width:1024px){ .hero-cell {padding: 80px 0 50px 0} .hero-cell .text h1 {padding: 0 20px} .hero-cell .text p {width: 80%} } @media (max-width:680px){ .hero-cell .text h1, .hero-cell .text h1.small {font-size: 34px;line-height: 1.15} } /* ========== sub-hero ========== */ .sub-hero {padding: 100px 0} .sub-hero .titre {margin-bottom: 0;} .sub-hero .col {display:flex;align-items:center} .sub-hero .col .element-img {width: 500px;padding:0;display:block} .sub-hero .col .element-img img {width: 450px;height:100%;min-height:360px;object-fit:cover;border-radius:15px} .sub-hero .col .element-text {padding: 20px;width: calc(100% - 500px);display:block} .sub-hero .col .element-text p {text-align: justify} @media (max-width:1366px){ .sub-hero .col .element-img {width: 400px} .sub-hero .col .element-img img {width: 350px} .sub-hero .col .element-text {padding: 0px;width: calc(100% - 400px)} } @media (max-width:1024px){ .sub-hero {padding: 80px 0 25px 0} .sub-hero .col {display:block} .sub-hero .col .element-img {width: 100%;height: auto;text-align: center;margin-bottom: 40px} .sub-hero .col .element-img img {width: 250px;height:auto;min-height:0;object-fit:initial} .sub-hero .col .element-text {width: 100%;padding: 0;text-align: center} .sub-hero .col .element-text p {text-align: center} } .wedding-region {background:#fff;text-align:center} .wedding-region .titre p, .service-region .titre p, .wedding-process .titre p {max-width:850px;margin:0 auto;color:#504242} .region-grid, .process-list {display:grid;gap:22px} .region-grid {grid-template-columns:repeat(3, 1fr)} .process-list {grid-template-columns:repeat(4, 1fr)} .process-list article {background:#eddfcf;border-radius:10px;padding:32px;text-align:left} .region-grid article h3, .process-list article h3 {color:#322A2A;margin-bottom:14px;line-height:1.35} .region-grid article p, .process-list article p {color:#504242} .wedding-process {background:#f8f3ee;text-align:center} .process-list article span {display:inline-block;color:#CDA274;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:16px} @media (max-width:1024px){ .region-grid, .process-list {grid-template-columns:1fr} .region-grid article, .process-list article {padding:24px;text-align:center} } .service-region {background: #eddfcf url("../img/bg-3.webp") no-repeat center;background-attachment: fixed;text-align:center} .region-grid article {background:rgba(255,255,255,.5);border-radius:10px;padding:32px;text-align:left} /*! Flickity v2.3.0 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled {position: relative} .flickity-enabled:focus {outline: none} .flickity-viewport {overflow: hidden;position: relative;height: 100%} .flickity-slider {position: absolute;width: 100%;height: 100%} /* draggable */ .flickity-enabled.is-draggable {-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .flickity-enabled.is-draggable .flickity-viewport {cursor: move;cursor: -webkit-grab;cursor: grab} .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing;cursor: grabbing} /* ---- flickity-button ---- */ .flickity-button {position: absolute;background: hsla(0, 0%, 100%, 0.75);border: none;color: #333} .flickity-button:hover {background: white;cursor: pointer} .flickity-button:focus {outline: none;box-shadow: 0 0 0 5px #19F} .flickity-button:active {opacity: 0.6} .flickity-button:disabled {opacity: 0.3;cursor: auto;pointer-events: none} .flickity-button-icon {fill: currentColor} /* ---- previous/next buttons ---- */ .flickity-prev-next-button {top: 50%;width: 44px;height: 44px;border-radius: 50%;transform: translateY(-50%)} .flickity-prev-next-button.previous {left: 10px} .flickity-prev-next-button.next {right: 10px} /* right to left */ .flickity-rtl .flickity-prev-next-button.previous {left: auto;right: 10px} .flickity-rtl .flickity-prev-next-button.next {right: auto;left: 10px} .flickity-prev-next-button .flickity-button-icon {position: absolute;left: 20%;top: 20%;width: 60%;height: 60%} /* ---- page dots ---- */ .flickity-page-dots {position: absolute;width: 100%;bottom: -25px;padding: 0;margin: 0;list-style: none;text-align: center;line-height: 1} .flickity-rtl .flickity-page-dots {direction: rtl} .flickity-page-dots .dot {display: inline-block;width: 10px;height: 10px;margin: 0 8px;background: #333;border-radius: 50%;opacity: 0.25;cursor: pointer} .flickity-page-dots .dot.is-selected {opacity: 1} @media (max-width:1024px){.sub-hero img.element-img {width: 100%;height:640px}} .lastproject {width: 100%;background: #131c25;padding: 80px 0;background: #131c25} .lastproject .titre strong {color:#CDA274} .lastproject .titre h2 {color:#fff;margin-top: 10px} .lastproject .titre p {color: #eddfcf} .lastproject .desc {width: 35%;padding: 0;display: inline-block;vertical-align: middle;border-radius: 25px} .lastproject .carousal {clear: both;width: 60%;display: inline-block;margin-left: 5%;vertical-align: middle} .lastproject .carousal-cell {width: 100%;height: 500px;margin-right: 10px;border-radius: 25px;position: relative;background: #eddfcf} .lastproject .carousal-cell.one {background:url(../img/projets/gite-sologne/decoration-gite-sologne-1.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.two {background:url(../img/projets/gite-sologne/decoration-gite-sologne-2.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.three {background:url(../img/projets/gite-sologne/decoration-gite-sologne-3.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.four {background:url(../img/projets/gite-sologne/decoration-gite-sologne-4.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.five {background:url(../img/projets/gite-sologne/decoration-gite-sologne-5.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.six {background:url(../img/projets/gite-sologne/decoration-gite-sologne-6.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.seven {background:url(../img/projets/gite-sologne/decoration-gite-sologne-7.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.eight {background:url(../img/projets/gite-sologne/decoration-gite-sologne-8.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.nine {background:url(../img/projets/gite-sologne/decoration-gite-sologne-9.webp) no-repeat center;background-size: cover} .lastproject .carousal-cell.ten {background:url(../img/projets/gite-sologne/decoration-gite-sologne-10.webp) no-repeat center;background-size: cover} .lastproject.event .carousal-cell.one {background:url(../img/projets/mariage-laura-matthieu/mariage-1.webp) no-repeat center;background-size: cover} .lastproject.event .carousal-cell.two {background:url(../img/projets/mariage-laura-matthieu/mariage-2.webp) no-repeat center;background-size: cover} .lastproject.event .carousal-cell.three {background:url(../img/projets/mariage-laura-matthieu/mariage-3.webp) no-repeat center;background-size: cover} .lastproject.event .carousal-cell.four {background:url(../img/projets/mariage-laura-matthieu/mariage-4.webp) no-repeat center;background-size: cover} .lastproject .carousal .flickity-page-dots .dot {display: inline-block;width: 10px;height: 10px;margin: 0 8px;background: #CDA274;border-radius: 50%;opacity: 0.25;cursor: pointer} .lastproject .carousal .flickity-page-dots .dot.is-selected {opacity: 1} @media (max-width:1024px){ .lastproject .desc {width: 100%;text-align: center;} .lastproject .carousal {margin: 0 auto;width: 100%;margin-left: 0%} .lastproject .carousal-cell {margin: 0 auto;width: 100%} } #parallax {text-align: center;background:url(../img/decoratrice-mariage-blois-orleans-tours.webp) no-repeat center;padding: 100px 0;border-radius: 25px;background-attachment: fixed} #parallax.wedding-callout {background-image:url(../img/charlotte-gourdon-wedding-planner.webp)} #parallax p {background:rgba(255,255,255,.8);padding: 80px;border-radius: 25px;margin-top: 50px} @media (max-width:1024px){ #parallax {background-attachment: scroll} #parallax p {padding: 60px 40px} } /* ====== PRESTATIONS ====== */ #prestations {text-align: center} #prestations .titre {margin-bottom: 50px} #prestations .titre h2 {margin-top: 10px;} #prestations .titre p {max-width: 750px;margin: 0 auto} #prestations .box {display: flex;overflow: hidden;margin-bottom: 40px;} #prestations.mariage .box {display: grid;grid-template-columns: 1fr 1fr;gap:40px} #prestations .item {flex: 1;text-align: center;padding: 0 20px} #prestations.mariage .item {padding: 0} #prestations .item .content {background: #eddfcf;border-radius:10px;overflow:hidden;height:100%} #prestations .item .content img {max-width: 100%} #prestations .item .content .text {padding: 20px 0 50px 0} #prestations .item .content h3 {margin: 20px 0} #prestations .item .content hr {width: 50px;height: 3px;border: none;background: #CDA274;margin: 20px auto} #prestations .item .content p,#prestations .item .content small.opt {padding: 0 20px} #prestations .item .content p span {font-weight: 700;color:#CDA274;font-size:10px} #prestations .item .content strong {background: rgba(255,255,255,.75);padding: 20px;display: inline-block;margin-top: 30px;} #prestations.wedding .item .content p {padding-bottom: 40px} @media (max-width:1024px){ #prestations.mariage .box {grid-template-columns: 1fr;gap:20px} #prestations .box {display: block;margin-bottom: 0px} #prestations .item {flex: none;display: block;width:100%;margin:0 auto 50px auto} } /* ====== INFOS & CONTACT ====== */ #contact {width:100%;padding: 0;background: #eddfcf;text-align: center;position: relative;margin-top: 0px} #contact .content {padding: 150px 0 50px 0;text-align: center;background: #eddfcf url("../img/bg-2.webp") no-repeat center;margin-bottom: 0px;background-size: 50%} #contact .content h1 {color:#322A2A} #contact .footer {display: flex;margin-top: 40px} #contact .left {flex: 1;width: 50%;padding-right: 5%} #contact .left .titre {text-align: left} #contact .left .titre h3 {color:#504242} #contact .left .titre h3::before {content: '';height: 5px;width: 50px;background: #504242;position: absolute;margin:60px auto 0 auto} #contact .left .titre p {padding-top:60px;color: #504242} #contact .left ul {margin-top: 40px;margin-bottom: 70px;text-align: left} #contact .left ul li {margin-bottom: 30px} #contact .left ul li a {color: #151515;display: block} #contact .left ul li a picture {width: 50px;height: 50px;display: inline-block;vertical-align: middle;background-color: #d3af86;border-radius: 50%} #contact .left ul li a img {width: 30px;height: 50px;margin-left: 10px;margin-top: 0px} #contact .left ul li a p{display: inline-block;vertical-align: middle;margin-left: 20px;line-height: 1.5;transition: all .2s} #contact .left ul li a:hover p {text-decoration: underline} #contact .left p.small {font-size: 15px;text-align: left;color: #504242} #contact .right {flex: 1;width: 50%} #contact .right .formulaire {width :100%;text-align: left;display: inline-block;vertical-align: top} #contact .right .formulaire h4 {color:rgba(255,255,255,.9);background: #d3af86;display: inline;padding: 20px 35px;margin:0px 0;display: block;border-radius: 10px;font-weight: 700;font-size: 18px} #contact .right .formulaire h4 small {font-weight: 300;color: #504242} #contact .right .formulaire form {margin-top: 50px} #contact .right .formulaire form label {display: block;color:#504242;margin-bottom: -10px;margin-top:20px;font-size: 1rem;margin-left: 0%} #contact .right .formulaire form label span {color:#cc3333} #contact .right .formulaire form input[type=text] {border: 1px solid #d3af86;border-radius: 5px;transition:all .2s;background: rgba(255,255,255,.5);font-size: 1rem;width: 100%;padding:12px;margin-left: 0%} #contact .right .formulaire form input[type=text]:focus {border: 1px solid #fff;outline: none;background: rgba(255,255,255,.8)} #contact .right .formulaire form textarea {padding: 12px;border: 1px solid #d3af86;border-radius: 5px;background: rgba(255,255,255,.5);font-size: 1rem;box-sizing: border-box;max-width: 100%;margin-left: 0%;transition:all .2s;} #contact .right .formulaire form textarea:focus {border: 1px solid #fff;background: rgba(255,255,255,.8);outline: none} #contact .right .formulaire .button {color: rgba(255,255,255,.9);background: #504242;display: block;width: 100%;border: 1px solid #504242;border-radius: 10px;padding: 20px 40px;font-size: 16px;font-weight:900;text-transform: uppercase;margin-top: 60px;transition:all .2s} #contact .right .formulaire .button:hover {color: #d3af86;background: #000;cursor: pointer} #ajaxResponseFail {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #cc3333;border-radius: 3px;background: #ffcccc;color:#cc3333} #ajaxResponseSuccess {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #669933;border-radius: 3px;background: #ccff99;color:#669933} #ajaxResponseFail a {color:#cc3333;font-size: 1.1rem} #contact .suivez {text-align: left;margin-top: 80px} #contact .suivez .titre {margin-bottom: 80px} #contact .suivez a {margin-right:10px;transition:all .2s} #contact .suivez a img{width: 40px;height: 40px;padding: 0px} @media (max-width:1366px){#contact .content {padding: 80px 0 50px 0}} @media (max-width:1024px){ #contact .left ul li a picture {width: 25px;height: 25px} #contact .left ul li a img {width: 20px;height: 25px;margin-left: 3px} #contact .left ul li a p {margin-left: 2px} #contact .footer {display: block} #contact .left,#contact .right {width: 100%} #contact .right .formulaire {margin-top: 50px;width: 100%;display: block} } @media (max-width:768px){ #contact .content {padding: 80px 0 40px 0;margin-bottom: 0px} #contact .content h1 {font-size: 9vw} } .map{width:100%;display:inline-block;vertical-align:top;margin:10vh 0;border-radius:10px;overflow:hidden;background:#fff} #map{height:500px;position:relative;width:100%;border-radius:10px;z-index:1} #map .leaflet-tile {filter: grayscale(100%) contrast(95%) brightness(105%)} #map .leaflet-top,#map .leaflet-bottom.leaflet-right {z-index:900} #map .leaflet-control-attribution {font-size:10px} @media (max-width:768px){ #map {height:380px} } /* ====== LOCATION / PORTFOLIO ====== */ #section-gallery {text-align: left;padding-bottom: 80px;background: #eddfcf url("../img/bg-3.webp") no-repeat center;background-attachment: fixed} #section-gallery .title .content {padding: 100px 0 40px 0;background: url("../img/bg-2.webp") no-repeat center;margin-bottom: 0px;background-size: 50%;background-position: 0% 50%} #section-gallery .title .content h1 {color:#322A2A} #section-gallery.catalogue-location .title .content p {max-width: 900px} #section-gallery.catalogue-location .catalogue-actions {margin-top: 40px} #section-gallery.catalogue-location .catalogue-actions a {display: inline-block;margin-right: 15px;margin-bottom: 15px} .pdf-viewer {background: #fff;border-radius: 15px;padding: 20px;box-shadow: 0 0 20px rgba(66, 66, 66, .05);margin-bottom: 80px} .pdf-viewer object {width: 100%;height: 78vh;min-height: 720px;border: 0;border-radius: 10px;background: #333} .pdf-viewer p {padding: 40px;text-align: center} .pdf-viewer a {color:#CDA274;text-decoration: underline} #section-gallery .list-button {display: block;margin-bottom: 40px;background: #fff} #section-gallery .list-button a {padding:20px;font-weight: 700;border-radius: 0;background: transparent;text-align: left;background: #fff;color:#322A2A;transition: all 0.3s;border-right: 0px solid rgba(211,175,134,.75);display: inline-block} #section-gallery .list-button a:hover {cursor: pointer;background: rgba(211,175,134,.75);color:#fff} #section-gallery .list-button a:hover small{color:#322A2A;transition: all 0.3s} #section-gallery .list-button a.active {background: #d3af86;color:#fff} #section-gallery .list-button a.active:hover {opacity: 1} #section-gallery .list-button a small {color:#d3af86;transition: all 0.3s} #section-gallery .list-button a.active small {color:#322A2A;;transition: all 0.3s} .content-gallery.multi {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin-bottom:80px} .lightgallery.single {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin-bottom:80px} .lightgallery .galerie-item {height: 100%;padding: 0;transition: all 0.3s} .lightgallery .galerie-item.display {display: none} .lightgallery .galerie-item img {width: 100%;border-radius: 15px 15px 0 0;transition: all 0.3s} .lightgallery .galerie-item.single img {border-radius: 15px} .lightgallery .galerie-item h5 {background: #fff;padding: 15px 20px;margin-top: -4px;border-radius: 0 0 15px 15px;font-weight: 600;transition: all 0.3s} .lightgallery .galerie-item h5 small {color:#d3af86;text-transform: uppercase;transition: all 0.3s} .lightgallery .galerie-item:hover {cursor: pointer} .lightgallery .galerie-item:hover img {opacity: .75} .lightgallery .galerie-item:hover h5 {background: rgba(211,175,134,.75);color:#fff} .lightgallery .galerie-item:hover h5 small {color:#322A2A} @media (max-width:1024px){ #section-gallery .title .content {padding: 50px 0 40px 0} #section-gallery.catalogue-location .catalogue-actions a {width: 100%;margin-right: 0;text-align: center} .pdf-viewer {padding: 10px;border-radius: 10px} .pdf-viewer object {height: 70vh;min-height: 520px} #section-gallery .list-button {width: 100%} #section-gallery .list-button a {padding:10px 20px;width: 100%} .lightgallery.single {grid-gap: 10px;grid-template-columns: repeat(3, 1fr)} .content-gallery.multi {grid-gap: 10px;grid-template-columns: repeat(3, 1fr)} } @media (max-width:680px){ .lightgallery.single {grid-template-columns: repeat(2, 1fr)} .content-gallery.multi {grid-template-columns: repeat(2, 1fr)} } .portfolio-social {margin-bottom: 30px} .portfolio-social p {margin: 0} .portfolio-social a {display: inline-flex;align-items: center;gap: 5px;text-decoration: none;color: #1c1c1c; vertical-align: middle;font-weight: 700;} .portfolio-social svg {width: 15px;height: 15px;flex: 0 0 auto; position: relative; top: -1px;}