/* Theme Name: ShiftUp Child Theme URI: https://shiftup.qodeinteractive.com Description: A child theme of ShiftUp Author: Mikado Themes Author URI: https://qodeinteractive.com Version: 1.0 Text Domain: shiftup Template: shiftup */ :root { --qode-main-color: #CE102C; --rouge: #CE102C; --blanc: #fff; --noir: #1d1d1b; --noir-rgb: 29,29,27; --font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Font sizes fluides */ --fs-h1: clamp(32px, 6vw, 60px); --fs-h2: clamp(26px, 4vw, 34px); --fs-h3: clamp(20px, 1.5vw, 28px); --fs-h4: clamp(18px, 1.2vw, 22px); --fs-body: clamp(15px, 1vw, 18px); /* Line-height si tu veux aussi les gérer en variable */ --lh-h1: 1.05; --lh-h2: 1.1; --lh-h3: 1.2; --lh-h4: 1.25; --lh-body: 1.6; } .bg-rouge {background-color: var(--rouge);} .bg-noir {background-color: var(--noir);} .rouge, .rouge p {color: var(--rouge) !important;} .noir {color: var(--noir) !important;} .blanc, .blanc p {color: white !important;} .hide {display: none !important;} .pum-overlay { z-index: 999999 !important; } /* Force l'image à rester carrée et fluide sur mobile */ .pum-content img { width: 100% !important; height: auto !important; display: block; } /* Ajuste le conteneur pour qu'il ne soit pas trop haut sur mobile */ @media only screen and (max-width: 768px) { .pum-container { height: auto !important; /* Évite de forcer les 800px de haut sur un petit écran */ padding: 0 !important; } } /* Correction du bouton de fermeture pour le thème 8754 */ .pum-theme-8754 .pum-close { color: #000000 !important; /* Force le X en noir pour trancher sur le blanc */ z-index: 2147483647 !important; /* Priorité maximale pour passer devant l'image */ opacity: 1 !important; display: block !important; text-shadow: none !important; font-weight: bold !important; } /* Ajustement spécifique pour mobile (écrans de moins de 768px) */ @media only screen and (max-width: 768px) { .pum-theme-8754 .pum-close { top: 15px !important; /* Ajuste la distance du haut */ right: 15px !important; /* Ajuste la distance de la droite */ font-size: 26px !important; /* Agrandit le X pour faciliter le clic au doigt */ line-height: 1 !important; } } /* Empêche le défilement horizontal sur mobile */ body { overflow-x: hidden !important; } /* Force le popup à ne jamais dépasser la largeur de l'écran */ .pum-container { max-width: 90vw !important; /* 90% de la largeur de l'écran maximum */ left: 50% !important; transform: translateX(-50%) !important; /* Centre parfaitement le popup */ } /* Force l'image à suivre la largeur du conteneur */ .pum-content img { width: 100% !important; height: auto !important; } /* ================ HEADER - PAGE TITLE ================ */ .qodef-page-title { height: clamp(180px, 25vw, 330px) !important; background-color: #fff !important; } .page-id-1820 .qodef-page-title, .page-id-8124 .qodef-page-title { background-color: #f2f2f2 !important; } /* ================== HEADER & DROPDOWN ================== */ @media screen and (min-width: 1221px) {.desktop-hide {display: none !important;}} @media screen and (max-width: 1220px) { .qodef-drop-down-second {padding-left: 32px !important;} /* Masquer seulement la flèche du menu parent "Services" */ li.menu-item-6311 > svg.qodef-menu-item-arrow, li.menu-item-8211 > svg.qodef-menu-item-arrow {display: none !important;} } .qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li.rouge>a {color: var(--rouge) !important;} .qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second { background-color: rgba(255, 255, 255, .95) !important; } /* Header + dropdown toujours au-dessus des sliders */ #qodef-page-header, #qodef-page-header-inner, .qodef-drop-down-second { position: relative; z-index: 999998 !important; } /* Optionnel : si tes flèches sont des classes communes (Swiper/Slick), on les remet en dessous du header. */ .swiper-button-next, .swiper-button-prev, .slick-prev, .slick-next { z-index: 10 !important; } /* ========================= MEGA MENU "Services" — 3 colonnes Les .last-col sont empilés dans la colonne 3 sans trou ========================= */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu{ display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); /* 3 rangées pour accueillir les 3 items last-col */ grid-template-rows: repeat(3, auto); column-gap: clamp(24px, 3vw, 60px); row-gap: clamp(12px, 1.4vw, 22px); align-items: start; } /* Les 2 gros blocs (Mécanique / Pare-brise) prennent 3 rangées -> ça élimine l’effet “rangée géante” qui crée ton trou */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li:not(.last-col):nth-child(1){ grid-column: 1; grid-row: 1 / span 3; } .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li:not(.last-col):nth-child(2){ grid-column: 2; grid-row: 1 / span 3; } /* Les .last-col empilés dans la colonne 3 */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li.last-col:nth-child(3){ grid-column: 3; grid-row: 1; } .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li.last-col:nth-child(4){ grid-column: 3; grid-row: 2; } .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li.last-col:nth-child(5){ grid-column: 3; grid-row: 3; } /* Optionnel : un peu d’air entre le titre et ses enfants */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li > ul.sub-menu{ margin-top: 12px; } /* ========================================================= MOBILE/TABLETTE — on désactive la grille mega-menu ========================================================= */ @media (max-width: 1024px){ /* on remet le sub-menu en mode “stack” */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu{ display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; column-gap: 0 !important; row-gap: 0 !important; } /* on enlève tout placement forcé */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li{ grid-column: auto !important; grid-row: auto !important; } /* optionnel : un peu d’air en mobile */ .menu-item-6311.qodef-menu-item--wide .qodef-drop-down-second-inner > ul.sub-menu > li{ margin: 10px 0 !important; } } /* ================================================= Forcer le menu mobile dès 1220px ================================================= */ @media (max-width: 1220px){ /* cacher le header desktop */ .qodef-page-header, .qodef-header-navigation, header#qodef-page-header { display: none !important; } /* afficher le header mobile */ #qodef-page-mobile-header { display: block !important; } img.qodef-header-logo-image.qodef--main.qodef--customizer { max-height: 47px !important; } } /* ================ Couleur du carré du curseur thème ================ */ /* Couleur du + et de son carré pour le curseur de ShiftUp */ .qodef-svg--cursor-link g path, .qodef-svg--cursor-close g path, .qodef-svg--cursor-blured rect:nth-of-type(2) { fill: var(--rouge) !important; /* remplace par ta couleur */ } /* (Optionnel) couleur du carré blanc derrière le + */ .qodef-svg--cursor-link g rect { fill: var(--blanc) !important; /* ou une autre couleur si tu veux */ } @media only screen and (min-width: 1025px) { .qodef-section-custom-style .elementor-column:nth-of-type(2):after { width: 10px !important; height: 10px !important; bottom: -10px !important; } } /*============ CONTRÔLE DE L'AFFICHAGE EN LARGEUR =============*/ /* Empêche les débordements horizontaux sur mobile */ body { overflow-x: hidden; } .elementor *, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap { max-width: 100vw !important; box-sizing: border-box; } /* Force le wrapping correct du texte */ .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3, .elementor-widget-heading h4, .elementor-widget-heading h5, .elementor-widget-heading h6 { overflow-wrap: break-word; word-break: break-word; } /* Force une marge sous la colonne des widgets */ div.elementor-column .elementor-widget-wrap.elementor-element-populated .elementor-widget.elementor-widget-sidebar { margin-bottom: 64px !important; } body div.qodef-page-title .qodef-breadcrumbs, body div.qodef-page-title .qodef-breadcrumbs a, body div.qodef-page-title .qodef-breadcrumbs span, body div.qodef-breadcrumbs a.qodef-breadcrumbs-link, body div.qodef-page-title span.qodef-breadcrumbs-current, .qodef-m-content.qodef-content-grid .qodef-breadcrumbs a.qodef-breadcrumbs-link, .qodef-m-content.qodef-content-grid .qodef-breadcrumbs span { font-family: var(--font-body, "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important; } .qodef-page-title.qodef-title--standard-with-breadcrumbs .qodef-breadcrumbs { margin-top: clamp(20px, 2.8vw, 41px) !important; margin-bottom: clamp(32px, 5.6vw, 81px) !important; } @media screen and (max-width: 768px) { /* Réinitialise tous les effets transform inutiles */ .elementor-widget-container { transform: none !important; transition: none !important; will-change: auto !important; } .elementor-widget-container[style*="transform"] { transform: none !important; } .elementor-widget[data-widget_type*="shiftup_core"] .elementor-widget-container { transform: none !important; } /* Force tout le texte aligné à droite à revenir à gauche */ *[style*="text-align: right"], *[style*="text-align:right"] { text-align: left !important; } h1, h1.elementor-heading-title, .elementor-widget-heading h1, h1.elementor-heading-title.elementor-size-default, h2, h3, h4, h5, h6, p, li, span, div, .h2, sr7-txt, .h2 h1 { font-family: var(--font-body) !important; } h1, h2, h3, h4, h5, h6, p, li, span, div, div p { text-align: left !important; font-family: 'Montserrat' !important; } .elementor-widget-text-editor, .elementor-widget p {font-family: "Montserrat" !important;} *[style*="justify-content: flex-end"], *[style*="align-items: flex-end"] { justify-content: flex-start !important; align-items: flex-start !important; } /*.elementor-column {padding-top: 32px;}*/ } /* ========================= TAILLE DE POLICE ========================= */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } /* H1 */ h1, .h1, .h1 p, .h1 h2, .qodef-page-title p.qodef-m-title.entry-title { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0px !important; } /* H2 */ h2, .h2, .sr7-txt, .h2 h1, .h2 p, h2.qodef-m-title { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; letter-spacing: 0px !important; } /* H3 */ h3, .h3, .h3 h2, p.h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; font-weight: 600; letter-spacing: 0px !important; } /* H4 */ h4, .h4, .h4 p, p.h4 .h4 h3, .h4 h5 { font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important; text-transform: uppercase; font-weight: 600; letter-spacing: 0px !important; } /* H5 */ .qodef-h5, h5, p.h5 { font-weight: 600; text-transform: uppercase; font-size: 13px; line-height: 1.53em; letter-spacing: .05em; margin: 25px 0; -ms-word-wrap: break-word; word-wrap: break-word; letter-spacing: 0px !important; } /* Paragraphe & listes */ p, li { font-size: var(--fs-body); line-height: var(--lh-body); } ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; list-style-position: outside; } li + li { margin-top: 0.2em;} .qodef-m-text li::marker {color: var(--rouge);} /* =========================== TITRES CUSTOM FONT – H2 – 44px → 110px fluide =========================== */ .h2 p.qodef-shortcode.qodef-m.qodef-custom-font.qodef-custom-font-753.qodef-layout--simple.qodef-outlined-text span.qodef-m-background-text{ font-size: clamp(44px, 5vw, 110px) !important; line-height: 1 !important; } /* =========================== TITRES CUSTOM FONT – H3 – 30px → 60px fluide =========================== */ .h3 p.qodef-shortcode.qodef-m.qodef-custom-font.qodef-custom-font-753.qodef-layout--simple.qodef-outlined-text span.qodef-m-background-text { font-size: clamp(30px, 3.5vw, 60px) !important; line-height: 1 !important; } /* Le span "qodef-m-background-text" suit automatiquement */ .qodef-m-background-text { font-size: inherit !important; line-height: inherit !important; } /* ============================= ÉLÉMENTS GRAPHIQUES ============================= */ /* Barre devant les titres */ h2 .qodef-portfolio-list.qodef-item-layout--info-below .qodef-no-categories .qodef-e-title:before, h2.qodef-e-title.entry-title:before, h3 .qodef-portfolio-list.qodef-item-layout--info-below .qodef-no-categories .qodef-e-title:before, h3.qodef-e-title.entry-title:before {height: 0.7em !important;} h3.qodef-e-title.entry-title {color: var(--qode-main-color) !important;} .up {text-transform: uppercase;} .bold {font-weight: 700 !important;} .overview {overflow: visible;} .separateur {border-right: 2px solid var(--rouge);} .elementor-column:last-of-type .separateur {border: none !important;} @media screen and (max-width: 767px) { .separateur { border-right: 0px solid transparent; border-bottom: 2px solid var(--rouge); } } /* ============================= BOUTONS ============================= */ /* Force la couleur du bouton CTA spécifiquement */ #bouton-cta-footer .elementor-button { background-color: #000000 !important; /* Change le fond en NOIR */ border-color: #000000 !important; } /* Force la couleur de la flèche/texte */ #bouton-cta-footer .elementor-button-icon, #bouton-cta-footer .elementor-button-text { color: #ffffff !important; /* Change la flèche en BLANC */ } /* Force les couleurs au SURVOL (Hover) */ #bouton-cta-footer .elementor-button:hover { background-color: #ffffff !important; /* Fond devient BLANC au survol */ } #bouton-cta-footer .elementor-button:hover .elementor-button-icon { color: #000000 !important; /* Flèche devient NOIRE au survol */ } /* =========================== 4 COINS D'UNE COLONNE ============================ */ /* Colonne à entourer */ .elementor-column.mpbsn-corners { position: relative; background-color: rgba(var(--noir-rgb), 0.75); padding: clamp(16px, 4vw, 32px) !important; } @media only screen and (min-width: 1025px) { /* Coins GAUCHE (haut + bas) */ .elementor-column.mpbsn-corners::before, .elementor-column.mpbsn-corners::after { content: ""; position: absolute; left: -10px; width: 10px; height: 10px; background-color: var(--rouge); } .elementor-column.mpbsn-corners::before { top: -10px; /* coin haut-gauche */ } .elementor-column.mpbsn-corners::after { bottom: -10px; /* coin bas-gauche */ } /* Coins DROITE (haut + bas) — sur le wrapper interne */ .elementor-column.mpbsn-corners > .elementor-widget-wrap { position: relative; } .elementor-column.mpbsn-corners > .elementor-widget-wrap::before, .elementor-column.mpbsn-corners > .elementor-widget-wrap::after { content: ""; position: absolute; right: calc(-32px - 10px); width: 10px; height: 10px; background-color: var(--rouge); } .elementor-column.mpbsn-corners > .elementor-widget-wrap::before { top: calc(-32px - 10px); /* coin haut-droit */ } .elementor-column.mpbsn-corners > .elementor-widget-wrap::after { bottom: calc(-32px - 10px); /* coin bas-droit */ } } @media only screen and (max-width: 1024px) { .mobile-hide {display: none !important;} } /* ============================== TÉMOIGNAGES ============================== */ a.elementor-testimonial-job:hover, a.elementor-testimonial-name:hover { text-decoration: underline; } .temoignage {background-color: #f2f2f2;} /* ============================= F.A.Q. ============================= */ .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-accordion-description {font-weight: bold;} .qodef-shortcode.qodef-m.qodef-accordion.clear.qodef-behavior--toggle.qodef-layout--simple.qodef--init .qodef-accordion-title { border-top: 3px solid #e1e1e1; } @media only screen and (max-width: 680px) { .qodef-accordion.qodef-layout--simple .qodef-accordion-title { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; } .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-accordion-description { display: contents; } .qodef-accordion.qodef-layout--simple .qodef-accordion-content { padding: 25px 0px 21px 0px; } .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-accordion-mark { margin-top: 16px; } } /* ================================ PRICING TABLE ================================ */ .qodef-pricing-table .qodef-m-title p:first-child { display: none; } .qodef-pricing-table .qodef-m-title .qodef-info-separator-single { margin-left: 0px; } .qodef-pricing-table.qodef-layout--standard.qodef-status--regular .qodef-e-content { padding-bottom: 0px !important; padding-left: 0px !important; padding-top: clamp(16px, 3vw, 24px) !important; } .qodef-pricing-table .qodef-m-content { min-height: auto !important; } .qodef-pricing-table.qodef-layout--standard.qodef-status--regular:hover .qodef-m-inner {background-color: transparent !important;} @media only screen and (max-width: 480px) { .qodef-pricing-table.qodef-layout--standard .qodef-m-inner { background-color: white !important; } } /* ================================== FORMULAIRE ================================== */ .gform-theme--framework .gfield_list_group_item::before:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gform-field-label:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield_description:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {color: white !important;} .gform-theme--framework .gfield:where(.gfield--type-multiselect,.gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { background-color: var(--noir) !important; } .gform-theme--framework .gform_validation_errors .gform_submission_error, span.gfield_required.gfield_required_asterisk, p.gform_required_legend {color: white !important;} .gform-theme--framework .gform_validation_errors {border-color: white !important;} /* ================================== POLITIQUES : COMPLIANZ ================================== */ #cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3 { font-size: var(--fs-body) !important; text-transform: none; } /* ================================== PROBLÈME DE LARGEUR DE PAGE ================================== */ /* Page landing "Services aux entreprises" */ .postid-9269 .elementor-section-stretched { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: auto !important; } /* Sécurité anti débordement horizontal */ body.postid-9269 { overflow-x: hidden; } @media (min-width: 768px) { .postid-9269 .elementor-section-stretched { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: auto !important; } body.postid-9269 { overflow-x: hidden; } } /* ================================== TABLEAU PAGE LANDING SERVICES AUX ENTREPRISES ================================== */ section#forfaits table { border-left: 0px solid transparent !important; border-right: 0px solid transparent !important; } section#forfaits table tr { border-left: 0px solid transparent !important; border-right: 0px solid transparent !important; } section#forfaits table tr td { border-right: 0px solid transparent !important; } .postid-9269 ul#menu-main-menu-1, .postid-9269 a.qodef-opener-icon.qodef-m.qodef-source--predefined.qodef-mobile-header-opener, .postid-9269 .qodef-opener-icon, .postid-9269 span.qodef-m-icon.qodef--open, .postid-9269 .qodef-mobile-header-opener, .postid-9269 header .qodef-widget-holder.qodef--one { display: none !important; } .postid-9269 #pum-8795 {display: none !important;}