/* Theme Name: Mickael RENAUX Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Thème principal Author: Elegant Themes Author URI: https://www.elegantthemes.com Template: Divi Version: 1.0.0 */ /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ ZONE PROJET ║ ║ Modifiable à chaque client (haut du fichier) ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* ========================================================= FONTS DU PROJET ======================================================== */ @font-face { font-family: "Lexend"; src: url("fonts/Lexend-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("fonts/Lexend-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("fonts/Lexend-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================= VARIABLES GLOBALES (:root) ======================================================== */ :root { /* --- Couleurs (palette monochromatique 7 nuances) --- */ --backgroundDark: #0B224C; --secondaryDark: #0F2D66; --primaryDark: #143D8A; --brandColor: #106AFF; --secondaryLight: #B8C8E5; --backgroundLight: #F3F7FE; --white: #FFFFFF; /* --- Typographie --- */ --fontMain: "Lexend", sans-serif; --fontHeading: "Lexend", sans-serif; --weightLight: 300; --weightBody: 300; --weightMedium: 500; --weightTitle: 700; --weightStrong: 700; /* --- Structure --- */ --borderRadius: 20px; --ombrePortee: 2px 4px 12px #00000014; --ombrePorteeForte: 0 16px 48px rgba(0, 0, 0, 0.16); --transition: all 0.3s ease-in-out; --transitionFast: all 0.15s ease-in-out; /* SURTITRE — changer ces 4 valeurs selon le projet TEXTE SIMPLE : transparent | 0 | 0 | "" PILL : color-mix(in srgb, var(--brandColor) 10%, transparent) | 0.3em 0.8em | 999px | "" BULLET : transparent | 0 | 0 | "\2022 " DASH : transparent | 0 | 0 | "\2014 " */ --surTitreBg: transparent; --surTitreRadius: var(--borderRadius); --surTitreIcone: "\2014"; /* --- Largeur max du contenu --- */ --maxWidth: 1300px; /* --- z-index --- */ --zBase: 1; --zDropdown: 10; --zHeader: 100; --zModal: 1000; --zToast: 9999; /* --- Tailles (échelle d'espacement) --- */ --sizeNA: 0; --sizeXS: 0.25rem; --sizeS: 0.5rem; --sizeM: 1rem; --sizeL: 2rem; --sizeXL: 4rem; --size2XL: 6rem; /* --- Variables Divi natives (remapping et alignement) --- */ --gcid-primary-color: var(--brandColor); --gcid-secondary-color: var(--brandColor); --gcid-heading-color: var(--primaryDark); --gcid-body-color: var(--primaryDark); --gcid-link-color: var(--brandColor); --module-gutter-grid: 30px; --horizontal-gap: var(--module-gutter-grid); --vertical-gap: var(--sizeM); --content-width: 90%; --content-max-width: var(--maxWidth); --section-gutter: 35px; } /* --- Sizes mobile (override) --- */ @media (max-width: 767px) { :root { --sizeM: 1rem; --sizeL: 2rem; --sizeXL: 2.5rem; --size2XL: 4rem; } } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ ZONE TEMPLATE ║ ║ Logique du template (intouchable) ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* ========================================================= RESET & FONDATIONS ======================================================== */ /* Sélection de texte : surbrillance brandColor + texte blanc */ ::selection { background-color: var(--brandColor); color: var(--white); } ::-moz-selection { background-color: var(--brandColor); color: var(--white); } /* Surbrillance au tap sur mobile : version transparente du brandColor */ * { -webkit-tap-highlight-color: color-mix(in srgb, var(--brandColor) 15%, transparent) !important; } /* Fond global de la page */ body { background-color: var(--backgroundLight) !important; /* Désactive le zoom double-tap sur mobile (pinch-zoom reste actif) */ touch-action: manipulation; } /* Évite le scroll horizontal accidentel */ html, body { overflow-x: hidden; } /* ========================================================= ESPACEMENTS — Logique centralisée ---------- Tous les paddings de structure et marges entre éléments sont définis ici. Les modules ne contiennent QUE leur spécificité (couleur, forme), JAMAIS d'espacement. ======================================================== */ /* --- 1. Sections : padding vertical entre blocs majeurs (sauf .pad-custom qui laisse la main à Divi) --- */ .et_pb_section:not(.pad-custom) { padding-top: var(--size2XL) !important; padding-bottom: var(--size2XL) !important; } /* Footer : padding réduit (override) */ .footer-columns.et_pb_section { padding-top: var(--sizeXL) !important; padding-bottom: var(--sizeM) !important; } @media (max-width: 767px) { .footer-columns.et_pb_section { padding-top: var(--size2XL) !important; padding-bottom: var(--sizeS) !important; } } /* --- 2. Cards : padding intérieur uniforme (sizeL) --- */ .et_pb_blurb_position_top .et_pb_blurb_container, .et_pb_blurb_position_left .et_pb_blurb_content, .et_pb_blurb_position_right .et_pb_blurb_content, .et_pb_testimonial, .et_pb_team_member, .et_pb_promo, .cta-block, .et_pb_login, .et_pb_newsletter, .et_pb_subscribe, .et_pb_pricing_table .et_pb_pricing_heading, .et_pb_tabs .et_pb_tab { padding: var(--sizeL) !important; } /* --- 3. Image en haut d'un blurb (icône) : padding latéral + top --- */ .et_pb_blurb_position_top .et_pb_main_blurb_image:not(:has(.et_pb_only_image_mode_wrap)) { padding: var(--sizeL) var(--sizeL) 0 var(--sizeL) !important; } /* --- 4. Blog cards : padding sur les zones de texte --- */ .et_pb_post .entry-title, .et_pb_post .post-meta, .et_pb_post .post-content { padding-left: var(--sizeL) !important; padding-right: var(--sizeL) !important; } .et_pb_post .entry-title { padding-top: var(--sizeL) !important; } .et_pb_post .post-content { padding-bottom: var(--sizeL) !important; } /* ========================================================= LAYOUT ======================================================== */ /* Gutter colonnes */ .et_pb_row { --row-gutter-horizontal: var(--module-gutter-grid); } /* Row avec colonnes mixtes (image + texte) : gutter plus large pour respiration */ .row-gap { --row-gutter-horizontal: 5%; } /* Responsive flex rows : stack vertical en mobile */ @media (max-width: 767px) { .et_flex_row { flex-direction: column !important; } .et_flex_column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* Containers Divi (header, top-header, footer) : largeur max alignée sur le système */ #top-header .container, header .container, footer .container { max-width: var(--maxWidth) !important; width: 90%; } /* ========================================================= UTILITIES (classes du thème) ======================================================== */ /* Pleine largeur du container : utilisé pour casser le maxWidth sur certains modules */ .fullWidth { width: 100% !important; max-width: 99% !important; /* 99% évite l'apparition d'un scroll horizontal sur certains navigateurs */ } @media (max-width: 768px) { .fullWidth { width: 100% !important; max-width: 100% !important; } } /* Forcer les angles droits sur les images (override --borderRadius global) */ .sans-border-radius img { border-radius: 0 !important; } /* Centrer une colonne dans une row asymétrique (margin auto) */ .col-center { margin: auto !important; } /* center-all — à mettre sur une row : centre tout le contenu (texte, modules, images, boutons, icônes, listes). */ .center-all, .center-all .et_pb_module, .center-all .et_pb_text_inner, .center-all .et_pb_blurb_content, .center-all .et_pb_blurb_container, .center-all .et_pb_button_module_wrapper, .center-all .et_pb_blog_grid, .center-all .et_pb_icon_list_items { text-align: center !important; } /* Modules avec largeur définie : centrés horizontalement dans leur conteneur */ .center-all .et_pb_image, .center-all .et_pb_video, .center-all .et_pb_icon { margin-left: auto !important; margin-right: auto !important; } /* Image dans un module Image : centrée dans son wrapper */ .center-all .et_pb_image .et_pb_image_wrap, .center-all .et_pb_image img { margin-left: auto !important; margin-right: auto !important; display: block !important; } /* Blurb position_top : icône/image centrée */ .center-all .et_pb_blurb_position_top .et_pb_main_blurb_image { text-align: center !important; } /* Icon list : centrée (par défaut alignée à gauche) */ .center-all .et_pb_icon_list .et_pb_icon_list_item { justify-content: center !important; } /* btn-group dans un conteneur center-all : centre les boutons (flex ignore text-align) */ .center-all .btn-group { justify-content: center !important; } /* col-equal — sur une row : harmonise la hauteur de tous les modules card */ .col-equal.et_flex_row { align-items: stretch !important; } .col-equal .et_pb_column { display: flex !important; flex-direction: column !important; } .col-equal .et_pb_blurb, .col-equal .et_pb_testimonial, .col-equal .et_pb_team_member, .col-equal .et_pb_promo, .col-equal .et_pb_post, .col-equal .et_pb_tabs, .col-equal .et_pb_toggle { flex: 1 !important; display: flex !important; flex-direction: column !important; height: 100% !important; } .col-equal .et_pb_blurb .et_pb_blurb_content { flex: 1 !important; display: flex !important; flex-direction: column !important; } .col-equal .et_pb_blurb .et_pb_blurb_container { flex: 1 !important; } /* row-66 — row centrée sur 2/3 de la largeur (desktop uniquement) */ @media (min-width: 981px) { .row-66 { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } } /* btn-group — à mettre sur un module wp:divi/group contenant uniquement des boutons */ .btn-group { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: var(--sizeS) !important; align-items: center !important; } @media (max-width: 767px) { .btn-group { gap: var(--sizeM) !important; } } .btn-group .et_pb_button_module_wrapper { margin: 0 !important; } /* Ombre portée — utilisé sur les cards élégantes */ .shadow, .et_clickable { box-shadow: var(--ombrePortee) !important; } /* Header transparent — active via la classe `header-transparent` sur le body (à ajouter via functions.php du child theme). Compatible site entier OU pages spécifiques. */ body.header-transparent #main-header { background: transparent !important; box-shadow: none !important; position: absolute !important; width: 100% !important; z-index: 9999 !important; } body.header-transparent #main-header nav ul li a, body.header-transparent .et_mobile_menu li a, body.header-transparent .nav li ul li a { color: var(--white) !important; } body.header-transparent #main-header nav ul li:not(.cta-menu-focus) a:hover, body.header-transparent .nav li:not(.cta-menu-focus) ul li a:hover { color: var(--brandColor) !important; } body.header-transparent .mobile_menu_bar:before { color: var(--white) !important; } body.header-transparent .nav li ul, body.header-transparent .et_mobile_menu { background-color: var(--backgroundDark) !important; border-top-color: var(--brandColor) !important; } /* Padding-top sur la 1ère section pour compenser le header en absolute */ body.header-transparent #main-content > .et_pb_section:first-of-type { padding-top: 150px !important; } @media (max-width: 767px) { body.header-transparent #main-content > .et_pb_section:first-of-type { padding-top: 110px !important; } } /* Désactivation ponctuelle : classe à poser sur une row ou une colonne pour annuler l'animation (utile pour widgets, scripts, layouts particuliers). */ .no-anim, .no-anim .et_pb_column, .et_pb_column.no-anim { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } /* Classe .cta-block : carte arrondie pour CTA encadré. Structure pure (radius + padding via Espacements). La couleur du fond et des textes est gérée par les variantes de surface (.bg-dark, .bg-gray) ou la section parente. */ .cta-block { border-radius: var(--borderRadius) !important; } /* ========================================================= TYPOGRAPHIE ======================================================== */ body, .et_pb_module .et_pb_text_inner, .et_pb_module .et_pb_text_inner p, .et_pb_module .et_pb_text_inner span { font-family: var(--fontMain); font-weight: var(--weightBody) !important; line-height: 1.6em; color: var(--primaryDark); } /* dans les modules texte : graisse forte du design system */ .et_pb_module .et_pb_text_inner strong { font-weight: var(--weightStrong); } /* dans les modules texte : 80% de la taille */ .et_pb_module .et_pb_text_inner small { font-size: 0.8em; } /* Override : restaure 10px de padding-bottom sur un

(battre la règle Divi native qui met 0 sur le dernier

). Classe à mettre sur le MODULE Divi (onglet Avancé → Classe CSS), s'applique à tous les

du module. */ .pad-bot p { padding-bottom: 10px !important; } /* Hn : famille, graisse, line-height + couleur */ .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6, .et_pb_module h1 span, .et_pb_module h2 span, .et_pb_module h3 span, .et_pb_module h4 span, .et_pb_module h5 span, .et_pb_module h6 span { font-family: var(--fontHeading); font-weight: var(--weightTitle); line-height: 1.3em; color: var(--primaryDark) !important; } /* Tailles des titres — desktop */ .et_pb_module h1 { font-size: 3rem; } .et_pb_module h2 { font-size: 2.25rem; } .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-size: 1.333rem; } /* Tailles des titres — mobile */ @media (max-width: 768px) { .et_pb_module h1 { font-size: 2rem; } .et_pb_module h2 { font-size: 1.625rem; } } /* Boutons légèrement réduits en mobile pour ne pas casser la mise en page */ @media (max-width: 767px) { a.et_pb_button { font-size: 0.9rem !important; } } /* Citation : bordure gauche en brandColor */ blockquote { border-color: var(--brandColor); } /* Séparateur HR — ligne fine en secondaryLight */ hr { border: none; border-top: 1px solid var(--secondaryLight); margin: var(--sizeL) 0; } /* Module Divider — même couleur que hr */ .et_pb_divider:before { border-top-color: var(--secondaryLight) !important; } /* Liens dans le corps de texte : couleur brandColor sans soulignement */ .et_pb_module p a { position: relative; text-decoration: none; color: var(--brandColor); } .et_pb_module .post-meta a::after { height: 0; } /* --- Surtitre --- Petit texte uppercase brandColor avec tiret/bullet/etc. en préfixe. Posé sur un

(corps) ou un

(en mode SEO Hero). */ .surTitre, h1.surTitre, .et_pb_text_inner .surTitre, .et_pb_text_inner p.surTitre { font-family: var(--fontMain) !important; font-size: 0.75rem !important; font-weight: var(--weightStrong) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.4em !important; display: inline-block !important; color: var(--brandColor) !important; background-color: var(--surTitreBg) !important; border-radius: var(--surTitreRadius) !important; } h1.surTitre { padding-bottom: 0em !important; } /* Préfixe du surtitre (tiret long, bullet, etc. selon --surTitreIcone) */ .surTitre::before, h1.surTitre::before { content: var(--surTitreIcone); color: var(--brandColor); margin-right: 0.35em; } /* --- Titre hero (faux H1) --- Gros titre du hero, en

pour laisser le H1 SEO au surtitre. */ .heroTitle p, p.heroTitle { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; font-size: 2.75rem; line-height: 1.3em !important; padding-bottom: 0.5em !important; color: var(--primaryDark); } @media (max-width: 767px) { .heroTitle p, p.heroTitle { font-size: 1.8rem; } } /* Catégories d'articles (post-meta) : badges arrondis brandColor */ .post-meta a, .dsm-posted-category a { background-color: var(--brandColor); display: inline-block; padding: 7px 12px; border-radius: 30px; /* pill */ color: var(--white) !important; text-decoration: none; font-size: 0.8125rem; /* 13px */ margin: var(--sizeXS) 0; line-height: 1; } /* Supprime le séparateur Divi natif entre meta-links */ .et_pb_post .post-meta a + a::before { content: '' !important; } .dsm-meta-seperator { display: none; } /* Masque le texte de la post-meta autre que les liens catégorie */ .et_pb_post .post-meta { color: transparent !important; } .et_pb_portfolio_item .post-meta { color: transparent !important; } /* ========================================================= HEADER & MENU ======================================================== */ /* Liens du menu principal */ nav ul li a { font-weight: var(--weightMedium); opacity: 1 !important; color: var(--primaryDark) !important; font-size: 17px !important; } nav ul li { margin: 0 0.6rem !important; } nav ul li a:hover { color: var(--brandColor) !important; } @media only screen and (min-width: 981px) { .cta-menu-focus a { color: var(--white) !important; border-radius: var(--borderRadius); font-size: 1rem !important; font-weight: var(--weightMedium); background-color: var(--brandColor); border-color: var(--brandColor); padding: 0.7em 1em !important; } .cta-menu-focus a:hover { color: var(--white) !important; filter: brightness(1.12) !important; } } /* Header : suppression de l'ombre Divi par défaut */ #main-header { box-shadow: none; } /* Menu mobile : couleur des liens + bordure haute brandColor */ .et_mobile_menu li a { color: var(--primaryDark) !important; } .et_mobile_menu { border-top: 3px solid var(--brandColor) !important; } /* Icône burger mobile en brandColor */ .mobile_menu_bar:before { color: var(--brandColor) !important; } /* Sous-menus dropdown : bordure haute en brandColor */ #main-header .nav ul .menu-item-has-children .sub-menu { border-top-color: var(--brandColor) !important; } .nav li ul { border-top-color: var(--brandColor) !important; } .nav li ul li a:hover { background-color: transparent !important; } /* Style du header transparent par défaut Divi (header-style-left/split) */ @media only screen and (min-width: 981px) { .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation { padding: 30px 0 0 0 !important; } } /* Mobile submenu toggle — chevron qui change selon l'état ouvert/fermé */ #main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; } #main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; font-size: 16px; content: '\4c'; /* chevron fermé (+) */ top: 13px; right: 10px; } /* Chevron ouvert (−) quand .visible */ #main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; } /* Affichage conditionnel du sous-menu mobile */ #et_mobile_nav_menu .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; } #et_mobile_nav_menu .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; } /* --- Menu secondaire (top-header) --- Petite barre fine au-dessus du header principal, fond dark, items résumés. Masqué en mobile. */ #top-header { background-color: var(--backgroundDark) !important; border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent) !important; padding: 0 !important; } #top-header .container { padding: 0 !important; min-height: 38px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } /* Reset des line-height pour aligner verticalement */ #et-secondary-nav, #et-secondary-nav li, #et-secondary-nav li a { line-height: 1 !important; } #et-secondary-nav li { margin: 0 !important; padding: 0 !important; } /* Items du menu secondaire : petite taille, secondaryLight légèrement transparent */ #et-secondary-nav li a { font-family: var(--fontMain) !important; font-weight: var(--weightBody) !important; font-size: 13px !important; letter-spacing: 0.03em !important; color: var(--secondaryLight) !important; opacity: 0.85 !important; padding: 12px 14px !important; text-transform: none !important; transition: var(--transitionFast) !important; } #et-secondary-nav li a:hover { color: var(--brandColor) !important; opacity: 1 !important; } /* Masquer le menu secondaire en mobile (Divi le masque déjà, on sécurise) */ @media (max-width: 980px) { #top-header { display: none !important; } } /* ========================================================= FOOTER ======================================================== */ /* Lisibilité générale du footer : line-height plus aéré + small légèrement plus grand */ footer p { line-height: 1.8em; } footer small { font-size: 0.9rem; } footer ul, #footer-info { text-align: center; } #footer-info { float: none; } /* --- Footer colonnes — section principale du footer (3-4 colonnes : logo, nav, contact, réseaux) --- */ .footer-columns { background-color: var(--backgroundDark) !important; } @media (max-width: 767px) { /* Espacement entre la col 1 (logo) et la col 2 (nav) en mobile */ .footer-columns .et_pb_column:nth-child(2) { padding-top: var(--sizeM) !important; } /* Footer bottom bar : marges réduites en mobile */ .footer-bottom-bar { margin-top: var(--sizeS) !important; row-gap: 0 !important; } .footer-bottom-bar .et_pb_column { padding-top: var(--sizeXS) !important; padding-bottom: var(--sizeXS) !important; } .footer-bottom-bar.et_pb_row { --row-gutter-horizontal: 0% !important; } } /* Logo dans le footer : hauteur max 50px */ .footer-columns .et_pb_image img { width: auto !important; } /* Espacement footer : padding-left spécifique sur col2 et col3 pour créer des indentations */ .footer-columns .et_pb_row { --row-gutter-horizontal: 0% !important; } /* Supprime le gap vertical dans la dernière colonne du footer (réseaux sociaux compacts) */ .footer-columns .et_pb_column:last-child { --vertical-gap: 0px !important; } @media (max-width: 767px) { .footer-columns .et_pb_column:nth-child(2) { padding-left: 0 !important; padding-right: 0 !important; } .footer-columns .et_pb_row .et_pb_column:last-child { padding-left: 0 !important; } } /* Listes de liens dans le footer (plan du site) */ .footer-columns .et_pb_text_inner ul { list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } .footer-columns .et_pb_text_inner ul li { margin-bottom: var(--sizeS) !important; } .footer-columns .et_pb_text_inner ul li a { color: var(--secondaryLight) !important; font-size: 0.9rem !important; } .footer-columns .et_pb_text_inner ul li a:hover { color: var(--white) !important; } /* Paragraphes du footer */ .footer-columns .et_pb_text_inner p { color: var(--secondaryLight) !important; font-size: 0.9rem !important; } .footer-columns .et_pb_text_inner p a { color: var(--secondaryLight) !important; } .footer-columns .et_pb_text_inner p a:hover { color: var(--white) !important; } /* Icon list dans le footer (contact : tél, email, adresse) */ .footer-columns .et_pb_icon_list .et_pb_icon_list_item .et-pb-icon { color: var(--brandColor) !important; } .footer-columns .et_pb_icon_list .et_pb_icon_list_text { color: var(--secondaryLight) !important; font-size: 0.9rem !important; } .footer-columns .et_pb_icon_list .et_pb_icon_list_text a { color: var(--secondaryLight) !important; } .footer-columns .et_pb_icon_list .et_pb_icon_list_text a:hover { color: var(--white) !important; } /* --- Footer nav (Divi natif #main-footer) — ligne fine en bas du footer --- */ #main-footer { display: flex !important; align-items: center !important; background-color: var(--backgroundDark) !important; padding: var(--sizeS) var(--section-gutter) !important; box-sizing: border-box !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } @media (min-width: 768px) { #main-footer > * { width: 50% !important; } } @media (max-width: 767px) { #main-footer { flex-direction: column !important; align-items: center !important; padding-left: 0 !important; padding-right: 0 !important; } #main-footer > * { width: 100% !important; text-align: center !important; } #et-footer-nav .bottom-nav { text-align: center !important; } #footer-bottom #footer-info { text-align: center !important; } } /* --- Footer bottom bar — dernière ligne du footer (mentions légales / copyright) --- */ .footer-bottom-bar { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; margin-top: var(--sizeM) !important; padding-top: var(--sizeM) !important; padding-bottom: var(--sizeS) !important; min-height: 50px !important; align-items: center !important; } .footer-bottom-bar .et_pb_column { padding-top: var(--sizeS) !important; padding-bottom: var(--sizeS) !important; } /* Col 1 (mentions légales) : opacity 0.7 */ .footer-bottom-bar .et_pb_column:first-child .et_pb_text_inner p, .footer-bottom-bar .et_pb_column:first-child .et_pb_text_inner p a { font-size: 0.75rem !important; color: var(--secondaryLight) !important; opacity: 0.7; } /* Col 2 (copyright + signature) : opacity 0.5, aligné à droite */ .footer-bottom-bar .et_pb_column:last-child .et_pb_text_inner p { font-size: 0.75rem !important; color: var(--secondaryLight) !important; opacity: 0.5 !important; text-align: right !important; } @media (max-width: 767px) { .footer-bottom-bar .et_pb_column:first-child .et_pb_text_inner p, .footer-bottom-bar .et_pb_column:last-child .et_pb_text_inner p { text-align: center !important; } } /* Containers footer Divi natif (et-footer-nav, footer-bottom) : alignés sur le système */ #et-footer-nav .container, #footer-bottom .container { max-width: var(--maxWidth) !important; width: 90% !important; margin: 0 auto !important; } /* ========================================================= BOUTONS ======================================================== */ /* Bouton principal Divi : fond brandColor, texte blanc, arrondi --borderRadius. Note : padding asymétrique (right: 2em) historiquement pour la flèche ::after, conservé. */ .et_pb_button { font-family: var(--fontMain) !important; font-weight: var(--weightBody) !important; font-size: 1rem !important; border-radius: var(--borderRadius) !important; padding: 0.3em 2em 0.3em 0.8em !important; transition: var(--transition) !important; text-decoration: none !important; background-color: var(--brandColor) !important; color: var(--white) !important; border: 2px solid var(--brandColor) !important; } .et_pb_button:hover { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; filter: brightness(1.12) !important; padding: 0.3em 2em 0.3em 0.8em !important; } /* btnSecondary — bouton transparent + bordure brandColor */ .btnSecondary { background-color: transparent !important; color: var(--brandColor) !important; border: 2px solid var(--brandColor) !important; } .btnSecondary:after { color: var(--brandColor) !important; } .btnSecondary:hover { background-color: var(--brandColor) !important; color: var(--white) !important; filter: none !important; } .btnSecondary:hover:after { color: var(--white) !important; } /* btnLink — bouton sans fond ni bordure, comme un lien (3e niveau d'action) */ .btnLink { background-color: transparent !important; color: var(--brandColor) !important; border-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } .btnLink:hover { background-color: transparent !important; color: var(--brandColor) !important; border-color: transparent !important; text-decoration: underline !important; filter: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* btnIcon — sur module Icon Divi : icône ronde brandColor */ .btnIcon.et_pb_icon { background-color: var(--brandColor) !important; border-radius: 50% !important; width: 2.75rem !important; height: 2.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: var(--transition) !important; cursor: pointer !important; } .btnIcon.et_pb_icon .et-pb-icon { color: var(--white) !important; font-size: 2rem !important; transform: translateY(-3%) !important; /* micro-correction de centrage optique */ } .btnIcon.et_pb_icon:hover { filter: brightness(1.12) !important; } /* ========================================================= FORMULAIRES ======================================================== */ /* Note : sélecteur générique input/textarea volontaire (impacte aussi recherche, login, etc.) */ input, textarea { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; border: none !important; transition: var(--transitionFast); font-size: 1.0625rem; /* 17px — aligné sur la nav */ padding: 1em !important; } input:focus, textarea:focus { background-color: var(--backgroundLight) !important; outline: none !important; } /* Placeholders des formulaires de contact Divi */ .et_pb_contact_form input::placeholder, .et_pb_contact_form textarea::placeholder, .et_pb_contact_field input::placeholder, .et_pb_contact_field textarea::placeholder { color: var(--primaryDark) !important; opacity: 0.8 !important; } .et_pb_contact_form input, .et_pb_contact_form textarea { color: var(--primaryDark) !important; } /* Labels des formulaires */ .et_pb_contact_form label, .et_pb_contact_form .et_pb_contact_form_label, .et_pb_contact_form_0 label, .et_pb_contact_form_0 .et_pb_contact_form_label, .et_pb_contact_field label.et_pb_contact_form_label { color: var(--primaryDark) !important; } .et_pb_contact_form { margin-left: 0 !important; } /* Champ de contact Divi */ p.et_pb_contact_field { margin-bottom: var(--sizeM) !important; padding: 0; } /* Wrapper du bouton Submit + RGPD : flex à droite */ .et_contact_bottom_container { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--sizeM) !important; } .et_pb_contact_form .et_pb_contact_right { text-align: right !important; } .et_pb_contact_submit { max-height: none; } /* Champs de demi-largeur : padding entre les deux */ .et_pb_contact_field_half:not(.et_pb_contact_field_last) { padding-right: var(--sizeS) !important; } .et_pb_contact_field_half.et_pb_contact_field_last { padding-left: var(--sizeS) !important; padding-right: 0 !important; } @media (max-width: 767px) { /* En mobile : champs demi-largeur → pleine largeur */ .et_pb_contact_field_half:not(.et_pb_contact_field_last), .et_pb_contact_field_half.et_pb_contact_field_last { padding-left: 0 !important; padding-right: 0 !important; } } /* Captcha Divi : question inline + champ étroit */ .et_pb_contact_captcha_question { display: inline-block; } input.et_pb_contact_captcha { width: 80px !important; display: inline-block !important; padding: 0.75em !important; } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ MODULES DIVI (alphabétique) ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* ----- Accordéon / Toggle (FAQ) ----- */ .et_pb_toggle { border: none; border-bottom: 1px solid var(--secondaryLight) !important; color: var(--primaryDark); background: none; } /* Annule les fonds Divi natifs en état ouvert/fermé */ .et_pb_toggle_open, .et_pb_toggle_close { background: none !important; background-color: transparent !important; } .et_pb_toggle_title { color: var(--primaryDark); } /* Espacement compact entre items d'un accordéon */ .et_pb_accordion .et_pb_toggle_title { margin-bottom: var(--sizeS) !important; } @media (min-width: 981px) { /* Padding-top sur les toggles isolés (hors accordéon) */ .et_pb_toggle:not(.et_pb_accordion_item) { padding-top: 10px !important; padding-bottom: 35px !important; } } /* Icône du toggle (chevron) en brandColor */ .et_pb_toggle_title:before { color: var(--brandColor); font-size: 0.8em; } /* Titre du toggle ouvert : couleur normale */ .et_pb_toggle_open .et_pb_toggle_title, .et_pb_toggle_open h5.et_pb_toggle_title { color: var(--primaryDark) !important; } /* Titre du toggle fermé : légèrement plus discret */ .et_pb_toggle_close .et_pb_toggle_title, .et_pb_toggle_close h5.et_pb_toggle_title { color: var(--secondaryDark) !important; } .et_pb_toggle_content p { padding-bottom: 1em !important; } @media (max-width: 767px) { .et_pb_toggle h3.et_pb_toggle_title { font-size: 1.1rem !important; margin-bottom: 10px !important; } .et_pb_toggle:not(.et_pb_accordion .et_pb_toggle) { padding-top: 0 !important; } } /* ----- Audio ----- */ .et_pb_audio_module, .et_pb_audio_0.et_pb_audio_module { --gcid-primary-color: var(--backgroundLight) !important; background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; } .et_pb_audio_module h2, .et_pb_audio_module h1, .et_pb_audio_module h3, .et_pb_audio_module p, .et_pb_audio_module .et_audio_container, .et_pb_audio_module .et_pb_audio_module_meta, .et_pb_audio_module .et_pb_audio_module_title { color: var(--primaryDark) !important; } /* Player MediaElement — barre progression & volume */ .et_pb_audio_module .mejs-time, .et_pb_audio_module .mejs-currenttime, .et_pb_audio_module .mejs-duration, .et_pb_audio_module .mejs-button button { color: var(--primaryDark) !important; } .et_pb_audio_module .mejs-time-rail .mejs-time-total, .et_pb_audio_module .mejs-horizontal-volume-total { background: color-mix(in srgb, var(--primaryDark) 15%, transparent) !important; } .et_pb_audio_module .mejs-time-rail .mejs-time-loaded { background: color-mix(in srgb, var(--primaryDark) 25%, transparent) !important; } .et_pb_audio_module .mejs-time-rail .mejs-time-current, .et_pb_audio_module .mejs-horizontal-volume-current { background: var(--brandColor) !important; } .et_pb_audio_module .mejs-time-handle, .et_pb_audio_module .mejs-horizontal-volume-handle, .et_pb_audio_module .mejs-time-handle-content { background: var(--brandColor) !important; border-color: var(--brandColor) !important; } .et_pb_audio_module .mejs-button button::before, .et_pb_audio_module .mejs-playpause-button button::before, .et_pb_audio_module .mejs-volume-button button::before { color: var(--primaryDark) !important; } /* ----- Avant/Après (Before/After Image) ----- */ .et_pb_before_after_image_container { border-radius: var(--borderRadius) !important; overflow: hidden !important; } /* Slider de comparaison : poignée en brandColor */ .et_pb_before_after_image_slider_handle:before { border-right-color: var(--brandColor) !important; } .et_pb_before_after_image_slider_handle:after { border-left-color: var(--brandColor) !important; } /* ----- Bannière (Fullwidth Header) ----- */ .et_pb_fullwidth_header { background-color: var(--backgroundLight) !important; overflow: hidden !important; } /* Surtitre (module_header) en style "surTitre" */ .et_pb_fullwidth_header .et_pb_module_header { font-size: 0.75rem !important; font-weight: var(--weightStrong) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.4em !important; color: var(--brandColor) !important; } .et_pb_fullwidth_header .et_pb_module_header:before { content: var(--surTitreIcone); color: var(--brandColor) !important; margin-right: 0.35em; } /* Sous-titre = gros titre héro (style heroTitle) */ .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; font-size: 2.75rem !important; line-height: 1.3em !important; color: var(--primaryDark) !important; } /* Description sous le titre */ .et_pb_fullwidth_header .et_pb_header_content, .et_pb_fullwidth_header .et_pb_fullwidth_header_container p { color: var(--primaryDark) !important; } /* Bouton principal (button_one) */ .et_pb_fullwidth_header .et_pb_button_one { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* Bouton secondaire (button_two) : style btnSecondary */ .et_pb_fullwidth_header .et_pb_button_two { background-color: transparent !important; color: var(--brandColor) !important; border: 2px solid var(--brandColor) !important; } .et_pb_fullwidth_header .et_pb_button_two:after { color: var(--brandColor) !important; } .et_pb_fullwidth_header .et_pb_button_two:hover { background-color: var(--brandColor) !important; color: var(--white) !important; filter: none !important; } .et_pb_fullwidth_header .et_pb_button_two:hover:after { color: var(--white) !important; } /* Image dans le header : hauteur max 500px desktop */ .et_pb_fullwidth_header .header-image img { max-height: 500px !important; width: auto !important; border-radius: var(--borderRadius) !important; } @media (max-width: 767px) { .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { font-size: 1.8rem !important; } .et_pb_fullwidth_header .header-image img { max-height: 300px !important; } } /* ----- Blog ----- Article-card : fond backgroundLight, image en haut, titre et excerpt avec padding interne (cf. Espacements) */ article.has-post-thumbnail a img { border-radius: var(--borderRadius) var(--borderRadius) 0 0 !important; } .et_pb_post { border: none !important; background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius); overflow: hidden; padding: 0 !important; } .et_pb_post .et_pb_image_container { margin: 0 !important; } .et_pb_post .entry-featured-image-url { margin: 0; line-height: 0; } .et_pb_post .entry-featured-image-url img { margin: 0 !important; display: block; width: 100%; } .et_pb_post .post-content p { color: var(--primaryDark) !important; } .et_pb_post .entry-title { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; font-size: 1.333rem !important; line-height: 1.3em !important; } /* Blog mobile — force 1 colonne (override --column-count Divi) */ @media (max-width: 767px) { .et_pb_blog_0 .et_pb_posts, .et_pb_posts:not(.et_pb_filterable_portfolio_0) { --column-count: 1 !important; } } /* ----- Blurb ----- Card avec icône/image + titre + texte. 3 variantes : top, left, right. Annule le --vertical-gap natif Divi qui ajoutait de l'espace inutile. */ .et_pb_blurb { border-radius: var(--borderRadius); background-color: var(--backgroundLight); overflow: hidden; --vertical-gap: 0px !important; } .et_pb_blurb .et_pb_blurb_content.et_flex_module { --vertical-gap: 0px !important; } /* Harmonisation hauteur en multi-colonnes */ .et_pb_blurb .et_pb_blurb_content { max-width: 100%; text-align: inherit; } .et_pb_blurb_container { vertical-align: middle; } /* Titre du blurb : graisse strong */ .et_pb_blurb_container .et_pb_module_header span { font-weight: var(--weightStrong); } /* Icône du blurb : couleur brandColor */ .et_pb_blurb .et-pb-icon { color: var(--brandColor) !important; } /* --- Variante : image/icône en haut (position_top) --- */ .et_pb_blurb_position_top .et_pb_main_blurb_image:not(:has(.et_pb_only_image_mode_wrap)) .et-pb-icon { font-size: 2.5rem !important; } .et_pb_blurb_position_top .et_pb_main_blurb_image { margin: 0 !important; line-height: 0; } /* Image au top : pleine largeur, coins haut arrondis (raccord avec le container) */ .et_pb_blurb_position_top .et_pb_main_blurb_image img { width: 100% !important; border-radius: var(--borderRadius) var(--borderRadius) 0 0 !important; margin: 0 !important; display: block; } .et_pb_blurb_position_top .et_pb_main_blurb_image:not(:has(.et_pb_only_image_mode_wrap)) .et-pb-icon { width: auto; } /* --- Variantes : image à gauche / à droite (position_left / position_right) --- */ .et_pb_blurb_position_left .et_pb_main_blurb_image, .et_pb_blurb_position_right .et_pb_main_blurb_image { margin-right: var(--sizeM) !important; vertical-align: top !important; line-height: 2.3em; } .et_pb_blurb_position_left .et_pb_blurb_container, .et_pb_blurb_position_right .et_pb_blurb_container { vertical-align: top !important; overflow: hidden !important; line-height: 1.6em; } .et_pb_blurb_position_left .et_pb_main_blurb_image img, .et_pb_blurb_position_right .et_pb_main_blurb_image img { border-radius: var(--borderRadius) !important; } /* Icône plus grande pour les variantes left/right */ .et_pb_blurb_position_left.et_pb_blurb_with_icon .et-pb-icon, .et_pb_blurb_position_right.et_pb_blurb_with_icon .et-pb-icon { font-size: 3rem !important; } /* Wrapper d'icône : couleur + taille par défaut */ .et_pb_icon_wrap .et-pb-icon { color: var(--brandColor) !important; font-size: 2.5rem !important; } /* ----- Carrousel de groupe (Group Carousel Divi 5) ----- Module natif Divi 5. Style épuré : arrows ronds blancs avec ombre, dots brandColor sur l'état actif, gap entre slides calé sur le gutter système. */ @media (max-width: 980px) { .et_pb_group_carousel { margin: 0 auto !important; } .et_pb_group_carousel .et_pb_group_carousel_arrow .et-pb-icon { color: var(--brandColor) !important; } .et_pb_group_carousel .et_pb_group_carousel_slide { padding: 0 calc(var(--module-gutter-grid) / 4) !important; border-radius: var(--borderRadius) !important; overflow: hidden !important; } .et_pb_group_carousel .et_pb_group_carousel_container { margin: 0 calc(var(--module-gutter-grid) / -4) !important; } } @media (min-width: 981px) { /* Arrows : ronds blancs avec ombre, icône brandColor */ .et_pb_group_carousel .et_pb_group_carousel_arrow { background-color: var(--white) !important; border-radius: 999px !important; width: 2.75rem !important; height: 2.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: var(--transition) !important; cursor: pointer !important; box-shadow: var(--ombrePortee) !important; } .et_pb_group_carousel .et_pb_group_carousel_arrow:hover { filter: brightness(0.95) !important; } .et_pb_group_carousel .et_pb_group_carousel_arrow .et-pb-icon { color: var(--brandColor) !important; } /* Gap entre les slides : moitié du gutter de chaque côté = gutter total */ .et_pb_group_carousel .et_pb_group_carousel_slide { padding: 0 calc(var(--module-gutter-grid) / 2) !important; } /* Compense le padding sur le container pour que les slides bordent le viewport */ .et_pb_group_carousel .et_pb_group_carousel_container { margin: 0 calc(var(--module-gutter-grid) / -2) !important; } } /* Dots du carousel — ronds avec état actif en brandColor */ .et_pb_group_carousel .et_pb_group_carousel_dot { background-color: color-mix(in srgb, var(--primaryDark) 25%, transparent) !important; border-radius: 50% !important; border: none !important; opacity: 1 !important; transition: var(--transition) !important; } .et_pb_group_carousel .et_pb_group_carousel_dot.active, .et_pb_group_carousel .et_pb_group_carousel_dot_active, .et_pb_group_carousel .et_pb_group_carousel_dot[data-active="true"] { background-color: var(--brandColor) !important; } /* ----- Carrousel d'articles (Fullwidth Portfolio Divi 5) ----- Carrousel à défilement horizontal avec 3 colonnes desktop / 2 colonnes tablette */ .et_pb_fullwidth_portfolio .et_overlay { border-radius: 0 !important; } /* Couleurs des titres et meta : forcées en blanc (sur fond image overlay) */ .et_pb_fullwidth_portfolio .et_pb_fullwidth_portfolio_item h3.et_pb_module_header, .et_pb_fullwidth_portfolio .et_pb_fullwidth_portfolio_item h3.et_pb_module_header span, .et_pb_fullwidth_portfolio .et_pb_module_header, .et_pb_fullwidth_portfolio .et_pb_portfolio_image p, .et_pb_fullwidth_portfolio .et_pb_portfolio_image .post-meta, .et_pb_fullwidth_portfolio .et_pb_portfolio_image .post-meta p, .et_pb_fullwidth_portfolio_item .post-meta, .et_pb_fullwidth_portfolio_item .post-meta p, .et_pb_fullwidth_portfolio_item p { color: var(--white) !important; } /* Carrousel — layout 3 colonnes avec gouttières en desktop */ .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item { border-radius: var(--borderRadius) !important; overflow: hidden !important; } @media (min-width: 981px) { /* Override flex Divi pour avoir 3 colonnes au lieu du carousel-script natif */ .et_pb_fullwidth_portfolio .et_pb_carousel_group { display: flex !important; flex-wrap: wrap !important; gap: var(--module-gutter-grid, 30px) !important; width: 100% !important; float: none !important; } /* 3 colonnes : (100% - 2*30px) / 3 ≈ 33.33% - 20px (le 20 = 2/3 du gap) */ .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item { width: calc(33.33% - 20px) !important; max-width: calc(33.33% - 20px) !important; float: none !important; } .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .et_portfolio_image { width: 100% !important; height: 100% !important; position: relative !important; } /* Centrage du contenu (titre + meta) sur l'image au hover */ .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .meta a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; padding-top: 15% !important; gap: var(--sizeXS) !important; } .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .meta a h3, .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .meta a p { margin-top: 0 !important; } /* Icône loupe positionnée en haut */ .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .et_overlay:before { position: absolute !important; top: 20% !important; left: 50% !important; transform: translateX(-50%) !important; display: block !important; } .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .et_portfolio_image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item .et_overlay { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; border-radius: 0 !important; } } /* 2 colonnes pour les tablettes (981-1200) */ @media (min-width: 981px) and (max-width: 1200px) { .et_pb_fullwidth_portfolio .et_pb_carousel_group .et_pb_portfolio_item { width: calc(50% - 15px) !important; max-width: calc(50% - 15px) !important; } } /* ----- Compteurs (Number / Circle / Bar) ----- 3 modules de stats animées : nombre seul, jauge circulaire, barre de progression */ /* Compteur à nombre (Number Counter) */ .et_pb_number_counter .percent, .et_pb_number_counter .percent p { color: var(--brandColor) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } .et_pb_number_counter h3, .et_pb_number_counter .title { color: var(--primaryDark) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } /* Compteur circulaire */ .et_pb_circle_counter .percent, .et_pb_circle_counter .percent p { color: var(--primaryDark) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } .et_pb_circle_counter h3, .et_pb_circle_counter .title { color: var(--primaryDark) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; margin-top: var(--sizeM) !important; } /* Compteurs en barre */ .et_pb_counters { background-color: transparent !important; } .et_pb_counters .et_pb_counter_container { background-color: color-mix(in srgb, var(--primaryDark) 10%, transparent) !important; border-radius: var(--borderRadius) !important; overflow: hidden !important; height: auto !important; padding: 0 !important; } .et_pb_counters .et_pb_counter_amount { background-color: var(--brandColor) !important; color: var(--white) !important; border-radius: var(--borderRadius) !important; padding: var(--sizeS) var(--sizeM) !important; } .et_pb_counters .et_pb_counter_amount_number { color: var(--white) !important; font-weight: var(--weightStrong) !important; } .et_pb_counters .et_pb_counter_title { color: var(--primaryDark) !important; font-weight: var(--weightStrong) !important; padding: var(--sizeS) var(--sizeM) !important; } /* ----- Connexion (Login) ----- */ .et_pb_login { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; } .et_pb_login h1, .et_pb_login h2, .et_pb_login h3, .et_pb_login p, .et_pb_login label, .et_pb_login .et_pb_login_form_label, .et_pb_login .et_pb_newloginform_container p, .et_pb_login .et_pb_login_form_description { color: var(--primaryDark) !important; } .et_pb_login input[type="text"], .et_pb_login input[type="password"], .et_pb_login input[type="email"] { background-color: var(--white) !important; color: var(--primaryDark) !important; } .et_pb_login input::placeholder { color: var(--primaryDark) !important; opacity: 0.8 !important; } .et_pb_login a, .et_pb_login .forgot_password a { color: var(--brandColor) !important; text-decoration: none !important; } .et_pb_login a:hover { text-decoration: underline !important; } .et_pb_login .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* ----- CTA / Promo ----- Module Divi natif Promo + classe .cta-block */ .et_pb_promo { border-radius: var(--borderRadius); background-color: var(--secondaryDark) !important; } .et_pb_promo h2 { color: var(--white) !important; font-size: 1.75rem; font-weight: var(--weightTitle); line-height: 1.3em; } .et_pb_promo p { color: var(--white) !important; } @media (max-width: 767px) { .et_pb_promo h2 { font-size: 1.5rem; } } /* ----- Galerie ----- */ .et_pb_gallery_image, .et_pb_gallery_item img, .et_pb_gallery .et_pb_gallery_image img { border-radius: var(--borderRadius) !important; overflow: hidden !important; } /* Lightbox (Magnific Popup) : masque le titre/légende affiché sous l'image au zoom */ .mfp-title, .mfp-figure figcaption { display: none !important; } /* Galerie en mode grille : désactive l'animation d'apparition au chargement (sans toucher au mode diaporama qui a besoin de ses transitions) */ .et_pb_gallery_grid .et_pb_gallery_item { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* ----- Icon List ----- Annule le margin-top natif sur les icônes des items */ .et_pb_icon_list .et_pb_icon_list_item .et-pb-icon { margin-top: 0 !important; } /* ----- Image ----- Border-radius systématique sur toutes les images des modules (header, image, portfolio, etc.) */ .header-image img, .et_pb_image img, .et_portfolio_image img, .dsm-entry-thumbnail img { border-radius: var(--borderRadius); } /* ----- Lien (Module Link Divi 5) ----- */ a.et_pb_link, a.et_pb_link span { color: var(--brandColor) !important; } /* ----- Newsletter (Email Optin) ----- */ .et_pb_newsletter, .et_pb_subscribe { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; border: none !important; overflow: hidden !important; } .et_pb_newsletter h1, .et_pb_newsletter h2, .et_pb_newsletter h3, .et_pb_newsletter p, .et_pb_newsletter .et_pb_newsletter_description, .et_pb_newsletter .et_pb_newsletter_description_content, .et_pb_subscribe h1, .et_pb_subscribe h2, .et_pb_subscribe h3, .et_pb_subscribe p { color: var(--primaryDark) !important; } .et_pb_newsletter input[type="text"], .et_pb_newsletter input[type="email"], .et_pb_subscribe input[type="text"], .et_pb_subscribe input[type="email"] { background-color: var(--white) !important; color: var(--primaryDark) !important; border: none !important; border-radius: var(--borderRadius) !important; } .et_pb_newsletter input::placeholder, .et_pb_subscribe input::placeholder { color: var(--primaryDark) !important; opacity: 0.8 !important; } .et_pb_newsletter .et_pb_newsletter_button, .et_pb_newsletter .et_pb_button, .et_pb_subscribe .et_pb_newsletter_button, .et_pb_subscribe .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* ----- Onglets (Tabs) ----- Style "pill segments" : barre de boutons sur fond gris clair, l'onglet actif en blanc + texte brandColor */ .et_pb_tabs { border: none !important; border-radius: var(--borderRadius) !important; overflow: hidden !important; background-color: var(--backgroundLight) !important; margin-bottom: 0 !important; } /* Annule la marge bottom dans les contextes de gutter Divi */ [class*='et_pb_gutters'] [class*='et_pb_column'] .et_pb_tabs { margin-bottom: 0 !important; } .et_pb_gutters2 .et_pb_column_1_2.et_block_column .et_pb_module.et_pb_tabs { margin-bottom: 0 !important; } .et_pb_tabs .et_pb_tab { margin-bottom: var(--sizeNA) !important; } /* Barre de contrôles des onglets (segmented control) */ .et_pb_tabs .et_pb_tabs_controls { background-color: color-mix(in srgb, var(--primaryDark) 8%, transparent) !important; border-bottom: none !important; padding: 5px !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; border-radius: calc(var(--borderRadius) * 1.1) calc(var(--borderRadius) * 1.1) 0 0 !important; } .et_pb_tabs .et_pb_tabs_controls li { margin: 0 !important; border: none !important; background: none !important; list-style: none !important; border-radius: calc(var(--borderRadius) * 0.75) !important; } .et_pb_tabs .et_pb_tabs_controls li a { display: block !important; padding: 0.5em 1.25em !important; font-family: var(--fontMain) !important; font-weight: var(--weightStrong) !important; font-size: 0.875rem !important; color: var(--primaryDark) !important; text-decoration: none !important; border: none !important; border-radius: calc(var(--borderRadius) * 0.75) !important; transition: var(--transitionFast) !important; background: transparent !important; opacity: 0.5 !important; letter-spacing: 0.01em !important; cursor: pointer !important; } .et_pb_tabs .et_pb_tabs_controls li a:hover { opacity: 0.75 !important; } /* Onglet actif : fond blanc + texte brandColor */ .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a { background-color: var(--white) !important; color: var(--brandColor) !important; opacity: 1 !important; box-shadow: none !important; border: none !important; } /* Contenu de l'onglet : couleurs et typo (padding centralisé dans Espacements) */ .et_pb_tabs .et_pb_tab { border: none !important; background-color: var(--backgroundLight) !important; font-family: var(--fontMain) !important; font-size: 1rem !important; line-height: 1.7em !important; color: var(--primaryDark) !important; } /* Annule l'animation de switch d'onglet (instantané) */ .et_pb_tab { animation: none !important; transition: none !important; opacity: 1 !important; } @media (max-width: 767px) { .et_pb_tabs .et_pb_tabs_controls li a { padding: 0.7em 1em !important; font-size: 0.9rem !important; } } /* ----- Pagination ----- */ .et_pb_post_nav_0 .wp-pagenavi a, .et_pb_portfolio_0 .wp-pagenavi a { color: var(--primaryDark) !important; font-family: var(--fontMain) !important; font-weight: var(--weightStrong) !important; } .et_pb_post_nav_0 .wp-pagenavi a:hover, .et_pb_portfolio_0 .wp-pagenavi a:hover { color: var(--brandColor) !important; } .et_pb_post_nav_0 .wp-pagenavi span.current, .et_pb_portfolio_0 .wp-pagenavi span.current { color: var(--brandColor) !important; } /* ----- Personne (Team Member) ----- Card carrée centrée : photo ronde 120px + nom + rôle (en surTitre) + bio courte + réseaux sociaux */ .et_pb_team_member { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; overflow: hidden !important; border: none !important; transition: var(--transition) !important; text-align: center !important; } /* Photo de profil ronde 120x120 (object-fit cover pour pas de déformation) */ .et_pb_team_member .et_pb_team_member_image { margin: var(--sizeM) auto var(--sizeM) auto !important; line-height: 0 !important; text-align: center !important; width: 120px !important; height: 120px !important; } .et_pb_team_member .et_pb_team_member_image img { width: 120px !important; height: 120px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; border: none !important; margin: auto !important; } /* Nom du membre */ .et_pb_team_member h4 { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; font-size: 1.125rem !important; color: var(--primaryDark) !important; margin-bottom: var(--sizeXS) !important; } /* Rôle / poste : style surTitre (uppercase, brandColor) */ .et_pb_team_member .et_pb_member_position, .et_pb_team_member .et_pb_team_member_description .et_pb_member_position { font-size: 0.8rem !important; font-weight: var(--weightStrong) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--brandColor) !important; margin-bottom: var(--sizeM) !important; display: block !important; } /* Bio courte */ .et_pb_team_member .et_pb_team_member_description p { font-size: 0.9375rem !important; line-height: 1.6em !important; color: var(--primaryDark) !important; } /* Liens sociaux : séparés du contenu par une bordure haute */ .et_pb_team_member .et_pb_member_social_links { margin-top: var(--sizeM) !important; padding-top: var(--sizeM) !important; border-top: 1px solid var(--secondaryLight) !important; } .et_pb_team_member .et_pb_member_social_links a { color: var(--primaryDark) !important; opacity: 0.4 !important; transition: var(--transitionFast) !important; font-size: 1.125rem !important; margin-right: var(--sizeS) !important; } .et_pb_team_member .et_pb_member_social_links a:hover { color: var(--brandColor) !important; opacity: 1 !important; } /* ----- Portfolio ----- Overlay au hover : voile dark + icône brandColor */ .et_overlay { background-color: var(--backgroundDark) !important; border: none !important; border-radius: var(--borderRadius); opacity: 0.8 !important; transition: opacity 0.3s ease-in-out; } .et_overlay:before { color: var(--brandColor) !important; } /* Portfolio Divi 5 — grille flex 3 colonnes (33% + 3% gap) en desktop, 1 colonne en mobile */ .et_pb_posts.et_flex_module { flex-direction: row !important; flex-wrap: wrap !important; gap: 3% !important; } .et_pb_posts.et_flex_module .et_pb_portfolio_item { width: 31.33% !important; flex-shrink: 0 !important; flex-grow: 0 !important; } @media (max-width: 767px) { .et_pb_posts.et_flex_module .et_pb_portfolio_item { width: 100% !important; flex-basis: 100% !important; } } /* Overlay hover */ .et_pb_posts.et_flex_module .et_pb_portfolio_item:hover .et_overlay { opacity: 0.8 !important; } .et_pb_filterable_portfolio .et_pb_portfolio_item .et_overlay { background-color: var(--backgroundDark); opacity: 0; border-radius: var(--borderRadius); border: none; transition: opacity 0.4s ease-in-out; } .et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_overlay { opacity: 0.8; } .et_pb_filterable_portfolio .et_pb_portfolio_item .et_overlay:before { color: var(--brandColor); opacity: 1; } /* Filtres du portfolio (boutons catégorie) */ .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li { margin-right: 0.5em; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background-color: var(--backgroundLight); border-radius: var(--borderRadius) !important; text-decoration: none !important; border: none; color: var(--primaryDark) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background-color: var(--brandColor) !important; color: var(--white) !important; } /* Supprime l'animation d'apparition Divi (cliché) */ .et_pb_filterable_portfolio .et_pb_portfolio_item { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .et_pb_filterable_portfolio .et_pb_portofolio_pagination:after { display: none !important; } .et_pb_filterable_portfolio .et_pb_portofolio_pagination { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; } /* Portfolio filtrable — 2 filtres par ligne en mobile */ @media (max-width: 767px) { .et_pb_filterable_portfolio .et_pb_portfolio_filters ul { display: flex !important; flex-wrap: wrap !important; gap: var(--sizeS) !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li { flex: 1 1 calc(50% - var(--sizeS)) !important; max-width: calc(50% - var(--sizeS) / 2) !important; margin-right: 0 !important; box-sizing: border-box !important; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { display: block !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; } } /* ----- Post Title (Titre du Post) ----- */ .et_pb_post_title { background-color: transparent !important; } .et_pb_post_title .entry-title, .et_pb_post_title .et_pb_title_container h1, .et_pb_post_title .et_pb_title_container h2 { color: var(--primaryDark) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } /* Meta (date, auteur, catégories) */ .et_pb_post_title .et_pb_title_meta_container, .et_pb_post_title .et_pb_title_meta_container p, .et_pb_post_title .et_pb_title_meta_container span { color: var(--primaryDark) !important; } .et_pb_post_title .et_pb_title_meta_container a { color: var(--brandColor) !important; text-decoration: none !important; } .et_pb_post_title .et_pb_title_meta_container a:hover { text-decoration: underline !important; } /* Image à la une */ .et_pb_post_title .et_pb_title_featured_container, .et_pb_post_title .et_pb_title_featured_image { border-radius: var(--borderRadius) !important; overflow: hidden !important; } .et_pb_post_title .et_pb_title_featured_image img { border-radius: var(--borderRadius) !important; } /* ----- Recherche (Search) ----- */ .et_pb_search { border-radius: var(--borderRadius) !important; overflow: hidden !important; border: none !important; box-shadow: none !important; } .et_pb_search .et_pb_searchform, .et_pb_search .et_pb_searchform_container { border: none !important; } .et_pb_search .et_pb_searchform input.et_pb_s { background-color: var(--backgroundLight) !important; color: var(--primaryDark) !important; border: none !important; border-radius: var(--borderRadius) !important; } .et_pb_search .et_pb_searchform input.et_pb_s::placeholder, .et_pb_search .et_pb_searchform input.et_pb_s::-webkit-input-placeholder, .et_pb_search .et_pb_searchform input.et_pb_s::-moz-placeholder, .et_pb_search .et_pb_searchform input.et_pb_s:-ms-input-placeholder { color: var(--primaryDark) !important; opacity: 0.8 !important; } .et_pb_search .et_pb_searchsubmit { background-color: var(--brandColor) !important; color: var(--white) !important; border: none !important; border-radius: var(--borderRadius) !important; cursor: pointer !important; transition: var(--transition) !important; margin-left: var(--sizeS) !important; } .et_pb_search .et_pb_searchsubmit:hover { filter: brightness(1.12) !important; } /* ----- Réseaux sociaux (Social Media Follow) ----- Override de la couleur native Divi pour unifier en brandColor + icônes rondes */ .et_pb_social_media_follow .et_pb_social_icon a.icon { background-color: var(--brandColor) !important; border-radius: 50% !important; } .et_pb_social_media_follow .et_pb_social_icon a.icon:hover { filter: brightness(1.15) !important; } /* ----- Slider (Diaporama) ----- Note doctrine #70 : module historiquement banni (cliché "3 slides qui défilent"). Conservé ici pour cas spécifiques (avant/après portfolio, etc.) */ .et_pb_slider { border-radius: var(--borderRadius) !important; overflow: hidden !important; background-color: var(--backgroundLight) !important; } .et_pb_slider .et_pb_slide, .et_pb_slider .et_pb_slides, .et_pb_slider .et_pb_slide_with_image { background-color: transparent !important; background-image: none !important; } /* Désactive l'overlay noir par défaut (slider + post slider) */ .et_pb_slider_with_overlay .et_pb_slide_overlay_container, .et_pb_slider_with_text_overlay .et_pb_text_overlay_wrapper, .et_pb_bg_layout_dark.et_pb_slider_with_overlay .et_pb_slide_overlay_container, .et_pb_bg_layout_dark.et_pb_slider_with_text_overlay .et_pb_text_overlay_wrapper, .et_pb_bg_layout_light.et_pb_slider_with_overlay .et_pb_slide_overlay_container, .et_pb_bg_layout_light.et_pb_slider_with_text_overlay .et_pb_text_overlay_wrapper { background-color: transparent !important; } /* Désactive les animations d'apparition Divi (cliché) */ .et_pb_slider .et_pb_slide_title, .et_pb_slider .et_pb_slide_content, .et_pb_slider .et_pb_slide_description, .et_pb_slider .et_pb_slide_image, .et_pb_slider .et_pb_slide_video, .et_pb_slider .et_pb_more_button, .et_pb_slider .et_pb_button { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } /* Couleur des titres et contenu en mode light */ .et_pb_slider .et_pb_slide_title, .et_pb_slider h1.et_pb_slide_title, .et_pb_slider h2.et_pb_slide_title, .et_pb_slider h3.et_pb_slide_title, .et_pb_slider .et_pb_slide_title a, .et_pb_slider .et_pb_slide_content, .et_pb_slider .et_pb_slide_content p { color: var(--primaryDark) !important; text-shadow: none !important; } /* Flèches de navigation : ronds blancs avec ombre */ .et-pb-slider-arrows .et-pb-arrow-prev, .et-pb-slider-arrows .et-pb-arrow-next { background-color: var(--white) !important; border-radius: 999px !important; box-shadow: var(--ombrePortee) !important; opacity: 1 !important; } .et-pb-slider-arrows .et-pb-arrow-prev { left: 20px !important; } .et-pb-slider-arrows .et-pb-arrow-next { right: 20px !important; } .et-pb-slider-arrows .et-pb-arrow-prev:hover, .et-pb-slider-arrows .et-pb-arrow-next:hover { filter: brightness(0.95) !important; } .et-pb-slider-arrows .et-pb-arrow-prev:before, .et-pb-slider-arrows .et-pb-arrow-next:before { color: var(--brandColor) !important; } /* Dots de navigation */ .et_pb_slider .et-pb-controllers a { background-color: color-mix(in srgb, var(--primaryDark) 25%, transparent) !important; border-radius: 50% !important; } .et_pb_slider .et-pb-controllers .et-pb-active-control { background-color: var(--brandColor) !important; } /* Bouton dans slider */ .et_pb_slider .et_pb_more_button, .et_pb_slider .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* ----- Slider d'articles (Post Slider) ----- */ .et_pb_post_slider { border-radius: var(--borderRadius) !important; overflow: hidden !important; background-color: var(--backgroundLight) !important; } .et_pb_post_slider .et_pb_slide, .et_pb_post_slider .et_pb_slides, .et_pb_post_slider .et_pb_slide_with_image { background-color: transparent !important; background-image: none !important; } /* Désactive les animations d'apparition */ .et_pb_post_slider .et_pb_slide_title, .et_pb_post_slider .et_pb_slide_content, .et_pb_post_slider .et_pb_slide_description, .et_pb_post_slider .et_pb_slide_image, .et_pb_post_slider .post-meta, .et_pb_post_slider .et_pb_more_button, .et_pb_post_slider .et_pb_button { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } .et_pb_post_slider .et_pb_slide_title, .et_pb_post_slider h1.et_pb_slide_title, .et_pb_post_slider h2.et_pb_slide_title, .et_pb_post_slider h3.et_pb_slide_title, .et_pb_post_slider .et_pb_slide_title a, .et_pb_post_slider .et_pb_slide_content, .et_pb_post_slider .et_pb_slide_content p { color: var(--primaryDark) !important; text-shadow: none !important; } /* Espacement entre les éléments du slide */ .et_pb_post_slider .et_pb_slide_title, .et_pb_slider .et_pb_slide_title { margin-bottom: var(--sizeM) !important; } .et_pb_post_slider .post-meta, .et_pb_slider .post-meta { margin-bottom: var(--sizeM) !important; } .et_pb_post_slider .et_pb_slide_content, .et_pb_slider .et_pb_slide_content { margin-bottom: var(--sizeL) !important; } /* Post-meta */ .et_pb_post_slider .post-meta, .et_pb_post_slider .post-meta span { color: var(--primaryDark) !important; } /* Flèches post slider */ .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-prev, .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-next { background-color: var(--white) !important; border-radius: 999px !important; box-shadow: var(--ombrePortee) !important; opacity: 1 !important; left: auto !important; right: auto !important; } .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-prev { left: 20px !important; } .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-next { right: 20px !important; } .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-prev:hover, .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-next:hover { filter: brightness(0.95) !important; } .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-prev:before, .et_pb_post_slider .et-pb-slider-arrows .et-pb-arrow-next:before { color: var(--brandColor) !important; } /* Dots */ .et_pb_post_slider .et-pb-controllers a { background-color: color-mix(in srgb, var(--primaryDark) 25%, transparent) !important; border-radius: 50% !important; } .et_pb_post_slider .et-pb-controllers .et-pb-active-control { background-color: var(--brandColor) !important; } /* Bouton dans post slider */ .et_pb_post_slider .et_pb_more_button, .et_pb_post_slider .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* ----- Tableau des tarifs (Pricing Tables) ----- Cards verticales : header dark + prix en grand + liste de features. Variante featured (mise en avant) avec fond complet primaryDark. */ .et_pb_pricing_tables { background-color: transparent !important; gap: var(--module-gutter-grid) !important; } .et_pb_pricing_table, .et_pb_pricing .et_pb_pricing_table { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; border: none !important; overflow: hidden !important; } /* Header du tableau */ .et_pb_pricing_table .et_pb_pricing_heading { background-color: var(--primaryDark) !important; border: none !important; } .et_pb_pricing_table .et_pb_pricing_title { color: var(--white) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } .et_pb_pricing_table .et_pb_best_value { background-color: transparent !important; color: var(--white) !important; font-weight: var(--weightStrong) !important; } /* Prix — seul séparateur : border-bottom sous le prix */ .et_pb_pricing_table .et_pb_pricing_content_top { background-color: var(--backgroundLight) !important; border-bottom: 1px solid color-mix(in srgb, var(--brandColor) 30%, transparent) !important; } .et_pb_pricing_table .et_pb_sum { color: var(--brandColor) !important; font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; } .et_pb_pricing_table .et_pb_dollar_sign, .et_pb_pricing_table .et_pb_frequency { color: var(--primaryDark) !important; } /* Liste de features */ .et_pb_pricing_table .et_pb_pricing_content { background-color: var(--backgroundLight) !important; } .et_pb_pricing_table ul.et_pb_pricing li, .et_pb_pricing_table .et_pb_pricing_content ul li { color: var(--primaryDark) !important; } .et_pb_pricing_table ul.et_pb_pricing li.et_pb_not_available { opacity: 0.4 !important; text-decoration: line-through !important; } .et_pb_pricing_table .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* Featured / Highlighted : fond complet primaryDark, transform désactivé */ .et_pb_pricing_table.et_pb_featured_table { background-color: var(--primaryDark) !important; transform: none !important; } .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_heading, .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_content_top, .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_content { background-color: var(--primaryDark) !important; } .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_title, .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign, .et_pb_pricing_table.et_pb_featured_table .et_pb_frequency, .et_pb_pricing_table.et_pb_featured_table ul.et_pb_pricing li, .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_content ul li { color: var(--white) !important; } .et_pb_pricing_table.et_pb_featured_table .et_pb_sum { color: var(--brandColor) !important; } /* Puces des features — override couleur bleu Divi natif (#2ea3f2) */ .et_pb_pricing li > span:before { border-color: var(--brandColor) !important; } .et_pb_pricing li.et_pb_not_available > span:before { border-color: var(--secondaryLight) !important; } /* ----- Témoignage (Testimonial) ----- Card avec gros guillemet décoratif en haut-gauche + citation italique + auteur en surTitre */ .et_pb_testimonial { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; border: none !important; position: relative !important; } /* Gros guillemet décoratif (ouvrant) en arrière-plan */ .et_pb_testimonial:before { content: "\201c" !important; font-family: var(--fontHeading) !important; font-size: 5rem !important; line-height: 1 !important; color: var(--brandColor) !important; opacity: 0.15 !important; position: absolute !important; top: var(--sizeM) !important; left: var(--sizeL) !important; font-weight: var(--weightTitle) !important; background: none !important; } .et_pb_testimonial .et_pb_testimonial_description { border: none !important; background: none !important; } /* Citation : italique pour distinguer de la prose */ .et_pb_testimonial .et_pb_testimonial_description p, .et_pb_testimonial p { font-size: 1rem !important; line-height: 1.7em !important; color: var(--primaryDark) !important; font-style: italic !important; position: relative !important; z-index: 1 !important; } /* Photo de l'auteur : ronde, sans bordure ni ombre */ .et_pb_testimonial .et_pb_testimonial_portrait { border-radius: 50% !important; overflow: hidden !important; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; flex-shrink: 0 !important; } .et_pb_testimonial .et_pb_testimonial_portrait img { border-radius: 50% !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .et_pb_testimonial .et_pb_testimonial_portrait:before { box-shadow: none !important; -webkit-box-shadow: none !important; } /* Nom de l'auteur */ .et_pb_testimonial .et_pb_testimonial_author { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; font-size: 0.9375rem !important; color: var(--brandColor) !important; margin-top: var(--sizeS) !important; } /* Société / role : style surTitre */ .et_pb_testimonial .et_pb_testimonial_company, .et_pb_testimonial .et_pb_testimonial_company a { font-size: 0.8rem !important; font-weight: var(--weightStrong) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--brandColor) !important; text-decoration: none !important; } @media (max-width: 767px) { /* Masque le gros guillemet en mobile pour gagner de la place */ .et_pb_testimonial:before { display: none !important; } } /* ----- Vidéo ----- */ .et_pb_video .et_pb_video_wrap { border-radius: var(--borderRadius); overflow: hidden; } .et_pb_video .fluid-width-video-wrapper, .et_pb_video .fluid-width-video-wrapper iframe { border-radius: var(--borderRadius); overflow: hidden; } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ SECTIONS CTA SPÉCIALES ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* === CTA FLOTTANT (cta-floating) === Section bg-light avec une row carte dark qui flotte au milieu. Usage : ajouter la classe 'cta-floating' sur la section. Le padding interne est centralisé dans Espacements (--sizeL). */ .cta-floating { background-color: var(--backgroundLight) !important; } .cta-floating > .et_pb_row { background-color: var(--primaryDark) !important; border-radius: calc(var(--borderRadius) * 2) !important; } .cta-floating > .et_pb_row .et_pb_column, .cta-floating > .et_pb_row .et_pb_button_module_wrapper, .cta-floating > .et_pb_row .et_pb_text_inner { text-align: center !important; } .cta-floating > .et_pb_row .et_pb_module p, .cta-floating > .et_pb_row .et_pb_module span, .cta-floating > .et_pb_row .et_pb_module h1, .cta-floating > .et_pb_row .et_pb_module h2 { color: var(--white) !important; } .cta-floating > .et_pb_row .surTitre { color: var(--brandColor) !important; } .cta-floating > .et_pb_row .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } /* Bouton secondaire : fond backgroundDark (plus sombre que la carte primaryDark) pour créer du contraste */ .cta-floating > .et_pb_row .btnSecondary { background-color: var(--backgroundDark) !important; color: var(--white) !important; border-color: var(--backgroundDark) !important; } .cta-floating > .et_pb_row .btnSecondary:hover { background-color: var(--white) !important; color: var(--brandColor) !important; } @media (max-width: 767px) { /* Mobile : pleine largeur, radius réduit */ .cta-floating > .et_pb_row { border-radius: var(--borderRadius) !important; max-width: none !important; } } /* === CTA DÉGRADÉ GREFFÉ AU FOOTER (cta-gradient) === Section avec dégradé verticalement coupé en deux : backgroundLight (haut) / backgroundDark (bas). La row dark flotte par-dessus, créant un effet de transition vers le footer. Usage : ajouter la classe 'cta-gradient' sur la section, placée juste avant le footer. Le padding interne est centralisé dans Espacements (--sizeL). */ .cta-gradient { background: linear-gradient(to bottom, var(--secondaryDark) 50%, var(--backgroundDark) 50%) !important; } .et_pb_section.cta-gradient > .et_pb_row { background-color: var(--primaryDark) !important; border-radius: var(--borderRadius)!important; } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ SURFACES — Couleurs uniquement ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* ----- bg-gray ----- Surface neutre intermédiaire entre le light et le dark. Sur cette surface, les modules normalement en backgroundLight passent en blanc pur. */ .bg-gray { background-color: var(--backgroundLight) !important; } .bg-gray .et_pb_module, .et_pb_row.bg-gray, .et_pb_column.bg-gray, .bg-gray .et_pb_module p, .bg-gray .et_pb_module span, .bg-gray .et_pb_module h1, .bg-gray .et_pb_module h2, .bg-gray .et_pb_module h3, .bg-gray .et_pb_module h4, .bg-gray .et_pb_module h5, .bg-gray .et_pb_module h6 { color: var(--primaryDark); } /* Boutons sur bg-gray */ .bg-gray .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } .bg-gray .btnSecondary { background-color: transparent !important; color: var(--brandColor) !important; border-color: var(--brandColor) !important; } .bg-gray .btnSecondary:after { color: var(--brandColor) !important; } .bg-gray .btnSecondary:hover { background-color: var(--brandColor) !important; color: var(--white) !important; } .bg-gray .btnSecondary:hover:after { color: var(--white) !important; } .bg-gray .btnLink { color: var(--brandColor) !important; background-color: transparent !important; border-color: transparent !important; } .bg-gray .btnLink:hover { color: var(--brandColor) !important; background-color: transparent !important; border-color: transparent !important; } /* Formulaires : input en blanc pur */ .bg-gray input, .bg-gray textarea { background-color: var(--white) !important; } /* Toggle */ .bg-gray .et_pb_toggle { border-bottom-color: var(--secondaryLight) !important; } .bg-gray .et_pb_toggle_open, .bg-gray .et_pb_toggle_close { background-color: transparent !important; } .bg-gray .et_pb_toggle_open .et_pb_toggle_title, .bg-gray .et_pb_toggle_open h5.et_pb_toggle_title { color: var(--primaryDark) !important; } .bg-gray .et_pb_toggle_close .et_pb_toggle_title, .bg-gray .et_pb_toggle_close h5.et_pb_toggle_title { color: var(--secondaryDark) !important; } /* Blog */ .bg-gray .et_pb_post { background-color: var(--white) !important; } /* Blurb */ .bg-gray .et_pb_blurb { background-color: var(--white) !important; } /* Portfolio filtrable — filtres inactifs en blanc */ .bg-gray .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:not(.active) { background-color: var(--white) !important; } /* Onglets */ .bg-gray .et_pb_tabs { background-color: var(--white) !important; } .bg-gray .et_pb_tabs .et_pb_tabs_controls { background-color: var(--secondaryLight) !important; } .bg-gray .et_pb_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active) a { color: var(--white) !important; opacity: 1 !important; } .bg-gray .et_pb_tabs .et_pb_tab { background-color: var(--white) !important; } .bg-gray .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a { background-color: var(--white) !important; } /* Personne */ .bg-gray .et_pb_team_member { background-color: var(--white) !important; } /* Témoignages */ .bg-gray .et_pb_testimonial { background-color: var(--white) !important; } /* Pricing tables */ .bg-gray .et_pb_pricing_table, .bg-gray .et_pb_pricing_table .et_pb_pricing_content_top, .bg-gray .et_pb_pricing_table .et_pb_pricing_content { background-color: var(--white) !important; } /* Newsletter / Subscribe */ .bg-gray .et_pb_newsletter, .bg-gray .et_pb_subscribe { background-color: var(--white) !important; } .bg-gray .et_pb_newsletter input[type="text"], .bg-gray .et_pb_newsletter input[type="email"], .bg-gray .et_pb_subscribe input[type="text"], .bg-gray .et_pb_subscribe input[type="email"] { background-color: var(--backgroundLight) !important; } /* Login */ .bg-gray .et_pb_login { background-color: var(--white) !important; } .bg-gray .et_pb_login input[type="text"], .bg-gray .et_pb_login input[type="password"], .bg-gray .et_pb_login input[type="email"] { background-color: var(--backgroundLight) !important; } /* Audio */ .bg-gray .et_pb_audio_module { --gcid-primary-color: var(--white) !important; background-color: var(--white) !important; } /* Search */ .bg-gray .et_pb_search .et_pb_searchform input.et_pb_s { background-color: var(--white) !important; } /* Bannière (Fullwidth Header) */ .bg-gray .et_pb_fullwidth_header { background-color: var(--white) !important; } .bg-gray .et_pb_fullwidth_header .et_pb_button_two.et_pb_button_two, .bg-gray .et_pb_fullwidth_header.et_pb_fullwidth_header .et_pb_button_two { background-color: transparent !important; color: var(--brandColor) !important; border: 2px solid var(--brandColor) !important; } .bg-gray .et_pb_fullwidth_header .et_pb_button_two.et_pb_button_two:after, .bg-gray .et_pb_fullwidth_header.et_pb_fullwidth_header .et_pb_button_two:after { color: var(--brandColor) !important; } .bg-gray .et_pb_fullwidth_header .et_pb_button_two.et_pb_button_two:hover, .bg-gray .et_pb_fullwidth_header.et_pb_fullwidth_header .et_pb_button_two:hover { background-color: var(--brandColor) !important; color: var(--white) !important; } .bg-gray .et_pb_fullwidth_header .et_pb_button_two.et_pb_button_two:hover:after, .bg-gray .et_pb_fullwidth_header.et_pb_fullwidth_header .et_pb_button_two:hover:after { color: var(--white) !important; } /* Slider sur bg-gray : fond blanc pur */ .bg-gray .et_pb_slider { background-color: var(--white) !important; } /* Post Slider sur bg-gray */ .bg-gray .et_pb_post_slider { background-color: var(--white) !important; } /* ----- bg-dark ----- Surface sombre forte (secondaryDark). Tous les textes passent en blanc, les icônes/accents en brandColor. Inverse aussi les fonds des modules card (post, blurb, tabs, etc.) en backgroundDark. */ .bg-dark { background-color: var(--secondaryDark) !important; } .bg-dark .et_pb_module, .et_pb_row.bg-dark, .et_pb_column.bg-dark, .bg-dark .et_pb_module p, .bg-dark .et_pb_module span, .bg-dark .et_pb_module h1, .bg-dark .et_pb_module h2, .bg-dark .et_pb_module h3, .bg-dark .et_pb_module h4, .bg-dark .et_pb_module h5, .bg-dark .et_pb_module h6, .bg-dark .et_pb_module .et_pb_text_inner p, .bg-dark .et_pb_module .et_pb_text_inner span { color: var(--white) !important; } .bg-dark .et_pb_module a { color: var(--secondaryLight); } .bg-dark .et_pb_portfolio_item .et_pb_module_header a { color: var(--white) !important; } /* Boutons sur bg-dark */ .bg-dark .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } .bg-dark .et_pb_button:hover { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; filter: brightness(1.12) !important; } /* Bouton secondaire : fond backgroundDark (plus sombre que la surface secondaryDark) */ .bg-dark .btnSecondary { background-color: var(--backgroundDark) !important; color: var(--white) !important; border-color: var(--backgroundDark) !important; } .bg-dark .btnSecondary:after { color: var(--brandColor) !important; } .bg-dark .btnSecondary:hover { background-color: var(--white) !important; color: var(--brandColor) !important; border-color: var(--white) !important; } .bg-dark .btnSecondary:hover:after { color: var(--brandColor) !important; } .bg-dark .btnLink { color: var(--white) !important; background-color: transparent !important; border-color: transparent !important; } .bg-dark .btnLink:hover { color: var(--white) !important; background-color: transparent !important; border-color: transparent !important; } /* Séparateurs : couleur primaryDark (légèrement différente du fond pour rester visible) */ .bg-dark hr, .bg-dark .et_pb_divider:before { border-color: var(--primaryDark) !important; } /* Formulaires : fond backgroundDark, texte blanc */ .bg-dark input, .bg-dark textarea { background-color: var(--backgroundDark) !important; color: var(--white) !important; } .bg-dark input::placeholder, .bg-dark textarea::placeholder { color: var(--white) !important; opacity: 1 !important; } /* Toggle / Accordéon sur bg-dark */ .bg-dark .et_pb_toggle { border-bottom-color: var(--white) !important; } .bg-dark .et_pb_toggle_open .et_pb_toggle_title, .bg-dark .et_pb_toggle_open h5.et_pb_toggle_title, .bg-dark .et_pb_toggle_close .et_pb_toggle_title, .bg-dark .et_pb_toggle_close h5.et_pb_toggle_title, .bg-dark .et_pb_toggle_content p { color: var(--white) !important; } .bg-dark .et_pb_toggle_title:before { color: var(--brandColor) !important; } /* Portfolio filtrable sur bg-dark */ .bg-dark .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background-color: var(--backgroundDark) !important; color: var(--white) !important; } .bg-dark .et_pb_portfolio_item h3, .bg-dark .et_pb_portfolio_item h3.et_pb_module_header, .bg-dark .et_pb_portfolio_item .et_pb_module_header, .bg-dark .et_pb_portfolio_item .et_pb_module_header a { color: var(--white) !important; } .bg-dark .et_pb_portfolio_item .post-meta { color: var(--backgroundDark) !important; } .bg-dark .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background-color: var(--brandColor) !important; color: var(--white) !important; } /* Blog sur bg-dark */ .bg-dark .et_pb_post { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_post .entry-title a, .bg-dark .et_pb_post .post-content p { color: var(--white) !important; } /* Blurb sur bg-dark */ .bg-dark .et_pb_blurb { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_blurb .et_pb_module_header, .bg-dark .et_pb_blurb .et_pb_blurb_container p { color: var(--white) !important; } /* Tabs sur bg-dark */ .bg-dark .et_pb_tabs { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_tabs .et_pb_tabs_controls { background-color: var(--primaryDark) !important; } .bg-dark .et_pb_tabs .et_pb_tabs_controls li a { color: var(--white) !important; } .bg-dark .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a, .bg-dark .et_pb_tabs .et_pb_tab { background-color: var(--backgroundDark) !important; color: var(--white) !important; } /* Team Member sur bg-dark */ .bg-dark .et_pb_team_member { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_team_member h4, .bg-dark .et_pb_team_member .et_pb_team_member_description p { color: var(--white) !important; } .bg-dark .et_pb_team_member .et_pb_member_position, .bg-dark .et_pb_team_member .et_pb_team_member_description .et_pb_member_position { color: var(--brandColor) !important; } .bg-dark .et_pb_team_member .et_pb_member_social_links { border-top-color: var(--primaryDark) !important; } .bg-dark .et_pb_team_member .et_pb_member_social_links a { color: var(--white) !important; } /* Testimonial sur bg-dark */ .bg-dark .et_pb_testimonial { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_testimonial p { color: var(--white) !important; } .bg-dark .et_pb_testimonial:before { opacity: 0.4 !important; } .bg-dark .et_pb_testimonial_portrait:before { background: transparent !important; } .bg-dark .et_pb_testimonial .et_pb_testimonial_author { color: var(--brandColor) !important; } .bg-dark .et_pb_testimonial .et_pb_testimonial_company, .bg-dark .et_pb_testimonial .et_pb_testimonial_company a { color: var(--white) !important; opacity: 0.6 !important; } .bg-dark .et_pb_testimonial .et_pb_testimonial_portrait { border-color: var(--primaryDark) !important; } /* Pagination sur bg-dark */ .bg-dark .et_pb_post_nav a, .bg-dark .wp-pagenavi a, .bg-dark .wp-pagenavi span.current, .bg-dark .wp-pagenavi span.pages, .bg-dark .wp-pagenavi span.extend { color: var(--white) !important; } .bg-dark .wp-pagenavi a:hover { color: var(--brandColor) !important; } /* Pricing tables sur bg-dark */ .bg-dark .et_pb_pricing_table, .bg-dark .et_pb_pricing_table .et_pb_pricing_content_top, .bg-dark .et_pb_pricing_table .et_pb_pricing_content { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_pricing_table .et_pb_pricing_title, .bg-dark .et_pb_pricing_table .et_pb_dollar_sign, .bg-dark .et_pb_pricing_table .et_pb_frequency, .bg-dark .et_pb_pricing_table ul.et_pb_pricing li, .bg-dark .et_pb_pricing_table .et_pb_pricing_content ul li { color: var(--white) !important; } /* Newsletter / Subscribe sur bg-dark */ .bg-dark .et_pb_newsletter, .bg-dark .et_pb_subscribe { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_newsletter h1, .bg-dark .et_pb_newsletter h2, .bg-dark .et_pb_newsletter h3, .bg-dark .et_pb_newsletter p, .bg-dark .et_pb_newsletter .et_pb_newsletter_description, .bg-dark .et_pb_newsletter .et_pb_newsletter_description_content, .bg-dark .et_pb_subscribe h1, .bg-dark .et_pb_subscribe h2, .bg-dark .et_pb_subscribe h3, .bg-dark .et_pb_subscribe p { color: var(--white) !important; } .bg-dark .et_pb_newsletter input[type="text"], .bg-dark .et_pb_newsletter input[type="email"], .bg-dark .et_pb_subscribe input[type="text"], .bg-dark .et_pb_subscribe input[type="email"] { background-color: var(--secondaryDark) !important; color: var(--white) !important; } .bg-dark .et_pb_newsletter input::placeholder, .bg-dark .et_pb_subscribe input::placeholder { color: var(--white) !important; opacity: 0.8 !important; } /* Login sur bg-dark */ .bg-dark .et_pb_login { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_login h1, .bg-dark .et_pb_login h2, .bg-dark .et_pb_login h3, .bg-dark .et_pb_login p, .bg-dark .et_pb_login label, .bg-dark .et_pb_login .et_pb_login_form_label, .bg-dark .et_pb_login .et_pb_newloginform_container p, .bg-dark .et_pb_login .et_pb_login_form_description { color: var(--white) !important; } .bg-dark .et_pb_login input[type="text"], .bg-dark .et_pb_login input[type="password"], .bg-dark .et_pb_login input[type="email"] { background-color: var(--secondaryDark) !important; color: var(--white) !important; } .bg-dark .et_pb_login input::placeholder { color: var(--white) !important; opacity: 0.8 !important; } /* Audio sur bg-dark */ .bg-dark .et_pb_audio_module { --gcid-primary-color: var(--backgroundDark) !important; background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_audio_module h1, .bg-dark .et_pb_audio_module h2, .bg-dark .et_pb_audio_module h3, .bg-dark .et_pb_audio_module p, .bg-dark .et_pb_audio_module .et_audio_container, .bg-dark .et_pb_audio_module .et_pb_audio_module_meta, .bg-dark .et_pb_audio_module .et_pb_audio_module_title { color: var(--white) !important; } .bg-dark .et_pb_audio_module .mejs-time, .bg-dark .et_pb_audio_module .mejs-currenttime, .bg-dark .et_pb_audio_module .mejs-duration, .bg-dark .et_pb_audio_module .mejs-button button, .bg-dark .et_pb_audio_module .mejs-button button::before, .bg-dark .et_pb_audio_module .mejs-playpause-button button::before, .bg-dark .et_pb_audio_module .mejs-volume-button button::before { color: var(--white) !important; } .bg-dark .et_pb_audio_module .mejs-time-rail .mejs-time-total, .bg-dark .et_pb_audio_module .mejs-horizontal-volume-total { background: color-mix(in srgb, var(--white) 20%, transparent) !important; } .bg-dark .et_pb_audio_module .mejs-time-rail .mejs-time-loaded { background: color-mix(in srgb, var(--white) 35%, transparent) !important; } /* Search sur bg-dark */ .bg-dark .et_pb_search .et_pb_searchform input.et_pb_s { background-color: var(--backgroundDark) !important; color: var(--white) !important; } .bg-dark .et_pb_search .et_pb_searchform input.et_pb_s::placeholder { color: var(--white) !important; opacity: 0.8 !important; } /* Bannière (Fullwidth Header) sur bg-dark */ .bg-dark .et_pb_fullwidth_header { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead, .bg-dark .et_pb_fullwidth_header .et_pb_header_content, .bg-dark .et_pb_fullwidth_header .et_pb_fullwidth_header_container p { color: var(--white) !important; } .bg-dark .et_pb_fullwidth_header .et_pb_button_two { background-color: var(--backgroundDark) !important; color: var(--white) !important; border-color: var(--backgroundDark) !important; } .bg-dark .et_pb_fullwidth_header .et_pb_button_two:after { color: var(--brandColor) !important; } .bg-dark .et_pb_fullwidth_header .et_pb_button_two:hover { background-color: var(--white) !important; color: var(--brandColor) !important; border-color: var(--white) !important; } .bg-dark .et_pb_fullwidth_header .et_pb_button_two:hover:after { color: var(--brandColor) !important; } /* Slider sur bg-dark */ .bg-dark .et_pb_slider { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_slider .et_pb_slide_title, .bg-dark .et_pb_slider h1.et_pb_slide_title, .bg-dark .et_pb_slider h2.et_pb_slide_title, .bg-dark .et_pb_slider h3.et_pb_slide_title, .bg-dark .et_pb_slider .et_pb_slide_title a, .bg-dark .et_pb_slider .et_pb_slide_content, .bg-dark .et_pb_slider .et_pb_slide_content p { color: var(--white) !important; } .bg-dark .et_pb_slider .et-pb-controllers a { background-color: color-mix(in srgb, var(--white) 30%, transparent) !important; } .bg-dark .et_pb_slider .et-pb-controllers .et-pb-active-control { background-color: var(--brandColor) !important; } /* Post Slider sur bg-dark */ .bg-dark .et_pb_post_slider { background-color: var(--backgroundDark) !important; } .bg-dark .et_pb_post_slider .et_pb_slide_title, .bg-dark .et_pb_post_slider h1.et_pb_slide_title, .bg-dark .et_pb_post_slider h2.et_pb_slide_title, .bg-dark .et_pb_post_slider h3.et_pb_slide_title, .bg-dark .et_pb_post_slider .et_pb_slide_title a, .bg-dark .et_pb_post_slider .et_pb_slide_content, .bg-dark .et_pb_post_slider .et_pb_slide_content p, .bg-dark .et_pb_post_slider .post-meta, .bg-dark .et_pb_post_slider .post-meta span { color: var(--white) !important; } .bg-dark .et_pb_post_slider .et-pb-controllers a { background-color: color-mix(in srgb, var(--white) 30%, transparent) !important; } .bg-dark .et_pb_post_slider .et-pb-controllers .et-pb-active-control { background-color: var(--brandColor) !important; } /* Carrousel de groupe — dots sur fond dark : opacité plus forte sur l'inactif */ .bg-dark .et_pb_group_carousel .et_pb_group_carousel_dot { background-color: color-mix(in srgb, var(--white) 30%, transparent) !important; } .bg-dark .et_pb_group_carousel .et_pb_group_carousel_dot.active, .bg-dark .et_pb_group_carousel .et_pb_group_carousel_dot_active, .bg-dark .et_pb_group_carousel .et_pb_group_carousel_dot[data-active="true"] { background-color: var(--brandColor) !important; } /* Post Title sur bg-dark */ .bg-dark .et_pb_post_title .entry-title, .bg-dark .et_pb_post_title .et_pb_title_container h1, .bg-dark .et_pb_post_title .et_pb_title_container h2, .bg-dark .et_pb_post_title .et_pb_title_meta_container, .bg-dark .et_pb_post_title .et_pb_title_meta_container p, .bg-dark .et_pb_post_title .et_pb_title_meta_container span { color: var(--white) !important; } .bg-dark .et_pb_post_title .et_pb_title_meta_container a { color: var(--brandColor) !important; } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ ANIMATIONS ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* --- Animation d'apparition au scroll (Apple-style) --- Slide-up + fade-in lent et fluide sur chaque colonne Divi. Stagger en cascade dans les rows multi-colonnes (délai progressif). Exclusions : 1re row de la 1re section (hero) + footer. Pilotée par IntersectionObserver dans effets.js (.is-visible). */ .et_pb_column { opacity: 0; transform: translateY(60px); transition: opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1), transform 1800ms cubic-bezier(0.16, 1, 0.3, 1); } .et_pb_column.is-visible { opacity: 1; transform: translateY(0); } /* Desktop : stagger 120ms → 180ms */ .et_pb_row .et_pb_column:nth-child(1).is-visible { transition-delay: 0ms, 0ms; } .et_pb_row .et_pb_column:nth-child(2).is-visible { transition-delay: 180ms, 180ms; } .et_pb_row .et_pb_column:nth-child(3).is-visible { transition-delay: 360ms, 360ms; } .et_pb_row .et_pb_column:nth-child(4).is-visible { transition-delay: 540ms, 540ms; } .et_pb_row .et_pb_column:nth-child(5).is-visible { transition-delay: 720ms, 720ms; } .et_pb_row .et_pb_column:nth-child(6).is-visible { transition-delay: 900ms, 900ms; } /* Exclusions : hero (1re row de la 1re section) + footer */ .et_pb_section:first-of-type .et_pb_row:first-of-type .et_pb_column, footer .et_pb_column, .footer-columns .et_pb_column, .footer-bottom-bar .et_pb_column { opacity: 1; transform: none; transition: none; transition-delay: 0ms !important; } /* Animation adaptée mobile : durée plus longue, distance réduite, stagger réduit */ @media (max-width: 767px) { .et_pb_column { transform: translateY(35px); transition: opacity 2100ms cubic-bezier(0.16, 1, 0.3, 1), transform 2100ms cubic-bezier(0.16, 1, 0.3, 1); } /* Mobile : stagger 80ms → 120ms (à l'intérieur du @media (max-width: 767px)) */ .et_pb_row .et_pb_column:nth-child(1).is-visible { transition-delay: 0ms, 0ms; } .et_pb_row .et_pb_column:nth-child(2).is-visible { transition-delay: 120ms, 120ms; } .et_pb_row .et_pb_column:nth-child(3).is-visible { transition-delay: 240ms, 240ms; } .et_pb_row .et_pb_column:nth-child(4).is-visible { transition-delay: 360ms, 360ms; } .et_pb_row .et_pb_column:nth-child(5).is-visible { transition-delay: 480ms, 480ms; } .et_pb_row .et_pb_column:nth-child(6).is-visible { transition-delay: 600ms, 600ms; } } /* Respect des préférences d'accessibilité */ @media (prefers-reduced-motion: reduce) { .et_pb_column { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } } /* Désactivation totale de l'animation dans le builder Divi (édition front-end) */ body.et-fb .et_pb_column, body.et-fb .et_pb_column.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ PAGES SPÉCIALES ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* ----- Page 404 ----- Cible la page WP avec ID 5001 (page custom 404) ET la classe .page-404 (template par défaut WP). Centrage vertical + horizontal du contenu, hauteur min 70vh */ .page-id-5001 #main-content .et_pb_section:first-of-type, .page-404 { padding-top: calc(var(--size2XL) * 2) !important; padding-bottom: calc(var(--size2XL) * 2) !important; min-height: 70vh !important; display: flex !important; align-items: center !important; background-color: var(--backgroundLight) !important; } .page-id-5001 .et_pb_row, .page-404 .et_pb_row { margin: auto !important; text-align: center !important; } .page-id-5001 .et_pb_button_module_wrapper, .page-404 .et_pb_button_module_wrapper, .page-id-5001 .et_pb_text_inner, .page-404 .et_pb_text_inner { text-align: center !important; } .page-404 .et_pb_module p, .page-404 .et_pb_module h1, .page-404 .et_pb_module h2 { color: var(--primaryDark) !important; } .page-404 .et_pb_button { background-color: var(--brandColor) !important; color: var(--white) !important; border-color: var(--brandColor) !important; } @media (max-width: 767px) { .page-id-5001 #main-content .et_pb_section:first-of-type, .page-404 { min-height: 60vh !important; } /* Réduit le "404" géant en mobile (de 7rem à 5rem) */ .page-id-5001 p[style*="7rem"], .page-404 p[style*="7rem"] { font-size: 5rem !important; } .page-id-5001 h1.heroTitle, .page-id-5001 p.heroTitle, .page-404 h1.heroTitle, .page-404 p.heroTitle { font-size: 1.4rem !important; } } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ PLUGINS ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */ /* SEOPress — bandeau cookie : annule le padding-bottom du

qui cassait l'alignement vertical */ .seopress-user-consent p { padding-bottom: 0 !important; } /* ----- DiviGear Carousel : style esthétique par défaut ----- Tout module DiviGear adopte le look design system : item style blurb (image au top, padding texte, titre + sous-titre) + arrows ronds blancs. Pour le mode carrousel "décalage gauche" + hauteur égale + arrows masquées au bord, ajouter la classe .carousel-right sur la SECTION (voir plus bas). */ /* --- Item style blurb : image au top, padding texte, titre + sous-titre --- */ .dica_divi_carousel .dica-item { background-color: var(--backgroundLight) !important; border-radius: var(--borderRadius) !important; overflow: hidden !important; } .dica_divi_carouselitem { border-radius: var(--borderRadius) !important; } .dica_divi_carousel .dica-image-container, .dica_divi_carousel .dica-image-container .image { margin: 0 !important; line-height: 0 !important; display: block !important; } .dica_divi_carousel .dica-image-container img.dica-item-image { width: 100% !important; display: block !important; border-radius: 0 !important; } .dica_divi_carousel .dica-item-content { padding: var(--sizeL) !important; } .dica_divi_carousel .dica-item-content .item-title { font-family: var(--fontHeading) !important; font-weight: var(--weightTitle) !important; color: var(--primaryDark) !important; margin-bottom: var(--sizeXS) !important; } .dica_divi_carousel .dica-item-content .item-subtitle { font-family: var(--fontMain) !important; font-size: 0.75rem !important; font-weight: var(--weightStrong) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--brandColor) !important; margin: 0 !important; } /* --- Adaptations surfaces --- */ .bg-gray .dica_divi_carousel .dica-item { background-color: var(--white) !important; } .bg-dark .dica_divi_carousel .dica-item { background-color: var(--backgroundDark) !important; } .bg-dark .dica_divi_carousel .dica-item-content .item-title { color: var(--white) !important; } /* --- Arrows : ronds blancs, ombre, icône en brandColor --- */ .dica_divi_carousel .swiper-button-prev, .dica_divi_carousel .swiper-button-next { background-color: var(--white) !important; border-radius: 999px !important; width: 2.75rem !important; height: 2.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--ombrePortee) !important; transition: var(--transition) !important; cursor: pointer !important; } .dica_divi_carousel .swiper-button-prev:hover, .dica_divi_carousel .swiper-button-next:hover { filter: brightness(0.95) !important; } /* Force la couleur de l'icône (peu importe le mode de rendu : font, ::before, ::after). Sélecteurs doublés pour battre la règle inline du plugin DiviGear qui pose une couleur en dur. */ .dica_divi_carousel.dica_divi_carousel .swiper-button-prev, .dica_divi_carousel.dica_divi_carousel .swiper-button-next, .dica_divi_carousel.dica_divi_carousel .swiper-button-prev::before, .dica_divi_carousel.dica_divi_carousel .swiper-button-next::before, .dica_divi_carousel.dica_divi_carousel .swiper-button-prev::after, .dica_divi_carousel.dica_divi_carousel .swiper-button-next::after { color: var(--brandColor) !important; } /* Mobile : arrows remontées sur la zone image (taille et couleur identiques au desktop) */ @media (max-width: 980px) { .dica_divi_carousel.dica_divi_carousel .dica-container.dica-container .swiper-button-prev.swiper-button-prev, .dica_divi_carousel.dica_divi_carousel .dica-container.dica-container .swiper-button-next.swiper-button-next { width: 2.75rem !important; min-width: 2.75rem !important; max-width: 2.75rem !important; height: 2.75rem !important; min-height: 2.75rem !important; max-height: 2.75rem !important; --swiper-navigation-size: 2.75rem !important; } } /* ----- DiviGear Carousel : modificateur .carousel-auto ----- Ajoute uniquement un fondu sur les bords gauche/droit (effet logos qui apparaissent/disparaissent). Tout le reste (autoplay, loop, scroller effect, arrows off, autowidth, etc.) se règle directement dans les options du module DiviGear. */ .dica_divi_carousel.carousel-auto { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important; } /* ----- DiviGear Carousel : modificateur .carousel-right ----- Active le mode carrousel "design system" : - décalage gauche (premier slide aligné sur le contenu, débord à droite) - hauteur égale entre slides (cards alignées) - arrows masquées au bord (premier/dernier slide quand loop=off) - annulation de la flèche SVG native Swiper sur les arrows Prérequis : classe sur le MODULE DiviGear (onglet Avancé → ID & classes) + row en .fullWidth pour permettre le débord à droite. */ @media (min-width: 981px) { .dica_divi_carousel.carousel-right .swiper-container { margin-left: max(var(--section-gutter), calc((100vw - var(--maxWidth)) / 2)) !important; width: calc(100vw - max(var(--section-gutter), calc((100vw - var(--maxWidth)) / 2)) - var(--section-gutter)) !important; overflow: visible !important; } } .dica_divi_carousel.carousel-right .swiper-wrapper { align-items: stretch !important; } .dica_divi_carousel.carousel-right .swiper-slide { height: auto !important; } .dica_divi_carousel.carousel-right .dica-item { height: 100% !important; } .dica_divi_carousel.carousel-right .swiper-button-prev, .dica_divi_carousel.carousel-right .swiper-button-next { background-image: none !important; /* annule la flèche SVG native Swiper */ } .dica_divi_carousel.carousel-right .swiper-button-prev.swiper-button-disabled, .dica_divi_carousel.carousel-right .swiper-button-next.swiper-button-disabled { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } @media (max-width: 980px) { .dica_divi_carousel.carousel-right { width: 90% !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= ╔═════════════════════════════════════════════════════╗ ║ SPÉCIFIQUES PROJET ║ ║ CSS propre à un projet — à vider entre chaque ║ ║ client. Toute règle ponctuelle qui dépasse le ║ ║ design system standard va ici. ║ ╚═════════════════════════════════════════════════════╝ ======================================================== */