header{ position: relative; width: 100%; } .contervoyage,.secentete{ min-height: 100%; } .parametre{ position: absolute; top: 320px; right: 25px; } .team-item .social .fa-whatsapp, .fa-user-xmark, .fa-address-card, .fa-thumbs-up, .fa-rotate-180, .fa-sellsy{ color: var(--Mh-icon-color); font-size: 1.8em; font-weight: 900; margin: 5px; z-index: 60; } .compteur { color: var(--Mh-icon-color); font-size: 12px; font-weight: 900; } .container0 .fa-whatsapp, .container0 .fa-user-xmark, .container0 .fa-address-card, .container0 .fa-gear, .container0 .fa-share, .container0 .fa-thumbs-up, .container0 .fa-rotate-180, .container0 .fa-sellsy{ color: var(--Mh-icon-color); font-size: 1.3em; font-weight: 900; margin: 5px; z-index: 20; } .Interncolonnefre2 .fa-whatsapp, .Interncolonnefre2 .fa-user-xmark, .Interncolonnefre2 .fa-address-card, .Interncolonnefre2 .fa-gear, .Interncolonnefre2 .fa-share, .Interncolonnefre2 .fa-thumbs-up, .Interncolonnefre2 .fa-rotate-180, .Interncolonnefre2 .fa-sellsy, .Interninffree2 .fa-whatsapp, .Interninffree2 .fa-user-xmark, .Interninffree2 .fa-address-card, .Interninffree2 .fa-gear, .Interninffree2 .fa-share, .Interninffree2 .fa-thumbs-up, .Interninffree2 .fa-rotate-180, .Interninffree2 .fa-sellsy, .container3 .fa-whatsapp, .container3 .fa-user-xmark, .container3 .fa-address-card, .container3 .fa-gear, .container3 .fa-share, .container3 .fa-thumbs-up, .container3 .fa-rotate-180, .container3 .fa-sellsy{ color: var(--Mh-icon-color); font-size: 1.3em; font-weight: 900; margin: 5px; z-index: 20; } .scientete .fa-whatsapp :hover, .team-item .social .fa-whatsapp:hover, .fa-brands:hover, .fa-whatsapp:hover, .fa-user-xmark:hover, .fa-address-card:hover, .fa-gear, .fa-share:hover, .fa-thumbs-up:hover, .fa-rotate-180:hover, .fa-sellsy:hover{ color: var(--Mh-icon-color); } .produitpara{ position: absolute; top: -294px; right: 25px; z-index: 20; } .containerZoomlinx { min-height: 0vh; margin-bottom: 60px; } .corpdepagebas { min-height: 0vh; } .containerZoomlinx { min-height: 0vh; } @media (max-width: 1200px) { .fa-address-card, .fa-gear { font-size: 4em; margin: 5px; } .scientete .fa-whatsapp , .fa-whatsapp, .fa-user-xmark, .fa-address-card, .fa-gear, .fa-share,.fa-thumbs-up, .fa-rotate-180, .fa-sellsy{ font-size: 4.5em; } .Interncolonnefre2 .fa-whatsapp, .Interncolonnefre2 .fa-user-xmark, .Interncolonnefre2 .fa-address-card, .Interncolonnefre2 .fa-gear, .Interncolonnefre2 .fa-share, .Interncolonnefre2 .fa-thumbs-up, .Interncolonnefre2 .fa-rotate-180, .Interncolonnefre2 .fa-sellsy{ font-size: 3.5em; } .container0 .fa-whatsapp, .container0 .fa-user-xmark, .container0 .fa-address-card, .container0 .fa-gear, .container0 .fa-share, .container0 .fa-thumbs-up, .container0 .fa-rotate-180, .container0 .fa-sellsy{ font-size: 3.3em; } .container3 .fa-whatsapp, .container3 .fa-user-xmark, .container3 .fa-address-card, .container3 .fa-gear, .container3 .fa-share, .container3 .fa-thumbs-up, .container3 .fa-rotate-180, .container3 .fa-sellsy{ font-size: 3.3em; } .container10 .fa-whatsapp, .container10 .fa-user-xmark, .container10 .fa-address-card, .container10 .fa-gear, .container10 .fa-share, .container10 .fa-thumbs-up, ..container10 .fa-rotate-180, .container10 .fa-sellsy{ font-size: 4.3em; } .compteur { font-size: 32px; } } .outilcomm { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 10px; position: absolute; top: 265px; left: 112px; width: 220px; margin-top: 10px; height: 30Px; } .inscription, .abonne { margin-top: 40px; position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .inscription { width: 40%; } .abonne { width: 60%; } /* Texte caché par défaut avec un effet de transition */ .btntinsct { margin-top: 10px; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transform: translateY(10px); color: var(--Mh-lien-color); font-size: 14px; } /* Texte visible lors du survol */ .inscription:hover .btntinsct, .abonne:hover .btntinsct { opacity: 1; transform: translateY(0); } .btntinsct { color: var(--Mh-lien-color); } .fa-chalkboard:hover, .fa-sitemap:hover, .fa-user:hover { color: var(--Mh-lien-color-hover); transition: all 0.7s ease; } /* Style des icônes avec effet d'agrandissement au survol */ .inscription i, .abonne i { font-size: 2em; transition: transform 0.3s ease; } .inscription:hover i, .abonne:hover i { transform: scale(1.2); } @media (max-width: 1200px) { .outilcomm { /* top: 1760px;*/ left: 0px; width: 520px; margin-top: 30px; height: 60Px; } .inscription, .abonne { width: 260px; } .btntinsct { font-size: 34px; } .inscription i, .abonne i { font-size: 4em; } } .container1haut { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; /*max-width: 1000px;*/ height: 500px; width: 99vw; height: 100vh; background: #f5f5f5; box-shadow: 0 30px 50px #dbdbdb; overflow: hidden; } .slide1haut { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: pan-y; } .slide1haut .item1haut { width: 200px; height: 300px; position: absolute; top: 50%; right: 5%; transform: translate(0, -50%); border-radius: 20px; box-shadow: 0 30px 50px #505050; background-size: cover; background-position: center; transition: 0.5s; } .slide1haut .item1haut:nth-child(1), .slide1haut .item1haut:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; } /* .slide1haut .item1haut:nth-child(3) { left: 50%; } .slide1haut .item1haut:nth-child(4) { left: calc(50% + 220px); } .slide1haut .item1haut:nth-child(5) { left: calc(50% + 440px); } .slide1haut .item1haut:nth-child(n + 6) { left: calc(50% + 660px); opacity: 0; } */ .item1haut .content1haut { position: absolute; top: 40%; left: 100px; width: 600px; height: auto; text-align: left; color: #eee; transform: translate(0, -50%); font-family: system-ui; display: none; } .slide1haut .item1haut:nth-child(2) .content1haut { display: block; } .content1haut:hover { background-color: #ccc6c6ae; padding: 30px; border-radius: 30px; transition: 0.5s ease-in-out; } .content1haut .name { font-size: 40px; text-transform: uppercase; font-weight: bold; opacity: 0; animation: animate 1s ease-in-out 1 forwards; } .content1haut .des { margin-top: 10px; margin-bottom: 20px; opacity: 0; animation: animate 1s ease-in-out 0.3s 1 forwards; } @keyframes animate { from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); } to { opacity: 1; transform: translate(0); filter: blur(0); } } /* NAVIGATION */ .nav-container1haut { width: 100%; position: absolute; bottom: 20%; display: flex; justify-content: center; gap: 20px; } .nav-arrow1haut { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.6); color: white; font-size: 24px; cursor: pointer; border-radius: 50%; transition: 0.3s ease; } .nav-arrow1haut:hover { background: rgba(0, 0, 0, 0.9); } .outilcomm1haut{ position: absolute; display: flex; flex-direction: row; } .pageimg1haut{ position: absolute; bottom: 40px; right: 40px; } /* RESPONSIVE */ @media (max-width: 1200px) { .container1haut { top: 50%; left: 50%; width: 100%; background: #f5f5f5; } .nav-container1haut { display: none; } .slide1haut .item1haut { top: 30%; width: 150px; height: 250px; } .content1haut .name { font-size: 30px; } .item1haut .content1haut { top: 60%; left: 0px; width: 90%; padding: 20px; } }