/* Theme Name: Drakmaker Design System Theme URI: https://drakmaker.fr/ Description: Child theme CSS — Light Theme pour Divi 5 Author: Drakmaker Template: Divi Version: 2.0.0 */ /* ========================================================= 1. ROOT CLIENT — DÉBUT Charte graphique : polices, couleurs et variables du client Ne pas remplacer lors d’une synchronisation du socle DIVI ========================================================= */ /*=============================== 1. POLICES ================================*/ /*=============================== 2. ROOT ================================*/ :root { /* Couleurs de marque */ --brandDark: #226673; --brand: #26717f; --brandLight: #297b8a; /* Couleurs sombres */ --darkDark: #203a40; --dark: #26464c; --darkLight: #2d5259; /* Couleurs grises */ --greyDark: #e3e7e8; --grey: #ebeef0; --greyLight: #f5f6f7; /* Couleurs d'accent */ --accentDark: #ed8e5f; --accent: #f29161; --accentLight: #ff9966; /* Couleurs neutres */ --white: #ffffff; --black: #111111; /* Plans visuels — Light Theme */ --backgroundColor: var(--white); --cardColor: var(--greyLight); --thumbnailColor: var(--white); --thumbnailBorderColor: var(--grey); --thumbnailBorder: 1px solid var(--thumbnailBorderColor); --thumbnailShadow: 0 0 20px rgb(0 0 0 / 4%); --thumbnailShadowHover: 0 5px 20px rgb(0 0 0 / 5%); /* Typographies */ --fontBody: "Poppins", Arial, sans-serif; --fontTitle: "Poppins", Arial, sans-serif; --fontAccent: "Poppins", Arial, sans-serif; --fontSizeBody: 1rem; --lineHeightBody: 1.6; --fontSizeH1: 2.5rem; --fontSizeH2: 2rem; --fontSizeH3: 1.25rem; --fontSizeH1Mobile: 2.2rem; --fontSizeH2Mobile: 1.75rem; --fontSizeH3Mobile: 1.333rem; --weightLight: 300; --weightEmphasis: 300; --weightRegular: 400; --weightMedium:500; --weightBold: 600; --weightExtraBold: 700; /* Structure */ --siteWidth: 90%; --siteMaxWidth: 1350px; --spaceXS: 0.5rem; --spaceS: 1rem; --spaceM: 1.5rem; --spaceL: 2rem; --spaceXL: 4rem; --spaceXXL: 6rem; --radiusSmall: 0.5rem; --radius: 0.75rem; --radiusLarge: 1.5rem; --radiusRound: 999px; --border: 1px solid var(--grey); --transition: all 0.25s ease; /* Variables Divi */ --gcid-primary-color: var(--brand); --gcid-secondary-color: var(--brandDark); --gcid-heading-color: var(--darkDark); --gcid-body-color: var(--darkDark); --gcid-link-color: var(--brand); --et_global_body_font: var(--fontBody); --et_global_heading_font: var(--fontTitle); --content-width: var(--siteWidth); --content-max-width: var(--siteMaxWidth); } /* ========================================================= 1. ROOT CLIENT — FIN ========================================================= */ /* ========================================================= 2. SOCLE DIVI COMMUN — DÉBUT Version : 1.0.0 Référence centrale : Notion Zone remplaçable lors d’une synchronisation ========================================================= */ /*=============================== 3. BASE ================================*/ html, body { overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } ::selection { background-color: var(--brand); color: var(--white); } body, .et_pb_text_inner, .et_pb_text_inner p, .et_pb_module p, .et_pb_module li { font-family: var(--fontBody), Arial, sans-serif; font-size: var(--fontSizeBody); font-weight: var(--weightRegular); line-height: var(--lineHeightBody); color: var(--darkDark); } .et_pb_text_inner p, .et_pb_module p { font-weight: var(--weightLight); } p:not(.has-background):last-of-type { padding-bottom: 0; } hr { height: 0; margin: var(--spaceM) 0; border: 0; border-top: 1px solid var(--grey) !important; background: transparent !important; } .et_pb_divider::before { border-top-color: var(--grey) !important; } /*=============================== 4. CONTAINERS ET SECTIONS ================================*/ :root { --rowWidth: 90%; --rowMaxWidth: 1350px; /* Espacements par défaut des structures flex Divi */ --section-gutter: 30px; --row-gutter-horizontal: 4%; } .container, #top-header .container, #main-header .container, #main-footer .container, #et-footer-nav .container, #footer-bottom .container, .et_pb_row { width: var(--rowWidth) !important; max-width: var(--rowMaxWidth) !important; } .et_pb_row { margin-bottom: var(--spaceL) !important; } .et_pb_section { background-color: var(--backgroundColor); } .fullWidth { width: 100% !important; max-width: 100% !important; } /*=============================== 5. TYPOGRAPHIE ================================*/ .et_pb_text_inner p, .et_pb_text_inner ul, .et_pb_text_inner ol { margin-bottom: var(--spaceS) !important; } .et_pb_text_inner p:last-child, .et_pb_text_inner ul:last-child, .et_pb_text_inner ol:last-child { margin-bottom: 0 !important; } strong, b, .et_pb_text_inner strong, .et_pb_text_inner b, .et_pb_module strong, .et_pb_module b { font-family: var(--fontBody) !important; font-weight: var(--weightEmphasis) !important; } h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-family: var(--fontTitle); font-weight: var(--weightExtraBold); line-height: 1.3 !important; color: var(--darkDark) !important; margin-bottom: 0.2rem !important; } .et_pb_module h1 { font-size: var(--fontSizeH1) ; } .et_pb_module h2 { font-size: var(--fontSizeH2) ; } .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-size: var(--fontSizeH3); } .et_pb_module a { text-decoration: none; } /*--- Liens dans les textes ---*/ .et_pb_text a, .et_pb_post_content a { color: var(--brand) !important; } .et_pb_module a:hover { color: var(--brand); text-decoration: underline; } .et_pb_module h1 a, .et_pb_module h2 a, .et_pb_module h3 a, .et_pb_module h4 a, .et_pb_module h5 a, .et_pb_module h6 a, .et_pb_module h1 a:hover, .et_pb_module h2 a:hover, .et_pb_module h3 a:hover, .et_pb_module h4 a:hover, .et_pb_module h5 a:hover, .et_pb_module h6 a:hover { text-decoration: none !important; } /*--- Fil d’Ariane ---*/ .breadcrumb a, .breadcrumbs a, .seopress-breadcrumbs a { color: var(--brand) !important; } .surTitre, .et_pb_module .surTitre, .et_pb_module h1.surTitre, .et_pb_module h2.surTitre, .et_pb_module h3.surTitre, .et_pb_module h4.surTitre, .et_pb_module h5.surTitre, .et_pb_module h6.surTitre { margin-bottom: 0 !important; font-family: var(--fontAccent) !important; font-size: 1em !important; font-weight: var(--weightRegular) !important; letter-spacing: 0px; line-height: 1.4 !important; color: var(--darkDark) !important; } .surTitre::before, .et_pb_module .surTitre::before { content: "•"; margin-right: 0.5em; color: var(--accent); font-weight: var(--weightBold); } .heroTitle, .heroTitle h1, .heroTitle h2, .heroTitle h3, .heroTitle h4, .heroTitle h5, .heroTitle h6, .heroTitle p, .heroTitle span { font-family: var(--fontTitle) !important; font-size: 2.7em !important; font-weight: var(--weightExtraBold) !important; line-height: 1.333 !important; color: var(--darkDark) !important; padding-bottom: var(--spaceXS) !important; letter-spacing: -1px !important; } @media (max-width: 767px) { .et_pb_module h1, .heroTitle, .heroTitle p, .heroTitle span { font-size: var(--fontSizeH1Mobile) !important; } .et_pb_module h2 { font-size: var(--fontSizeH2Mobile) !important; } .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-size: var(--fontSizeH3Mobile) !important; } } /*--- Introduction ---*/ .intro { font-size: 1.5em !important; line-height: 1.333em !important; font-weight: var(--weightMedium) !important; } /*--- Tableaux ---*/ table { width: 100%; margin: var(--spaceL) 0; border-collapse: separate; border-spacing: 0; border: var(--border); border-radius: var(--radius); overflow: hidden; } th, td { padding: var(--spaceS) var(--spaceM); text-align: left; vertical-align: top; border: 1px solid var(--grey) !important; border-bottom: var(--border); } th { background-color: var(--darkDark); color: var(--white); font-weight: var(--weightBold); } tr:nth-child(even) td { background-color: var(--greyLight); } tr:last-child td { border-bottom: 0; } /*--- Mobile ---*/ @media (max-width: 767px) { .intro { font-size: 1.1rem !important; } th, td { padding: var(--spaceS); } } /*=============================== 6. HEADER ET FOOTER ================================*/ #top-header, header { font-family: var(--fontBody) !important; background-color: transparent !important; color: var(--white) !important; } header ul li a { color: var(--white) !important; } .sub-menu { background-color: var(--dark) !important; min-width: 290px !important; border-top-color: var(--brand) !important; border-radius: var(--radius); } .sub-menu li a { min-width: 280px !important; } .sub-menu li a:before { content: "•"; margin-right: 0.5em; color: var(--brand); font-weight: var(--weightBold); } #top-menu .menu-item-has-children > a:first-child::after, .et-menu .menu-item-has-children > a:first-child::after, .et_pb_menu .menu-item-has-children > a:first-child::after { color: var(--brand) !important; } /*--- Menu burger mobile ---*/ .mobile_menu_bar::before, .et_pb_menu .mobile_menu_bar::before, .et_pb_fullwidth_menu .mobile_menu_bar::before { color: var(--brand) !important; } .et_pb_menu__icon--with-svg svg, .et_pb_menu__icon--with-svg svg path { fill: var(--brand) !important; color: var(--brand) !important; } /*--- Menu mobile ouvert et sous-menus ---*/ .et_mobile_menu, .et_pb_menu .et_mobile_menu, .et_pb_fullwidth_menu .et_mobile_menu, .et_mobile_menu .sub-menu { background-color: var(--dark) !important; } .et_mobile_menu li a, .et_mobile_menu .sub-menu li a { color: var(--white) !important; } /*=============================== 7. IMAGES ================================*/ .et_pb_image img, .et_pb_gallery_image img, .et_portfolio_image img, .dica_divi_carousel img, .et_pb_video .et_pb_video_wrap { border-radius: var(--radius); } .noRadius img, .noRadius .et_pb_video_wrap, .et_pb_module.icon img { border-radius: 0 !important; } /*=============================== 8. BOUTONS ================================*/ /*==== par défaut ====*/ .et_pb_button, .et_pb_button_two { border-radius: var(--radiusLarge); text-decoration: none !important; font-size: 1rem !important; font-weight: var(--weightBold); opacity: 1 !important; transition: var(--transition) !important; } .et_pb_button::after, .et_pb_button_two::after { content: "$" !important; display: inline-block !important; font-family: ETmodules !important; color: var(--accentLight); font-size: 0.8em !important; margin-left:0.5em !important; } .et_pb_button { background-color: var(--dark) !important; border: 5px solid var(--dark) !important; color: var(--white) !important; } .et_pb_button:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } .et_pb_button:hover::after { color: var(--dark) !important; } /*==== bouton two ====*/ .et_pb_button_two { background-color: var(--grey) !important; border: 5px solid var(--grey) !important; color: var(--dark) !important; } .et_pb_button_two:hover { background-color: var(--greyDark) !important; border-color: var(--greyDark) !important; color: var(--dark) !important; } /*==== bouton link ====*/ body #page-container .buttonLink { background-color: transparent !important; border: none !important; padding : 0px !important; color: var(--dark) !important; } body #page-container .et_pb_section .et_pb_button_0.buttonLink, body #page-container .et_pb_section .et_pb_button_1.buttonLink, body #page-container .et_pb_section .et_pb_button_2.buttonLink, body #page-container .et_pb_section .et_pb_button_3.buttonLink, body #page-container .et_pb_section .et_pb_button_4.buttonLink, body #page-container .et_pb_section .et_pb_button_5.buttonLink, body #page-container .et_pb_section .et_pb_button_6.buttonLink, body #page-container .et_pb_section .et_pb_button_7.buttonLink, body #page-container .et_pb_section .et_pb_button_8.buttonLink { padding-left : 0px !important; } .buttonLink::before { color:var(--brand) !important; } .buttonLink:hover { background-color: transparent !important; border: none !important; padding : none !important; color: var(--dark) !important; text-decoration: underline !important; text-decoration-color: var(--brand) !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } /*==== CTA MENU ====*/ .ctaMenu a { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.75em 1.5em !important; background-color: var(--brand) !important; border: 5px solid var(--brand) !important; border-radius: var(--radiusLarge) !important; color: var(--white) !important; font-weight: var(--weightBold) !important; text-decoration: none !important; transition: var(--transition) !important; opacity: 1 !important; } .ctaMenu a:hover { background-color: var(--brandLight) !important; border-color: var(--brandLight) !important; color: var(--white) !important; text-decoration: none !important; } /*=============================== 9. FORMULAIRES ================================*/ .et_pb_contact_form input, .et_pb_contact_form textarea, .et_pb_contact_form select { font-family: var(--fontBody) !important; font-size: var(--fontSizeBody) !important; border-radius: var(--radius) !important; border: var(--border) !important; background-color: var(--cardColor) !important; color: var(--darkDark) !important; padding: 0.9rem 1rem !important; transition: var(--transition); } .et_pb_contact_form input, .et_pb_contact_form select { min-height: 50px !important; } .et_pb_contact_form textarea { min-height: 140px !important; } .et_pb_contact_form input:focus, .et_pb_contact_form textarea:focus, .et_pb_contact_form select:focus { outline: none !important; border-color: var(--brand) !important; background-color: var(--white) !important; } .et_pb_contact_form input::placeholder, .et_pb_contact_form textarea::placeholder { color: var(--darkDark) !important; opacity: 0.65 !important; } .et_pb_contact_form .et_pb_contact_field, .et_pb_contact_form p.et_pb_contact_field, .et_pb_contact_form .et_pb_contact_field_half, .et_pb_contact_form .et_pb_contact_field_last { padding: 0 !important; margin-bottom: var(--spaceXS) !important; } .et_contact_bottom_container { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--spaceS) !important; width: 100% !important; margin-top: 0 !important; } .et_pb_contact_right { display: flex !important; align-items: center !important; gap: var(--spaceXS) !important; margin: 0 !important; } .et_pb_contact_captcha_question { color: var(--darkDark) !important; font-size: 1rem !important; line-height: 1 !important; } .et_pb_contact_captcha { width: 56px !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0.75rem !important; border-radius: var(--radius) !important; text-align: center !important; } /*=============================== 10. PLANS VISUELS ================================*/ /* Plan 1 : contenu non cliquable */ .card, .cardBox, .floatingRow, .et_pb_tabs, .et_pb_login, .et_pb_testimonial, .et_pb_table_of_contents, .et_pb_timeline_card { background-color: var(--cardColor) !important; border-radius: var(--radius); } /* Plan 2 : contenu cliquable ou à mettre en avant */ .thumbnail, .cardShadow, .et_pb_blurb.et_clickable, .et_pb_post, .et_pb_audio_module, .et_pb_team_member, .et_pb_pricing_table { background-color: var(--thumbnailColor) !important; border: var(--thumbnailBorder) !important; border-radius: var(--radius); overflow: hidden; } .thumbnail, .cardShadow, .et_pb_blurb.et_clickable, .et_pb_post { transition: box-shadow 0.25s ease, border-color 0.25s ease; } .thumbnail:hover, .et_pb_blurb.et_clickable:hover, .et_pb_post:hover { box-shadow: var(--thumbnailShadowHover) !important; border-color: var(--greyDark) !important; } .card, .cardBox, .cardShadow, .thumbnail { padding: var(--spaceM); } /*--- Carte avec image collée aux bords ---*/ .et_pb_blurb.cardImageEdge, .dica_divi_carouselitem.cardImageEdge .dica-item { padding: var(--spaceM) !important; background-color: var(--thumbnailColor) !important; border: var(--thumbnailBorder) !important; border-radius: var(--radius) !important; overflow: hidden !important; } .et_pb_blurb.cardImageEdge .et_pb_main_blurb_image, .et_pb_blurb.cardImageEdge .et_pb_only_image_mode_wrap, .dica_divi_carousel .dica_divi_carouselitem.cardImageEdge .dica-item .dica-image-container { width: calc(100% + (2 * var(--spaceM))) !important; max-width: none !important; margin: calc(-1 * var(--spaceM)) calc(-1 * var(--spaceM)) 0 !important; } .et_pb_blurb.cardImageEdge .et_pb_main_blurb_image img, .et_pb_blurb.cardImageEdge .et_pb_only_image_mode_wrap img, .dica_divi_carousel .dica_divi_carouselitem.cardImageEdge .dica-item .dica-image-container img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; border-radius: var(--radius) var(--radius) 0 0 !important; } .dica_divi_carousel .dica_divi_carouselitem.cardImageEdge .dica-item .dica-item-content { padding: 0 !important; } .floatingRow { position: relative; z-index: 2; padding: 3em !important; border-radius: var(--radiusLarge); } .borderGrey { border: var(--border) !important; border-radius: var(--radius); } /*=============================== 11. MODULES DIVI — LIGHT THEME ================================*/ .et_pb_text { color: var(--darkDark); } .et_pb_image { line-height: 0; } /*==== FULLWIDTH HEADER ==== */ .et_pb_fullwidth_header { background-color: var(--cardColor) !important; overflow: hidden; border-radius: var(--radius); } .et_pb_fullwidth_header .et_pb_fullwidth_header_container { width: var(--siteWidth) !important; max-width: var(--siteMaxWidth) !important; } .et_pb_fullwidth_header .header-logo { max-width: 250px !important; width: auto !important; height: auto !important; margin-bottom: var(--spaceM) !important; } .et_pb_fullwidth_header .header-image img { border-radius: var(--radius) !important; } .et_pb_fullwidth_header .et_pb_module_header { display: block; margin: 0 0 var(--spaceXS) !important; padding: 0 !important; font-family: var(--fontBody) !important; font-size: 1rem !important; font-weight: var(--weightBold) !important; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4 !important; color: var(--brand) !important; } .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { display: block; margin: 0 0 var(--spaceS) !important; padding: 0 !important; font-family: var(--fontTitle) !important; font-size: var(--fontSizeH1) !important; font-weight: var(--weightBold) !important; line-height: 1.1 !important; color: var(--darkDark) !important; } .et_pb_fullwidth_header .et_pb_header_content_wrapper { margin: 0 0 var(--spaceM) !important; padding: 0 !important; color: var(--darkDark) !important; } .et_pb_fullwidth_header .et_pb_header_button_wrapper { display: flex; flex-wrap: wrap; gap: var(--spaceS); margin-top: var(--spaceM) !important; } /*==== POST CONTENT ==== */ .et_pb_post_content .et_pb_section, .et_pb_post_content .et_pb_section .et_pb_row, .et_pb_post_content .et_pb_section .et_pb_row:not([class*=et_flex_column]) { margin-top: 0 !important; padding-top: 0 !important; width: 100% !important; } /*--- Sur fond gris ---*/ .greyBackground .et_pb_post_content { padding: var(--spaceL) !important; background-color: var(--white) !important; border-radius: var(--radius) !important; } /*--- Sur fond sombre ---*/ .darkBackground .et_pb_post_content { padding: var(--spaceL) !important; background-color: var(--darkLight) !important; border-radius: var(--radius) !important; color: var(--white) !important; } .brandBackground .et_pb_post_content { padding: var(--spaceL) !important; background-color: var(--brandLight) !important; border-radius: var(--radius) !important; color: var(--white) !important; } .darkBackground .et_pb_post_content p, .darkBackground .et_pb_post_content li, .darkBackground .et_pb_post_content h1, .darkBackground .et_pb_post_content h2, .darkBackground .et_pb_post_content h3, .darkBackground .et_pb_post_content h4, .darkBackground .et_pb_post_content h5, .darkBackground .et_pb_post_content h6 { color: var(--white) !important; } /*==== BLURB ==== */ .et_pb_blurb .et-pb-icon { color: var(--brand) !important; } .et_pb_blurb .et_pb_module_header, .et_pb_blurb .et_pb_module_header a { color: var(--dark) !important; text-decoration: none !important; } .et_pb_blurb .et_pb_module_header a:hover, .et_pb_blurb.et_clickable:hover .et_pb_module_header, .et_pb_blurb.et_clickable:hover .et_pb_module_header a { /*--- color: var(--brand) !important; ---*/ } .et_pb_blurb .et_pb_blurb_content { width: 100%; max-width: 100%; } .et_pb_blurb .et_pb_blurb_description, .et_pb_blurb .et_pb_blurb_description p { color: var(--darkDark) !important; } .et_pb_blurb.et_clickable { padding: var(--spaceM) !important; } .et_pb_blurb.et_clickable.et_pb_blurb_position_top .et_pb_only_image_mode_wrap { } .et_pb_blurb.et_clickable.et_pb_blurb_position_top .et_pb_only_image_mode_wrap img { width: 100% !important; display: block !important; } .et_pb_blurb.et_pb_blurb_position_left:not(.icon) .et_pb_only_image_mode_wrap { width: 150px !important; min-width: 150px !important; margin: 0 var(--spaceM) 0 0 !important; } .et_pb_blurb.et_pb_blurb_position_left:not(.icon) .et_pb_only_image_mode_wrap img { width: 150px !important; max-width: 150px !important; height: auto !important; } .et_pb_blurb.et_pb_blurb_position_left.icon .et_pb_only_image_mode_wrap { width: 70px !important; min-width: 70px !important; max-width: 70px !important; margin: 0 var(--spaceS) 0 0 !important; } .et_pb_blurb.et_pb_blurb_position_left.icon .et_pb_only_image_mode_wrap img, .et_pb_blurb.et_pb_blurb_position_left.icon .et_pb_main_blurb_image img { width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: auto !important; object-fit: contain !important; border-radius: 0 !important; } .et_pb_blurb.icon .et_pb_main_blurb_image img { max-width: 80px !important; width: 100% !important; height: auto !important; object-fit: contain !important; border-radius: 0 !important; } /*--- Icônes des items DiviGear Carousel ---*/ .dica_divi_carouselitem.icon .dica-image-container { width: 100% !important; max-width: 100% !important; padding: var(--spaceM) 0 0 !important; overflow: visible !important; } .dica_divi_carouselitem.icon.et_clickable .dica-image-container, .dica_divi_carouselitem.icon.et-clickable .dica-image-container { padding-right: var(--spaceM) !important; padding-left: var(--spaceM) !important; } .dica_divi_carouselitem.icon .dica-image-container .image { display: inline-block !important; width: auto !important; max-width: 80px !important; overflow: visible !important; } .dica_divi_carousel .dica_divi_carouselitem.icon .dica-image-container img.dica-item-image, .dica_divi_carousel .dica_divi_carouselitem.icon.et_clickable .dica-image-container img, .dica_divi_carousel .dica_divi_carouselitem.icon.et-clickable .dica-image-container img { display: block !important; width: 80px !important; max-width: 80px !important; height: auto !important; max-height: none !important; object-fit: contain !important; border-radius: 0 !important; } /*==== BLURB BRAND COLOR ====*/ .et_pb_blurb.blurbBrandColor { background-color: var(--brand) !important; padding: var(--spaceM) !important; border-radius: var(--radius) !important; } .et_pb_blurb.blurbBrandColor .et_pb_module_header, .et_pb_blurb.blurbBrandColor .et_pb_module_header a, .et_pb_blurb.blurbBrandColor .et_pb_blurb_description, .et_pb_blurb.blurbBrandColor .et_pb_blurb_description p { color: var(--white) !important; } .et_pb_blurb.blurbBrandColor .et-pb-icon { color: var(--white) !important; } /*--- Bouton / lien ---*/ .et_pb_blurb.blurbBrandColor .et_pb_blurb_description a { color: var(--white) !important; } .et_pb_blurb.blurbBrandColor .et_pb_blurb_description a:hover { color: var(--white) !important; } /*==== CTA / PROMO ====*/ .et_pb_promo { max-width: 900px; margin: auto; padding: var(--spaceXL) !important; background-color: var(--thumbnailColor) !important; border: var(--thumbnailBorder) !important; border-radius: var(--radiusLarge); box-shadow: var(--thumbnailShadow); overflow: hidden; } .et_pb_promo h1, .et_pb_promo h2, .et_pb_promo h3, .et_pb_promo p { color: var(--darkDark) !important; } .et_pb_promo .et_pb_button { background-color: var(--darkDark) !important; border-color: var(--darkDark) !important; color: var(--white) !important; } .et_pb_promo .et_pb_button::after { color: var(--brand) !important; } .et_pb_promo .et_pb_button:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } .et_pb_promo .et_pb_button:hover::after { color: var(--white) !important; } /*==== CTA DARK ====*/ .ctaDark { padding : 2em !important; } .et_pb_blurb.et_clickable.ctaDark:hover { box-shadow: none !important; } .ctaDark .et_pb_module_header, .ctaDark .et_pb_module_header a, .ctaDark .et_pb_blurb_description, .ctaDark .et_pb_blurb_description p, .et_pb_blurb.et_clickable.ctaDark .et_pb_module_header, .et_pb_blurb.et_clickable.ctaDark .et_pb_module_header a, .et_pb_blurb.et_clickable.ctaDark .et_pb_blurb_description, .et_pb_blurb.et_clickable.ctaDark .et_pb_blurb_description p { color: var(--white) !important; } /*==== TABS ==== */ .et_pb_tabs { border: 0 !important; overflow: hidden !important; } .et_pb_tabs_controls { display: flex; flex-wrap: wrap; gap: var(--spaceXS); padding: var(--spaceXS) !important; background-color: var(--grey) !important; border-bottom: 0 !important; } .et_pb_tabs_controls li { border: 0 !important; background: transparent !important; border-radius: var(--radius) !important; } .et_pb_tabs_controls li a { color: var(--dark) !important; font-weight: var(--weightMedium) !important; border-radius: var(--radius) !important; } .et_pb_tabs_controls li.et_pb_tab_active a, .et_pb_tabs_controls li.et_pb_tab_active a:hover { background-color: var(--white) !important; color: var(--brand) !important; text-decoration: none !important; } .et_pb_tab { background-color: var(--cardColor) !important; padding: var(--spaceM) !important; } .et_pb_tabs_controls .et_pb_tab_nav_item a:hover { background-color: var(--greyDark) !important; text-decoration: none !important; } /*==== TOGGLE / ACCORDÉON ==== */ .et_pb_toggle, .et_pb_toggle_open, .et_pb_toggle_close { background-color: transparent !important; } .et_pb_toggle { border: 0 !important; border-bottom: 1px solid var(--grey) !important; padding: var(--spaceS) 0 !important; } .et_pb_toggle_title { color: var(--dark) !important; } .et_pb_toggle_title::before { color: var(--brand) !important; } /*==== BLOG ==== */ .et_pb_post { padding: 0 !important; } .et_pb_post .et_pb_image_container { margin-bottom: 10px; } .et_pb_post .entry-featured-image-url { display: block; margin: 0 !important; line-height: 0 !important; } .et_pb_post .entry-featured-image-url img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0 !important; } .et_pb_post .entry-title, .et_pb_post .post-meta, .et_pb_post .post-content { padding-left: var(--spaceM) !important; padding-right: var(--spaceM) !important; } .et_pb_post .entry-title { padding-top: var(--spaceS) !important; margin: 0 0 var(--spaceXS) !important; } .et_pb_post .entry-title, .et_pb_post .entry-title a { font-family: var(--fontTitle) !important; font-size: var(--fontSizeH3) !important; color: var(--darkDark) !important; text-decoration: none !important; } .et_pb_post .entry-title a:hover, .et_pb_post:hover .entry-title, .et_pb_post:hover .entry-title a { /*--- color: var(--brand) !important; ---*/ } .et_pb_post .post-content { padding-bottom: var(--spaceM) !important; } .et_pb_post .post-meta { margin-bottom: var(--spaceXS) !important; font-size: 0 !important; } .et_pb_post .post-meta span{ margin-right: var(--spaceXS) !important; } .et_pb_post .post-meta a, .et_pb_post .post-meta .published { font-size: 0.8rem !important; } .et_pb_post .post-meta a { display: inline-block !important; padding: 0.333em 0.75em !important; margin-right: 0.333em; background-color: var(--greyLight) !important; border-radius: var(--radiusLarge) !important; color: var(--darkDark) !important; font-weight: var(--weightRegular) !important; line-height: 1 !important; transition: var(--transition) !important; font-family: var(--fontAccent); } .et_pb_post .post-meta a:hover { background-color: var(--greyDark) !important; color: var(--darkDark) !important; text-decoration: none !important; } /*--- Métadonnées des articles sous forme de bulles ---*/ .et_pb_post .post-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.333em !important; align-items: center !important; margin-bottom: var(--spaceS) !important; } .et_pb_post .post-meta a { display: inline-flex !important; align-items: center !important; padding: 0.5em 0.75em !important; margin: 0 !important; background-color: var(--greyLight) !important; border-radius: var(--radiusRound) !important; color: var(--darkDark) !important; font-size: 0.8rem !important; font-weight: var(--weightRegular) !important; line-height: 1 !important; text-decoration: none !important; transition: var(--transition) !important; } .et_pb_post .post-meta a:hover { background-color: var(--greyDark) !important; border-color: var(--greyDark) !important; color: var(--darkDark) !important; text-decoration: none !important; } /*==== PORTFOLIO ==== */ .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item, .et_pb_filterable_portfolio .et_pb_portfolio_item { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_portfolio_image, .et_pb_filterable_portfolio .et_portfolio_image { display: block !important; position: relative !important; border-radius: var(--radius) !important; overflow: hidden !important; line-height: 0 !important; border: var(--thumbnailBorder) !important; background-color: var(--thumbnailColor) !important; transition: box-shadow 0.25s ease, border-color 0.25s ease; margin-bottom:1em; } .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item:hover .et_portfolio_image, .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_portfolio_image { box-shadow: var(--thumbnailShadowHover) !important; border-color: var(--greyDark) !important; } .et_pb_portfolio .et_portfolio_image img, .et_pb_filterable_portfolio .et_portfolio_image img { width: 100% !important; display: block !important; border-radius: var(--radius) !important; } .et_pb_portfolio .et_overlay, .et_pb_filterable_portfolio .et_overlay { border: 0 !important; background-color: rgb(22 23 25 / 80%) !important; border-radius: var(--radius) !important; } .et_pb_portfolio .et_overlay::before, .et_pb_filterable_portfolio .et_overlay::before { color: var(--brand) !important; } .et_pb_portfolio .et_pb_module_header, .et_pb_filterable_portfolio .et_pb_module_header { margin-top: var(--spaceXS) !important; margin-bottom: 0 !important; padding: 0 !important; } .et_pb_portfolio .et_pb_module_header a, .et_pb_filterable_portfolio .et_pb_module_header a { color: var(--darkDark) !important; text-decoration: none !important; } .et_pb_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a, .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a { /*--- color: var(--brand) !important; ---*/ } /*--- Métadonnées des projets sous forme de bulles ---*/ .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta, .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.333em !important; margin-top: 0.666rem !important; } /*--- Faire disparaître les virgules ---*/ .et_pb_portfolio_item .post-meta { color: var(--backgroundColor) !important; } .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a, .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a { display: inline-flex !important; align-items: center !important; padding: 0.333em 0.75em !important; background-color: var(--greyLight) !important; border: var(--border) !important; border-radius: var(--radiusRound) !important; color: var(--darkDark) !important; font-size: 0.8rem !important; font-weight: var(--weightMedium) !important; line-height: 1 !important; text-decoration: none !important; transition: var(--transition) !important; } .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a:hover, .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a:hover { background-color: var(--greyDark) !important; border-color: var(--greyDark) !important; color: var(--darkDark) !important; text-decoration: none !important; } /*==== FILTRES PORTFOLIO ==== */ .et_pb_filterable_portfolio .et_pb_portfolio_filters { margin-bottom: var(--spaceM) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul { display: flex !important; flex-wrap: wrap !important; gap: var(--spaceXS) !important; margin: 0 !important; padding: 0 !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.666em 1.5em !important; background-color: var(--greyLight) !important; border: var(--border) !important; border-radius: var(--radiusLarge) !important; color: var(--darkDark) !important; font-size: 0.85rem !important; font-weight: var(--weightMedium) !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; transition: var(--transition) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:hover { background-color: var(--greyDark) !important; border-color: var(--greyDark) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active:hover { background-color: var(--brandLight) !important; border-color: var(--brandLight) !important; } /*==== PORTFOLIO FULLWIDTH CAROUSEL ====*/ /*--- Gouttière entre les items ---*/ .et_pb_fullwidth_portfolio_carousel .et_pb_portfolio_items { width: calc(100% + var(--spaceS)) !important; margin-left: calc(var(--spaceS) / -2) !important; margin-right: calc(var(--spaceS) / -2) !important; } .et_pb_fullwidth_portfolio_carousel .et_pb_portfolio_item { padding-left: calc(var(--spaceS) / 2) !important; padding-right: calc(var(--spaceS) / 2) !important; box-sizing: border-box !important; } /*--- Conteneur de l’image ---*/ .et_pb_fullwidth_portfolio_carousel .et_pb_portfolio_image { position: relative !important; overflow: hidden !important; border-radius: var(--radius) !important; background-color: var(--thumbnailColor) !important; } /*--- Image ---*/ .et_pb_fullwidth_portfolio_carousel .et_pb_portfolio_image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: var(--radius) !important; } /*--- Overlay sombre ---*/ .et_pb_fullwidth_portfolio_carousel .et_overlay { inset: 0 !important; width: 100% !important; height: 100% !important; background-color: rgb(22 23 25 / 72%) !important; border: 0 !important; border-radius: var(--radius) !important; } /*--- Icône de l’overlay ---*/ .et_pb_fullwidth_portfolio_carousel .et_overlay::before { color: var(--brand) !important; text-shadow: none !important; } /*--- Titre et métadonnées sur l’overlay ---*/ .et_pb_fullwidth_portfolio_carousel .meta { border-radius: var(--radius) !important; } .et_pb_fullwidth_portfolio_carousel .meta h3, .et_pb_fullwidth_portfolio_carousel .meta h3 a, .et_pb_fullwidth_portfolio_carousel .meta .post-meta { color: var(--white) !important; text-shadow: none !important; } /*==== PAGINATION ==== */ .pagination { display: block !important; } .et_pb_blog_grid .pagination a, .et_pb_portfolio .pagination a, .et_pb_filterable_portfolio .pagination a, .wp-pagenavi a, .wp-pagenavi span { color: var(--dark) !important; text-decoration: none !important; } .et_pb_portofolio_pagination { border-top: 1px solid var(--darkLight) !important; } /*==== SLIDER ==== */ .et_pb_slider { border-radius: var(--radius); overflow: visible !important; background-color: var(--cardColor) !important; } .et_pb_slides, .et_pb_slide { border-radius: var(--radius); overflow: hidden; } .et_pb_slide_overlay_container { background-color: rgb(22 23 25 / 66.6%) !important; } .et_pb_slider .et_pb_slide_title, .et_pb_slider .et_pb_slide_title a { text-decoration: none !important; } .et_pb_slide_description, .et_pb_slide_title, .et_pb_slide_title a, .et_pb_slide_description h1, .et_pb_slide_description h2, .et_pb_slide_description h3, .et_pb_slide_description h4, .et_pb_slide_description p, .et_pb_slide_description .post-meta, .et_pb_slide_description .post-meta a { text-shadow: none !important; } .et_pb_slide_with_image .et_pb_slide_image img { border-radius: var(--radius); } .et_pb_slider .et-pb-controllers a, .et_pb_group_carousel .et_pb_group_carousel_dot, .dica_divi_carousel .swiper-pagination-bullet { background-color: var(--grey) !important; opacity: 1 !important; } .et_pb_slider .et-pb-controllers a.et-pb-active-control, .et_pb_group_carousel .et_pb_group_carousel_dot.active, .et_pb_group_carousel .et_pb_group_carousel_dot_active, .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--brand) !important; } /*==== FLÈCHES ==== */ .et_pb_fullwidth_portfolio .et-pb-slider-arrows a, .et_pb_slider .et-pb-arrow-prev, .et_pb_slider .et-pb-arrow-next, .et_pb_group_carousel .et_pb_group_carousel_arrow, .dica_divi_carousel .swiper-button-prev, .dica_divi_carousel .swiper-button-next { width: 2.75rem !important; height: 2.75rem !important; min-width: 2.75rem !important; min-height: 2.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--white) !important; border: var(--border) !important; border-radius: var(--radiusRound) !important; color: var(--brand) !important; text-decoration: none !important; box-shadow: none !important; opacity: 1 !important; font-size: 1.5em !important; } .et_pb_fullwidth_portfolio .et-pb-slider-arrows a:hover, .et_pb_slider .et-pb-arrow-prev:hover, .et_pb_slider .et-pb-arrow-next:hover, .et_pb_group_carousel .et_pb_group_carousel_arrow:hover, .dica_divi_carousel .swiper-button-prev:hover, .dica_divi_carousel .swiper-button-next:hover { background-color: var(--greyDark) !important; color: var(--brand) !important; } /*==== ICÔNES ==== */ .et_pb_icon .et-pb-icon, .et_pb_icon_list .et-pb-icon, .et_pb_icon_list .et_pb_icon_list_item .et-pb-icon { color: var(--brand); } /*--- Texte des listes d’icônes ---*/ .et_pb_icon_list .et_pb_icon_list_item, .et_pb_icon_list .et_pb_icon_list_item a, .et_pb_icon_list .et_pb_icon_list_item p, .et_pb_icon_list .et_pb_icon_list_item span:not(.et-pb-icon) { font-weight: var(--weightBold) !important; } .buttonIcon .et-pb-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--brand); color: var(--white) !important; border-radius: 50%; font-size: 30px !important; } .et_pb_icon.et_flex_module { align-self: inherit !important; } /*==== LOGIN ==== */ .et_pb_login { overflow: hidden; padding: var(--spaceM) !important; } .et_pb_login input { border-radius: var(--radius); } /*==== RECHERCHE ==== */ .et_pb_search { border-radius: var(--radius) !important; border: var(--border) !important; } .et_pb_search input.et_pb_searchsubmit { background-color: var(--brand) !important; color: var(--white); padding: 1em !important; } .et_pb_search input.et_pb_searchsubmit:hover { background-color: var(--brandLight) !important; } /*==== PRICING ==== */ .et_pb_pricing_tables { display: flex; gap: var(--spaceS); } .et_pb_pricing_heading { background-color: var(--dark) !important; padding: 2em; } .et_pb_pricing_heading .et_pb_pricing_title, .et_pb_pricing_heading .et_pb_best_value { color: var(--white) !important; } .et_pb_pricing_content_top { border-bottom: var(--border); } .et_pb_sum, .et_pb_dollar_sign { color: var(--brand) !important; } .et_pb_sum { font-family: var(--fontTitle) !important; font-weight: var(--weightBold) !important; } /*==== TEAM ==== */ .et_pb_team_member { text-align: left !important; padding: var(--spaceM) !important; } .et_pb_team_member .et_pb_team_member_image img { border-radius: 50% !important; width: 120px !important; height: 120px !important; object-fit: cover; } .et_pb_team_member .et_pb_member_position { color: var(--brand) !important; font-size: 0.8rem; font-weight: var(--weightBold); text-transform: uppercase; letter-spacing: 0.08em; } /*==== TÉMOIGNAGE ==== */ .et_pb_testimonial { padding: var(--spaceM) !important; } .et_pb_testimonial::before { color: var(--brand); } /*==== AUDIO ==== */ .et_pb_audio_module .et_pb_audio_module_content { background-color: var(--white) !important; } .et_pb_audio_module .mejs-container, .et_pb_audio_module .mejs-inner, .et_pb_audio_module .mejs-controls { background: transparent !important; } .et_pb_audio_module .mejs-time-total, .et_pb_audio_module .mejs-horizontal-volume-total { background-color: var(--grey) !important; } .et_pb_audio_module .mejs-time-current, .et_pb_audio_module .mejs-horizontal-volume-current, .et_pb_audio_module .mejs-time-handle-content, .et_pb_audio_module .mejs-horizontal-volume-handle { background-color: var(--brand) !important; } /*==== SOCIAL ==== */ .et_pb_social_media_follow .et_pb_social_media_follow_network a.icon { background-color: var(--brand) !important; border-radius: 50% !important; color: var(--white) !important; transition: var(--transition) !important; } .et_pb_social_media_follow .et_pb_social_media_follow_network a.icon:hover { background-color: var(--brandLight) !important; } /*==== TIMELINE ==== */ .et_pb_timeline_connector { background-color: var(--grey) !important; } .et_pb_timeline_card { padding: var(--spaceM) !important; } .et_pb_timeline_marker { background-color: var(--darkLight) !important; } .et_pb_timeline_date { color: var(--brand) !important; } /*==== DIVI GROUP CAROUSEL ==== */ /*--- Gouttière entre les tuiles ---*/ .et_pb_group_carousel { overflow: visible !important; } .et_pb_group_carousel .et_pb_group_carousel_items { margin-left: calc(var(--spaceS) * -1) !important; margin-right: calc(var(--spaceS) * -1) !important; } .et_pb_group_carousel .et_pb_group_carousel_item, .et_pb_group_carousel .et_pb_group_carousel_slide, .et_pb_group_carousel .et_pb_group_carousel_child { padding-left: var(--spaceS) !important; padding-right: var(--spaceS) !important; } .et_pb_group_carousel .et_pb_group { overflow: hidden !important; border-radius: var(--radius) !important; } .et_pb_group_carousel .et_pb_group_carousel_arrow { padding: 0 !important; line-height: 1 !important; font-size: 0 !important; } .et_pb_group_carousel .et_pb_group_carousel_arrow span, .et_pb_group_carousel .et_pb_group_carousel_arrow .et-pb-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; color: var(--brand) !important; font-size: 1.75rem !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CAROUSEL FADE ======================================================== */ .carouselFade { position: relative; overflow: hidden; } .carouselFade::before, .carouselFade::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 20; pointer-events: none; } .carouselFade::before { left: 0; background: linear-gradient( to right, var(--backgroundColor) 0%, transparent 100% ); } .carouselFade::after { right: 0; background: linear-gradient( to left, var(--backgroundColor) 0%, transparent 100% ); } /*==== TABLE DES MATIÈRES ==== */ /*--- Conteneur ---*/ .et_pb_table_of_contents { padding: var(--spaceM) !important; background-color: var(--cardColor) !important; border-radius: var(--radius) !important; } /*--- Séparation des items ---*/ .et_pb_table_of_contents .et_pb_table_of_contents__list--level-2 { padding-bottom: var(--spaceXS); margin-bottom: var(--spaceXS) !important; border-bottom: var(--border); border-color: var(--greyDark); } ol.et_pb_table_of_contents__list--level-2 { border-bottom: none !important; } /*--- Numéros / marqueurs ---*/ .et_pb_table_of_contents .et_pb_table_of_contents__marker { color: var(--brand) !important; } /*--- Texte des items ---*/ .et_pb_table_of_contents .et_pb_table_of_contents__link, .et_pb_table_of_contents .et_pb_table_of_contents__link-text { color: var(--darkDark) !important; text-decoration: none !important; } .et_pb_table_of_contents a:hover, .et_pb_table_of_contents a:hover .et_pb_table_of_contents__link-text { color: var(--brand) !important; text-decoration: none !important; } /*=============================== 12. OVERLAYS ET DÉGRADÉS ================================*/ /*====DÉGRADÉS ========*/ .gradientLightToGrey { background: linear-gradient( to bottom, var(--white) 0%, var(--white) 50%, var(--greyLight) 50%, var(--greyLight) 100% ) !important; } .gradientLightToDark { background: linear-gradient( to bottom, var(--white) 0%, var(--white) 50%, var(--darkDark) 50%, var(--darkDark) 100% ) !important; } .gradientGreyToLight { background: linear-gradient( to bottom, var(--greyLight) 0%, var(--greyLight) 50%, var(--white) 50%, var(--white) 100% ) !important; } .gradientGreyToDark { background: linear-gradient( to bottom, var(--greyLight) 0%, var(--greyLight) 50%, var(--darkDark) 50%, var(--darkDark) 100% ) !important; } .gradientDarkToGrey { background: linear-gradient( to bottom, var(--darkDark) 0%, var(--darkDark) 50%, var(--greyLight) 50%, var(--greyLight) 100% ) !important; } .gradientDarkToLight { background: linear-gradient( to bottom, var(--darkDark) 0%, var(--darkDark) 50%, var(--white) 50%, var(--white) 100% ) !important; } .gradientLightToBrand { background: linear-gradient(to bottom, var(--white) 0%, var(--white) 50%, var(--brand) 50%, var(--brand) 100%) !important; } .gradientBrandToLight { background: linear-gradient(to bottom, var(--brand) 0%, var(--brand) 50%, var(--white) 50%, var(--white) 100%) !important; } .gradientGreyToBrand { background: linear-gradient(to bottom, var(--greyLight) 0%, var(--greyLight) 50%, var(--brand) 50%, var(--brand) 100%) !important; } .gradientBrandToGrey { background: linear-gradient(to bottom, var(--brand) 0%, var(--brand) 50%, var(--greyLight) 50%, var(--greyLight) 100%) !important; } .gradientDarkToBrand { background: linear-gradient(to bottom, var(--darkDark) 0%, var(--darkDark) 50%, var(--brand) 50%, var(--brand) 100%) !important; } .gradientBrandToDark { background: linear-gradient(to bottom, var(--brand) 0%, var(--brand) 50%, var(--darkDark) 50%, var(--darkDark) 100%) !important; } /*==== OVERLAYS ====*/ /*--- Overlay uni ---*/ .overlay, .overlayRadius { --overlayBackground: var(--darkDark); --overlayOpacity: 0.666; } /*--- Overlay en dégradé ---*/ .overlayGradient, .overlayGradientRadius { --overlayBackground: linear-gradient( to bottom, rgb(22 23 25 / 20%) 0%, var(--darkDark) 100% ); --overlayOpacity: 1; } /*--- Structure commune ---*/ .overlay, .overlayGradient, .overlayRadius, .overlayGradientRadius { position: relative; isolation: isolate; overflow: hidden; } /*--- Calque visuel ---*/ .overlay::before, .overlayGradient::before, .overlayRadius::before, .overlayGradientRadius::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--overlayBackground); opacity: var(--overlayOpacity); } /*--- Contenu au-dessus uniquement pour les conteneurs Divi ---*/ :is( .overlay, .overlayGradient, .overlayRadius, .overlayGradientRadius ):is( .et_pb_section, .et_pb_row, .et_pb_column ) > * { position: relative; z-index: 2; } /*--- Variantes avec rayon intégré ---*/ .overlayRadius, .overlayGradientRadius { border-radius: var(--radius) !important; } /*==== Radius ========*/ .radius { border-radius : var(--radius) !important; } .radiusLarge { border-radius : var(--radiusLarge) !important; } .radiusRound { border-radius : var(--radiusRound) !important; } .radiusSmall { border-radius : var(--radiusSmall) !important; } /*=============================== 13. DIVI GEAR CAROUSEL ================================*/ .dica_divi_carousel .dica-item { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .dica_divi_carousel .dica-image-container, .dica_divi_carousel .dica-image-container .image { display: block !important; margin: 0 0 var(--spaceXS) !important; line-height: 0 !important; } .dica_divi_carousel .dica-image-container img, .dica_divi_carousel .dica-image-container img.dica-item-image { display: block !important; width: 100% !important; border-radius: var(--radius) !important; } .dica_divi_carousel .dica-item-content { padding: 0 !important; } .dica_divi_carousel .dica-item-content .item-title, .dica_divi_carousel .dica-item-content .item-title a { color: var(--darkDark) !important; text-decoration: none !important; } .dica_divi_carousel .dica-item-content .item-title a:hover { color: var(--brand) !important; } .dica_divi_carousel .dica-item-content .item-subtitle, .dica_divi_carousel .dica-item-content p { font-family: var(--fontBody) !important; font-size: var(--fontSizeBody) !important; font-weight: var(--weightRegular) !important; line-height: var(--lineHeightBody) !important; color: var(--darkDark) !important; } .dica_divi_carousel .dica-item-content p { font-weight: var(--weightLight) !important; } /*==== DIVI GEAR — ITEMS CLIQUABLES ==== */ .dica_divi_carouselitem.et-clickable { margin-bottom: var(--spaceS) !important; } .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item, .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item, .dica_divi_carousel .dica-item.et_clickable, .dica_divi_carousel .dica-item.et-clickable { background-color: var(--thumbnailColor) !important; border: var(--thumbnailBorder) !important; border-radius: var(--radius) !important; box-shadow: none !important; overflow: hidden !important; transition: box-shadow 0.25s ease, border-color 0.25s ease !important; } .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item:hover, .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item:hover, .dica_divi_carousel .dica-item.et_clickable:hover, .dica_divi_carousel .dica-item.et-clickable:hover { box-shadow: var(--thumbnailShadowHover) !important; border-color: var(--greyDark) !important; } .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-image-container, .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-image-container, .dica_divi_carousel .dica-item.et_clickable .dica-image-container, .dica_divi_carousel .dica-item.et-clickable .dica-image-container { margin: 0 !important; } .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-image-container img, .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-image-container img, .dica_divi_carousel .dica-item.et_clickable .dica-image-container img, .dica_divi_carousel .dica-item.et-clickable .dica-image-container img { border-radius: var(--radius) var(--radius) 0 0 !important; } .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item-content, .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item-content, .dica_divi_carousel .dica-item.et_clickable .dica-item-content, .dica_divi_carousel .dica-item.et-clickable .dica-item-content { padding: var(--spaceM) !important; } /*--- Espace pour les ombres sans réduire le carousel ---*/ .dica_divi_carousel .swiper-container { width: calc(100% + 60px) !important; max-width: none !important; margin-left: -30px !important; margin-right: -30px !important; padding: 30px !important; } /*==== DIVI GEAR — PICTOS ==== */ .dica_divi_carousel.carouselPicto .dica-image-container { padding-top: var(--spaceM) !important; margin-bottom: 0 !important; text-align: center !important; } .dica_divi_carousel.carouselPicto .dica-image-container img, .dica_divi_carousel.carouselPicto .dica-image-container img.dica-item-image { width: auto !important; max-width: 100px !important; height: auto !important; max-height: 100px !important; object-fit: contain !important; margin-inline: auto !important; border-radius: 0 !important; } /*==== DIVI GEAR — NAVIGATION & DOTS ==== */ /*--- FLECHES -----*/ body #page-container .dica_divi_carousel .swiper-button-prev, body #page-container .dica_divi_carousel .swiper-button-next { width: 50px !important; height: 50px !important; } body #page-container .dica_divi_carousel .swiper-button-prev:before, body #page-container .dica_divi_carousel .swiper-button-next:before, body #page-container .dica_divi_carousel_0 .swiper-button-next:before, body #page-container .dica_divi_carousel_0 .swiper-button-prev:before, body #page-container .dica_divi_carousel_1 .swiper-button-next:before, body #page-container .dica_divi_carousel_1 .swiper-button-prev:before, body #page-container .dica_divi_carousel_2 .swiper-button-next:before, body #page-container .dica_divi_carousel_2 .swiper-button-prev:before { font-size: 0.5em; color: var(--brand) !important; } /*--- DOTS -----*/ body #page-container .dica_divi_carousel .swiper-pagination-bullet { background-color: var(--grey) !important; } body #page-container .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--brand) !important; } /*=============================== 14. ANIMATIONS ================================*/ .drakRevealReady .et_pb_row { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .drakRevealReady .et_pb_column { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } .drakRevealReady .et_pb_row.isVisible, .drakRevealReady .et_pb_row.isVisible .et_pb_column { opacity: 1; transform: translateY(0); } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(1) { transition-delay: 0.10s; } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(2) { transition-delay: 0.30s; } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(3) { transition-delay: 0.50s; } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(4) { transition-delay: 0.70s; } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(5) { transition-delay: 0.90s; } .drakRevealReady .et_pb_row.isVisible .et_pb_column:nth-child(6) { transition-delay: 1.10s; } /*===== EXCLUSIONS DES ANIMATIONS =====*/ /* Classe placée directement sur une ligne */ .drakRevealReady .et_pb_row.noReveal, .drakRevealReady .et_pb_row.revealDisabled { opacity: 1 !important; transform: none !important; transition: none !important; } /* Colonnes directes de la ligne uniquement */ .drakRevealReady .et_pb_row.noReveal > .et_pb_column, .drakRevealReady .et_pb_row.revealDisabled > .et_pb_column { opacity: 1 !important; transform: none !important; transition: none !important; } /* Classe placée sur une section */ .drakRevealReady .et_pb_section.noReveal > .et_pb_row, .drakRevealReady .et_pb_section.revealDisabled > .et_pb_row { opacity: 1 !important; transform: none !important; transition: none !important; } .drakRevealReady .et_pb_section.noReveal > .et_pb_row > .et_pb_column, .drakRevealReady .et_pb_section.revealDisabled > .et_pb_row > .et_pb_column { opacity: 1 !important; transform: none !important; transition: none !important; } .drakRevealReady .noReveal .et_pb_row, .drakRevealReady .noReveal .et_pb_column { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .drakRevealReady .et_pb_row, .drakRevealReady .et_pb_column { opacity: 1; transform: none; transition: none; } } /*=============================== 15. STICKY ================================*/ /* Footer bottom line */ #footer-bottom .container { display: flex; justify-content: center; } #footer-info { float: none !important; width: 100%; text-align: center !important; } #footer-bottom .et-social-icons { display: none; } .et_pb_sticky, .et_pb_sticky_module { z-index: 999 !important; } /* Header principal Divi lorsqu’il devient fixe */ #main-header.et-fixed-header, .et_fixed_nav #main-header.et-fixed-header, body.et_transparent_nav #main-header.et-fixed-header { background-color: var(--darkDark) !important; opacity: 1 !important; } /*=============================== 16. GREY THEME ================================*/ /*--- Variables du thème ---*/ .greyBackground{ --backgroundColor: var(--greyLight); --cardColor: var(--grey); --thumbnailColor: var(--white); --thumbnailBorderColor: var(--greyDark); } /*=============================== 17. BRAND THEME ================================*/ /*--- Variables du thème ---*/ .brandBackground { --backgroundColor: var(--brand); --cardColor: var(--brandLight); --thumbnailColor: var(--brandDark); --thumbnailBorderColor: rgb(255 255 255 / 18%); --thumbnailBorder: 1px solid var(--thumbnailBorderColor); --border: 1px solid rgb(255 255 255 / 18%); background-color: var(--backgroundColor) !important; color: var(--white); } .brandBackground, .brandBackground .et_pb_text, .brandBackground .et_pb_text_inner, .brandBackground .et_pb_text_inner p, .brandBackground .et_pb_module p, .brandBackground .et_pb_module li, .brandBackground h1, .brandBackground h2, .brandBackground h3, .brandBackground h4, .brandBackground h5, .brandBackground h6, .brandBackground .et_pb_module h1, .brandBackground .et_pb_module h2, .brandBackground .et_pb_module h3, .brandBackground .et_pb_module h4, .brandBackground .et_pb_module h5, .brandBackground .et_pb_module h6, .brandBackground .surTitre, .brandBackground .heroTitle, .brandBackground .heroTitle p, .brandBackground .heroTitle span { color: var(--white) !important; } .brandBackground hr, .brandBackground .et_pb_divider::before { border-top-color: rgb(255 255 255 / 18%) !important; } /*=============================== 17. DARK THEME ================================*/ /*--- Variables du thème ---*/ .darkBackground { --backgroundColor: var(--darkDark); --cardColor: var(--dark); --thumbnailColor: var(--darkLight); --thumbnailBorderColor: rgb(255 255 255 / 8%); --thumbnailBorder: 1px solid var(--thumbnailBorderColor); --thumbnailShadow: 0 0 30px rgb(0 0 0 / 12%); --thumbnailShadowHover: 0 0 30px rgb(0 0 0 / 24%); --border: 1px solid rgb(255 255 255 / 8%); background-color: var(--backgroundColor) !important; color: var(--white); } /*==== TYPOGRAPHIE ====*/ /*--- Texte courant ---*/ .darkBackground, .darkBackground .et_pb_text, .darkBackground .et_pb_text_inner, .darkBackground .et_pb_text_inner p, .darkBackground .et_pb_module p, .darkBackground .et_pb_module li { color: rgb(255 255 255 / 85%) !important; } /*--- Titres ---*/ .darkBackground h1, .darkBackground h2, .darkBackground h3, .darkBackground h4, .darkBackground h5, .darkBackground h6, .darkBackground .et_pb_module h1, .darkBackground .et_pb_module h2, .darkBackground .et_pb_module h3, .darkBackground .et_pb_module h4, .darkBackground .et_pb_module h5, .darkBackground .et_pb_module h6 { color: var(--white) !important; } /*--- Surtitres ---*/ .darkBackground .surTitre, .darkBackground .et_pb_module .surTitre, .darkBackground .et_pb_module h1.surTitre, .darkBackground .et_pb_module h2.surTitre, .darkBackground .et_pb_module h3.surTitre, .darkBackground .et_pb_module h4.surTitre, .darkBackground .et_pb_module h5.surTitre, .darkBackground .et_pb_module h6.surTitre { color: var(--white) !important; } /*--- Hero title ---*/ .darkBackground .heroTitle, .darkBackground .heroTitle h1, .darkBackground .heroTitle h2, .darkBackground .heroTitle h3, .darkBackground .heroTitle h4, .darkBackground .heroTitle h5, .darkBackground .heroTitle h6, .darkBackground .heroTitle p, .darkBackground .heroTitle span, .darkBackground p.heroTitle { color: var(--white) !important; } /*--- Liens textuels ---*/ .darkBackground .et_pb_text a, .darkBackground .et_pb_blurb_description a, .darkBackground .et_pb_toggle_content a, .darkBackground .et_pb_tab a, .darkBackground .et_pb_testimonial_description a, .darkBackground .et_pb_timeline_card a { color: var(--brand) !important; } .darkBackground .et_pb_text a:hover, .darkBackground .et_pb_blurb_description a:hover, .darkBackground .et_pb_toggle_content a:hover, .darkBackground .et_pb_tab a:hover, .darkBackground .et_pb_testimonial_description a:hover, .darkBackground .et_pb_timeline_card a:hover { color: var(--white) !important; } /*--- Séparateurs ---*/ .darkBackground hr { border-top-color: rgb(255 255 255 / 8%) !important; } .darkBackground .et_pb_divider::before { border-top-color: rgb(255 255 255 / 8%) !important; } /*==== PLANS VISUELS ====*/ /*--- Cards passives ---*/ .darkBackground .card, .darkBackground .cardBox, .darkBackground .floatingRow, .darkBackground .et_pb_tabs, .darkBackground .et_pb_login, .darkBackground .et_pb_testimonial, .darkBackground .et_pb_table_of_contents, .darkBackground .et_pb_timeline_card { background-color: var(--cardColor) !important; } /* Une ligne flottante reste blanche sur la transition gris vers sombre. */ .gradientGreyToDark .floatingRow { background-color: var(--white) !important; } /*--- Thumbnails et contenus de premier plan ---*/ .darkBackground .thumbnail, .darkBackground .cardShadow, .darkBackground .et_pb_blurb.et_clickable, .darkBackground .et_pb_post, .darkBackground .et_pb_audio_module, .darkBackground .et_pb_team_member, .darkBackground .et_pb_pricing_table { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailColor) !important; } /*--- Survol ---*/ .darkBackground .thumbnail:hover, .darkBackground .cardShadow:hover, .darkBackground .et_pb_blurb.et_clickable:hover, .darkBackground .et_pb_post:hover { border-color: var(--thumbnailColor) !important; } /*--- Bordure générique ---*/ .darkBackground .borderGrey { border-color: rgb(255 255 255 / 8%) !important; } /*==== BOUTONS ====*/ /*--- Bouton principal ---*/ .darkBackground .et_pb_button { background-color: var(--white) !important; border-color: var(--white) !important; color: var(--darkDark) !important; } .darkBackground .et_pb_button::after { color: var(--accentLight) !important; } .darkBackground .et_pb_button:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } .darkBackground .et_pb_button:hover::after { color: var(--white) !important; } /*--- Bouton secondaire ---*/ .darkBackground .et_pb_button_two { background-color: var(--darkLight) !important; border-color: var(--darkLight) !important; color: var(--white) !important; } .darkBackground .et_pb_button_two::after { color: var(--accentLight) !important; } .darkBackground .et_pb_button_two:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } /*--- Bouton lien ---*/ .darkBackground .buttonLink { color: var(--white) !important; background-color: transparent !important; } .darkBackground .buttonLink:hover { color: var(--white) !important; background-color: transparent !important; } .darkBackground .buttonLink:before{ color: var(--brand) !important; } .darkBackground .buttonLink:hover:before{ color: var(--brand) !important; } /*==== FORMULAIRES ====*/ /*--- Champs ---*/ .darkBackground .et_pb_contact_form input, .darkBackground .et_pb_contact_form textarea, .darkBackground .et_pb_contact_form select { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Focus ---*/ .darkBackground .et_pb_contact_form input:focus, .darkBackground .et_pb_contact_form textarea:focus, .darkBackground .et_pb_contact_form select:focus { background-color: var(--dark) !important; border-color: var(--brand) !important; color: var(--white) !important; } /*--- Placeholder ---*/ .darkBackground .et_pb_contact_form input::placeholder, .darkBackground .et_pb_contact_form textarea::placeholder { color: rgb(255 255 255 / 55%) !important; } /*--- Captcha ---*/ .darkBackground .et_pb_contact_captcha_question { color: var(--white) !important; } .darkBackground .et_pb_contact_captcha { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*==== FULLWIDTH HEADER ====*/ /*--- Conteneur ---*/ .darkBackground .et_pb_fullwidth_header { background-color: var(--cardColor) !important; } /*--- Sous-titre principal ---*/ .darkBackground .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { color: var(--white) !important; } /*--- Texte ---*/ .darkBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper, .darkBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper p { color: rgb(255 255 255 / 85%) !important; } /*==== FULLWIDTH HEADER — DARK THEME ====*/ /* Classe sur la section ou directement sur le module */ .darkBackground .et_pb_fullwidth_header, .et_pb_fullwidth_header.darkBackground { background-color: var(--cardColor) !important; color: var(--white) !important; } /* Surtitre */ .darkBackground .et_pb_fullwidth_header .et_pb_module_header, .et_pb_fullwidth_header.darkBackground .et_pb_module_header { color: var(--brand) !important; } /* Titre principal */ .darkBackground .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead, .et_pb_fullwidth_header.darkBackground .et_pb_fullwidth_header_subhead { color: var(--white) !important; } /* Texte courant */ .darkBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper, .darkBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper p, .et_pb_fullwidth_header.darkBackground .et_pb_header_content_wrapper, .et_pb_fullwidth_header.darkBackground .et_pb_header_content_wrapper p { color: rgb(255 255 255 / 85%) !important; } /*==== BLURB ====*/ /*--- Titre ---*/ .darkBackground .et_pb_blurb .et_pb_module_header, .darkBackground .et_pb_blurb .et_pb_module_header a { color: var(--white) !important; } .darkBackground .et_pb_blurb .et_pb_module_header a:hover, .darkBackground .et_pb_blurb.et_clickable:hover .et_pb_module_header, .darkBackground .et_pb_blurb.et_clickable:hover .et_pb_module_header a { /*--- color: var(--brand) !important; ---*/ } /*--- Description ---*/ .darkBackground .et_pb_blurb .et_pb_blurb_description, .darkBackground .et_pb_blurb .et_pb_blurb_description p { color: rgb(255 255 255 / 85%) !important; } /*--- BOUTON ---*/ .darkBackground .et_pb_blurb .et_pb_button, .et_pb_blurb.darkBackground .et_pb_button { color: var(--dark) !important; } /*==== CTA / PROMO ====*/ .darkBackground .et_pb_promo { background-color: var(--darkLight) !important; border-color: var(--darkLight) !important; box-shadow: none; } .darkBackground .et_pb_promo h1, .darkBackground .et_pb_promo h2, .darkBackground .et_pb_promo h3, .darkBackground .et_pb_promo p { color: var(--white) !important; } .darkBackground .et_pb_promo .et_pb_button { background-color: var(--white) !important; border-color: var(--white) !important; color: var(--darkDark) !important; } .darkBackground .et_pb_promo .et_pb_button::after { color: var(--brand) !important; } .darkBackground .et_pb_promo .et_pb_button:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } .darkBackground .et_pb_promo .et_pb_button:hover::after { color: var(--white) !important; } /*==== TABS ====*/ /*--- Navigation ---*/ .darkBackground .et_pb_tabs_controls { background-color: var(--darkLight) !important; } /*--- Onglets inactifs ---*/ .darkBackground .et_pb_tabs_controls li a { color: rgb(255 255 255 / 75%) !important; } /*--- Onglet actif ---*/ .darkBackground .et_pb_tabs_controls li.et_pb_tab_active a, .darkBackground .et_pb_tabs_controls li.et_pb_tab_active a:hover { background-color: var(--dark) !important; color: var(--brand) !important; } /*--- Survol ---*/ .darkBackground .et_pb_tabs_controls .et_pb_tab_nav_item a:hover { background-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Contenu ---*/ .darkBackground .et_pb_tab { background-color: var(--cardColor) !important; color: rgb(255 255 255 / 85%) !important; } /*==== TOGGLE / ACCORDÉON ====*/ /*--- Séparation ---*/ .darkBackground .et_pb_toggle { border-bottom-color: rgb(255 255 255 / 8%) !important; } /*--- Titre ---*/ .darkBackground .et_pb_toggle_title { color: var(--white) !important; } /*--- Contenu ---*/ .darkBackground .et_pb_toggle_content, .darkBackground .et_pb_toggle_content p { color: rgb(255 255 255 / 85%) !important; } /*==== BLOG ====*/ /*--- Titre des articles ---*/ .darkBackground .et_pb_post .entry-title, .darkBackground .et_pb_post .entry-title a { color: var(--white) !important; } .darkBackground .et_pb_post .entry-title a:hover, .darkBackground .et_pb_post:hover .entry-title, .darkBackground .et_pb_post:hover .entry-title a { /*--- color: var(--brand) !important; ---*/ } /*--- Extrait ---*/ .darkBackground .et_pb_post .post-content, .darkBackground .et_pb_post .post-content p { color: rgb(255 255 255 / 85%) !important; } /*--- Métadonnées ---*/ .darkBackground .et_pb_post .post-meta, .darkBackground .et_pb_post .post-meta .published { color: rgb(255 255 255 / 65%) !important; } /*--- Bulles des métadonnées ---*/ .darkBackground .et_pb_post .post-meta a { background-color: var(--dark) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } .darkBackground .et_pb_post .post-meta a:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } /*==== PORTFOLIO ====*/ /*--- Image du projet ---*/ .darkBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_portfolio_image, .darkBackground .et_pb_filterable_portfolio .et_portfolio_image { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailBorderColor) !important; } /*--- Survol de l’image ---*/ .darkBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item:hover .et_portfolio_image, .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_portfolio_image { border-color: rgb(255 255 255 / 16%) !important; } /*--- Titre du projet ---*/ .darkBackground .et_pb_portfolio .et_pb_module_header a, .darkBackground .et_pb_filterable_portfolio .et_pb_module_header a { color: var(--white) !important; } /*--- Survol du titre ---*/ .darkBackground .et_pb_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a, .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a { /*--- color: var(--brand) !important; ---*/ } /*--- Masquer les virgules ---*/ .darkBackground .et_pb_portfolio_item .post-meta { color: var(--backgroundColor) !important; } /*--- Bulles des catégories ---*/ .darkBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a, .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } .darkBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a:hover, .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } /*==== FILTRES PORTFOLIO ====*/ /*--- Filtres inactifs ---*/ .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Survol ---*/ .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:hover { background-color: rgb(255 255 255 / 10%) !important; border-color: rgb(255 255 255 / 16%) !important; color: var(--white) !important; } /*--- Filtre actif ---*/ .darkBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--white) !important; } /*==== PAGINATION ====*/ /*--- Liens ---*/ .darkBackground .et_pb_blog_grid .pagination a, .darkBackground .et_pb_portfolio .pagination a, .darkBackground .et_pb_filterable_portfolio .pagination a, .darkBackground .wp-pagenavi a, .darkBackground .wp-pagenavi span { color: var(--white) !important; } .darkBackground .pagination a:hover, .darkBackground .wp-pagenavi a:hover { color: var(--brand) !important; } /*==== SLIDER ====*/ /*--- Conteneur ---*/ .darkBackground .et_pb_slider { background-color: var(--cardColor) !important; } /*--- Points de navigation ---*/ .darkBackground .et_pb_slider .et-pb-controllers a, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_dot, .darkBackground .dica_divi_carousel .swiper-pagination-bullet { background-color: rgb(255 255 255 / 25%) !important; } /*--- Point actif ---*/ .darkBackground .et_pb_slider .et-pb-controllers a.et-pb-active-control, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_dot.active, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_dot_active, .darkBackground .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--brand) !important; } /*==== FLÈCHES ====*/ /*--- Flèches des sliders et carrousels ---*/ .darkBackground .et_pb_fullwidth_portfolio .et-pb-slider-arrows a, .darkBackground .et_pb_slider .et-pb-arrow-prev, .darkBackground .et_pb_slider .et-pb-arrow-next, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_arrow, .darkBackground .dica_divi_carousel .swiper-button-prev, .darkBackground .dica_divi_carousel .swiper-button-next { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Survol ---*/ .darkBackground .et_pb_fullwidth_portfolio .et-pb-slider-arrows a:hover, .darkBackground .et_pb_slider .et-pb-arrow-prev:hover, .darkBackground .et_pb_slider .et-pb-arrow-next:hover, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_arrow:hover, .darkBackground .dica_divi_carousel .swiper-button-prev:hover, .darkBackground .dica_divi_carousel .swiper-button-next:hover { } /*--- Icône interne du Group Carousel ---*/ .darkBackground .et_pb_group_carousel .et_pb_group_carousel_arrow span, .darkBackground .et_pb_group_carousel .et_pb_group_carousel_arrow .et-pb-icon { color: inherit !important; } /*==== LOGIN ====*/ /*--- Champs ---*/ .darkBackground .et_pb_login input { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*==== RECHERCHE ====*/ /*--- Conteneur ---*/ .darkBackground .et_pb_search { background-color: var(--darkLight) !important; border-color: rgb(255 255 255 / 8%) !important; } /*--- Champ ---*/ .darkBackground .et_pb_search input.et_pb_s { background-color: var(--darkLight) !important; color: var(--white) !important; } .darkBackground .et_pb_search input.et_pb_s::placeholder { color: rgb(255 255 255 / 55%) !important; } /*==== PRICING ====*/ /*--- En-tête ---*/ .darkBackground .et_pb_pricing_heading { background-color: var(--dark) !important; } /*--- Séparation ---*/ .darkBackground .et_pb_pricing_content_top { border-bottom-color: rgb(255 255 255 / 8%) !important; } /*--- Texte ---*/ .darkBackground .et_pb_pricing_content, .darkBackground .et_pb_pricing_content li { color: rgb(255 255 255 / 85%) !important; } /*==== TEAM ====*/ /*--- Titres ---*/ .darkBackground .et_pb_team_member h1, .darkBackground .et_pb_team_member h2, .darkBackground .et_pb_team_member h3, .darkBackground .et_pb_team_member h4, .darkBackground .et_pb_team_member h5, .darkBackground .et_pb_team_member h6 { color: var(--white) !important; } /*--- Description ---*/ .darkBackground .et_pb_team_member_description, .darkBackground .et_pb_team_member_description p { color: rgb(255 255 255 / 85%) !important; } /*==== TÉMOIGNAGE ====*/ /*--- Texte ---*/ .darkBackground .et_pb_testimonial_description, .darkBackground .et_pb_testimonial_description p, .darkBackground .et_pb_testimonial_author { color: rgb(255 255 255 / 85%) !important; } /*==== AUDIO ====*/ /*--- Conteneur interne ---*/ .darkBackground .et_pb_audio_module .et_pb_audio_module_content { background-color: var(--thumbnailColor) !important; } /*--- Titres et textes ---*/ .darkBackground .et_pb_audio_module h1, .darkBackground .et_pb_audio_module h2, .darkBackground .et_pb_audio_module h3, .darkBackground .et_pb_audio_module h4, .darkBackground .et_pb_audio_module h5, .darkBackground .et_pb_audio_module h6, .darkBackground .et_pb_audio_module p { color: var(--white) !important; } /*--- Barre de lecture ---*/ .darkBackground .et_pb_audio_module .mejs-time-total, .darkBackground .et_pb_audio_module .mejs-horizontal-volume-total { background-color: rgb(255 255 255 / 20%) !important; } /*==== TIMELINE ====*/ /*--- Connecteur ---*/ .darkBackground .et_pb_timeline_connector { background-color: rgb(255 255 255 / 12%) !important; } /*--- Texte ---*/ .darkBackground .et_pb_timeline_card, .darkBackground .et_pb_timeline_card p { color: rgb(255 255 255 / 85%) !important; } /*==== TABLE DES MATIÈRES ====*/ /*--- Conteneur ---*/ .darkBackground .et_pb_table_of_contents { background-color: var(--cardColor) !important; } /*--- Séparations ---*/ .darkBackground .et_pb_table_of_contents .et_pb_table_of_contents__list--level-2 { border-color: rgb(255 255 255 / 8%) !important; } /*--- Texte des items ---*/ .darkBackground .et_pb_table_of_contents .et_pb_table_of_contents__link, .darkBackground .et_pb_table_of_contents .et_pb_table_of_contents__link-text { color: var(--white) !important; } /*--- Numéros et marqueurs ---*/ .darkBackground .et_pb_table_of_contents .et_pb_table_of_contents__marker, .darkBackground .et_pb_table_of_contents ol li::marker { color: var(--brand) !important; } /*--- Survol ---*/ .darkBackground .et_pb_table_of_contents a:hover, .darkBackground .et_pb_table_of_contents a:hover .et_pb_table_of_contents__link-text { color: var(--brand) !important; } /*==== DIVI GEAR CAROUSEL ====*/ /*--- Titres ---*/ .darkBackground .dica_divi_carousel .dica-item-content .item-title, .darkBackground .dica_divi_carousel .dica-item-content .item-title a { color: var(--white) !important; } /*--- Survol des titres ---*/ .darkBackground .dica_divi_carousel .dica-item-content .item-title a:hover { color: var(--brand) !important; } /*--- Sous-titres et textes ---*/ .darkBackground .dica_divi_carousel .dica-item-content .item-subtitle, .darkBackground .dica_divi_carousel .dica-item-content p { color: rgb(255 255 255 / 85%) !important; } /*--- Items cliquables ---*/ .darkBackground .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item, .darkBackground .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item, .darkBackground .dica_divi_carousel .dica-item.et_clickable, .darkBackground .dica_divi_carousel .dica-item.et-clickable { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailBorderColor) !important; } /*--- Survol des items cliquables ---*/ .darkBackground .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item:hover, .darkBackground .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item:hover, .darkBackground .dica_divi_carousel .dica-item.et_clickable:hover, .darkBackground .dica_divi_carousel .dica-item.et-clickable:hover { border-color: rgb(255 255 255 / 16%) !important; } /*--- Flèches ---*/ body #page-container .darkBackground .dica_divi_carousel .swiper-button-prev, body #page-container .darkBackground .dica_divi_carousel .swiper-button-next { background-color: var(--darkLight) !important; border-color: var(--darkLight) !important; } body #page-container .darkBackground .dica_divi_carousel .swiper-button-prev:before, body #page-container .darkBackground .dica_divi_carousel .swiper-button-next:before, body #page-container .darkBackground .dica_divi_carousel_0 .swiper-button-prev:before, body #page-container .darkBackground .dica_divi_carousel_0 .swiper-button-next:before, body #page-container .darkBackground .dica_divi_carousel_1 .swiper-button-prev:before, body #page-container .darkBackground .dica_divi_carousel_1 .swiper-button-next:before, body #page-container .darkBackground .dica_divi_carousel_2 .swiper-button-prev:before, body #page-container .darkBackground .dica_divi_carousel_2 .swiper-button-next:before { color: var(--brand) !important; } /*--- DOTS -----*/ body #page-container .darkBackground .dica_divi_carousel .swiper-pagination-bullet { background-color: var(--dark) !important; } body #page-container .darkBackground .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--brand) !important; } /*==== FOOTER EN DARK THEME ====*/ /*--- Liens footer dark ---*/ footer.et-l--footer .darkBackground a { color: var(--white) !important; } footer.et-l--footer .darkBackground a:hover { color: var(--brand) !important; text-decoration: none !important; } /*--- Puces footer dark ---*/ footer.et-l--footer .darkBackground li::marker { color: var(--brand) !important; } /*=============================== 17B. BRAND THEME — COMPORTEMENT DES MODULES ================================*/ /* * Déclinaison complète des composants sur fond de marque. * Le jaune d’accent remplace le bleu afin de rester visible sur --brand. */ /*==== TYPOGRAPHIE ====*/ /*--- Texte courant ---*/ .brandBackground, .brandBackground .et_pb_text, .brandBackground .et_pb_text_inner, .brandBackground .et_pb_text_inner p, .brandBackground .et_pb_module p, .brandBackground .et_pb_module li { color: rgb(255 255 255 / 85%) !important; } /*--- Titres ---*/ .brandBackground h1, .brandBackground h2, .brandBackground h3, .brandBackground h4, .brandBackground h5, .brandBackground h6, .brandBackground .et_pb_module h1, .brandBackground .et_pb_module h2, .brandBackground .et_pb_module h3, .brandBackground .et_pb_module h4, .brandBackground .et_pb_module h5, .brandBackground .et_pb_module h6 { color: var(--white) !important; } /*--- Surtitres ---*/ .brandBackground .surTitre, .brandBackground .et_pb_module .surTitre, .brandBackground .et_pb_module h1.surTitre, .brandBackground .et_pb_module h2.surTitre, .brandBackground .et_pb_module h3.surTitre, .brandBackground .et_pb_module h4.surTitre, .brandBackground .et_pb_module h5.surTitre, .brandBackground .et_pb_module h6.surTitre { color: var(--white) !important; } /*--- Hero title ---*/ .brandBackground .heroTitle, .brandBackground .heroTitle h1, .brandBackground .heroTitle h2, .brandBackground .heroTitle h3, .brandBackground .heroTitle h4, .brandBackground .heroTitle h5, .brandBackground .heroTitle h6, .brandBackground .heroTitle p, .brandBackground .heroTitle span, .brandBackground p.heroTitle { color: var(--white) !important; } /*--- Liens textuels ---*/ .brandBackground .et_pb_text a, .brandBackground .et_pb_blurb_description a, .brandBackground .et_pb_toggle_content a, .brandBackground .et_pb_tab a, .brandBackground .et_pb_testimonial_description a, .brandBackground .et_pb_timeline_card a { color: var(--accent) !important; } .brandBackground .et_pb_text a:hover, .brandBackground .et_pb_blurb_description a:hover, .brandBackground .et_pb_toggle_content a:hover, .brandBackground .et_pb_tab a:hover, .brandBackground .et_pb_testimonial_description a:hover, .brandBackground .et_pb_timeline_card a:hover { color: var(--white) !important; } /*--- Séparateurs ---*/ .brandBackground hr { border-top-color: rgb(255 255 255 / 8%) !important; } .brandBackground .et_pb_divider::before { border-top-color: rgb(255 255 255 / 8%) !important; } /*==== PLANS VISUELS ====*/ /*--- Cards passives ---*/ .brandBackground .card, .brandBackground .cardBox, .brandBackground .floatingRow, .brandBackground .et_pb_tabs, .brandBackground .et_pb_login, .brandBackground .et_pb_testimonial, .brandBackground .et_pb_table_of_contents, .brandBackground .et_pb_timeline_card { background-color: var(--cardColor) !important; } /* Une ligne flottante reste blanche sur la transition gris vers la marque. */ .gradientGreyToBrand .floatingRow { background-color: var(--white) !important; } /*--- Thumbnails et contenus de premier plan ---*/ .brandBackground .thumbnail, .brandBackground .cardShadow, .brandBackground .et_pb_blurb.et_clickable, .brandBackground .et_pb_post, .brandBackground .et_pb_audio_module, .brandBackground .et_pb_team_member, .brandBackground .et_pb_pricing_table { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailColor) !important; } /*--- Survol ---*/ .brandBackground .thumbnail:hover, .brandBackground .cardShadow:hover, .brandBackground .et_pb_blurb.et_clickable:hover, .brandBackground .et_pb_post:hover { border-color: var(--thumbnailColor) !important; } /*--- Bordure générique ---*/ .brandBackground .borderGrey { border-color: rgb(255 255 255 / 8%) !important; } /*==== BOUTONS ====*/ /*--- Bouton principal ---*/ .brandBackground .et_pb_button { background-color: var(--white) !important; border-color: var(--white) !important; color: var(--brandDark) !important; } .brandBackground .et_pb_button::after { color: var(--accentLight) !important; } .brandBackground .et_pb_button:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } .brandBackground .et_pb_button:hover::after { color: var(--white) !important; } /*--- Bouton secondaire ---*/ .brandBackground .et_pb_button_two { background-color: var(--brandDark) !important; border-color: var(--brandDark) !important; color: var(--white) !important; } .brandBackground .et_pb_button_two::after { color: var(--accentLight) !important; } .brandBackground .et_pb_button_two:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /*--- Bouton lien ---*/ .brandBackground .buttonLink { color: var(--white) !important; background-color: transparent !important; } .brandBackground .buttonLink:hover { color: var(--white) !important; background-color: transparent !important; } .brandBackground .buttonLink:before{ color: var(--accent) !important; } .brandBackground .buttonLink:hover:before{ color: var(--accent) !important; } /*==== FORMULAIRES ====*/ /*--- Champs ---*/ .brandBackground .et_pb_contact_form input, .brandBackground .et_pb_contact_form textarea, .brandBackground .et_pb_contact_form select { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Focus ---*/ .brandBackground .et_pb_contact_form input:focus, .brandBackground .et_pb_contact_form textarea:focus, .brandBackground .et_pb_contact_form select:focus { background-color: var(--brandDark) !important; border-color: var(--accent) !important; color: var(--white) !important; } /*--- Placeholder ---*/ .brandBackground .et_pb_contact_form input::placeholder, .brandBackground .et_pb_contact_form textarea::placeholder { color: rgb(255 255 255 / 55%) !important; } /*--- Captcha ---*/ .brandBackground .et_pb_contact_captcha_question { color: var(--white) !important; } .brandBackground .et_pb_contact_captcha { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*==== FULLWIDTH HEADER ====*/ /*--- Conteneur ---*/ .brandBackground .et_pb_fullwidth_header { background-color: var(--cardColor) !important; } /*--- Sous-titre principal ---*/ .brandBackground .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { color: var(--white) !important; } /*--- Texte ---*/ .brandBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper, .brandBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper p { color: rgb(255 255 255 / 85%) !important; } /*==== FULLWIDTH HEADER — DARK THEME ====*/ /* Classe sur la section ou directement sur le module */ .brandBackground .et_pb_fullwidth_header, .et_pb_fullwidth_header.brandBackground { background-color: var(--cardColor) !important; color: var(--white) !important; } /* Surtitre */ .brandBackground .et_pb_fullwidth_header .et_pb_module_header, .et_pb_fullwidth_header.brandBackground .et_pb_module_header { color: var(--accent) !important; } /* Titre principal */ .brandBackground .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead, .et_pb_fullwidth_header.brandBackground .et_pb_fullwidth_header_subhead { color: var(--white) !important; } /* Texte courant */ .brandBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper, .brandBackground .et_pb_fullwidth_header .et_pb_header_content_wrapper p, .et_pb_fullwidth_header.brandBackground .et_pb_header_content_wrapper, .et_pb_fullwidth_header.brandBackground .et_pb_header_content_wrapper p { color: rgb(255 255 255 / 85%) !important; } /*==== BLURB ====*/ /*--- Titre ---*/ .brandBackground .et_pb_blurb .et_pb_module_header, .brandBackground .et_pb_blurb .et_pb_module_header a { color: var(--white) !important; } .brandBackground .et_pb_blurb .et_pb_module_header a:hover, .brandBackground .et_pb_blurb.et_clickable:hover .et_pb_module_header, .brandBackground .et_pb_blurb.et_clickable:hover .et_pb_module_header a { /*--- color: var(--accent) !important; ---*/ } /*--- Description ---*/ .brandBackground .et_pb_blurb .et_pb_blurb_description, .brandBackground .et_pb_blurb .et_pb_blurb_description p { color: rgb(255 255 255 / 85%) !important; } /*--- BOUTON ---*/ .brandBackground .et_pb_blurb .et_pb_button, .et_pb_blurb.brandBackground .et_pb_button { color: var(--brandDark) !important; } /*==== CTA / PROMO ====*/ .brandBackground .et_pb_promo { background-color: var(--brandLight) !important; border-color: var(--brandLight) !important; box-shadow: none; } .brandBackground .et_pb_promo h1, .brandBackground .et_pb_promo h2, .brandBackground .et_pb_promo h3, .brandBackground .et_pb_promo p { color: var(--white) !important; } .brandBackground .et_pb_promo .et_pb_button { background-color: var(--white) !important; border-color: var(--white) !important; color: var(--brandDark) !important; } .brandBackground .et_pb_promo .et_pb_button::after { color: var(--accent) !important; } .brandBackground .et_pb_promo .et_pb_button:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } .brandBackground .et_pb_promo .et_pb_button:hover::after { color: var(--white) !important; } /*==== TABS ====*/ /*--- Navigation ---*/ .brandBackground .et_pb_tabs_controls { background-color: var(--brandLight) !important; } /*--- Onglets inactifs ---*/ .brandBackground .et_pb_tabs_controls li a { color: rgb(255 255 255 / 75%) !important; } /*--- Onglet actif ---*/ .brandBackground .et_pb_tabs_controls li.et_pb_tab_active a, .brandBackground .et_pb_tabs_controls li.et_pb_tab_active a:hover { background-color: var(--brandDark) !important; color: var(--accent) !important; } /*--- Survol ---*/ .brandBackground .et_pb_tabs_controls .et_pb_tab_nav_item a:hover { background-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Contenu ---*/ .brandBackground .et_pb_tab { background-color: var(--cardColor) !important; color: rgb(255 255 255 / 85%) !important; } /*==== TOGGLE / ACCORDÉON ====*/ /*--- Séparation ---*/ .brandBackground .et_pb_toggle { border-bottom-color: rgb(255 255 255 / 8%) !important; } /*--- Titre ---*/ .brandBackground .et_pb_toggle_title { color: var(--white) !important; } /*--- Contenu ---*/ .brandBackground .et_pb_toggle_content, .brandBackground .et_pb_toggle_content p { color: rgb(255 255 255 / 85%) !important; } /*==== BLOG ====*/ /*--- Titre des articles ---*/ .brandBackground .et_pb_post .entry-title, .brandBackground .et_pb_post .entry-title a { color: var(--white) !important; } .brandBackground .et_pb_post .entry-title a:hover, .brandBackground .et_pb_post:hover .entry-title, .brandBackground .et_pb_post:hover .entry-title a { /*--- color: var(--accent) !important; ---*/ } /*--- Extrait ---*/ .brandBackground .et_pb_post .post-content, .brandBackground .et_pb_post .post-content p { color: rgb(255 255 255 / 85%) !important; } /*--- Métadonnées ---*/ .brandBackground .et_pb_post .post-meta, .brandBackground .et_pb_post .post-meta .published { color: rgb(255 255 255 / 65%) !important; } /*--- Bulles des métadonnées ---*/ .brandBackground .et_pb_post .post-meta a { background-color: var(--brandDark) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } .brandBackground .et_pb_post .post-meta a:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /*==== PORTFOLIO ====*/ /*--- Image du projet ---*/ .brandBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_portfolio_image, .brandBackground .et_pb_filterable_portfolio .et_portfolio_image { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailBorderColor) !important; } /*--- Survol de l’image ---*/ .brandBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item:hover .et_portfolio_image, .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_portfolio_image { border-color: rgb(255 255 255 / 16%) !important; } /*--- Titre du projet ---*/ .brandBackground .et_pb_portfolio .et_pb_module_header a, .brandBackground .et_pb_filterable_portfolio .et_pb_module_header a { color: var(--white) !important; } /*--- Survol du titre ---*/ .brandBackground .et_pb_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a, .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_pb_module_header a { /*--- color: var(--accent) !important; ---*/ } /*--- Masquer les virgules ---*/ .brandBackground .et_pb_portfolio_item .post-meta { color: var(--backgroundColor) !important; } /*--- Bulles des catégories ---*/ .brandBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a, .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } .brandBackground .et_pb_portfolio:not(.et_pb_fullwidth_portfolio) .et_pb_portfolio_item .post-meta a:hover, .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta a:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /*==== FILTRES PORTFOLIO ====*/ /*--- Filtres inactifs ---*/ .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Survol ---*/ .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:hover { background-color: rgb(255 255 255 / 10%) !important; border-color: rgb(255 255 255 / 16%) !important; color: var(--white) !important; } /*--- Filtre actif ---*/ .brandBackground .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /*==== PAGINATION ====*/ /*--- Liens ---*/ .brandBackground .et_pb_blog_grid .pagination a, .brandBackground .et_pb_portfolio .pagination a, .brandBackground .et_pb_filterable_portfolio .pagination a, .brandBackground .wp-pagenavi a, .brandBackground .wp-pagenavi span { color: var(--white) !important; } .brandBackground .pagination a:hover, .brandBackground .wp-pagenavi a:hover { color: var(--accent) !important; } /*==== SLIDER ====*/ /*--- Conteneur ---*/ .brandBackground .et_pb_slider { background-color: var(--cardColor) !important; } /*--- Points de navigation ---*/ .brandBackground .et_pb_slider .et-pb-controllers a, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_dot, .brandBackground .dica_divi_carousel .swiper-pagination-bullet { background-color: rgb(255 255 255 / 25%) !important; } /*--- Point actif ---*/ .brandBackground .et_pb_slider .et-pb-controllers a.et-pb-active-control, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_dot.active, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_dot_active, .brandBackground .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--accent) !important; } /*==== FLÈCHES ====*/ /*--- Flèches des sliders et carrousels ---*/ .brandBackground .et_pb_fullwidth_portfolio .et-pb-slider-arrows a, .brandBackground .et_pb_slider .et-pb-arrow-prev, .brandBackground .et_pb_slider .et-pb-arrow-next, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_arrow, .brandBackground .dica_divi_carousel .swiper-button-prev, .brandBackground .dica_divi_carousel .swiper-button-next { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*--- Survol ---*/ .brandBackground .et_pb_fullwidth_portfolio .et-pb-slider-arrows a:hover, .brandBackground .et_pb_slider .et-pb-arrow-prev:hover, .brandBackground .et_pb_slider .et-pb-arrow-next:hover, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_arrow:hover, .brandBackground .dica_divi_carousel .swiper-button-prev:hover, .brandBackground .dica_divi_carousel .swiper-button-next:hover { } /*--- Icône interne du Group Carousel ---*/ .brandBackground .et_pb_group_carousel .et_pb_group_carousel_arrow span, .brandBackground .et_pb_group_carousel .et_pb_group_carousel_arrow .et-pb-icon { color: inherit !important; } /*==== LOGIN ====*/ /*--- Champs ---*/ .brandBackground .et_pb_login input { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; color: var(--white) !important; } /*==== RECHERCHE ====*/ /*--- Conteneur ---*/ .brandBackground .et_pb_search { background-color: var(--brandLight) !important; border-color: rgb(255 255 255 / 8%) !important; } /*--- Champ ---*/ .brandBackground .et_pb_search input.et_pb_s { background-color: var(--brandLight) !important; color: var(--white) !important; } .brandBackground .et_pb_search input.et_pb_s::placeholder { color: rgb(255 255 255 / 55%) !important; } /*==== PRICING ====*/ /*--- En-tête ---*/ .brandBackground .et_pb_pricing_heading { background-color: var(--brandDark) !important; } /*--- Séparation ---*/ .brandBackground .et_pb_pricing_content_top { border-bottom-color: rgb(255 255 255 / 8%) !important; } /*--- Texte ---*/ .brandBackground .et_pb_pricing_content, .brandBackground .et_pb_pricing_content li { color: rgb(255 255 255 / 85%) !important; } /*==== TEAM ====*/ /*--- Titres ---*/ .brandBackground .et_pb_team_member h1, .brandBackground .et_pb_team_member h2, .brandBackground .et_pb_team_member h3, .brandBackground .et_pb_team_member h4, .brandBackground .et_pb_team_member h5, .brandBackground .et_pb_team_member h6 { color: var(--white) !important; } /*--- Description ---*/ .brandBackground .et_pb_team_member_description, .brandBackground .et_pb_team_member_description p { color: rgb(255 255 255 / 85%) !important; } /*==== TÉMOIGNAGE ====*/ /*--- Texte ---*/ .brandBackground .et_pb_testimonial_description, .brandBackground .et_pb_testimonial_description p, .brandBackground .et_pb_testimonial_author { color: rgb(255 255 255 / 85%) !important; } /*==== AUDIO ====*/ /*--- Conteneur interne ---*/ .brandBackground .et_pb_audio_module .et_pb_audio_module_content { background-color: var(--thumbnailColor) !important; } /*--- Titres et textes ---*/ .brandBackground .et_pb_audio_module h1, .brandBackground .et_pb_audio_module h2, .brandBackground .et_pb_audio_module h3, .brandBackground .et_pb_audio_module h4, .brandBackground .et_pb_audio_module h5, .brandBackground .et_pb_audio_module h6, .brandBackground .et_pb_audio_module p { color: var(--white) !important; } /*--- Barre de lecture ---*/ .brandBackground .et_pb_audio_module .mejs-time-total, .brandBackground .et_pb_audio_module .mejs-horizontal-volume-total { background-color: rgb(255 255 255 / 20%) !important; } /*==== TIMELINE ====*/ /*--- Connecteur ---*/ .brandBackground .et_pb_timeline_connector { background-color: rgb(255 255 255 / 12%) !important; } /*--- Texte ---*/ .brandBackground .et_pb_timeline_card, .brandBackground .et_pb_timeline_card p { color: rgb(255 255 255 / 85%) !important; } /*==== TABLE DES MATIÈRES ====*/ /*--- Conteneur ---*/ .brandBackground .et_pb_table_of_contents { background-color: var(--cardColor) !important; } /*--- Séparations ---*/ .brandBackground .et_pb_table_of_contents .et_pb_table_of_contents__list--level-2 { border-color: rgb(255 255 255 / 8%) !important; } /*--- Texte des items ---*/ .brandBackground .et_pb_table_of_contents .et_pb_table_of_contents__link, .brandBackground .et_pb_table_of_contents .et_pb_table_of_contents__link-text { color: var(--white) !important; } /*--- Numéros et marqueurs ---*/ .brandBackground .et_pb_table_of_contents .et_pb_table_of_contents__marker, .brandBackground .et_pb_table_of_contents ol li::marker { color: var(--accent) !important; } /*--- Survol ---*/ .brandBackground .et_pb_table_of_contents a:hover, .brandBackground .et_pb_table_of_contents a:hover .et_pb_table_of_contents__link-text { color: var(--accent) !important; } /*==== DIVI GEAR CAROUSEL ====*/ /*--- Titres ---*/ .brandBackground .dica_divi_carousel .dica-item-content .item-title, .brandBackground .dica_divi_carousel .dica-item-content .item-title a { color: var(--white) !important; } /*--- Survol des titres ---*/ .brandBackground .dica_divi_carousel .dica-item-content .item-title a:hover { color: var(--accent) !important; } /*--- Sous-titres et textes ---*/ .brandBackground .dica_divi_carousel .dica-item-content .item-subtitle, .brandBackground .dica_divi_carousel .dica-item-content p { color: rgb(255 255 255 / 85%) !important; } /*--- Items cliquables ---*/ .brandBackground .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item, .brandBackground .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item, .brandBackground .dica_divi_carousel .dica-item.et_clickable, .brandBackground .dica_divi_carousel .dica-item.et-clickable { background-color: var(--thumbnailColor) !important; border-color: var(--thumbnailBorderColor) !important; } /*--- Survol des items cliquables ---*/ .brandBackground .dica_divi_carousel .dica_divi_carouselitem.et_clickable .dica-item:hover, .brandBackground .dica_divi_carousel .dica_divi_carouselitem.et-clickable .dica-item:hover, .brandBackground .dica_divi_carousel .dica-item.et_clickable:hover, .brandBackground .dica_divi_carousel .dica-item.et-clickable:hover { border-color: rgb(255 255 255 / 16%) !important; } /*--- Flèches ---*/ body #page-container .brandBackground .dica_divi_carousel .swiper-button-prev, body #page-container .brandBackground .dica_divi_carousel .swiper-button-next { background-color: var(--brandLight) !important; border-color: var(--brandLight) !important; } body #page-container .brandBackground .dica_divi_carousel .swiper-button-prev:before, body #page-container .brandBackground .dica_divi_carousel .swiper-button-next:before, body #page-container .brandBackground .dica_divi_carousel_0 .swiper-button-prev:before, body #page-container .brandBackground .dica_divi_carousel_0 .swiper-button-next:before, body #page-container .brandBackground .dica_divi_carousel_1 .swiper-button-prev:before, body #page-container .brandBackground .dica_divi_carousel_1 .swiper-button-next:before, body #page-container .brandBackground .dica_divi_carousel_2 .swiper-button-prev:before, body #page-container .brandBackground .dica_divi_carousel_2 .swiper-button-next:before { color: var(--accent) !important; } /*--- DOTS -----*/ body #page-container .brandBackground .dica_divi_carousel .swiper-pagination-bullet { background-color: var(--brandDark) !important; } body #page-container .brandBackground .dica_divi_carousel .swiper-pagination-bullet-active { background-color: var(--accent) !important; } /*==== FOOTER EN DARK THEME ====*/ /*--- Liens footer dark ---*/ footer.et-l--footer .brandBackground a { color: var(--white) !important; } footer.et-l--footer .brandBackground a:hover { color: var(--accent) !important; text-decoration: none !important; } /*--- Puces footer dark ---*/ footer.et-l--footer .brandBackground li::marker { color: var(--accent) !important; } /* ========================================================= 2. SOCLE DIVI COMMUN — FIN ========================================================= */ /* ========================================================= 3. SPÉCIFIQUE PROJET — DÉBUT Ne pas remplacer lors d’une synchronisation du socle DIVI ========================================================= */ /*=============================== 18. SPÉCIFIQUE PROJET ================================*/ /* LOGOFOLIO ------------------------------------------- */ .logofolio-grille > .et_pb_column { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 28px !important; } /* Desktop : 4 colonnes */ .logofolio-grille > .et_pb_column > .et_pb_image { flex: 0 0 calc((100% - 84px) / 4) !important; width: calc((100% - 84px) / 4) !important; max-width: calc((100% - 84px) / 4) !important; margin: 0 !important; box-sizing: border-box !important; padding: 2em !important; border: 1px solid #eeeeee; border-radius: 6px; overflow: hidden; border-radius: 5px; } /* Tablette : 3 colonnes */ @media (max-width: 980px) { .logofolio-grille > .et_pb_column > .et_pb_image { flex-basis: calc((100% - 56px) / 3) !important; width: calc((100% - 56px) / 3) !important; max-width: calc((100% - 56px) / 3) !important; } } /* Mobile : 2 colonnes */ @media (max-width: 767px) { .logofolio-grille > .et_pb_column > .et_pb_image { flex-basis: calc((100% - 28px) / 2) !important; width: calc((100% - 28px) / 2) !important; max-width: calc((100% - 28px) / 2) !important; } } /* Images */ .logofolio-grille .et_pb_image_wrap, .logofolio-grille img { display: block !important; width: 100% !important; max-width: 100% !important; } /* ========================================================= EFFETS & COMPORTEMENTS AVANCÉS ======================================================== */ /* ========================================================= 3. SPÉCIFIQUE PROJET — FIN ========================================================= */