/***** top page *****/ .top_page { position: relative; padding-top: 200px; padding-bottom: clamp(40px, 5vw, 80px); text-align: center; background-color: var(--mainColor4); } .top_page .sous_titre { margin-bottom: 5px; color: var(--mainColor1);} .top_page .titre_main { margin-bottom: 15px; } .top_page .titre_line:before { left: 50%; transform: translateX(-50%);} @media (max-width:1200px) { .top_page { padding-top: 150px;} } /***** breadcrumb *****/ .breadcrumb { z-index: 50; font-size: 12px; line-height: 20px; margin-bottom: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--mainColor2);} .breadcrumb li { display: inline; margin: 0 15px; letter-spacing: 0.8px; position: relative;} .breadcrumb li:after { width: 1px; height: 10px; position: absolute; right: -16px; top: 3px; background: var(--mainColor2); content: "";} .breadcrumb li:last-child:after { display: none;} .breadcrumb li a { color: var(--mainColor2);} .breadcrumb li a.active { color: var(--mainColor2);} @media (max-width:1200px) { .breadcrumb { top: 20px;} } @media (max-width:1000px) { .breadcrumb { position: static; margin-bottom: 25px;} } @media (max-width:700px) { .breadcrumb { display: none;} } .txt-highlight .wrapper { padding: clamp(20px, 4vw, 60px); border-radius: var(--imgRadius); background-color: var(--mainColor4); } /* --- BLOG --- */ /***** 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;} #diagnostic .txt-highlight { margin: clamp(30px, 3vw, 50px) auto;} /* #diagnostic .txt-highlight .grid_titre { display: grid; grid-template-columns: 35px 1fr; align-items: center;} */ #diagnostic .txt-highlight .grid_titre img { width: 100%; max-width: 35px; height: auto; display: block; object-fit: cover; margin-bottom: 20px;} #diagnostic .txt-highlight .container .item { position: relative; padding-bottom: 20px; margin-bottom: 20px;} #diagnostic .txt-highlight .container .item:after { width: 120px; height: 1px; position: absolute; left: 0; bottom: 0; background: var(--mainColor1); z-index: 1; content: ""; } #diagnostic .txt-highlight .container .item:last-of-type { padding-bottom: 0;} #diagnostic .txt-highlight .container .item:last-of-type:after { display: none;} #diagnostic .txt-highlight .container .sous_titre { font-size: 18px; color: var(--mainColor1); } @media (max-width:1000px) { } @media (max-width:700px) { } #primes .bloc_txt_img.small { margin: var(--marginTB); } #primes .bloc_txt_img.small .container { grid-template-columns: 200px 1fr; align-items: flex-start; } #primes .bloc_txt_img.small .container .txt .wrap { max-width: inherit;} #primes .bloc_txt_img.small .container .attention { position: relative; padding-left: 30px;} #primes .bloc_txt_img.small .container .attention:after { width: 2px; height: 100%; position: absolute; left: 0; bottom: 0; top: 0; background: var(--mainColor1); z-index: 1; content: ""; } @media (max-width:1000px) { #primes .bloc_txt_img.small .container { grid-template-columns: 150px 1fr;} #primes .bloc_txt_img.small .container .attention { padding-left: 20px;} #primes .bloc_txt_img.small .container .attention:after { width: 1px; } } @media (max-width:700px) { #primes .bloc_txt_img.small .container { grid-template-columns: 1fr;} #primes .bloc_txt_img.small .container .item.img { max-width: 200px; margin: 0 auto} } #primes .bloc_txt_img.small .container .primes_prix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px auto;} #primes .bloc_txt_img.small .container .primes_prix .item { padding: 20px; background-color: var(--mainColor4); border-radius: var(--linkRadius); display: flex; gap: 30px; align-items:flex-start;} #primes .bloc_txt_img.small .container .primes_prix .item p span { display: block; font-size: 17px; font-weight: 600; } #primes .bloc_txt_img.small .container .primes_prix .item img { max-width: 22px; height: auto; margin-top: 8px;} @media (max-width:1000px) { #primes .bloc_txt_img.small .container .primes_prix { grid-template-columns: 1fr; } } @media (max-width:700px) { }