body { font-family: metropolis, sans-serif; padding: 20px; background-color: #f4f4f9; color: #333; overflow-x: hidden; } header.navbar { display: flex; align-items: flex-end; position: sticky; top: 0; z-index: 9; background: #f4f4f9; padding: 20px; width: 100%; } header.navbar a { height: 100%; display: flex; } h1 { text-align: center; padding: 20px; } img#scroll-img { height: 100%; max-width: 22px; left: -22px; position: relative; } .line.jaune { background-color: #fc3; width: 80px; height: 5px; margin: 0 auto; margin-bottom: 30px; } .form-container { max-width: 980px; margin: 0 auto; padding: 0 20px; } select#siteSelector { border-radius: 30px; width: 85%; padding: 5px; } textarea, input, button { padding: 15px; margin: 5px; font-size: 16px; width: 100%; border-radius: 30px; border: 1px solid #ccc; } .form-container input { max-width: 950px; } button.add_product { background: #333333; color: white; cursor: pointer; } .products-list { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; max-width: 980px; margin: 30px auto; } .product-row { display: grid; justify-content: space-between; align-items: center; gap: 10px; grid-template-columns: 2fr 1fr 1fr 1fr; } .generated-code-container { margin-top: 30px; display: flex; flex-direction: column; align-items: center; } .copy-button { margin-top: 10px; padding: 5px 10px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .copy-button:hover { background-color: #0056b3; } .generate-code-button { margin-top: 20px; padding: 15px; background-color: #fc3; color: #333333; border: none; border-radius: 20px; font-size: 16px; cursor: pointer; font-weight: 900; max-width: 1300px; } .generate-code-button:hover { background-color: #333; color: white; } .generated-code { margin-top: 20px; width: 100%; white-space: pre-wrap; word-wrap: break-word; padding: 15px; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; display: none; } .preview-container { padding: 0 20px; } .preview-container h2, .preview-container span { text-align: center; } .notification { position: fixed; top: 20px; right: 20px; background-color: #28a745; color: white; padding: 10px 20px; border-radius: 5px; display: none; z-index: 9999; } .custom-selector { display: grid; position: relative; width: 100%; grid-template-columns: 20% 80%; } .selected-option { display: flex; align-items: center; border: 1px solid #ccc; padding: 10px; border-radius: 30px; cursor: pointer; background: #fff; } .selected-option img { width: 30px; height: 30px; margin-right: 10px; object-fit: contain; border-radius: 30px; } .options { display: none; flex-direction: column; border: 1px solid #ccc; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; z-index: 10; border-radius: 30px; padding: 10px; overflow: hidden; } .option { display: flex; align-items: center; padding: 10px; cursor: pointer; transition: background 0.2s; } .option img { width: 30px; height: 30px; margin-right: 10px; object-fit: contain; } .option:hover { background: #f0f0f0; } .layout-container { margin: 20px 0; display: grid; grid-template-columns: 40% 20% 20% 20%; position: sticky; top: 80px; background: #f4f4f9; padding: 20px 0; z-index: 9; transition: all 0.3s ease; } .layout-container label { display: flex; align-items: flex-start; } .layout-container input[type="radio"] { width: 20px; height: 20px; } .layout-container img { height: 100px; } .layout-container:stuck img { height: 50px; } @media screen and (max-width: 992px) { header.navbar { width: calc(100% + 40px); padding: 20px 0; } .custom-selector { grid-template-columns: 100%; } .layout-container { grid-template-columns: 100%; } .layout-container label:nth-child(2), .layout-container label:nth-child(3), .layout-container label:nth-child(4) { display: inline-block; width: 100%; } } .espace_affiliation_bis { transition: all 0.3s ease-in-out; } li.product-block { list-style-type: none; } @media only screen and (min-width: 992px) { .espace_affiliation_bis.layout1 li { list-style-type: none !important; } .layout1 .content-column-affiliation { padding-left: 40px; padding-right: 80px; } .espace_affiliation_bis.layout1 ul { padding: 0 !important; } .espace_affiliation_bis.layout1 li:before { display:none; } .layout1 .product-title-affiliation { text-align: left; } .layout1 .affiliate-product-links { justify-content: space-between; } } @media only screen and (max-width: 991px) { .espace_affiliation_bis.layout1 li { list-style-type: none !important; } .espace_affiliation_bis.layout1 ul { align-items: stretch; display: flex; overflow-x: auto; overflow-y: hidden; } .espace_affiliation_bis.layout1 ul li { margin-right: 20px; min-width: 260px; margin-top: 0 !important; justify-content: space-between; display: flex;} .layout1 .product-block-affiliation { flex-wrap: wrap; justify-content: center; } .layout1 span.num { max-width: 50px; width: 50px; text-align: center; margin-bottom: 20px; } .layout1 .content-column-affiliation { width: 100%; padding: 0; } .layout1 .product-title-affiliation { text-align: center; } .layout1 .affiliate-product-links { text-align: center; justify-content: center; } .layout1 .affiliate-product-links { width: 100%; justify-content: center; } } .espace_affiliation_bis.layout1 { width: 95%; max-width: 850px; margin: 0 auto; padding: 0; } .layout1 .product-block-affiliation { background: white; margin: 20px auto; padding: 20px 30px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; display: flex; align-items: center; } .layout1 span.num { font-size: 30px; font-style: normal; font-weight: 700; letter-spacing: .025em; line-height: 1; margin-right: 30px; max-width: 20px; min-width: 20px; text-transform: uppercase; width: 20px; } .layout1 .image-column-affiliation { border-radius: 5px; height: 150px; max-height: 150px; max-width: 150px; min-height: 150px; min-width: 150px; overflow: hidden; position: relative; width: 150px; } .layout1 img.product-image-affiliation { height: 100% !important; width: 100% !important; } .layout1 .content-column-affiliation { width: 100%; } .layout1 .product-image-affiliation { max-height: 100%; width: 100%; object-fit: contain; } .layout1 .product-title-affiliation { font-size: 20px; line-height: 22px; font-weight: 500; margin: 10px 0; } .layout1 .affiliate-product-links { display: flex; align-items: center; min-width: 120px; } .layout1 .affiliate-platform-link { text-decoration: none; color: #000; background-color: black; padding: 8px 16px; border-radius: 4px; font-weight: bold; transition: background-color 0.3s ease-in-out; } .layout1 a.affiliate-platform-link { text-align: center; color: white !important; text-decoration: none !important; font-size: 15px; } .layout1 .image-column-affiliation .affiliate-platform-link { background: none; padding: 0; font-size: 0; } .layout1 .image-column-affiliation img { object-fit: cover; height: 100% !important; display: block; width: 100% !important; } .layout1 .affiliate-platform-link:hover { background-color: #000; } .layout1 .price-affiliation { font-family: Roboto, sans-serif !important; font-size: 15px; font-weight: bold; } .layout1 div#espace_affiliation_bis ul { padding-left: 0; } .layout1 .sub-title-affiliation { background: #cd0000; display: inline-block; padding: 5px 10px; color: white; font-size: 11px; border-radius: 4px; } .espace_affiliation_bis.layout2 { max-width: 850px; margin: 0 auto; padding: 0; } .espace_affiliation_bis.layout2 ul { align-items: stretch; display: flex; overflow-x: auto; overflow-y: hidden; width: calc(100% + 5vw); background: #EFEFEF; padding: 0 0px 20px 40px !important; background-image: url(https://d3jks2a8ttfomr.cloudfront.net/articles/fleche-gauche-droite.png); background-repeat: no-repeat; background-size: 100px; background-position: 50% 95%; } .espace_affiliation_bis.layout2 li { list-style-type: none !important; margin-right: 20px; max-width: 200px; margin-top: 0 !important; justify-content: space-between; display: flex; } .layout2 .product-block-affiliation { background: white; width: 100%; margin: 40px auto; padding: 30px 30px; border-radius: 0; overflow: hidden; display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: center; } .layout2 .image-column-affiliation { border-radius: 5px; height: 150px; max-height: 150px; max-width: 150px; min-height: 150px; min-width: 150px; overflow: hidden; position: relative; width: 150px; } .layout2 .image-column-affiliation img { object-fit: cover; height: 100% !important; display: block; width: 100% !important; } .layout2 .content-column-affiliation { width: 100%; } .layout2 .product-title-affiliation { font-size: 16px; line-height: 22px; font-weight: 500; margin: 10px 0; text-align: center; } .layout2 .affiliate-product-links { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .layout2 .affiliate-platform-link { background-color: white; padding: 8px 16px; border-radius: 0; font-weight: bold; transition: background-color 0.3s ease-in-out; border: 1px solid black; } .layout2 a.affiliate-platform-link { color: black !important; text-decoration: none !important; font-size: 15px; padding: 5px 20px; font-weight: 500; } .layout2 .affiliate-platform-link:hover { background-color: #000; color: white !important; } .layout2 .sub-title-affiliation { display: none; } .espace_affiliation_bis.layout3 {width: 100%; max-width: 100%; margin: 0; padding: 0 0 20px 0;} .espace_affiliation_bis.layout3 ul { padding-left: 0; } @media only screen and (min-width: 992px) { .espace_affiliation_bis.layout3 ul { display: grid ; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 20px; max-width: 900px; margin: 0 auto; } .espace_affiliation_bis.layout3 li { list-style-type: none !important; position: relative; background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex ; flex-direction: column; align-items: center; text-align: center; padding: 10px; transition: transform 0.3s; } .layout3 .affiliate-product-links { justify-content: center; } } .layout3 .image-column-affiliation { border-radius: 5px; height: 150px; max-height: 150px; max-width: 150px; min-height: 150px; min-width: 150px; overflow: hidden; position: relative; width: 150px; margin: 0 auto; } .layout3 .image-column-affiliation img { object-fit: cover; height: 100% !important; display: block; width: 100% !important; } .layout3 .product-title-affiliation { font-size: 17px; line-height: 22px; font-weight: 500; margin: 10px 0; } .layout3 .affiliate-product-links { display: flex ; align-items: center; min-width: 120px; } .layout3 .affiliate-product-links a { padding: 8px 35px; margin-top: 10px; background-color: #313131; color: white !important; font-weight: 800; text-decoration: none !important; border-radius: 5px; transition: background-color 0.3s; font-size: 12px; line-height: normal; } .layout3 .sub-title-affiliation { background: #cd0000; display: inline-block; padding: 5px 10px; color: white; font-size: 11px; border-radius: 4px; margin-top: 10px; } .layout3 .product-block-affiliation .event-affiliation { position: absolute; top: 100px; right: -30px; background-color: #19a6fe; color: white; padding: 5px 0px; font-weight: bold; transform: rotate(45deg); transform-origin: top right; font-size: 10px; font-family: 'Amazon Ember', Tahoma, Arial, sans-serif; white-space: nowrap; box-sizing: border-box; width: 100%; text-align: center; z-index: 8; max-width: 180px; line-height: normal; } @media only screen and (max-width: 991px) { .espace_affiliation_bis.layout3 ul { align-items: stretch; display: flex ; overflow-x: auto; overflow-y: hidden; } .espace_affiliation_bis.layout3 li { list-style-type: none !important; } .layout3 .product-block-affiliation .event-affiliation { position: absolute; top: 90px; right: -20px; } .layout3 .product-block-affiliation { flex-wrap: wrap; justify-content: center; overflow: hidden; position: relative; } .layout3 .content-column-affiliation { width: 100%; padding: 0; } .layout3 .product-title-affiliation { text-align: center; } .layout3 .affiliate-product-links { width: 100%; justify-content: center; } }