/***** top page *****/ .top_page { position: relative; padding-top: 200px; text-align: center;} .top_page .titre { font: 500 clamp(18px, 2.6vw, 22px) / 140% "Inter"; color: #ffffff;} .top_page .titre_main { font-size: clamp(24px, 3vw, 38px); line-height: 160%; color: var(--mainColor1);;} @media (max-width:1200px) { .top_page { padding-top: 150px;} } /***** bloc grid *****/ .bloc-grid { width: 90vw; max-width: var(--maxWidthWrapperMedium); margin: var(--marginTB); display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 40px 80px; position: relative;} .bloc-grid.full { width: 90vw; max-width: var(--maxWidthWrapperLarge); } .bloc-grid.full .texte { padding-right: 100px; padding-left: 0;} .bloc-grid.full .photo img { width: 100%; height: auto; border-radius: var(--imgRadius);} .bloc-grid.reverse .texte { order: 1; padding-left: 100px; padding-right: 0;} .bloc-grid.reverse .photo { order: 2;} .bloc-grid .texte :last-child {margin-bottom: 0;} .bloc-info { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; background: #111111; color: #e94f21; font: 400 22px / 30px "Inter"; padding: 60px; text-align: center; letter-spacing: 3px; border-radius: var(--imgRadius);} .bloc-info :last-child { margin-bottom: 0;} .bloc-texte { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; } @media (max-width:1366px) { .bloc-grid { align-items: start;} } @media (max-width:1200px) { .bloc-grid { grid-gap: 40px 40px;} .bloc-grid.full .texte, .bloc-grid.reverse .texte { padding-right: 0; padding-left: 0;} } @media (max-width:1000px) { .bloc-grid { grid-template-columns:1fr; } .bloc-grid.reverse .texte { order: 2;} .bloc-grid.reverse .photo { order: 1;} .bloc-grid.first .texte { order: 1;} .bloc-grid.first .photo { order: 2;} .bloc-grid.full .photo img { height: 50vw; object-fit: cover;} } @media (max-width:800px) { .bloc-info { font-size: 18px; line-height: 24px; letter-spacing: 1.5;} } /***** produit *****/ .bloc-produit { width: 90vw; max-width: var(--maxWidthWrapperMedium); margin: var(--marginTB); display: grid; grid-template-columns: 40% 1fr; align-items: center; grid-gap: 40px 80px; position: relative;} .bloc-produit .photo img { max-width: 100%; height: auto; border-radius: var(--imgRadius);} .bloc-produit.reverse { grid-template-columns: 1fr 40%;} .bloc-produit.reverse .texte { order: 1;} .bloc-produit.reverse .photo { order: 2;} a.link-files { padding: 0 80px 0 20px; height: 50px; line-height: 48px; color: #ffffff; background: url(../images/download.svg) calc(100% - 30px) 50% no-repeat #e94f21; border-radius: 5px; position: relative; display: inline-block;} a.link-files:hover {background: url(../images/download.svg) calc(100% - 30px) 50% no-repeat #111111; } @media (max-width:1200px) { .bloc-produit { grid-gap: 40px 40px; } } @media (max-width:1000px) { .bloc-produit, .bloc-produit.reverse { grid-template-columns:1fr; } .bloc-produit.reverse .texte { order: 2;} .bloc-produit.reverse .photo { order: 1;} .bloc-produit .photo img { width: 100%; height: 60vw; object-fit: cover;} } /***** blog *****/ .blog_listing .container { width: 90vw; max-width: var(--maxWidthWrapperLarge); grid-template-columns: repeat(4, 1fr); display: grid; grid-gap: 40px; margin: var(--marginTB);} @media (max-width:1440px) { .blog_listing .container { grid-template-columns: repeat(3, 1fr); display: grid; grid-gap: 40px;} } @media (max-width:1000px) { .blog_listing .container { grid-template-columns: repeat(2, 1fr); display: grid; grid-gap: 40px;} } @media (max-width:600px) { .blog_listing .container { grid-template-columns: 1fr; display: grid; grid-gap: 40px;} } /***** card blog v1 *****/ .card_blog_v1 { position: relative;} .card_blog_v1 a { display: block; text-align: center; overflow: hidden; border-radius: var(--imgRadius); letter-spacing: 0.4px;} .card_blog_v1 .photo { position: relative; overflow: hidden;} .card_blog_v1 .photo img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3/2; border-radius: 0; transition: all 300ms ease-in-out;} .card_blog_v1 .date { width: 95px; height: 29px; text-align: center; font-size: 13px; line-height: 29px; border-radius: 5px; background: #ffffff; position: absolute; right: 15px; top: 15px; z-index: 10; color: #e94f21;} .card_blog_v1 .titre { padding: 15px 30px; font-size: 16px; font-weight: 500; line-height: 150%; background: #111111; display: grid; color: #ffffff; align-items: center; min-height: 80px;} @media (min-width:1201px) { .card_blog_v1 .titre { transition: color 300ms ease-in-out;} .card_blog_v1 a:hover .photo img { transform: scale(1.05);} .card_blog_v1 a:hover .titre { color: #e94f21;} } @media (max-width:600px) { .card_blog_v1 .photo .date { width: 90px; height: 30px; font-size: 13px; line-height: 30px; right: 10px; top: 10px;} .card_blog_v1 .titre { padding: 10px 25px 15px 25px; line-height: 22px; min-height: 80px;} } .bloc-texte.dynamique h2, .bloc-texte.dynamique h3, .bloc-texte.dynamique h4, .bloc-texte.dynamique h5, .bloc-texte.dynamique h6 { font: 600 clamp(18px, 2.6vw, 28px) / 140% "Inter"; letter-spacing: 0.6px; position: relative; margin-bottom: clamp(10px, 2vw, 15px);} .bloc-texte.dynamique h2:before, .bloc-texte.dynamique h3:before, .bloc-texte.dynamique h4:before, .bloc-texte.dynamique h5:before, .bloc-texte.dynamique h6:before { width: 120px; height: 4px; position: absolute; left: 0; bottom: 0; background: var(--mainColor1); z-index: 1; content: ""; } .bloc-texte.dynamique p>img { margin: 60px auto; border-radius: var(--imgRadius); display: block; width: 100%; max-width: 100%; height: auto;} .bloc-texte.dynamique ul { padding: clamp(3px, 1vw, 5px) 0;} .bloc-texte.dynamique ul li { position: relative; padding-left: 20px; margin-bottom: clamp(5px, 1.8vw, 10px); line-height: 170%;} .bloc-texte.dynamique ul li:before { width: 18px; height: 12px; position: absolute; left: 0; top: 8px; background: url("../images/arrow_list.svg") 0 0 / contain no-repeat; filter: invert(0); content: "";} .bloc-texte.dynamique ul li:last-child { margin-bottom: 0;}