:root {--padding_defaut_mobile: 4.16vw;--progress-devis: 10px;--color-carousel-home: #00d4d2;--color-carousel-nav: rgba(255, 255, 255, 0.25);--color-carousel-nav-hover: rgba(255, 255, 255, 0.6);--gap-carousel: 24px;transition: var(--color-carousel-home) 0.5s;--width-house-modal: calc(100% / 2 - 10px);--width-service-modal: calc(100% / 2 - 10px);--background-slide-btn: #00d4d2;--url-background-modal-pc: url("https://centreservicesdev.fr/assets/img/services/modal-8-pc.jpg");--url-background-modal-bulle-pc: url("https://centreservicesdev.fr/assets/img/services/modal-8-bulle-pc.png");--url-background-modal-bulle-pc-merci: url("https://centreservicesdev.fr/assets/img/services/modal-8-bulle-pc-merci.png");--url-background-modal-circle-pc-merci: url("https://centreservicesdev.fr/assets/img/services/modal-circle-merci-8.png");--url-background-modal-mobile: url("https://centreservicesdev.fr/assets/img/services/modal-8-mobile.jpg");--visible-last-step-devis: block;--nbrDots: calc(50% - 72px);--col-width: 0px;--menu-height: 500px;--box-height: 0;--max-width-cities: 700px;--b-cyan: #37dfdf;--scrollbar-width: 0px;--cs-radius: 28px;--cs-link-color: #008bff;--cs-border-color: #ddd;} @media (max-width:991.98px) { :root {--cs-radius: 20px} } @media screen and (min-width: 1200px) { :root {--gap-carousel: 48px;} } * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Lato", sans-serif;} body.noOverflow {overflow: hidden;position: fixed;width: 100%;} /**** BALISES HTML ****/ html, body {margin: 0;padding: 0;overflow-x: hidden;scroll-behavior: smooth;} iframe {border-radius: 20px;} img {display: block;} a {text-decoration: none;} hr {border-top: 1px solid #fff; border-bottom: 0; border-right: 0; border-left: 0; background: none; height: 1px; margin: 24px 0;} h2 {max-width: 100%!important;} #maquettes_mobile {display: none;} #maquettes_tablet {display: none;} #maquettes_pc {display: none;} #bloc_liens_maquettes {padding: 5vw 10vw 15vw 10vw;} #bloc_liens_maquettes a {display: block;margin: 8px 0 6px 0;} @media (max-width: 428px) { #maquettes_mobile {display: block;} } @media (min-width: 429px) and (max-width: 1080px) { #maquettes_tablet {display: block;} } @media (min-width: 1081px) { #maquettes_pc {display: block;} } /**** CHATBOT ****/ #chat-widget-container:not(.loaded) {display: none !important;} #chat-widget-minimized {visibility: hidden !important;} /* ******************************* * CSS UTILITAIRE * ***************************** */ /**** MASQUÉ ÉLÉMENTS ****/ .hide_mobile {display: none !important;} .hide_mobile_tablet {display: none !important;} .avis.hide_avis { display: none;} .gloss {box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.35);} .gloss_blue {box-shadow: 0 0 0 1px #ddd;} .displaynone, .hide {display: none !important;} .not_visibility {visibility: hidden;} .fade_out {opacity: 0;} .nav_services.hideonpc {display: none;} /**** FONT ****/ .text-color-default {color: #767676 !important;} .text_center {text-align: center;} .font_xxl, h1, h2 {font-size: 30px;} .font_xl {font-size: 25px;} .font_l {font-size: 18px;} .font_m, h3, p, li, a, button {font-size: 14px;} .font_s {font-size: 12px;} .font_modal_h3 {font-size: 20px;} .bold {font-weight: bold;} .h2 {width: 100%;text-align: center;padding: 30px 20px 20px 20px;font-weight: 600;line-height: 1;} .white_space {white-space: nowrap;} /**** COULEURS ****/ .c-yellow {color: #ffea34;} .c-grey {color: #ececec;} /**** POSITION ****/ .relative {position: relative;} /**** PADDING TOP ****/ .pt_20 {padding-top: 20px;} /**** PADDING BOTTOM ****/ .pb_20 {padding-bottom: 20px;} /**** MARGIN TOP ****/ .mt_0 {margin-top: 0 !important;} .mt_8 {margin-top: 8px;} .mt_12 {margin-top: 12px;} .mt_24 {margin-top: 24px;} .mt_48 {margin-top: 48px;} .mt_30 {margin-top: 30px;} .mt_50 {margin-top: 50px;} .mt_5vw {margin-top: 5vw;} /**** MARGIN BOTTOM ****/ .mb_8 {margin-bottom: 8px;} .mb_10 {margin-bottom: 10px;} .mb_48 {margin-bottom: 48px;} .mb_5vw {margin-bottom: 5vw;} .mb_200 {margin-bottom: 200px;} /**** MARGIN RIGHT ****/ .mr_10 {margin-right: 10px;} /**** ANIMATION HOVER ****/ .hover {transition: all 0.25s ease;} .hover:hover {transform: translateY(-3px);} /**** AUTRES ****/ .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;} .scroll-x {overflow-x: auto;overflow-y: hidden;-ms-overflow-style: none;scrollbar-width: none;} .scroll-x::-webkit-scrollbar {display: none;} /** LAZY (APPARITION AU DÉFILEMENT) **/ .lazy {opacity: 0;transform: translateY(50px);transition: all 0.6s ease;} .lazy_show {opacity: 1;transform: translateY(0);} /** MASQUÉ L'ICÔNE DU RECAPTCHA **/ .grecaptcha-badge {visibility: hidden !important;} .border.beforeSAP {width: calc(100% - 110px);} @media (min-width: 768px) { h2 {padding: 20px 20px 20px;margin: 0;} .hide_mobile {display: block !important;} .hide_pc_tablet {display: none !important;} .font_s {font-size: 16px;} } @media (min-width: 1600px) { .hide_pc {display: none;} .font_m {font-size: 18px;line-height: 1.5em;} .font_l {font-size: 20px;} .hide_mobile_tablet {display: block;} } @media (max-width: 375px) { .hide_375 {display: none;} } @media screen and (max-width: 600px) { .text_center_on_mobile {text-align: center;} } @media screen and (min-width: 1100px) { .br {display: none;} } @media screen and (min-width: 1200px) { h2.h2 {font-size: 40px;padding: 0 0 calc(var(--gap-carousel) / 2);padding: 0 0 var(--gap-carousel);} } /* ************************* * ÉLÉMENTS * *********************** */ /** Bas de section avec border radius pour mobile (Bouton devis) **/ .block_radius_bottom {position: relative;padding-bottom: 5px;} .block_radius_bottom > div {display: flex;justify-content: center;align-items: center;flex-direction: column;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;padding-bottom: 10px;} .radius_bottom {position: absolute;left: 0;bottom: 30px;width: 100vw;height: 50px;position: relative;overflow: hidden;} .radius_bottom > div {height: 100%;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;} .radius_bottom.turquoise_cyan {background-color: #00e4df;} .radius_bottom.turquoise_cyan > div {background-color: #ccf2f2;} .radius_bottom.cyan_white {background-color: #fff;} .radius_bottom.cyan_white > div {background-color: #00e4df;} .radius_bottom.turquoise > div {background-color: #00e4df;} /**** BOUTON DEMANDE DE DEVIS ****/ .block_btn_devis {display: flex;justify-content: center;align-items: center;flex-direction: column;z-index: 3;} .block_btn_devis button {cursor: pointer;display: flex;padding: 0px 25px 0 16px;border-radius: 50px;background: linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff);border: none;color: #fff;font-size: 19px;font-weight: 700;height: 54px;line-height: 50px;} .block_btn_devis.rush button {background: linear-gradient(90deg, #00bfff 10%, #0081ff 90%, #0081ff);} .block_btn_devis button span {background-image: url(https://centreservicesdev.fr/assets/img/icons/arrow.png);background-size: 36px;background-position: center;background-repeat: no-repeat;width: 36px;margin-right: 8px;height: 92%;position: relative;top: 2px;} .devis {cursor: pointer;} .block_btn_devis button span.animate_move_button {animation: move-arrow-button-mobile 1.5s infinite forwards;} /**** TEXTE BAS DE SECYION DEMENADE DE DEVIS ****/ .block_btn_devis .info {font-size: 12px;color: #a6a6a6;padding: 10px 0 30px;font-style: italic;} .block_btn_devis .info.blue {color: #00009c;} .block_btn_devis .info.orange {color: rgba(182, 88, 0, 42%);} @media (min-width: 768px) { .block_radius_bottom {display: none;} .block_btn_devis {display: none;} .block_btn_devis button span.animate_move_button {animation: none;} } /** BACGROUND LETTRE (AVIS)**/ .letter_cercle.pomme {background-color: #8db600;/* vert pomme */} .letter_cercle.cyan {background-color: #00b7eb;/* cyan lumineux */} .letter_cercle.yellow {background-color: #ffd300;/* jaune franc */} @media screen and (min-width: 1200px) { .letter_cercle {width: 80px;height: 80px;} } /* ****************** * FIN * **************** */ /* *********************** * HEADER * *********************** */ header {margin: 0 auto;z-index: 22;width: 100%;position: absolute;top: 0;padding: 19px 19px 0;display: flex;justify-content: center;} header nav {width: 100%;position: relative;background-color: #fff;padding: 10px 16px;display: flex;align-items: center;justify-content: space-between;border-radius: 34px;top: 0;left: 0;transition: all 0.8s;z-index: 5;} header.nav_agence .container_logo,nav.BR1 .container_logo {cursor: pointer;} header nav.fixed {visibility: hidden;position: fixed;left: auto;opacity: 0;} header nav .nav_left {display: flex;flex: 1;align-items: center;} header .nav_services {display: none;} header .nav_buttons {display: none;} header nav ul {display: flex;align-items: center;list-style: none;} header nav .nav_services li {display: flex;align-items: center;font-weight: 600;} header nav .other_service {padding-bottom: 14px !important;padding-top: 8px !important;border-radius: 0 0 24px 24px !important;} header nav .other_service a:hover {color: #555;} header .back_menu_services {cursor: pointer;background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link.svg") no-repeat;width: 38px;height: 38px;margin-right: 10px;transition: all 0.3s;} header nav ul li a {font-weight: 600;color: #878787;font-size: 16px;white-space: nowrap;} header nav ul li.job {display: flex;align-items: center;color: #00009c;cursor: pointer;font-size: 16px;font-weight: 600;} header nav:not(.nav_fixed) ul li.job {margin-right: 28px;} header nav:not(.nav_fixed) ul li.job a {color: #00009c;} header nav.nav_fixed ul li.job a {color: #fff;font-size: 12px;} header nav ul li.devis {cursor: pointer;display: flex;align-items: center;padding: 5px 20px 5px 10px;border-radius: 50px;color: #fff;font-size: 16px;font-weight: 700;white-space: nowrap;} header nav.click, header .nav_fixed.click {cursor: pointer;} header nav.border .nav_services li:not(#showServices) {display: flex;} header nav.border, header .nav_fixed.border {border: 1px solid #ddd;} header .nav_services li.active .back_menu_services {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-active.svg") no-repeat;} header .container_logo .avatar.animate_logo {animation: turn-logo 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite forwards;} @keyframes turn-logo { 0% {transform: rotateZ(0deg);} 25% {transform: rotateZ(45deg);} 70% {transform: rotateZ(45deg);} 100% {transform: rotateZ(-720deg);} } #showServices {position: relative;} #showServices a {position: relative;z-index: 10;} #showServices > ul {transition: all 0.3s;} #showServices > ul li {transition: all 0.3s;} #showServices {transition: all 0.3s;} #showServices:hover .back_menu_services.turn {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg") no-repeat;color: red;transform: rotateZ(45deg);} #showServices ul.other_service li:has(a:hover) .back_menu_services {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg") no-repeat;} #showServices:hover > ul {box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);width: fit-content;height: auto;background: #fff;display: block !important;position: absolute;text-align: left;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;top: 38px;left: 19px;padding: 5px 16px 3px;z-index: 10;} header:has(#showServices:hover) .nav_services {overflow: initial;} #showServices:hover > ul > li {margin-bottom: 5px;padding: 0 3px;position: relative;top: -9px;} header nav li:has(> a:hover) .back_menu_services {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg") no-repeat;} /** CONTAINER LOGO **/ .container_logo {position: relative;display: flex;align-items: center;} .container_logo .copyright {position: absolute;top: 0;left: 0;width: 38px;height: 48px;} .container_logo .avatar {cursor: pointer;margin-right: 10px;width: 38px;height: 48px;} .container_logo .logo_name {width: 150px;height: 48px;} /************* ICÔNE DEVANT LE LIEN JOB (NAV + MENU MOBILE) ********************/ .back_menu_job {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png") no-repeat;background-size: contain;width: 30px;height: 30px;margin-right: 10px;} /************* ICÔNE DEVANT LE BOUTON DEVIS (NAV + MENU MOBILE) ********************/ .back_menu_devis {background: url("https://centreservicesdev.fr/assets/img/icons/arrow.png") no-repeat;background-size: contain;width: 30px;height: 30px;} /******************* BOUTON OUVRIR-FERMER MENU MOBILE ****************/ #header-icon {position: absolute;padding: 1em;width: 60px;cursor: pointer;z-index: 5;right: 16px;} #header-icon::before {content: "";position: absolute;width: 28px;height: 3.3px;background: var(--color-carousel-home);transform: translateY(-10px);box-shadow: 0 7.8px var(--color-carousel-home);transition: 0.3s;border-radius: 30px;} #header-icon::after {content: "";position: absolute;width: 28px;height: 3.4px;background: var(--color-carousel-home);transform: translateY(5px);transition: 0.5s;border-radius: 30px;} /* *********************** * NAV FIXE * ********************* */ header .nav_fixed {width: calc(100% - 38px);z-index: 1000;position: fixed;top: 2.4dvh;left: 19px;padding: 10px 16px;opacity: 0;transition: all 0.5s;visibility: hidden;--nav-offset: 19px;top: var(--nav-offset);} header .nav_fixed_buttons {display: flex;align-items: center;} header .nav_fixed.visible {visibility: visible;opacity: 1;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);} header .nav_fixed.none {display: none;} header nav ul.nav_fixed_buttons li {cursor: pointer;padding: 8px 18px;border-radius: 50px;border: none;color: #fff;font-weight: 600;font-size: 12px;} header nav ul li.devis, header .nav_fixed .devis {background: var(--btn-color, linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff));margin: 0 0 0 0;} header .nav_fixed .devis {margin: 0 12px 0 0;} header .nav_fixed .devis .content_pc {display: none;} header nav.nav_fixed .job {background-color: #2e2f7a;color: #fff;} header .nav_fixed .container_logo .avatar {width: 38px;height: 48px;} header .nav_fixed .container_logo .copyright {width: 38px;height: 48px;} header .nav_fixed .container_logo .logo_name {width: 150px;height: 48px;display: none;} header .nav_fixed .back_menu_devis, header .nav_fixed .back_menu_job {display: none;} /********************** ANIMATIONS **********************************/ /** Bouton du menu (ouvrir fermer) **/ header.active #header-icon::before {transform: translateY(0px) rotate(45deg);box-shadow: 0 0 #ccc;background: #ccc;} header.active #header-icon::after {transform: translateY(0px) rotate(-45deg);background-color: #ccc;} header.active nav.border {border: none;} nav.border {transition: border-width 0.8s;} /** Ajustement pour iPhone avec support des safe areas **/ @supports (-webkit-touch-callout: none) and (top: env(safe-area-inset-top)) { header .nav_fixed {--safe-top: env(safe-area-inset-top);top: calc(var(--safe-top) + var(--nav-offset));} } @media (min-width: 768px) { header {padding: 0;} header nav {top: calc(2 * var(--gap-carousel));width: calc(80vw - 3 * var(--gap-carousel));} header nav ul.nav_fixed_buttons li {font-size: 16px;} header .nav_fixed .devis .content_mobile {display: none;} header .nav_fixed .devis .content_pc {display: block;} header .nav_fixed {width: calc(80vw - 3 * var(--gap-carousel));top: calc(var(--gap-carousel) / 2);left: auto;} /*********** PAGE AGENCE **********/ header.nav_agence nav {top: calc(var(--gap-carousel) / 2);width: calc(100% - var(--gap-carousel) * 2);} header.nav_agence #menu-mobile-content {width: calc(100% - var(--gap-carousel) * 2);top: calc(var(--gap-carousel) / 2);} .horaires_title {font-size: 24px;} header.nav_agence .nav_services.hideonpc {display: flex;margin-left: 20px;} header.nav_agence .nav_fixed .container_logo .logo_name {display: block;} header nav .nav_services li:not(#showServices) {display: none;} } @media (min-width: 820px) { header .nav_fixed .container_logo .logo_name {display: block;} header nav.nav_fixed ul li.job a {font-size: 16px;} } @media (min-width: 980px) { header.nav_agence .nav_services.hideonpc {display: none;} header.nav_agence .nav_services:not(.hideonpc) {display: flex;margin-left: 10px;} header.nav_agence nav .nav_services li:not(#showServices) {display: block;} header.nav_agence nav .nav_services li {margin: 0 10px;} } @media screen and (min-width: 1200px) { header .nav_services.hideonpc {margin-left: 10px;} header nav {height: 84px;padding: 21px;border-radius: 70px;} #header-icon {display: none;} header nav ul li.devis span:last-child {position: relative;bottom: 2px;} header .nav_fixed .devis {order: 2;padding: 5px 20px 5px 10px;font-size: 16px;font-weight: 700;margin: 0;} header .nav_fixed .back_menu_devis, header .nav_fixed .back_menu_job {display: block;} header nav.nav_fixed .job {background-color: #fff;color: #2e2f7a;padding: 0;margin-right: 28px;} header nav.nav_fixed ul li.job a {color: #2e2f7a;font-size: 16px;} header .container_logo {margin-right: 12px;} header .nav_services {display: flex;flex: 1;height: 38px;overflow: hidden;} header .nav_buttons {display: flex;} .back_menu_job {display: inline-block;} header nav:not(.nav_fixed) ul li.job a {position: relative;bottom: 8px;} header nav:not(.nav_fixed) ul li.job {display: block;} header nav:not(.nav_fixed) ul li.devis {position: initial;} header .nav_fixed {padding: 21px;} header .nav_fixed .container_logo .avatar {width: 42px;height: 53px;} header .nav_fixed .container_logo .copyright {width: 42px;height: 53px;} header .nav_fixed .container_logo .logo_name {height: 53px;} header.nav_agence .nav_services.hideonpc {margin-left: 0;} header.nav_agence .nav_fixed .nav_services {margin-left: 10px;} header nav .nav_services li:not(#showServices) {display: block;} header.nav_agence nav .nav_services li {margin: 0 10px;} header .nav_fixed .back_menu_job {margin-right: 13px;} .bulle_tablet {display: none;} } @media screen and (min-width: 1550px) { header nav .nav_services li {margin: 0 10px;} } @media screen and (min-width: 1600px) { header .nav_services {overflow: initial;} header.nav_agence nav {width: calc(80vw - 3 * var(--gap-carousel));} } @media screen and (min-width: 1700px) { header .nav_services {display: flex;flex: 1;} } @media screen and (min-width: 1800px) { header .container_logo {margin-right: 10px;} header nav .nav_services li {margin: 0 10px;} } @media screen and (max-width: 1550px) and (min-width: 1200px) { .nav_services.hideonpc {display: flex;} .nav_services:not(.hideonpc) {display: none;} } @media screen and (min-width: 1200px) { .container_logo .copyright {width: 42px;height: 53px;} .container_logo .avatar {margin-right: 10px;width: 42px;height: 53px;} .container_logo .logo_name {height: 53px;} } /* ****************** * FIN * **************** */ /* **************************** * MENU MOBILE * ************************** */ #menu-mobile {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;opacity: 0;visibility: hidden;transition: all 0.3s ease-out;background-color: rgba(0, 0, 0, 0);z-index: 3;display: flex;justify-content: center;overflow: hidden;opacity: 1;transition: background-color 0.3s ease;} #menu-mobile-content {width: calc(100% - 38px);margin: 19px;background-color: white;border-radius: 34px;padding: 10px 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;height: 68px;} #menu-mobile .border {border-bottom: 1px solid #e6e6e6;opacity: 0;} #menu-mobile .menu_mobile_top {width: 100%;display: flex;align-items: center;justify-content: space-between;padding-bottom: 10px;} #menu-mobile .menu_mobile_top .close {cursor: pointer;position: relative;top: -1px;right: 10px;} #menu-mobile .menu_mobile_main {padding: 10px 0;position: relative;} #menu-mobile .menu_mobile_bottom {padding-top: 10px;} #menu-mobile .menu_mobile_bottom ul li {padding: 4px 0;width: fit-content;} #menu-mobile ul {list-style: none;padding: 0;} #menu-mobile ul li {display: table;width: 100%;vertical-align: middle;font-weight: 600;opacity: 0;} #menu-mobile ul li span {height: 38px;display: table-cell;vertical-align: middle;} #menu-mobile ul li a {font-size: 14px;color: #535353;font-weight: 600;margin-right: 10px;margin-left: 10px;position: relative;top: -2px;} #menu-mobile ul li span.back_menu_link {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link.svg") no-repeat;background-position: center;width: 38px;min-width: 38px;height: 48px;margin-right: 10px;} #menu-mobile ul li span.back_menu_phone {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-phone.png") no-repeat;background-size: contain;width: 38px;height: 38px;margin-right: 10px;} #menu-mobile ul li span.back_menu_devis {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-devis.png") no-repeat;background-size: contain;width: 38px;height: 38px;} #menu-mobile ul li .last-child {padding-left: 10px;} #menu-mobile ul li span.back_menu_job {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png") no-repeat;background-size: contain;width: 38px;height: 38px;margin-right: 10px;} #menu-mobile ul li span.line {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-horizontale.svg") no-repeat;background-size: auto 38px;background-position: left;height: 38px;width: 100%;margin-left: 10px;} #menu-mobile ul li span.angle_top {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-top.svg") no-repeat;background-size: auto 48px;background-position: center;width: 38px;min-width: 38px;height: 48px;} #menu-mobile ul li span.angle_bottom {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-bottom.svg") no-repeat;background-size: 100%;width: 38px;min-width: 38px;height: 38px;background-position: 0 -5px;} #menu-mobile ul span.line_verticale {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-verticale.svg") repeat-y;background-size: 100%;background-position: center;width: 38px;min-width: 38px;height: 48px;} #menu-mobile span.logo_sap {background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-logo-sap.svg") no-repeat;width: 110px;height: 75px;position: absolute;top: 64px;right: -4px;opacity: 0;} #menu-mobile .menu_mobile_bottom li, #menu-mobile .menu_mobile_bottom li a {font-size: 16px;color: #00b6ff;cursor: pointer;} #menu-mobile .menu_mobile_bottom li:last-child a {color: #00009c;} /****************** ANIMATION OUVERTURE & FERMETURE DU MENU MOBILE **********************/ #menu-mobile.show {visibility: visible;opacity: 1;animation: background-opacity 0.5s linear forwards;} #menu-mobile.close #menu-mobile-content {height: var(--menu-height);} #menu-mobile.show .border, #menu-mobile.show .border {animation: open-box 0.5s 0.4s forwards;} #menu-mobile.close {animation: background-opacity 0.4s linear forwards reverse;} #menu-mobile.show #menu-mobile-content {animation: open-box-content 0.3s linear forwards;} #menu-mobile.show .menu_mobile_main ul li:nth-child(1) {animation: open-box 0.5s 0.1s forwards;} #menu-mobile.show .menu_mobile_main ul li:nth-child(2) {animation: open-box 0.5s 0.17s forwards;} #menu-mobile.show .menu_mobile_main ul li:nth-child(3) {animation: open-box 0.5s 0.24s forwards;} #menu-mobile.show .menu_mobile_main ul li:nth-child(4) {animation: open-box 0.5s 0.31s forwards;} #menu-mobile.show .menu_mobile_main ul li:nth-child(5) {animation: open-box 0.5s 0.38s forwards;} #menu-mobile.show .menu_mobile_bottom ul li:nth-child(1) {animation: open-box 0.5s 0.45s forwards;} #menu-mobile.show .menu_mobile_bottom ul li:nth-child(2) {animation: open-box 0.5s 0.52s forwards;} #menu-mobile.show .menu_mobile_bottom ul li:nth-child(3) {animation: open-box 0.5s 0.58s forwards;} #menu-mobile.show .logo_sap {animation: open-box 0.5s 0.4s forwards;} #menu-mobile.close #menu-mobile-content {animation: close-box-content 1s linear forwards;} #menu-mobile {visibility: hidden;opacity: 0;} #menu-mobile.show {visibility: visible;opacity: 1;animation: background-opacity 0.3s linear forwards;} #menu-mobile.close {animation: background-opacity 0.3s linear forwards reverse;} #menu-mobile.close #menu-mobile-content {animation: close-box-content 0.3s linear forwards;} #menu-mobile.close .menu_mobile_main ul li, #menu-mobile.close .menu_mobile_bottom ul li,#menu-mobile.close .logo_sap {animation: open-box 0.3s forwards reverse;} /** Ouverture fermeture du menu mobile (opacité) **/ @keyframes open-box { 0% {opacity: 0;} 50% {opacity: 0.5;} 100% {opacity: 1;} } /** Modifie l'opacity du background (ouverture fermeture du menu mobile) **/ @keyframes background-opacity { 0% {background-color: rgba(0, 0, 0, 0);} 35% {background-color: rgba(0, 0, 0, 0.1);} 70% {background-color: rgba(0, 0, 0, 0.15);} 100% {background-color: rgba(0, 0, 0, 0.25);} } /** Ouverture du menu mobile (hauteur) - toutes les 12.5% **/ @keyframes open-box-content { 0% {height: 68px;} 12.5% {height: calc(var(--menu-height) * 0.202);} 25% {height: calc(var(--menu-height) * 0.25);} 37.5% {height: calc(var(--menu-height) * 0.375);} 50% {height: calc(var(--menu-height) * 0.5);} 62.5% {height: calc(var(--menu-height) * 0.625);} 75% {height: calc(var(--menu-height) * 0.75);} 87.5% {height: calc(var(--menu-height) * 0.875);} 100% {height: var(--menu-height);} } /** Fermeture du menu mobile (hauteur) - inverse, toutes les 12.5% **/ @keyframes close-box-content { 0% {height: calc(var(--menu-height));} 12.5% {height: calc(var(--menu-height) * 0.875);} 25% {height: calc(var(--menu-height) * 0.75);} 37.5% {height: calc(var(--menu-height) * 0.625);} 50% {height: calc(var(--menu-height) * 0.5);} 62.5% {height: calc(var(--menu-height) * 0.375);} 75% {height: calc(var(--menu-height) * 0.25);} 87.5% {height: calc(var(--menu-height) * 0.202);} 100% {height: 68px;} } @media (min-width: 400px) { #menu-mobile ul li a {font-size: 16px;} } @media (min-width: 768px) { #menu-mobile-content {position: relative;width: calc(80vw - 3 * var(--gap-carousel));top: calc(2 * var(--gap-carousel));margin: 0;left: 0;} } /* ****************** * FIN * **************** */ /* *********************** * FOOTER * *********************** */ footer {padding: 50px 19px 10px;} footer.cta {padding: 50px 19px 100px;} footer p, footer li, footer li a, footer li span {font-size: 12px;} footer li a, footer li span {color: inherit;} .footer_top p {padding: 20px 0;} .footer_lists {display: flex;} .text-color-default svg, .text-color-default span {display: inline-block;margin-right: 3px;} .footer_list svg {transform: scale(1.2);opacity: 0.6;} .footer_list {width: 40%;} .footer_list:first-child {margin-right: 30px;} .footer_list h3 {padding: 20px 0 10px 0;} .footer_list h3.last_h3 {padding: 20px 0 10px 0;} .footer_lists ul {list-style: none;} .footer_lists li {line-height: 1.5;} .footer_bottom {margin-top: 50px;border-top: 1px solid #e0dbdb;padding: 20px 0;} .footer_bottom p {font-size: 10px;color: #a8a4a4;margin: 10px 0;} .footer_bottom p:last-child {margin-top: 30px;} .footer_bottom p a {font-size: inherit;text-decoration: underline;color: inherit;} .footer_bottom p:last-child a {text-decoration: none;} @media (max-width: 768px) { .footer_list svg {transform: scale(1);position: relative;top: 3px;} } @media (min-width: 768px) { footer {width: calc(80vw - var(--gap-carousel));margin: var(--gap-carousel) auto 0;width: calc(80vw - 3 * var(--gap-carousel));width: calc(100% - var(--gap-carousel) * 2);margin: var(--gap-carousel) auto 0;display: flex;flex-wrap: wrap;padding: 50px 0;} footer.cta {padding: 50px 19px 10px;} footer h3 {font-weight: 500;font-size: 20px;white-space: nowrap;} .footer_top {width: calc(40% - 30px);margin-right: 30px;} .footer_lists {width: 60%;justify-content: space-around;} .footer_list {width: 35%;} .footer_list:first-child {margin-right: 0;} .footer_list h3 {padding: 0 0 20px;} .footer_top p {width: 80%;font-size: 18px;line-height: 22px;color: #787878;} footer li a, footer li span {font-size: 18px;line-height: 22px;color: #787878;} } @media screen and (min-width: 1200px) { .footer_bottom p {font-size: 14px;} } @media screen and (min-width: 1600px) { footer {width: calc(80vw - 3 * var(--gap-carousel));margin: var(--gap-carousel) auto 0;display: flex;flex-wrap: wrap;padding: 50px 0;} footer h3 {font-weight: 500;font-size: 26px;white-space: nowrap;} .footer_top {width: calc(40% - 30px);margin-right: 30px;} .footer_lists {width: 60%;justify-content: space-around;} .footer_list {width: 35%;} .footer_list:first-child {margin-right: 0;} .footer_list h3 {padding: 0 0 20px;} .footer_top p {width: 80%;font-size: 22px;line-height: 34px;color: #787878;} footer li a, footer li span {font-size: 22px;line-height: 34px;color: #787878;} } /* ****************** * FIN * **************** */ /************************* FICHIER BASE.CSS ****************************/ #new_content {--cs-form-radius: 18px;--cs-form-radius-sm: 14px;--cs-form-border: rgba(0, 0, 0, .12);--cs-form-border-soft: rgba(0, 0, 0, .08);--cs-form-shadow: 0 10px 26px rgba(0, 0, 0, .06);--cs-form-accent: #008bff;--cs-form-text: #0b2b3a;--cs-form-muted: #666;--cs-form-bg: #fff;} #new_content .cs-sidebar .cs-sidebar-block--tall {background: var(--cs-form-bg);border: 1px solid var(--cs-form-border-soft);border-radius: var(--cs-form-radius);} #new_content .cs-sidebar .cs-sidebar-block-title {color: var(--cs-form-text);font-weight: 800;} #new_content #containerDevisForm {padding: 0 0 0;} #new_content #containerDevisForm form, #new_content #containerDevisForm .form, #new_content #containerDevisForm .formulaire {margin: 0;} #new_content #containerDevisForm * {box-sizing: border-box;} #new_content #containerDevisForm h2, #new_content #containerDevisForm h3, #new_content #containerDevisForm .title, #new_content #containerDevisForm .form_title {color: var(--cs-form-text);text-align: left !important;margin: 1px 0 8px;font-weight: 800;line-height: 1.2;padding-top: 0;} #new_content #containerDevisForm p, #new_content #containerDevisForm .help, #new_content #containerDevisForm .small, #new_content #containerDevisForm .hint {color: var(--cs-form-muted);margin: 8px 0 0;} #new_content #containerDevisForm .form_groupe,#new_content #containerDevisForm .form-group,#new_content #containerDevisForm .groupe,#new_content #containerDevisForm .row {margin: 0 0 12px;} #new_content #containerDevisForm input[type="text"], #new_content #containerDevisForm input[type="email"], #new_content #containerDevisForm input[type="tel"], #new_content #containerDevisForm input[type="number"], #new_content #containerDevisForm input[type="date"], #new_content #containerDevisForm input[type="file"], #new_content #containerDevisForm select, #new_content #containerDevisForm textarea {min-width: 100%;width: 100%;padding: 12px 14px;border: 1px solid #ddd;border-radius: var(--cs-form-radius-sm);background: #fff;color: var(--cs-form-text);outline: none;line-height: 1 !important;font-size: 16px;} @media (max-width:900px) { #new_content #containerDevisForm input[type="text"], #new_content #containerDevisForm input[type="email"], #new_content #containerDevisForm input[type="tel"], #new_content #containerDevisForm input[type="number"], #new_content #containerDevisForm input[type="date"], #new_content #containerDevisForm input[type="file"], #new_content #containerDevisForm select, #new_content #containerDevisForm textarea {margin-bottom: 12px;} #new_content #containerDevisForm .form_groupe, #new_content #containerDevisForm .form-group, #new_content #containerDevisForm .groupe, #new_content #containerDevisForm .row {margin: 0;} } #new_content #containerDevisForm textarea {min-height: 120px;resize: vertical;} #new_content #containerDevisForm input:focus, #new_content #containerDevisForm select:focus, #new_content #containerDevisForm textarea:focus {border-color: rgba(0, 139, 255, .55);box-shadow: 0 0 0 4px rgba(0, 139, 255, .12);} #new_content #containerDevisForm input::placeholder, #new_content #containerDevisForm textarea::placeholder {color: rgba(11, 43, 58, .45);} #new_content #containerDevisForm .groupe_50, #new_content #containerDevisForm .col-6, #new_content #containerDevisForm .half {width: 100%;} @media (min-width:900px) { #new_content #containerDevisForm .form_groupe,#new_content #containerDevisForm .row {display: flex;gap: 12px;} #new_content #containerDevisForm .groupe_50, #new_content #containerDevisForm .col-6, #new_content #containerDevisForm .half {flex: 1 1 calc(50% - 6px);} } #new_content #containerDevisForm label {display: block;margin: 0 0 6px;font-weight: 700;color: var(--cs-form-text);} #new_content #containerDevisForm .radio, #new_content #containerDevisForm .checkbox, #new_content #containerDevisForm .choice {margin: 8px 0;} #new_content #containerDevisForm input[type="radio"], #new_content #containerDevisForm input[type="checkbox"] {accent-color: var(--cs-form-accent);} #new_content #containerDevisForm input[type="radio"]+label, #new_content #containerDevisForm input[type="checkbox"]+label {display: flex;align-items: center;gap: 10px;width: 100%;padding: 12px 14px;border: 1px solid var(--cs-form-border);border-radius: var(--cs-form-radius-sm);background: #fff;cursor: pointer;user-select: none;line-height: 1.25;transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;} @media (hover:hover) { #new_content #containerDevisForm input[type="radio"]+label:hover, #new_content #containerDevisForm input[type="checkbox"]+label:hover {transform: translateY(-1px);border-color: rgba(0, 0, 0, .18);} } #new_content #containerDevisForm input[type="radio"]:checked+label, #new_content #containerDevisForm input[type="checkbox"]:checked+label {border-color: rgba(0, 139, 255, .45);background: rgba(0, 139, 255, .06);box-shadow: 0 10px 24px rgba(0, 0, 0, .08);} #new_content #containerDevisForm label>input[type="radio"], #new_content #containerDevisForm label>input[type="checkbox"] {margin-right: 10px;} #new_content #containerDevisForm input[type="file"] {padding: 10px 12px;} #new_content #containerDevisForm button, #new_content #containerDevisForm input[type="submit"] {width: 100%;margin-top: 8px;padding: 12px 18px;border-radius: 999px;border: 0;cursor: pointer;font-weight: 800;background: var(--cs-form-accent);color: #fff;box-shadow: 0 10px 24px rgba(0, 139, 255, .25);} #new_content #containerDevisForm button:hover, #new_content #containerDevisForm input[type="submit"]:hover {filter: brightness(.95);} #new_content #containerDevisForm button:disabled, #new_content #containerDevisForm input[type="submit"]:disabled {opacity: .6;cursor: not-allowed;box-shadow: none;} #new_content #containerDevisForm .blockRGPD, #new_content #containerDevisForm .rgpd, #new_content #containerDevisForm .consent {margin-top: 12px;padding-top: 12px;border-top: 1px solid rgba(0, 0, 0, .06);text-align: left;} #new_content #containerDevisForm .blockRGPD p, #new_content #containerDevisForm .rgpd p, #new_content #containerDevisForm .consent p {font-size: 14px !important;line-height: 1.5;color: var(--cs-form-muted);} #new_content #containerDevisForm .blockRGPD a, #new_content #containerDevisForm .rgpd a, #new_content #containerDevisForm .consent a {color: var(--cs-form-accent);} #new_content .cs-sidebar .cs-sidebar-block {overflow: hidden;} @media (max-width:991.98px) { #new_content .cs-sidebar .cs-sidebar-block--tall {padding: 16px;} #new_content #containerDevisForm input[type="text"], #new_content #containerDevisForm input[type="email"], #new_content #containerDevisForm input[type="tel"], #new_content #containerDevisForm select, #new_content #containerDevisForm textarea {font-size: 15px;} } #new_content #containerDevisForm .groupe_100 {width: 100% !important;flex: 0 0 100% !important;min-width: 0 !important;} #new_content #containerDevisForm #type_emploi {display: block !important;width: 100% !important;max-width: 100% !important;min-width: 0 !important;box-sizing: border-box !important;} #new_content #containerDevisForm select {display: block !important;width: 100% !important;max-width: 100% !important;min-width: 0 !important;box-sizing: border-box !important;} #new_content #merciEmploi {text-align: center;} #new_content .cs-page-layout--full {width: 100%;} #new_content .cs-main--full {flex: 0 0 100%;max-width: 100%;padding-right: 0;} #new_content .cs-page-layout.cs-page-layout--full {display: block !important;} #new_content .cs-page-layout.cs-page-layout--full>.cs-main {flex: 0 0 100% !important;max-width: 100% !important;width: 100% !important;padding-right: 0 !important;} #new_content .cs-page-layout.cs-page-layout--full>.cs-sidebar {display: none !important;} #new_content .cs-contact-hero {margin-top: 32px;padding-bottom: 16px;} #new_content .cs-contact-hero__top {max-width: 760px;margin: 0 auto;text-align: center;} #new_content .cs-contact-hero__intro {max-width: 680px;margin: 0 auto;} #new_content #audit_hub .findAgence {max-width: 640px;margin: 0 auto;padding: 0 12px;} #new_content #audit_hub .recherche {position: relative;display: flex;align-items: center;gap: 10px;width: 100%;height: 52px;padding: 0 14px 0 16px;border: 1px solid #ddd;border-radius: 14px;background: #fff;box-sizing: border-box;overflow: visible;margin-bottom: 72px;} #new_content #audit_hub .recherche input.search {flex: 1 1 auto;width: 100%;height: 100%;border: 0;padding: 0;margin: 0;background: transparent;outline: none;font-size: 16px !important;line-height: 1 !important;appearance: none;-webkit-appearance: none;cursor: text;position: relative;top: 0;left: 0;display: flex;align-items: center;} #new_content #audit_hub .recherche .action.drop_picto {flex: 0 0 auto;width: 36px;height: 36px;border-radius: 10px;display: flex;align-items: center;justify-content: center;opacity: .7;pointer-events: none;position: relative !important;left: auto !important;right: auto !important;top: auto !important;bottom: auto !important;transform: none !important;background: transparent !important;} #new_content #audit_hub .recherche .action.drop_picto::before {content: "";width: 10px;height: 10px;border-right: 2px solid rgba(0, 0, 0, .45);border-bottom: 2px solid rgba(0, 0, 0, .45);transform: rotate(45deg);display: block;margin-top: -2px;} #new_content #audit_hub .sites_agences {position: absolute;left: 0;right: 0;top: calc(100% + 8px);z-index: 999;background: #fff;border: 1px solid #ddd;border-radius: 14px;overflow: hidden;box-shadow: 0 18px 50px rgba(0, 0, 0, .12);} #new_content #audit_hub .sites_agences>div {max-height: 360px;overflow: auto;} #new_content #audit_hub .sites_agences a.liens {display: block;padding: 12px 16px;text-decoration: none;color: #0b2b3a;border-bottom: 1px solid rgba(0, 0, 0, .06);} #new_content #audit_hub .sites_agences a.liens:hover {background: rgba(0, 139, 255, .08);} #new_content #audit_hub .sites_agences a.no_result {display: block;padding: 12px 16px;color: #777;} #new_content #audit_hub .sites_agences a.liens:last-of-type {border-bottom: 0;} @media (max-width:520px) { #new_content .cs-contact-hero {margin-top: 24px;padding-bottom: 12px;} #new_content #audit_hub .recherche {height: 48px;padding: 0 12px 0 14px;} #new_content #audit_hub .recherche input.search {font-size: 15px !important;} #new_content #audit_hub .recherche .action.drop_picto {width: 34px;height: 34px;} } #new_content #AuditSection {padding: 0;} #new_content #AuditSection .cs-content {max-width: 980px;margin: 0 auto;text-align: left !important;} #new_content #form_devis {margin-top: 12px;} #new_content #audit-form {background: transparent;border: 0;border-radius: 0;padding: 0;width: 100%;} #new_content #audit-form::after {content: "";display: block;clear: both;} #new_content #audit-form .text-center {text-align: left !important;} #new_content #audit-form h2, #new_content #audit-form h3 {text-align: left !important;color: #0b2b3a;} #new_content #audit-form h2 {margin: 34px 0 12px;padding: 22px 0 0 16px;border-top: 1px solid rgba(0, 0, 0, .08);font-size: 22px !important;position: relative;} #new_content #audit-form h2:first-of-type {margin-top: 36px;padding-top: 0;border-top: 0} #new_content #audit-form h2:first-of-type::before {top: .35em;} #new_content #audit-form h3 {margin: 0 0 12px;padding-left: 14px;font-size: 18px !important;line-height: 1.25em;position: relative;} #new_content #audit-form h3::before {content: "";position: absolute;left: 0;width: 6px;height: 1em;margin-top: 3px;border-radius: 999px;background: rgba(0, 139, 255, .75);} #new_content #audit-form .title_float {clear: both;width: 100%;margin-top: 28px;padding-top: 22px;} #new_content .cs-audit-page h1, #new_content .cs-audit-page h2, #new_content .cs-audit-page h3, #new_content #audit-form h1, #new_content #audit-form h2, #new_content #audit-form h3, #new_content #audit-form .align_center, #new_content #audit-form .align_center h1, #new_content #audit-form .align_center h2, #new_content #audit-form .align_center h3 {text-align: left !important;} #new_content #audit-form .align_center {display: block !important;justify-content: flex-start !important;align-items: flex-start !important;} #new_content #audit-form .float_left, #new_content #audit-form .float_right {background: #fff;border: 1px solid rgba(0, 0, 0, .08);border-radius: 18px;padding: 18px 18px 16px;box-shadow: 0 10px 26px rgba(0, 0, 0, .06);float: none;width: 100%;margin-top: 16px;} @media (min-width:900px) { #new_content #audit-form .float_left {float: left;width: calc(50% - 12px);margin-top: 22px;} #new_content #audit-form .float_right {float: right;width: calc(50% - 12px);margin-top: 22px;} } #new_content #audit-form .form_groupe {display: flex;flex-wrap: wrap;gap: 12px;margin: 0 0 12px;} #new_content #audit-form .groupe_50 {flex: 1 1 calc(50% - 6px);min-width: 220px;} #new_content #audit-form .pr_6px {padding-right: 0 !important;} #new_content #audit-form .pl_6px {padding-left: 0 !important;} #new_content #audit-form input.form-control, #new_content #audit-form textarea.form-control {width: 100%;padding: 12px 14px;border: 1px solid #ddd;border-radius: 14px;background: #fff;box-sizing: border-box;} #new_content #audit-form textarea.form-control {resize: vertical;min-height: 110px;} #new_content #audit-form p {margin: 10px 0 0;} #new_content #audit-form ul {list-style: none;padding: 0;margin: 10px 0 0;display: grid;grid-template-columns: 1fr;gap: 10px;} @media (min-width:520px) { #new_content #audit-form ul {grid-template-columns: 1fr 1fr;} } #new_content #audit-form ul li {margin: 0;padding: 0;position: relative;} #new_content #audit-form input.custom-radio[type="radio"] {position: absolute;opacity: 0;width: 1px;height: 1px;left: 0;top: 0;} #new_content #audit-form input.custom-radio[type="radio"]+label {position: relative;display: flex;align-items: center;width: 100%;min-height: 48px;padding: 12px 14px 12px 46px;border: 1px solid rgba(0, 0, 0, .12);border-radius: 14px;background: #fff;color: #0b2b3a;cursor: pointer;user-select: none;line-height: 1.25;transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;} #new_content #audit-form input.custom-radio[type="radio"]+label::before {content: "";position: absolute;left: 14px;top: 50%;transform: translateY(-50%);width: 18px;height: 18px;border-radius: 50%;border: 2px solid rgba(0, 0, 0, .28);background: #fff;box-sizing: border-box;transition: border-color .15s ease, box-shadow .15s ease;} #new_content #audit-form input.custom-radio[type="radio"]+label::after {content: "";position: absolute;left: 18px;top: 50%;transform: translateY(-50%);width: 10px;height: 10px;border-radius: 50%;background: #008bff;opacity: 0;transition: opacity .15s ease;} #new_content #audit-form input.custom-radio[type="radio"]:checked+label {border-color: rgba(0, 139, 255, .45);background: rgba(0, 139, 255, .06);box-shadow: 0 10px 24px rgba(0, 0, 0, .10);} #new_content #audit-form input.custom-radio[type="radio"]:checked+label::before {border-color: #008bff;box-shadow: 0 0 0 4px rgba(0, 139, 255, .15);} #new_content #audit-form input.custom-radio[type="radio"]:checked+label::after {opacity: 1;} #new_content #audit-form input.custom-radio[type="radio"]:focus-visible+label {outline: 2px solid rgba(0, 139, 255, .45);outline-offset: 2px;} @media (hover:hover) { #new_content #audit-form input.custom-radio[type="radio"]+label:hover {border-color: rgba(0, 0, 0, .18);transform: translateY(-1px);} } @media (max-width:768px) { #new_content #audit-form input.custom-radio[type="radio"]+label {padding: 14px 14px 14px 58px;} #new_content #audit-form input.custom-radio[type="radio"]+label::before {left: 18px;} #new_content #audit-form input.custom-radio[type="radio"]+label::after {left: 22px;} } #new_content #audit-form .avis_global {background: #fff;border: 1px solid rgba(0, 0, 0, .08);border-radius: 18px;padding: 18px;box-shadow: 0 10px 26px rgba(0, 0, 0, .06);margin-top: 16px;clear: both;width: 100%;text-align: center;} #new_content #audit-form .avis_global h3 {margin-bottom: 6px;} #new_content #audit-form .avis_global p {margin: 0 0 14px;color: #666;font-size: 14px !important;text-align: left;} #new_content #audit-form .avis_global ul {display: grid;grid-template-columns: repeat(10, minmax(0, 1fr));gap: 10px;width: 100%;margin: 14px 0 0;padding: 0;} @media (max-width:640px) { #new_content #audit-form .avis_global ul {grid-template-columns: repeat(5, minmax(0, 1fr));} } #new_content #audit-form .avis_global input.custom-radio+label {padding: 12px 10px !important;justify-content: center;text-align: center;} #new_content #audit-form .avis_global input.custom-radio+label::before, #new_content #audit-form .avis_global input.custom-radio+label::after {display: none !important;content: none !important;} #new_content #audit-form .avis_global input.custom-radio:checked+label {background: #008bff;border-color: #008bff;box-shadow: 0 10px 24px rgba(0, 139, 255, .25);color: #fff;} #new_content #audit-form .title_float.audit-card {background: #fff;border: 1px solid rgba(0, 0, 0, .08);border-radius: 18px;padding: 18px;box-shadow: 0 10px 26px rgba(0, 0, 0, .06);margin-top: 16px;clear: both;width: 100%;} #new_content #audit-form .title_float.audit-card .blockRGPD, #new_content #audit-form .title_float.audit-card .avis_global {background: transparent;border: 0;box-shadow: none;border-radius: 0;padding: 0;margin-top: 16px;} #new_content #audit-form .blockRGPD {border-top: 1px solid rgba(0, 0, 0, .06);padding-top: 14px;margin-top: 12px;display: flex;flex-direction: column;align-items: center;text-align: center;gap: 10px;background: #fff;border: 1px solid rgba(0, 0, 0, .08);border-radius: 18px;padding: 18px;box-shadow: 0 10px 26px rgba(0, 0, 0, .06);width: 100%;margin-top: 16px;} #new_content #audit-form .checkbox_container {display: inline-flex;align-items: center;gap: 10px;font-weight: 700;color: #0b2b3a;justify-content: center;} #new_content #audit-form .checkbox_explain {max-width: 720px;margin: 0 auto;color: #666;font-size: 14px !important;line-height: 1.5em;text-align: center;} #new_content #audit-form .checkbox_explain a {color: #008bff;} #new_content #audit-form .mt-30 {margin-top: 18px;display: flex;} #new_content #audit-form #audit_submit {width: 100%;max-width: 320px;padding: 12px 18px;border-radius: 999px;border: 0;cursor: pointer;font-weight: 700;background: #3db7ff;color: #fff;} #new_content #merci_message_block {max-width: 720px;margin: 26px auto 0;background: #fff;border: 1px solid rgba(0, 0, 0, .06);border-radius: 18px;padding: 22px 18px;text-align: center;} #new_content #merci_message_block .icon_message img {width: 76px;height: auto;} #new_content #merci_message_block .back_audit a {display: inline-block;margin-top: 14px;padding: 10px 18px;border-radius: 999px;background: rgba(0, 139, 255, .10);text-decoration: none;} @media (max-width:899.98px) { #new_content #audit-form .float_left, #new_content #audit-form .float_right {float: none;width: 100%;} } #new_content #AuditSection .cs-content .audit-card div {padding: 0 !important;} #new_content #AuditSection .cs-content .audit-card p {padding: 12px 0;} #new_content #audit-form .float_left h3, #new_content #audit-form .float_right h3 {margin: 0 0 12px;} #new_content #audit-form .float_left ul, #new_content #audit-form .float_right ul {margin-top: 8px;} #new_content #audit-form .title_float.audit-card .mt-30 {justify-content: center;} #new_content #audit-form .title_float.audit-card .g-recaptcha {margin-top: 14px;} @media (max-width:520px) { #new_content #audit-form {padding: 0 !important;} #new_content #audit_hub input.search, #new_content .recherche input.search {padding: 0 !important;} } #new_content #audit_hub .sites_agences {top: calc(100% + 8px);left: 0;right: 0;} #new_content .cs-audit-page #merci {height: 500px;display: flex;justify-content: center;align-items: center;} #new_content .cs-audit-page #merci h2 {text-align: center !important;} #new_content .findAgence {max-width: 640px;margin: 0 auto;} #new_content .recherche {position: relative;} #new_content .recherche input.search {width: 100%;} #new_content .sites_agences {position: absolute;left: 0;right: 0;top: 100%;z-index: 50;} #new_content .sites_agences>div {max-height: 320px;overflow: auto;} #new_content .cs-contact-hero {padding-bottom: 12px;margin-top: 32px;} #new_content .cs-contact-hero__top {text-align: center;max-width: 760px;margin: 0 auto;} #new_content .cs-contact-hero__icon {height: 75px;display: inline-block;margin: 0 auto 12px;} .cs-contact-hero__top {display: flex;flex-direction: column;align-items: center;text-align: center;} #new_content .cs-contact-hero__intro {margin: 0 auto;max-width: 680px;} #new_content .cs-contact-grid {display: grid;grid-template-columns: 1fr;gap: 16px;} @media (min-width:768px) { #new_content .cs-contact-grid {grid-template-columns: 1fr 1fr;gap: 18px;} } #new_content .cs-contact-card {display: flex;gap: 16px;align-items: flex-start;border: 1px solid rgba(0, 0, 0, .06);border-radius: 18px;padding: 18px 18px 38px;text-decoration: none;background: #fff;} #new_content .cs-contact-card--primary {border-color: rgba(0, 120, 255, .18);} #new_content .cs-contact-card__icon img {height: 48px;min-width: 48px;display: block;position: relative;top: 12px;} #new_content .cs-contact-card__content h2 {margin: 0 0 8px;font-size: 20px;line-height: 1.2;} #new_content .cs-contact-card__content p {margin: 0 0 10px;} #new_content .cs-contact-card__cta {display: inline-block;font-weight: 600;text-decoration: underline;} .cs-contact-card:hover {text-decoration: none !important;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);} #new_content .article_blog .cs-media {margin: 32px 0;} #new_content .article_blog .cs-media .cs-stories {position: relative;overflow: hidden;border-radius: 12px;cursor: pointer;user-select: none;touch-action: manipulation;} #new_content .article_blog .cs-media .cs-stories-track {display: flex;transform: translate3d(0, 0, 0);transition: transform .35s ease;will-change: transform;} #new_content .article_blog .cs-media .cs-stories-slide {flex: 0 0 100%;} #new_content .article_blog .cs-media .cs-stories-slide img {display: block;width: 100%;height: auto;} #new_content .article_blog .cs-media .cs-stories-indicators {position: absolute;left: 10px;right: 10px;top: 10px;display: flex;gap: 6px;z-index: 2;} #new_content .article_blog .cs-media .cs-stories-indicators span {flex: 1;height: 3px;border-radius: 999px;background: rgba(255, 255, 255, .35);overflow: hidden;} #new_content .article_blog .cs-media .cs-stories-indicators span i {display: block;width: 0;height: 100%;background: rgba(255, 255, 255, .95);transition: width .25s ease;} #new_content .article_blog .cs-media .cs-stories-indicators span.is-active i {width: 100%;} #new_content .article_blog .video-container {position: relative;width: 100%;padding-top: 56.25%;margin: 32px 0;overflow: hidden;border-radius: 12px;} #new_content .article_blog .video-container iframe, #new_content .article_blog .video-container video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;} #new_content #search_articles h3 {margin: 0;padding-top: 12px;} #new_content #search_articles input {width: 100%;padding: 6px;border: 1px solid #ddd;border-radius: 8px;} #new_content #search_articles li {border-bottom: 1px solid #ccc;padding: 0px 0 5px 0;} #new_content #search_articles li:last-child {border-bottom: 0;} /** FIX : double trait sous “Actualités” (cumul margin + border-bottom + li+li margin) **/ #new_content .cs-sidebar-articles.cs-sidebar-articles--tree li {border-bottom: 0;margin-top: 0;} #new_content .cs-sidebar-articles.cs-sidebar-articles--tree li+li {margin-top: 0;} #new_content .cs-sidebar-articles.cs-sidebar-articles--tree a {padding-bottom: 0;} #new_content .categorie {color: #007ce2;} #new_content .cs-count {color: #007ce2;background: #dbefff;width: 24px;display: inline-block;text-align: center;border-radius: 36px;font-size: 12px !important;margin-left: 4px;} /** On remet UNE séparation propre uniquement entre les niveaux 1 (catégories) **/ #new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl1 {margin-top: 10px;padding-top: 10px;border-top: 1px solid var(--cs-border-color);} #new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl1:first-child {margin-top: 0;padding-top: 0;border-top: 0;} /** Garder l’indentation **/ #new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl2 {padding-left: 12px;margin-top: 6px;} #new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl3 {padding-left: 24px;margin-top: 6px;} /** Rendre les liens cliquables uniquement sur le texte **/ #new_content .cs-sidebar-articles.cs-sidebar-articles--tree a {display: inline;padding: 0;} #new_content img {max-width: 100%;} #new_content .cs-question, #new_content h3 {margin: 28px 0 8px;font-size: 20px !important;font-weight: 700;color: #0b2b3a;} #new_content .cs-sticky-group.is-sticky {position: fixed;top: 120px;z-index: 5;} #new_content .cs-sticky-group.is-hidden {opacity: 0;pointer-events: none;} /** À ajouter dans votre CSS scoped (ou dans un