@import url(https://db.onlinewebfonts.com/c/8922aedb2c18008da7daf4f93fd60bdc?family=Calibri+Light); @font-face { font-family: "Calibri Light"; src: url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.eot"); src: url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.woff") format("woff"), url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/8922aedb2c18008da7daf4f93fd60bdc.svg#Calibri Light") format("svg"); } /* Réinitialisation des styles de base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; /* Réinitialisation de la largeur minimale */ font: inherit; /* Héritage de la police de caractères */ } /* Styles spécifiques au corps (``) */ body { min-height: 100vh; /* Utilisation de `vh` pour la hauteur minimale */ } h1, h2, h3, h4 { text-wrap: balance !important; } p { text-wrap: pretty !important; } .ms-jane { margin-left: -0.75em !important; } testStudio { margin-top: 100px !important; } .ms-jane { font-weight: 600 !important; } .bg-jane-100 { background-color: #efeae4; } .jane-color { /* color: #592607 !important; */ text-shadow: 20px #0000; } .studio-jane { background-color: #efeae46a; } .back-jane { background-color: #efeae4; } .kane-jane { background-color: #efeae4; } .galeri-jane { margin-bottom: 75px; } .col-jane-interieur { border: 5px solid #3b312586; width: 500px; height: 650px; margin: 3%; } .container-jane { display: flex; justify-content: center; align-items: center; } .contener { display: flex; justify-content: center; align-items: center; } .image-jane { margin: 2px; object-fit: cover; width: 100%; height: 512px; } .top-jane { margin-top: 5%; } .jane-bottom { margin-bottom: 100px; } .projet-jane { padding: 8rem !important; } .bg-jane { background-color: #efeae4; } .bg-texte-jane { font-size: 15px; font-weight: 200; text-transform: uppercase; text-align: center; } .text-jane { text-align: center; } .text-catalogue-jane { color: #222222; } .text-p-jane-studio { font-size: 30px !important; margin-bottom: 8%; letter-spacing: 1; width: 500px; color: #222222 !important; font-family: "Calibri Light" !important; line-height: 1.5; text-wrap: pretty !important; } .align-text { display: grid; place-items: center; } .text-p-jane { /* font-size: 30px !important; */ text-align: center; margin-bottom: 8%; letter-spacing: 1; /* width: 600px; */ color: #222222 !important; font-family: "Calibri Light" !important; line-height: 1.5; text-wrap: pretty !important; } .text-jane-description { color: #222222; } .about-text { margin: 0px 7px 40px; font-size: 80px; font-family: "Calibri Light" !important; line-height: 1.5; text-transform: uppercase; } .about-text-2 { font-size: 40px; font-family: "Calibri Light" !important; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; } .about-paragraphe { font-size: 20px; line-height: 1.5; } .bordue-jane { padding: 9%; } .contact-section { margin-bottom: 120px !important; } .jane-button { margin: 20px 0 0px; display: flex; justify-content: space-between; text-transform: uppercase; } .about-paragraphe { padding: 5%; border-radius: 10px; } .card-jane { background-color: #eddbcd !important; } .jane-zoom-wrapper { height: 500px; overflow: hidden; } .jane-zoom-wrapper img { object-fit: cover; transition: transform 0.8s; height: 100%; cursor: pointer; } .jane-zoom-wrapper:hover img { transform: scale(1.2); } .jane-img { /* margin-top: 100px; */ border-radius: 15px; width: 70%; } .bg-jane-expo { background-color: #f3f3f3; } .jane-img-bg { background: linear-gradient( 90deg, rgba(200, 174, 149, 1) 0%, rgb(235, 220, 207) 100%, rgb(235, 220, 207) 100% ); } .jane-img-bg-1 { background-color: #f4f4f4; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-60px); } 100% { transform: translateY(0px); } } .bg-chaise { background-color: #f3f3f3; } .ddisplay-jane { font-size: 28px; font-weight: 300; line-height: 1.2; } .rounder-jane { font-family: "Calibri Light" !important; font-size: 75px; font-weight: 500; line-height: 1.2; color: #f3f3f3; text-transform: uppercase; } .me-jane { margin-left: auto !important; } .link-jane { line-height: 1.2; } .navbar .link-jane { font-size: 25px; color: black !important; } .text-jane { font-size: 27px !important; text-align: left; color: #222222 !important; font-family: "Calibri Light" !important; line-height: 1.5; } .text-font-jane { font-family: "Calibri Light" !important; text-transform: uppercase; line-height: 1.2; font-weight: 800; } .jane-article { font-size: 35px; font-family: "Calibri Light" !important; } .top-jane-about { margin-top: 30%; } .jane-calibri { font-family: "Calibri Light" !important; font-size: 35px; line-height: 1.2; font-weight: 900; } .images-jane-slider { width: 100%; height: 100%; max-width: 250%; object-fit: cover; margin-left: 70%; } /* carousel */ /* Styles for the carousel container */ /* Styles for the carousel container */ .carousel-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* padding-bottom: 50px; */ } /* Styles for the carousel */ .carousel { width: 100%; height: 100%; position: relative; overflow: hidden; /* background-color: #222222; */ } /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */ @media screen and (max-width: 1020px) { .carousel-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .carousel { width: 100%; height: 132%; position: relative; overflow: hidden; /* background-color: #222222; margin-right: 0%; */ } .carousel-text { position: sticky; bottom: 0; text-align: left; color: #f4f4f4; font-size: 50px !important; letter-spacing: 2px; text-transform: uppercase; font-family: "Calibri", sans-serif !important; animation: slide-in 0.5s ease-in-out forwards; } .text-p-jane-studio { font-size: 23px !important; margin-bottom: 8%; letter-spacing: 1; width: 360px; color: #222222 !important; font-family: "Calibri Light" !important; line-height: 1.5; text-align: center; text-wrap: pretty !important; } .text-center-2 { display: grid; place-items: center; } .img-jane-view { width: 100% !important; } nav { width: 100% !important; } .text-apropos-2 { font-size: 1.3em !important; } .mt-5 { margin-top: 5% !important; } } .text-center-grid { display: grid; place-items: center; } .marge { margin-top: 1%; } /* .bg-carousel { padding-top: 50px; background-color: #222222; } */ .text-jane-black { color: #fff; } .color-nav-jane { color: #fff !important; } .carousel-slide.active { display: block; opacity: 1; /* Définir l'opacité à 1 pour montrer l'image */ z-index: 1; /* Assurer que l'image est au-dessus des autres */ } .carousel-img { width: 100%; height: 100%; object-fit: cover; } .carousel-text { position: sticky; bottom: 0; text-align: center; background-color: #222222ae; color: #c9af97; width: 100%; font-weight: 100; font-size: 47px; letter-spacing: 1px; text-transform: uppercase; font-family: "Calibri", sans-serif !important; animation: slide-in 0.5s ease-in-out forwards; } @keyframes slide-in { from { left: -100%; } to { left: 20px; } } .carousel-slide { width: 100%; height: 100%; position: absolute; transition: opacity 1.5s ease-in-out; right: 0; opacity: 0; /* Définir l'opacité initiale à 0 */ } .carousel-slide.active { opacity: 1; /* Lorsque la classe active est appliquée, définir l'opacité à 1 */ display: block; } .bg-cover-jane { background-color: #222222; background-position: center; } .custom-alert { position: relative; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 10px 15px; border-radius: 5px; margin-bottom: 20px; } .alert-content { display: flex; justify-content: space-between; align-items: center; } .close-button { background: none; border: none; cursor: pointer; font-size: 20px; font-weight: bold; color: #155724; } .banner-jane::before { content: ""; position: absolute; top: 120px; left: 0; width: 100%; height: 610px; background-color: #8482757e; backdrop-filter: blur(1px); } .titre-bannier { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -90%); color: #ffff; font-size: 85px; font-family: "Open Sans", sans-serif; font-weight: 800; text-align: center; } .grid_container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 600px; gap: 2em; } .gallery-jane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: relative; } .details-btn-jane { display: inline-flex; align-items: center; /* Alignement vertical au centre */ justify-content: center; /* Alignement horizontal au centre */ margin-right: 10px; } .btn-jane-chaise { background-color: #222222 !important; color: #f4f4f4 !important; font-size: 22px; border-radius: 8px !important; width: 400px; height: 70px; } .btn-jane-chaise:hover { background-color: #f4f4f4 !important; color: #222222 !important; border: 1px solid #222222 !important; font-size: 22px; border: 1px solid #222222; border-radius: 8px !important; width: 400px; height: 70px; transition: all 0.5s ease 0s; } @media screen and (max-width: 1020px) { .btn-jane-chaise { background-color: #222222 !important; color: #f4f4f4 !important; font-size: 22px; border-radius: 8px !important; width: 300px; height: 70px; } .btn-jane-chaise:hover { background-color: #f4f4f4 !important; color: #222222 !important; font-size: 22px; border: 1px solid #222222; border-radius: 8px; width: 300px; height: 70px; } .details-btn-jane { display: flex; align-items: center; justify-content: center; } .jane-team .pic-jane { border-radius: 50%; background: #222222; padding: 30px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; width: 70%; height: 70%; transition: all 0.5s ease 0s; } .body-team-jane { height: 850px !important; } .size-apropos { text-align: center; font-size: 7vw !important; letter-spacing: 1px; } .text-3d { text-align: center; } .text_3d_2 { text-align: center; color: #222222; } .container-respond { margin-top: 40%; } } .btn-jane-chaise-2 { background-color: #f4f4f4 !important; color: #222222 !important; font-size: 22px; border-radius: 8px !important; width: 400px; height: 70px; } .btn-jane-chaise-2:hover { background-color: #222222 !important; border: 1px solid #f4f4f4 !important; color: #f4f4f4 !important; font-size: 22px; border-radius: 8px; width: 400px; height: 70px; } .text-jane-catealogue { margin-top: 10%; text-transform: uppercase; letter-spacing: 0.5px; color: #222222; text-align: start !important; } .details-positon-jane { display: flex; align-items: center; justify-content: center; font-size: 80px; font-weight: 80; color: #343a40; font-family: "Calibri", sans-serif !important; text-transform: uppercase; } .margin-jane-text { margin: 3%; align-items: end; font-size: 25px; } .details-jane-carousel { background-color: #efeae4; border-radius: 10px; } .margin-details-jane { padding-top: 50px; } .image-jane-center { padding-top: 15%; display: flex; justify-content: center; align-items: center; } /* CAROUSEL */ .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/img-bg.jpg"); width: 100%; height: 850px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero-image-2 { width: 100%; height: 500px; background-position: center; background-repeat: no-repeat; background-size: contain; background-attachment: fixed; position: relative; } .hero-image-3 { width: 100%; height: 600px; object-fit: contain; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; } .hero-image-4 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/ja/JoeleA.jpg"); width: 100%; height: 500px; background-position: center; background-repeat: no-repeat; background-size: contain; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f4f4f4; } .hero-text-about { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #222222; font-family: "Calibri light" !important; font-weight: 100 !important; letter-spacing: 1px; } .hero-text-about-2 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f4f4f4; font-family: "Calibri light" !important; font-weight: 100 !important; letter-spacing: 1px; } /* gallery */ .gallery-image { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; /* Utilisez "space-between" pour répartir les images sur chaque ligne */ } .img-box { box-sizing: content-box; margin: 10px; height: 550px; width: calc( 33.333% - 20px ); /* Utilisez calc pour définir la largeur de chaque image */ overflow: hidden; display: inline-block; color: white; position: relative; background-color: white; } @media (max-width: 1200px) { .img-box { width: calc( 50% - 20px ); /* Deux images par ligne sur les écrans de moins de 1200px */ } .text-for-img { font-size: 19px !important; font-weight: 500; letter-spacing: 5px !important; font-family: "Calibri Light" !important; text-transform: uppercase; } } @media (max-width: 768px) { .img-box { width: calc( 100% - 20px ); /* Une image par ligne sur les écrans de moins de 768px */ } .text-for-img { font-size: 15px !important; font-weight: 500; letter-spacing: 5px !important; font-family: "Calibri Light" !important; text-transform: uppercase; } } .gallery-image img { height: 550px; width: 100% !important; object-fit: cover; transform: scale(1); transition: transform 0.4s ease; } .caption { position: absolute; color: #f4f4f4; bottom: 5px; left: 20px; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .text-for-img { font-size: 25px; letter-spacing: 5px !important; font-family: "Calibri Light" !important; text-transform: uppercase; } .color-opacity { font-size: 1.5em !important; color: #c9af97; } .transparent-box { height: 550px; width: 620px; background-color: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; transition: background-color 0.3s ease; } .img-box:hover img { transform: scale(1.1); } .img-box:hover .transparent-box { background-color: rgba(0, 0, 0, 0.5); } .img-box:hover .caption { transform: translateY(-20px); opacity: 1; } .img-box:hover { cursor: pointer; } .caption > p:nth-child(2) { font-size: 0.8em; } .opacity-low { opacity: 0.5; } /* Carousel pub */ @-webkit-keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } .slider { background: #efeae4; height: 100px; margin: auto; overflow: hidden; position: relative; width: 100%; } .slider::before, .slider::after { background: linear-gradient( to right, #efeae4 0%, rgba(255, 255, 255, 0) 100% ); content: ""; height: 100px; position: absolute; width: 200px; z-index: 2; } .slider::after { right: 0; top: 0; transform: rotateZ(180deg); } .slider::before { left: 0; top: 0; } .slider .slide-track { -webkit-animation: scroll 40s linear infinite; animation: scroll 40s linear infinite; display: flex; width: calc(250px * 14); } .slider .slide { height: 100px; width: 250px; } .text-propos { padding: 8px; font-size: 1.6em; line-height: 1.6; letter-spacing: 0.2px; color: #343a40; text-wrap: balance; } .text-apropos-2 { font-size: 1.7em; } @media (max-width: 1200px) { .jane-media { margin-top: 100px; /* Deux images par ligne sur les écrans de moins de 1200px */ } .text-apropos { font-size: 23px !important; } .text-propos { padding: 18px; font-size: 1.4em; line-height: 1.6; letter-spacing: 0.2px; color: #343a40; text-wrap: balance; } } @media (max-width: 1200px) { .style-text-jane { padding: 5px; font-size: 4.5vw; text-wrap: balance; } .text-jane { font-size: 23px !important; } } .center-apropos { text-align: start; letter-spacing: 1px; margin-bottom: 3%; } .size-apropos { font-size: 3.5em; letter-spacing: 1px; } .text-materiaux-jane { text-transform: uppercase; margin-bottom: 2%; } .center-apropos-2 { text-transform: uppercase; margin-bottom: -5%; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 400px; margin: auto; border-radus: 10px; text-align: center; background-color: #222222; font-family: "Calibri Light" !important; } .title { color: #f4f4f4; font-size: 18px; } .body-team-jane { width: 100%; height: 700px; /* background-color: #343a40; */ } .jane-team { margin-top: 70px; border-radius: 30%; text-align: center; padding: 20px 15px 30px; } .jane-team .pic-jane { border-radius: 50%; background: #f4f4f4; padding: 10px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: all 0.5s ease 0s; } .jane-team:hover .pic-jane { background-color: #f4f4f4; border-radius: 50%; } .pic-jane img { width: 100%; height: auto; border-radius: 50%; } .jane-team .title-team { text-align: center; font-weight: 200; color: #222222; letter-spacing: 1px; font-family: "Calibri Light" !important; text-transform: uppercase; display: block; font-size: 40px; margin: 0 0 7px 0; } .jane-team .post-team { font-family: "Calibri Light" !important; text-align: center; color: #343a40; letter-spacing: 1px; text-transform: capitalize; display: block; font-size: 25px; margin-bottom: 15px; } .jane-team .social { padding: 0; margin: 0; list-style: none; } .jane-team .social li { display: inline-block; margin-right: 5px; } .jane-team .social li a { border-radius: 50%; font-size: 25px; color: #222222; border: 1p solid #c9af9744; display: block; width: 60px; height: 60px; line-height: 60px; transition: all 0.5s ease 0s; } .bg-3d { background-color: #222222; } .text-3d { color: #f3f3f3; } .text-3d-2 { color: #c9af97; } .img-comp-container { position: relative; height: 720px; } .img-comp-img { position: absolute; width: auto; height: auto; overflow: hidden; border-radius: 15px; } .img-comp-img img { border-radius: 15px; display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; width: 40px; height: 40px; background-color: #222222; opacity: 0.7; border-radius: 50%; } .color-text-3d { color: #f4f4f4 !important; } @media screen and (max-width: 1020px) { .container-figure { margin-left: 0 !important; display: flex; align-items: center; justify-content: center; } .pic-jane { margin-right: 100px; } .text-figure { font-size: 7vw !important; text-align: center !important; } .text-figure-deux { text-align: center !important; } .text-p-jane { text-align: center !important; } .buton-center-jane { /* display: grid; place-items: center; */ margin-left: 5%; } } .text-figure { text-transform: uppercase; color: #222222 !important; } .text-figure-deux { text-transform: uppercase; color: #222222 !important; } .objet-figure { width: 100% !important; background: linear-gradient( 90deg, rgba(200, 174, 149, 1) 0%, rgb(235, 220, 207) 100%, rgb(235, 220, 207) 100% ); } .custum-cocotier { border-radius: 15px; } .img-contact-position { width: 100%; height: 400px; display: grid; place-items: center; } .form-center { display: grid; place-items: center; } .bg-contact { background-color: #fff; } .bg-contact-3 { background-color: #efeae4; } .nav-jane-police { font-family: "Calibri Light" !important; } @media (max-width: 1080px) { .responsive-image { display: none; /* Cache l'image lorsque la taille de l'écran est inférieure à 1080px */ top: 50px; } } .text-contente { display: flex; align-items: center; justify-content: center; } .mention-link { text-decoration: none; } .pc-version { margin-left: 20%; } @media (max-width: 1080px) { .pc-version { margin-left: 0 !important; margin: 0 auto !important; /* Ajout pour centrer le contenu */ } .icojane { width: 170px !important; } } .back-apropos { margin-top: 140px; background-color: #222222; } .jane-livraison { width: 100%; object-fit: scale-down; } .jane-livraison-2 { width: 100%; object-fit: scale-down; } .img-top { margin-top: 10%; margin-left: 10%; } .btn .trans { transition: all 0.5s ease-in-out 0s !important; } .strong_title { font-weight: 600 !important; }