*{ font-family: var(--font-family-site-text); } .pictureProd { width: 100%; height: 100vh; background-color: #33031b83; display: flex; justify-content: center; flex-direction: column; align-items: center; border-radius: 20px; } .selectinterne{ display: flex; flex-direction:column; justify-content: center; align-items: center; background-color: #33031b; width: 100%; } .selectinterne2{ display: flex; flex-direction:column; justify-content: center; align-items: center; background-color: #33031b; width: 100%; padding: 10px; } .pageproduit{ display: flex; flex-direction:column; justify-content: center; } .contenupage{ display: flex; flex-direction:column; justify-content: center; /* background-color: #03691b;*/ /* min-height: 100vh;*/ height: auto; padding: 0px; } .Internnoteproduit{ width: 320; } . { width: 100%; height: 60px; display: flex; justify-content:center; flex-direction: row; align-items: center; /* padding: 0.3rem 1.5rem; */ } .liensbas { display: flex; flex-direction:row; align-items: center; width: 100%; width: 100%; height: 60px; } .btnbase { width: 200px; height: 30px; background-color: antiquewhite; padding: 0.3rem 1.5rem; border-radius: 20px; font-size: 1.2rem; color: rgb(80, 43, 3); margin-left: 10px; transition: opacity .2s; } .btnbase:hover { background-color: #0a0327; color:#fff ; transition: width .3s ease-out .2s; } .fermerpage:hover { background-color: #fc0707; color:#fff ; transition: width .3s ease-out .2s; } .fa-cart-arrow-down{ top:10px; left:5px; color: var(--icon-panier-color); font-size: 18PX; text-align: center; } fa-up-right-and-down-left-from-center, .fa-cart-arrow-down:hover{ color: var(--InT-lien-color-hover); transition: all 0.7s ease; } .containervert{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 90%; // position: relative; // top: var(--FE-article-top); border-radius:20px; background: var(--pagainterne--BG-color); padding: 2px; margin-top: 30px; padding-top: 20px; padding-bottom: 20px; margin-bottom: 60px; } .saisieinfo{ display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; color: #fffefe; width: 50%; height: 100vh; background-color: #91858581; padding: 10px; border-radius: 10px; } .dimension{ display: flex; flex-direction:column; align-items: center; width: 100%; } .container0, .container1, .container2, .Interncolonnefre2 img, .Interninffree2 img, .container4, .container5, .container6, .container7, .container8, .container9, .container10, .container11, .container12, .container13 { width: var(--Carte--width-taile); height: var(--Carte--height-taile); } .Interncolonnefre2, .Interninffree2 { height: calc(12em + var(--Carte--height-taile)); width: calc(2em + var(--Carte--width-taile)); padding: 0.5rem; border-radius: 10px; } .modelnodalpage-content { width: 300px; } .Interninffree2 .InterninfoGnodal2, .Interncolonnefre2 .Internnoteproduit2{ width: var(--Carte--width-taile); height:170px; position: relative; } .Internnoteproduit2{ text-align: center; } .Internnoteproduit2, .Interncolonnefre2{ position: relative; } .kmiplusPrix{ width: 100%; } .container2 .content, .container1 .content, .container7 .content, .container8 .content, .container0 .content, .InterninfoGnodal2, .container10, .Internnoteproduit, .container4 .back, .container9 .row .image .details .more, .container11, .container5 .card::before, .container6 .card::before, .Interncolonnefre2 .Internnoteproduit2, .container3 .card { background: var(--Carte--BG-color); background: linear-gradient(to bottom, var(--Carte--BG-survol1) , var(--Carte--BG-survol2) ); } /* .modelinfimg, .Interncolonnefre2 img, .Interninffree2 img, */ .detail{ /* position: ;*/ z-index: 10; } .zoomplus { display: flex; align-items: center; justify-content:space-between; // background-color: #000; height: 30px; width: 100%px; } .zoomart2{ position: relative; padding: 1rem; bottom: 10px; right: 10px; width: 50px; height: 50px; cursor: pointer; background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; border: 0px solid #000; background-color: #00000076; } .zoomart{ position: absolute; padding: 1rem; bottom: 10px; right: 10px; width: 50px; height: 50px; cursor: pointer; background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; border: 0px solid #000; background-color: #00000076; } .fa-up-right-and-down-left-from-center{ font-size: 20px; border-radius: 50%; } .fa-up-right-and-down-left-from-center:hover{ color: var(--Carte--btn-shadow-color); } .btnservice{ padding: 0.5rem 0.5rem; background: var(--Carte--btn-bg-color); font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.4s; color: var( --Carte--btn-color); border-radius: 5px; position: absolute; bottom: 10px; right: 10px; } .btnValidez{ padding: 0.5rem 0.5rem; background: var(--Carte--btn-bg-color); font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.4s; color: var( --Carte--btn-color); border-radius: 5px; position: absolute; } .btnservice:hover{ box-shadow: 0px 7px 10px var(--Carte--btn-shadow-border); color: var(--Carte--btn-shadow-color); } .container0 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; transition: all 0.4s; border-radius: var(--Carte--borderradius); } .container0 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /*background: #00000076;*/ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container0 h1{ padding-bottom: 30px; } .container0 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); border-bottom: 30px; margin: 30px; } .container0 h1{ margin: 0; color: var(--Carte--titre-colorH1); } .container0 img { width: 100%; height: 100%; object-fit: cover; transition: all 0.9S; border-radius: var(--Carte--borderradius); } .container0:hover img { transform: scale(0); } .container0 .content{ /* display: flex; flex-direction:column; align-items: center; */ justify-content: center; color: var(--Carte--texte-color); position: absolute; left: 0; top: 0; width: 100%; height: 100%;flex-wrap: wrap; padding: 30px; box-sizing: border-box; transform: scale(0) rotate(-180deg); opacity: 0; transition: all 0.4s; } .container0:hover .content{ transform: scale(1) rotate(0deg); opacity: 1; transition-delay: 0.2S; } .container0 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); font-size: var(--Carte--font-size-p); color: var(--Carte--texte-color); } .container0 .box-content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container0 .box-content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container0 .box-content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container0{ position: relative; } .container0 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container0 .icon-links { position: absolute; left: 10px; top: 220px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container0 .icon-links .vente, .container0 .icon-links .yes, .container0 .icon-links .no, .container0 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container0 .icon-links .vente p, .container0 .icon-links .yes p, .container0 .icon-links .no p, .container0 .icon-links .abonne p{ padding: 2px; } /*-------------------1-----------------------*/ .container1 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container1 img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--Carte--borderradius); } .container1 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; top: 0; left: 100%; height: 100%; width: 100%; padding: 20PX; transition: all 0.5s; } .container1, .container1 .content { border-radius: var(--Carte--borderradius); } .container1:hover .content { left: 0%; } .container1 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /* background: #00000076;*/ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container1 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container1 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; /*mov*/ font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container1 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container1 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container1 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container1{ position: relative; } .container1 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container1 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container1 .icon-links .vente, .container1 .icon-links .yes, .container1 .row .icon-links .no, .container1 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container1 .icon-links .vente p, .container1 .icon-links .yes p, .container1 .icon-links .no p, .container1 .icon-links .abonne p{ padding: 2px; } /*--------------------------------2---------------------------------*/ .container2 { margin: 10px auto; position: relative; overflow: hidden; margin: 6px; } .container2 img { width: 100%; height: 100%; object-fit: contain ; object-fit: cover; border-radius: var(--Carte--borderradius); } .container2 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; overflow: hidden; /*top: 0;*/ bottom: 0; opacity: 0; left: 0; height: 0%; width: 100%; padding: 20PX; transition: all 0.5s; } .container2, .container2 .content { border-radius: var(--Carte--borderradius); } .container2:hover .content { height: 100%; opacity: 1; border-radius: var(--Carte--borderradius); } .container2 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /* background: #00000076;*/ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container2 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container2 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; /*mov*/ font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container2 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container2 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container2 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container2{ position: relative; } .container2 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container2 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container2 .icon-links .vente, .container2 .icon-links .yes, .container2 .icon-links .no, .container2 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container2 .icon-links .vente p, .container2 .icon-links .yes p, .container2 .icon-links .no p, .container2 .icon-links .abonne p{ padding: 2px; } /*----------------------3---------------------------*/ .container3{ margin: 10px; display: flex; align-items: flex-end; flex-direction: column; perspective: 3000px; transform-style: preserve-3d; } .container3 { width: calc(0em + var(--Carte--width-taile)); /* padding: 0.8rem;*/ border-radius: 10px; } .container3 .card { position:relative; /* width: 100%; height: 100%; */ margin: 0px; padding: 5PX 5PX; box-shadow: 0 5px 10px #0000004e; border-radius: var(--Carte--borderradius); transition: transform .5s; transform: rotateX(15deg); } .container3 .card:hover { transform: rotateX(0deg); border-radius: var(--Carte--borderradius); } .container3 .card img{ object-fit: cover; transition: 0.5s; border-radius: var(--Carte--borderradius); width: var(--Carte--width-taile); height: var(--Carte--height-taile); } .container3 .card .info { color: var(--Carte--texte-color); margin: 0; max-width: var(--Carte--width-taile); } .container3 .card .detail{ display: flex; align-items: center; justify-content:flex-end; width: 100%; padding: 0px 10px 0px 10px; // height: var(--Carte--height-detail); } .container3 .card .info h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container3 .card .info h1{ position: absolute; top: 10px; left: 20px; margin: 0; color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container3 .card .info p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; font-size: var(--Carte--font-size-p); margin-bottom: 5px; color: var(--Carte--texte-color); } .container3 .card .info .detail{ display: flex; align-items: center; justify-content:space-between; width: 100%; } .container3 .card .info .detail .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container3 .card .info .detail .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 1px 1px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container3{ position: relative; } .container3 .icon-link .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container3 .icon-link { display: flex; flex-direction: column; align-items: center; justify-content:center; background: #f7f7f7; } .container3 .icon-link { position: absolute; right: 20px; top: 40px; font-size: 10px; display: flex; background: transparent; } .container3 .icon-link .vente, .container3 .icon-link .yes, .container3 .icon-link .no, .container3 .icon-link .abonne { display: flex; flex-direction: column; align-items: center; padding: 5px; } .container3 .icon-link .vente p, .container3 .icon-link .yes p, .container3 .icon-link .no p, .container3 .icon-link .abonne p{ padding: 2px; } .container3 .icon-link p { font-size: var(--icon--num-size); } /*-----------------------4----------------------------*/ .container4 { position:relative; margin: 10px; transition: all 1s linear; transform-style: preserve-3d; box-shadow: 0 5px 10px #000; } .container4 .front, .container4 .back{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; border-radius: var(--Carte--borderradius); } .container4 .front img{ position:absolute; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; border-radius: var(--Carte--borderradius); } .container4 .front{ z-index: 2; backface-visibility: hidden; overflow: hidden; } .container4 .back{ z-index: 1; transform: perspective(600px) rotateY(180deg); } .container-card:hover .container4 { transform: perspective(600px) rotateY(180deg); } .container-card:hover { perspective: 15000px; } .container4 .face h1{ position: absolute; bottom: 0; width: 100%; height: 45px; line-height: 45px; /* background: #00000076;*/ text-align: center; } .container4 .face h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container4 .front h1{ margin: 0; color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container4 .back{ padding: 15px; color: var(--Carte--texte-color); display: flex; flex-direction: column; align-items: center; justify-content:space-between; text-align: center; box-shadow: 0.5; border-radius: var(--Carte--borderradius); } .container4 .back h3{ font-size: 30px; margin-top: 20px; letter-spacing: 2px; } .container4 .back p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); font-size: var(--Carte--font-size-p); padding: 5px; } .container4 .back .link .more{ display: flex; align-items: center; justify-content:space-between; /* padding: 15px;*/ transition: .5s; } .container4 .back .link .more .icon-prix { display: flex; align-items: center; justify-content:center; width: 150px; } .container4 .back .link .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container4 .back{ position: relative; } .container4 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container4 .icon-link { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container4 .icon-link .vente, .container4 .icon-link .yes, .container4 .row .icon-link .no, .container4 .row .icon-link .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container4 .icon-link .vente p, .container4 .icon-link .yes p, .container4 .icon-link .no p, .container4 .icon-link .abonne p{ padding: 2px; } /*----------------------------5-----------------------------*/ .container5{ margin: 10px; } .container5 .card { display: flex; align-items: flex-end; position:relative; width: 100%; height: 100%; /* margin: 10px;*/ padding: 2rem 1rem; transition: 0.5s ease-in-out; box-shadow: 0 5px 10px #0000004e; border-radius: var(); } .container5 .card:hover { transform: translateY(10px); } .container5 .card::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; transition: 0.5S all; opacity: 0; border-radius: var(--Carte--borderradius); } .container5 .card:HOVER::before { opacity: 1; border-radius: var(--Carte--borderradius); } .container5 .card img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; border-radius: var(--Carte--borderradius); } .container5 .card .info { z-index: 3; color: var(--Carte--texte-color); opacity: 0; transform: translateY(10px); transition: 0.5s all; width: 100%; } .container5 .card:hover .info { opacity: 1; transform: translateY(0px); } .container5 .card .info h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container5 .card .info h1{ margin: 0; color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container5 .card .info p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 0px; font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container5 .card .info .more{ margin-bottom: -20px; display: flex; align-items: center; justify-content:space-between; width: 100%; transition: .5s; transition-property: botton; } .container5 .card .info .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container5 .card .info .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container5{ position: relative; } .container5 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container5 .icon-links { position: absolute; left: 20px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container5 .icon-links .vente, .container5 .icon-links .yes, .container5 .row .icon-links .no, .container5 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container5 .icon-links .vente p, .container5 .icon-links .yes p, .container5 .icon-links .no p, .container5 .icon-links .abonne p{ padding: 2px; } /*--------------------------6------------------------------*/ .container6{ margin: 10px; } .container6 .card { display: flex; align-items: flex-end; /* position:relative;*/ width: 100%; height: 100%; /* margin: 10px;*/ padding: 2rem 1rem; transition: 0.5s ease-in-out; box-shadow: 0 5px 10px #0000004e; border-radius: var(--Carte--borderradius); } .container6 .card:hover { transform: translateY(1px); } .container6 .card::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border-radius: var(--Carte--borderradius); z-index: 2; transition: 0.5S all; opacity: 0; } .container6 .card:HOVER::before { opacity: 1; border-radius: var(--Carte--borderradius); } .container6 .card img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; border-radius: var(--Carte--borderradius); } .container6 .card .info { /*position: relative;*/ z-index: 3; color: var(--Carte--texte-color); opacity: 0; transform: translateY(30px); transition: 0.5s all; width: 100%; } .container6 .card .info h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container6 .card:hover .info { opacity: 1; transform: translateY(0px); } .container6 .card::before, .container6 .card:hover .info, .container6 .card:hover img { transform: scale(1.05); } .container6 .card .info h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); margin: 0; color: var(--Carte--titre-colorH1); } .container6 .card .info p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; font-size: var(--Carte--font-size-p); margin-bottom: 8px; padding-bottom: 20px; color: var(--Carte--texte-color); } .container6 .card .info .more{ position: absolute; bottom: -30px; display: flex; align-items: center; justify-content:space-between; width: 100%; transition: .5s; transition-property: botton; } .container6 .card .info .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container6 .card .info .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } .zoomart5{ position: absolute; padding: 1rem; bottom: -20px; right: 3px; width: 50px; height: 50px; cursor: pointer; background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; border: 0px solid #000; background-color: #00000076; } .zoomart6{ position: absolute; padding: 1rem; bottom: 2px; right: 2px; width: 50px; height: 50px; cursor: pointer; background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; border: 0px solid #000; background-color: #00000076; } /* ----------------icon--------------------- */ .container6{ position: relative; } .container6 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container6 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container6:hover .icon-links .vente, .container6 .icon-links .yes, .container6 .row .icon-links .no, .container6 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container6 .icon-links .vente p, .container6 .icon-links .yes p, .container6 .icon-links .no p, .container6 .icon-links .abonne p{ padding: 2px; } /*----------------------------7----------------------------------*/ .container7 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container7 img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--Carte--borderradius); } .container7 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; overflow: hidden; top: 0; /* bottom: 0;*/ opacity: 0; left: 0; height: 0%; width: 100%; padding: 20PX; transition: all 0.5s; } .container7, .container7 .content { border-radius: var(--Carte--borderradius); } .container7:hover .content { /* left: 0%; */ height: 100%; opacity: 1; } .container7 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /* background: #00000076;*/ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container7 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container7 h1{ margin: 0; color: var(--Carte--titre-colorH1); } .container7 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: #f8f1f1; color: var(--Carte--texte-color); } .container7 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container7 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container7 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container7{ position: relative; } .container7 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container7 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container7 .icon-links .vente, .container7 .icon-links .yes, .container7 .row .icon-links .no, .container7 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container7 .icon-links .vente p, .container7 .icon-links .yes p, .container7 .icon-links .no p, .container7 .icon-links .abonne p{ padding: 2px; } /*----------------------------8----------------------------------*/ .container8 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container8 img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--Carte--borderradius); } .container8 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; top: 0; right: 100%; height: 100%; width: 100%; padding: 20PX; transition: all 0.5s; } .container8, .content { border-radius: var(--Carte--borderradius); } .container8:hover .content { right: 0%; border-radius: var(--Carte--borderradius); } .container8 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /*background: #00000076;*/ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container8 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container8 h1{ margin: 0; } .container8 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container8 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container8 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container8 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container8{ position: relative; } .container8 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container8 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container8 .icon-links .vente, .container8 .icon-links .yes, .container8 .row .icon-links .no, .container8 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container8 .icon-links .vente p, .container8 .icon-links .yes p, .container8 .icon-links .no p, .container8 .icon-links .abonne p{ padding: 2px; } /*----------------------------9----------------------------------*/ /*----------------------------9----------------------------------*/ .container9 { margin: 10px; } .container9 .row { display: flex; flex-wrap: wrap; align-items: center; justify-content:center; background: #021529be; color: #fff; } .container9 .row .image { position: relative; flex: 1; width: var(--Carte--width-taile); height: var(--Carte--height-taile); padding: 1px; overflow: hidden; } .container9 .row .image img { width: 100%; height: 100%; opacity: 0.8; position: relative; object-fit: cover; vertical-align: top; transition: .5s; transition-property: opacity ; border-radius: var(--Carte--borderradius); } .container9 .row .image:hover img { opacity: 1; border-radius: var(--Carte--borderradius); } .container9 .row .image .details { z-index: 1; position: absolute; top: 0; right: 0; color: #fff; height: 100%; } .container9 .row .image .details h1{ font-size: 25px; text-transform: uppercase; font-weight: 300; margin-top: 70px; transition-property:transform; color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container9 .row .image .details h2{ text-align: center; transition-property:transform; color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container9 .row .image .details h1 span{ font-weight: 900; } .container9 .row .image:hover .details h2, .container9 .row .image:hover .details h1 { transform: translateY(-30px); } .container9 .row .image .details p{ padding: 60px 30px 10px 30px; font-size: var(--Carte--font-size-p); font-weight: 600; text-align: var(--Carte--textalign-p); opacity: 0; transition: .5s; transition-property: opacity, transform; color: var(--Carte--texte-color); } .container9 .row .image:hover .details p{ opacity: 1; transform: translateY(-40px); } .container9 .row .image .details .more { position: absolute; bottom: -80px; display: flex; align-items: center; justify-content:space-between; padding: 10px; width: 100%; transition: .5s; transition-property: botton; } .container9 .row .image:hover .details .more{ bottom: 0; } .container9 .row .image .details .more .read-more{ color: #000; font-size: var(--Carte--font-size-p); font-weight: 500; text-transform: uppercase; transition: .5s; } .container9 .row .image .details .more .read-more span{ font-weight: 900; } .container9 .row .image .details .more { display: flex; align-items: center; justify-content:space-between; } .container9 .row .image .details .more .linksprix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } .fa-heart, .fa-eye, .fa-paperclip { color: #0f0101; margin-right: 10px; } /* ----------------icon--------------------- */ .container9 .row { position: relative; } .container9 .row .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container9 .row .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container9 .row .icon-links .vente, .container9 .row .icon-links .yes, .container9 .row .icon-links .no, .container9 .row .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container9 .row .icon-links .vente p, .container9 .row .icon-links .yes p, .container9 .row .icon-links .no p, .container9 .row .icon-links .abonne p{ padding: 2px; } /*-------------------10-----------------------*/ .container10 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container10 img { width: var(--Carte--width-taile); height: var(--Carte--height-taile); object-fit: cover; border-radius: var(--Carte--borderradius); } .container10 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; width: 0; height:0; top:0; left:0; padding: 20PX; transition: all 0.5s; opacity: 0; background: var(--Carte--BG-color); background: linear-gradient(to bottom, var(--Carte--BG-survol1) , var(--Carte--BG-survol2) ); } .container10{ border-radius: var(--Carte--borderradius); } .container10:hover .content { height: 100%; width: 100%; opacity: 1; border-radius: var(--Carte--borderradius); } .container10 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /*background: #00000076;*/ text-align: center; } .container10 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container10 h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container10 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container10 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container10 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container10 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } .container10 .row .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container10 .row .icon-links p{ font-size: var(--Carte--font-size-p); text-align: var(--Carte--textalign-p); font-weight: bold; color: var(--icon-links-color-p); } /* ----------------icon--------------------- */ .container10{ position: relative; } .container10 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container10 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container10 .icon-links .vente, .container10 .icon-links .yes, .container10 .icon-links .no, .container10 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container10 .icon-links .vente p, .container10 .icon-links .yes p, .container10 .icon-links .no p, .container10 .icon-links .abonne p{ padding: 2px; } /*-------------------11-----------------------*/ .container11 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; width: var(--Carte--width-taile); height: var(--Carte--height-taile); } .container11 img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--Carte--borderradius); } .container11 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; bottom: 0px; left: 0px; height: 0; width: 0; opacity: 0; padding: 20PX; transition: all 0.5s; background: var(--Carte--BG-color); background: linear-gradient(to bottom, var(--Carte--BG-survol1) , var(--Carte--BG-survol2) ); } .container11{ border-radius: var(--Carte--borderradius); } .container11:hover .content { height: 100%; width: 100%; opacity: 1; border-radius: var(--Carte--borderradius); } .container11 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /*background: #00000076;*/ text-align: center; } .container11 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container11 h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container11 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; /*mov*/ font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container11 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; width: 90%; transition: .5s; transition-property: botton; } .container11 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container11 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container11{ position: relative; } .container11 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container11 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container11 .icon-links .vente, .container11 .icon-links .yes, .container11 .icon-links .no, .container11 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container11 .icon-links .vente p, .container11 .icon-links .yes p, .container11 .icon-links .no p, .container11 .icon-links .abonne p{ padding: 2px; } /*-------------------12-----------------------*/ .container12 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container12 img { width: var(--Carte--width-taile); height: var(--Carte--height-taile); object-fit: cover; border-radius: var(--Carte--borderradius); } .container12 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; bottom: 0px; right: 0px; height: 0; width: 0; opacity: 0; padding: 20PX; transition: all 0.5s; background: var(--Carte--BG-color); background: linear-gradient(to bottom, var(--Carte--BG-survol1) , var(--Carte--BG-survol2) ); } .container12,{ border-radius: var(--Carte--borderradius); } .container12:hover .content { height: 100%; width: 100%; opacity: 1; border-radius: var(--Carte--borderradius); } .container12 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /* background: #00000076;*/ } .container12 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container12 h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container12 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; /*mov*/ font-size: var(--Carte--font-size-p); margin-bottom: 8px; color: var(--Carte--texte-color); } .container12 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; /* padding: 15px;*/ width: 90%; transition: .5s; transition-property: botton; } .container12 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container12 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container12{ position: relative; } .container12 .icon-links .imgicon{ width: 25px; height: 25px; } .container12 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container12 .icon-links .vente, .container12 .icon-links .yes, .container12 .icon-links .no, .container12 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container12 .icon-links .vente p, .container12 .icon-links .yes p, .container12 .icon-links .no p, .container12 .icon-links .abonne p{ padding: 2px; } /*-------------------13-----------------------*/ .container13 { margin: 10px auto; position: relative; overflow: hidden; margin: 10px; } .container13 img { width: var(--Carte--width-taile); height: var(--Carte--height-taile); object-fit: cover; border-radius: var(--Carte--borderradius); } .container13 .content { display: flex; flex-direction:column; align-items: center; justify-content: center; position: absolute; top: 0px; right: 0px; height: 0; width: 0; opacity: 0; padding: 20PX; transition: all 0.5s; background: var(--Carte--BG-color); background: linear-gradient(to bottom, var(--Carte--BG-survol1) , var(--Carte--BG-survol2) ); } .container13, .container13 .content { border-radius: var(--Carte--borderradius); } .container13:hover .content { height: 100%; width: 100%; opacity: 1; border-radius: var(--Carte--borderradius); } .container13 h1{ position: absolute; top: 0; width: 100%; height: 45px; line-height: 45px; /*background: #00000076;*/ } .container13 .content h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .container13 h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .container13 .content p{ letter-spacing: 1px; text-align: var(--Carte--textalign-p); margin-top: 8px; margin-bottom: 8px; font-size: var(--Carte--font-size-p); color: var(--Carte--texte-color); padding: 10px; } .container13 .content .more{ position: absolute; bottom: 20px; display: flex; align-items: center; justify-content:space-between; /* padding: 15px;*/ width: 90%; transition: .5s; transition-property: botton; } .container13 .content .more .icon-prix { display: flex; align-items: center; justify-content:space-around; width: 60%; } .container13 .content .more .icon-prix .Internprix { font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 800; padding: 10px 10px; width: 80%; text-align: end; } /* ----------------icon--------------------- */ .container13{ position: relative; } .container13 .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .container13 .icon-links { position: absolute; left: 10px; top: 10px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container13 .icon-links .vente, .container13 .icon-links .yes, .container13 .icon-links .no, .container13 .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .container13 .icon-links .vente p, .container13 .icon-links .yes p, .container13 .icon-links .no p, .container13 .icon-links .abonne p{ padding: 2px; } /*------------------FIN--------------------*/ .Interncolonnefre2 .Intertest2{ display: flex; flex-direction:row; justify-content: center; } .Interncolonnefre2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .Interncolonnefre2 { padding: 10px; min-height: 380px; object-fit: cover; } .Interncolonnefre2, .Interncolonnefre2 .Internnoteproduit2{ padding: 16px; margin:0px; text-align: center; font-family: arial; bottom: 0; } .Interncolonnefre2 .Internnoteproduit2 H1 { color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .Interncolonnefre2 .Internnotetitle2 H2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); font-size: 18px; width: 100%; } .Internnotefre2, .Internnotefrebas2, .Internprix2 p{ text-align: var(--Carte--textalign-p); font-size: var(--Carte--font-size-p); color: var(--Carte--texte-color); } .Interncolonnefre2 .Intertest2 { width: 100%; } .Interncolonnefre2 .Internnotefre2{ display: flex; flex-direction:column; justify-content: space-between; margin: 0px; position: relative; width:100%; top:-11px; } .Interncolonnefre2 .Internnotefrebas2{ text-align:left; margin: 0px; padding: 5px; } .Interncolonnefre2 .InterninfoG2{ width: 100%; } .Interncolonnefre2 .InterninfoG2 h1{ color: var(--Carte--titre-colorH1); } .Interncolonnefre2 .InterninfoD2{ display: flex; flex-direction:row; justify-content: center; align-items: center; padding: 5px; text-align: center; width: 40%; vertical-align: middle; position: absolute; bottom: -70px; right: 0px; } .Interncolonnefre2 .Internbutton { position: relative; border: none; color: var(--Carte--btn-color); font-weight: bold; font-size: 15px; padding: 10px 15px; text-decoration: none; display: inline-block; cursor: pointer; border-radius: 50px; width: 35px; height:35px; text-align: center; background-color: var(--Carte--btn-BGcolor); } .Interncolonnefre2 .Internbutton:hover { background-color: var(--Carte--btn-BGcolor-hover); } .Interncolonnefre2 .Internprix2{ padding: 5px 5px; width: 60%; text-align: end; font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); } .Interncolonnefre2 .Internprix2 p{ text-align:justify; margin:0px ; padding: 10px; } .Interninffree2 .InterninfofreCD{ position: relative; bottom: 30px; right: 0px; } /* ---------------Agrandir image------------------ */ .Interninffree22{ display: flex; flex-direction:column; justify-content: center; align-items: center; position: relative; border-radius: 0 0 10px 10px; background-color:#ffffff02; } .outilaffichade{ display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 30px; /* background-color: #5f0202;*/ width: 100%; height: 95vh; } .modelnodalpageprod { display: flex; align-items: center; justify-content: center; padding-top: 10px; padding-right: 30px; left: 0; top: 0; width: 50%; height: 100vh; overflow: auto; } .modelnodalpage-content { position: relative; margin: auto; padding: 0px; width: 100%; } .modelnodalpage-content { width: var(--Carte--width-taile); } .Interninffree22 .Internnoteproduit{ width: 100%; } .Interninffree22 .modelinfimg { object-fit: cover; border-radius: 10px 10px 0 0 ; width: 100%; min-width: var(--Carte--width-taile); max-height: 380px; border-radius: var(--Carte--borderradius); } /* ----------------icon--------------------- */ .modelnodalpage-content .icon-links .imgicon{ width: var(--Carte--icon-links-width); height: var(--Carte--icon-links-height); } .modelnodalpage-content .icon-links { position: absolute; left: 10px; top: 60px; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .modelnodalpage-content .Interninffree2 p{ text-align: var(--Carte--textalign-p); font-weight: bold; font-size: var(--Carte--font-size-p); color: var(--Carte--texte-color); } .container4 .icon-link p, .icon-link p, .modelnodalpage-content .icon-links p{ text-align: center; font-size: var(--icon-links-size-p); color: var(--icon-links-color-p); } .modelnodalpage-content .icon-links p:hover{ text-align: center; font-weight: bold; color: var(--icon-links-color-phover); } .modelnodalpage-content .icon-links .vente, .modelnodalpage-content .icon-links .yes, .modelnodalpage-content .icon-links .no, .modelnodalpage-content .icon-links .abonne { display: flex; flex-direction: column; align-items: center; padding-top: 5px; align-items: center; } .modelnodalpage-content .icon-links .vente p, .modelnodalpage-content .icon-links .yes p, .modelnodalpage-content .icon-links .no p, .modelnodalpage-content .icon-links .abonne p{ padding: 2px; } /* The nodalclose Button --------------------------------------------------------*/ .modelnodalclose { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .modelnodalclose:hover, .modelnodalclose:focus { color: #999; text-decoration: none; cursor: pointer; } .modelnodalmySlides { display: none; min-height: 100vh; width: 100%; } .modelnodalcursor { cursor: pointer; } /* Next & previous buttons */ .cartemodenodalprev, .cartemodenodalnext { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; z-index: 999; } /* Position the "modenodalnext button" to the right */ .cartemodenodalnext { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .cartemodenodalprev:hover, .cartemodenodalnext:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .nodalnumbertext { font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* img { margin-bottom: -4px; } */ .InterninfoGnodal2{ /* border-style: solid;*/ width: 100%; color: var(--Carte--texte-color); padding: 10px; } .Interninfoopacity2 { opacity: 0.2; } .Interninffree2{ display: flex; flex-direction:column; justify-content: center; align-items: center; position: relative; border-radius: 0 0 10px 10px; } .Interninffree2 h1{ color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); } .Interninffree2 h2{ color: var(--Carte--titre-colorH2); font-size: var(--Carte--titre-size-H2); text-align: var(--Carte--titre-textalign-H2); } .Interninffree2 p{ text-align: var(--Carte--textalign-p); font-size: var(--Carte--font-size-p); color: var(--Carte--texte-color); } .InterninfofreCD2{ position: absolute; display: flex; flex-direction:row; align-items: center; vertical-align: middle; padding-right: 10px; bottom: 10px; right: 115px; width: 100px; font-weight: 600; } .Interninfoopacity2{ opacity: 0.5; } .nodalInternprix2{ text-align:center; font-size: var(--Carte--fontPrix-size); color: var(--Carte--fontPrix-color); font-weight: 900; } .modelnodalcaption-container { text-align: center; padding: 2px 16px; } .nodaldemo { opacity: 0.6; } .nodalactive, .nodaldemo:hover { opacity: 1; } img.Internnodalhover-shadow { transition: 0.3s; /*width: 100%;*/ } .Internnodalhover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .btnvalide{ padding: 20px 40px; } .Interninffree2 .icon-links { position: absolute; left: 2px; top: -399px; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .Interncolonnefre2 .icon-links{ position: absolute; left: 20px; top: 32px; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container3 .icon-links { position: absolute; left: 2px; top: 60px; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content:center; z-index: 10; background: transparent; } .container1 .icon-links p , .container2 .icon-links p , .container3 .icon-links p, .container4 .icon-links p , .container6 .icon-links p , .container7 .icon-links p , .container8 .icon-links p, .container9 .icon-links p , .container10 .icon-links p , .container11 .icon-links p , .container12, .Interncolonnefre2 .icon-links p, .Interninffree2 .icon-links p { font-size: 9px; } .patag, .yes, .vente { display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column; } /*----------------------------Reduire---text-------------------------------*/ .texte{ height: 25px; overflow: hidden; transition: height .3s ease-in .3s; // padding: 20px 40px; margin-left: 20px; } .texte:hover{ height: 40%; } .basindo .plusinfo{ appearance: none; border: 0px solid #000; padding: .5em; border-radius: .25em; cursor: pointer; /* margin-top: 1rem;*/ } .basindo .plusinfo:hover{ /* background-color: #ccc; */ } .basindo .plusinfo::before{ content: "info +"; color: var(--Carte--texte-color); font-size: 0.8rem; } .basindo .plusinfo:checked::before{ content: "info -"; } .texte:has(+ .basindo .plusinfo:checked) { max-height: none; } .basindo{ display: flex; flex-direction:row; justify-content: space-between; align-items: center; width:100px; } .basindoplus { top:10px; } /*-----------------------column;-------------------*/ @media (max-width: 1200px) { .modelnodalpageprod{ display: flex; justify-content: center; align-items: center; padding-top:0px; width: 100%; height: 100%; } .containervert { width: 100%; } .pictureProd { width: 100%; height: 100vh; margin: 0px 0px; } .modelnodalmySlides { width: 100%; } .modelnodalpage-content { width: 100%; height: 100%; // height: 100%; } .Interncolonnefre2, .Interninffree2 { width: 100vw; height: auto; } .outilaffichade { padding: 2px; } .pictureProd { height: 100%; } .texte{ height: 70%; margin-left: 40px; } .texte:hover{ height: 350px; } .container3 { width : 90%; height: auto; } .container3 .card{ height: auto; width : 100%; padding: 0px; margin: 0; } .container3 .card img{ width : 100%; height: auto; } .picture{ height: 100%; width: 100%; flex-direction: column; } .outilaffichade { width: 900px; height: 100%; } .btnservice{ bottom: 10px; right: 60px; font-size: 44px; } .Interninffree2 .InterninfoGnodal2, .Interncolonnefre2 .Internnoteproduit2{ width: 100%; height:270px; position: relative; } .Interncolonnefre2 .icon-links { font-size: 18px; left: 5px; top: -576px; } .Interninffree2 .icon-links { left: 5px; top: -576px; } .container3 .icon-links { left: 2px; top: 32px; } .container5, .container6, .container0, .container1, .container2, .container9 , .container9 .row .image, .container7, .container8, .container10, .container11, .container12, .container13 { width: 100%; height: 1500px; padding: 0px; margin: 2px; margin-bottom: 50px; } .container0 img, .container1 img, .container2 img, .container7 img, .container8 img, .container11 img, .container5, .card img, .container6, .card img, .container10 img, .container12 img, .container13 img{ width: 100%; /* height: 1280px;*/ } .container9 , .container9 .row .image { width: 100%; height: 100%; padding: 0px; margin: 2px; margin-bottom: 50px; } .container9 .row .image img, { width: 1000px; height: 100%; padding: 0px; margin: 0; } .Interncolonnefre2 img, .Interninffree2 img { width: 100%; height: auto; padding: 0px; margin: 0; } /* .Interncolonnefre2, .Interninffree2 { width: 100%; height: 100%; } .Interncolonnefre2 img { width: 360px; height: 600px; padding: 0px; margin: 0; } */ .Interncolonnefre2 img{ width: 100%; height: 620; } .Interninffree2 .detail{ width: 100%; height: 100%; } Interncolonnefre2 .Internnoteproduit2 { width: 100%; height: 20%; } .cartemodenodalprev, .cartemodenodalnext { width: 80px; font-size: 100px; } .container3 .card .info{ max-width : 100%; } .container10 h1, .container11 h1, .container12 h1, .container13 h1, .container4 .face h1, .container4 .front h1, .container5 .card .info h1,.container6 .card .info h1, .container7 h1, .container8 h1, .container9 .row .image .details h1, .container0 h1, .container1 h1, .container2 h1{ font-size: 62px; height: 85px; line-height: 75px; width: 100%; padding: 10px; } .container3 .card .info h1{ font-size: 45px; height: 85px; width: 100%; padding: 10px; } .Interninffree2 h1, .Interncolonnefre2 .Internnoteproduit H1{ font-size: 38px; /* height: 85px; line-height: 75px; */ width: 100%; padding: 0px; } .container10 .content h2, .container11 .content h2, .container12 .content h2, .container13 .content h2, .container4 .face h2, .container4 .back h2, .container5 .card .info h2, .container6 .card .info h2, .container7 .content h2, .container8 .content h2, .container9 .row .image .details h2, .container0 .box-content h2, .container1 .content h2, .container2 .content h2{ font-size: 50px; width: 100%; padding: 40px; } .container3 .card .info h2, .container13 .content h2 { font-size: 35px; width: 100%; padding: 0px; } .Interninffree2 h2, .Interncolonnefre2 h2 { font-size: 34px; width: 100%; padding-left: 20px; } .container10 .content p, .container11 .content p, .container12 .content p, .container13 .content p, .container4 .back p, .container5 .card .info p, .container6 .card .info p, .container7 .content p, .container8 .content p, .container9 .row .image .details p, .container0 .box-content p, .container1 .content p, .container2 .content p{ font-size: 38px; //width: 100%; // padding: 0 10px 0 80px; } .Internprix { font-size: 50px; width: 400px; } .container3 .card .info p{ font-size: 30px; padding: 20px ; } .Internnotefre, .Internnotefrebas{ font-size: 38px; width: 100%; padding: 10px ; } .Interninffree2 .InterninfoGnodal2 p, .Interncolonnefre2 p, .Internnotefre, .Internnotefrebas{ font-size: 30px; // width: 100%; padding: 0 5px 0 5px; } .container13 .content .more .icon-prix .Internprix, .container12 .content .more .icon-prix .Internprix, .container11 .content .more .icon-prix .Internprix, .container10 .content .more .icon-prix .Internprix, .container9 .row .image .details .more .linksprix .Internprix, .container8 .content .more .icon-prix .Internprix, .container7 .content .more .icon-prix .Internprix, .container6 .card .info .more .icon-prix .Internprix, .container5 .card .info .more .icon-prix .Internprix, .container5 .card .info .more .icon-prix .Internprix, .container2 .content .more .icon-prix .Internprix, .container1 .content .more .icon-prix .Internprix, .container0 .box-content .more .icon-prix .Internprix { font-size:40px; } .container3 .card .info .detail .icon-prix .Internprix, .Interncolonnefre2 .Internnoteproduit .Internnotefre .InterninfoD .Internprix, .Interninffree2 .InterninfofreCD .nodalInternprix{ font-size:30px; } .container3 .fa-cart-arrow-down, .Interncolonnefre2 .fa-cart-arrow-down { font-size:30px; } .InterninfofreCD { flex-direction: column; bottom: 15px; right: 155px; width: 100px; height: 60px; } .Interninffree2, .InterninfofreCD .fa-cart-arrow-down { bottom: 5px; } .Interninffree2, .InterninfofreCD .nodalInternprix { padding: 10px; } .btnservice{ font-size: 24px; } .Interncolonnefre2 .InterninfoD{ bottom: 0px; right: 150px; } .Interncolonnefre2 .Internbutton { width: 50px; height:50px; } .InterninfofreCD2 .nodalInternprix2{ width: 345px; text-align:right; padding-right: 10px; } .InterninfofreCD2{ flex-direction:row; bottom: 20px; right: 22px; width: 345px; } .fa-cart-arrow-down{ top:10px; left:10px; font-size: 68PX; } .Interninffree2 .fa-cart-arrow-down, .InterninfofreCD2 .fa-cart-arrow-down{ font-size: 68PX; } .basindo .plusinfo::before{ font-size: 2.2rem; } .Interncolonnefre2 .InterninfoD2{ width: 440; bottom: -119px; right: 10px; justify-content: right; align-items: right; } .Interncolonnefre2 .InterninfoD2 p{ font-size: 38PX; } .Interninffree2 .InterninfofreCD2 .nodalInternprix2, .Interncolonnefre2 .InterninfoD2 .Internprix2{ font-size: 38px; } .basindo{ width:150px; } .container1 .icon-links p , .container2 .icon-links p , .container3 .icon-links p, .container4 .icon-links p , .container6 .icon-links p , .container7 .icon-links p , .container8 .icon-links p, .container9 .icon-links p , .container10 .icon-links p , .container11 .icon-links p , .container12, .Interncolonnefre2 .icon-links p, .Interninffree2 .icon-links p { font-size: 20px; } } @media (max-width: 1200px) { .outilaffichade{ flex-direction: column; } .Internlignefree { flex-direction: row; } .saisieinfo{ width: 800px; height: 100%; } .liensbas { flex-direction:row; } .btnbase { height: 90px; margin:10px; width: 600px; } .btnbase, .liensbas a{ font-size: 3.5rem; } selectinterne, selectinterne2 p{ font-size: 40px; } selectinterne2 h2{ font-size: 50px; } .zoomart5{ position: absolute; padding: 1rem; top: -50px; right: 10px; width: 150px; height: 150px; } .zoomart2, .zoomart{ bottom: 10px; right: 10px; width: 150px; height: 150px; } .zoomart6{ position: absolute; padding: 1rem; top: -50px; right: 10px; width: 150px; height: 150px; } .fa-up-right-and-down-left-from-center{ font-size: 100px; } } /*---------------------PARRAINS----------------------------------*/ .contenercardsRS{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; background-color: transparent; z-index: 10000; } .contenercardsRS .cardsH{ height: 20px; } .contenercardsRS .team-item, .contenercardsRS .cards .team-item { width: 250px; height: 300px; position: relative; } .contenercardsRS .cards .team-item .info, .contenercardsRS .team-item img { width: 100%; height: 100%; } .contenercardsRS .cards .team-item .info, .contenercardsRS .cards .team-item, .contenercardsRS .team-item img { border-radius: 15px; } .contenercardsRS .cards .team-item .info { position: absolute; left: 0; bottom: -9px; width: 100%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; /* line-height: 32px;*/ transition: height 0.6s ease; } .contenercardsRS .team-item .social { height: 2px; width: 20px; display: flex; justify-content: center; flex-direction: row; border-radius: 50%; text-decoration: none; margin: 0 5px; } .contenercardsRS .cards .team-item .info { height: 100%; } .contenercardsRS .cards .team-item:hover .info { height: 100px; justify-content: flex-start; } .contenercardsRS .cards { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; max-width: 1600px; width: 100%; margin: auto; padding: 10px; } .team-item h3{ font-size: 18px; text-transform: capitalize; font-weight: 600; } .team-item p{ text-transform: capitalize; font-size: 16px; } .team-item .social .fa-whatsapp{ font-size: 0.8em; } @media(min-width: 540px){ .contenercardsRS .cards { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 940px){ .contenercardsRS .cards { grid-template-columns: repeat(3, 1fr); } } @media(min-width: 1260px){ .contenercardsRS .cards { grid-template-columns: repeat(5, 1fr); } } .contenercardsRS .cards { position: relative; } @media(max-width: 1040px){ .contenercardsRS { padding: 0px 0; } .contenercardsRS .cards { padding: 10px 0; } .contenercardsRS .cards .team-item, .contenercardsRS .team-item img { width: 450px; } .contenercardsRS .team-item img { height: 500px; } .contenercardsRS .cards .team-item { height: auto; } .contenercardsRS .cards { grid-template-columns: repeat(2, 1fr); } .reussite, .cardsH{ font-size:45px; margin: 40px; } .contenercardsRS .cardsH{ height: 60px; margin: 35px; } .team-item h3{ font-size: 32px; } .team-item p{ font-size: 28px; } .contenercardsRS .team-item .social { margin: 15px; letter-spacing:40px; } .secentete .fa-whatsapp { font-size: 2em; } .team-item .social .fa-whatsapp{ font-size: 2em; } } /*------------------influance--------------------*/ .etoile { width: 17px; height: 17px; } .contenercardsRS .cards .team-item .info img{ width: 17px; height: 17px; opacity: 0.5; } .contenercardsRS .cards .team-item .info img:hover{ opacity: 1; } .influance { width: 673px; height: 120px; background: var(--Fenetre-service-info-Bgc); border: none; border-radius: 25px; cursor: pointer; border: 3px solid var(--Fenetre-service-info-Bgc); } .cardsHleders, .influance { color: #fff; font-size: 1.1rem; font-family: inherit; font-weight: 600; text-transform: uppercase; padding: 0.65rem 2rem; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .influance:hover{ background: #fff; color: #222; border-color: var(--Fenetre-service-info-Bgc); } .influance:focus{ outline: 0; } .cardsHleders:hover{ color: #222; } .reussite { height: 50px; } .reseauinfuence{ display:flex; justify-content: center; flex-direction: row; background-color: #f5e0e0; } .contreseau{ display:flex; justify-content: space-around; flex-direction: row; width: 100%; font-size: 1.1rem; } .reseauinfuence{ width: 600px; } .idpaniercli{ display:flex; justify-content: center; align-items: center; padding: 20px; width: 100%; color: aliceblue; } .haut{ background-color: #dfa2a275; height: 30px; } @media(max-width: 1040px){ .etoile { width: 35px; height: 35px; } .contenercardsRS .cards .team-item .info img{ width: 35px; height: 35px; } .influance { width: 90%; height: 250px; } .cardsHleders, .influance { color: #fff; font-size: 2.8rem; } .contenercardsRS .cards .team-item:hover .info { height: 150px; } .reseauinfuence{ width: 773px; } .contreseau{ font-size: 1.8rem; } } @media (max-width: 1200px) { .parametre { top: 1620px; right: 30px; } .patag { display: flex; align-items: center; justify-content: center; flex-direction: column; } }