/* Theme Name: ComnWeb Divi Child Theme URI: https://comnweb.fr/ Description: Thème enfant Divi standard de ComnWeb. Author: ComnWeb Author URI: https://comnweb.fr/ Template: Divi Version: 1.0.0 Text Domain: comnweb-divi-child */ /* ========================================================== COMNWEB OPS — RESPONSIVE TABLE Version 1.0 Classe Divi : cw-table-scroll ========================================================== */ .cw-table-scroll { max-width: 100%; } .cw-table-scroll .et_pb_text_inner { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .cw-table-scroll table { width: 100% !important; min-width: 700px; } /* ========================================================== COMNWEB OPS — DIVI RESPONSIVE HEADER + MOBILE ACCORDION MENU Version : 1.0 STRUCTURE DIVI ---------------------------------------------------------- Row : .header-main Column Logo : .header-logo Column Menu : .header-nav Column CTA : .header-cta Menu Module : .header-menu FONCTIONS ---------------------------------------------------------- - Header Flex responsive - Dropdown mobile pleine largeur - Hamburger → croix à l'ouverture - Sous-menus repliables - Parent du sous-menu toujours cliquable - Scroll vertical si menu trop haut - Styles mobile centralisés ========================================================== */ /* ========================================================== 1. VARIABLES ========================================================== */ .header-main { --cw-mobile-menu-bg: #ffffff; --cw-mobile-menu-hover-bg: #f7f7f7; --cw-mobile-menu-padding: 12px; --cw-mobile-link-size: 16px; --cw-mobile-sub-link-size: 14px; --cw-mobile-menu-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.12); /* * Hauteur approximative occupée par le header. * À adapter légèrement selon le projet si nécessaire. */ --cw-mobile-menu-offset: 110px; } /* ========================================================== 2. STRUCTURE DU HEADER ========================================================== */ .header-main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(10px, 2vw, 28px); } /* Logo */ .header-main .header-logo { flex: 0 0 auto; width: auto; margin: 0; } /* Navigation */ .header-main .header-nav { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; } /* CTA */ .header-main .header-cta { flex: 0 0 auto; width: auto; margin: 0; } /* Menu */ .header-main .header-menu, .header-main .header-menu .et_pb_menu_inner_container { width: 100%; } .header-main .header-menu .et_pb_menu__wrap { justify-content: flex-end; } /* CTA : empêche le retour à la ligne */ .header-main .header-cta .et_pb_button { white-space: nowrap; } /* ========================================================== 3. TABLETTE + MOBILE ========================================================== */ @media (max-width: 980px) { .header-main { position: relative; gap: 16px; overflow: visible !important; } /* Logo */ .header-main .header-logo img { width: 150px; max-width: 100%; } /* CTA */ .header-main .header-cta .et_pb_button { padding: 11px 16px; font-size: 14px; } /* ------------------------------------------------------ CONTENEURS DU MENU On neutralise leur positionnement afin que .et_mobile_menu puisse se positionner par rapport à la Row .header-main. ------------------------------------------------------ */ .header-main .header-nav, .header-main .header-menu, .header-main .header-menu .et_pb_menu_inner_container, .header-main .header-menu .et_pb_menu__wrap, .header-main .header-menu .et_mobile_nav_menu, .header-main .header-menu .mobile_nav { position: static !important; } /* ====================================================== 4. DROPDOWN MOBILE ====================================================== */ .header-main .header-menu .et_mobile_menu { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; width: 100vw !important; max-width: none !important; margin: 0 !important; padding: var(--cw-mobile-menu-padding) !important; transform: translateX(-50%); box-sizing: border-box; background: var(--cw-mobile-menu-bg); border-top: 0 !important; box-shadow: var(--cw-mobile-menu-shadow); z-index: 99999; /* -------------------------------------------------- SCROLL VERTICAL 100vh = fallback 100dvh = viewport mobile moderne -------------------------------------------------- */ max-height: calc(100vh - var(--cw-mobile-menu-offset)); max-height: calc(100dvh - var(--cw-mobile-menu-offset)); overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ====================================================== 5. HAMBURGER OUVERT → CROIX ====================================================== */ .header-menu .mobile_nav.opened .mobile_menu_bar::before { content: '\4d'; } /* ====================================================== 6. STYLE DES LIENS ====================================================== */ .header-menu .et_mobile_menu li { list-style: none; } .header-menu .et_mobile_menu li > a { padding: 10px 20px; font-size: var(--cw-mobile-link-size) !important; border-bottom: 0 !important; opacity: 1; } /* Liens des sous-menus */ .header-menu .et_mobile_menu .sub-menu li > a { font-size: var(--cw-mobile-sub-link-size) !important; } /* ====================================================== 7. SOUS-MENUS COLLAPSABLES ====================================================== */ .header-menu .et_mobile_menu li.menu-item-has-children { position: relative; } /* * Laisse la place au bouton + / − */ .header-menu .et_mobile_menu li.menu-item-has-children > a { padding-right: 56px; } /* Fermé par défaut */ .header-menu .et_mobile_menu li.menu-item-has-children > ul.sub-menu { display: none !important; visibility: visible !important; } /* Ouvert */ .header-menu .et_mobile_menu li.menu-item-has-children.cw-submenu-open > ul.sub-menu { display: block !important; } /* ====================================================== 8. BOUTON + / − ====================================================== */ .header-menu .cw-submenu-toggle { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; } /* + */ .header-menu .cw-submenu-toggle::before { content: '\4c'; font-family: 'ETmodules'; font-size: 18px; font-weight: normal; line-height: 1; } /* − */ .header-menu .cw-submenu-toggle[aria-expanded='true']::before { content: '\4d'; } /* Navigation clavier */ .header-menu .cw-submenu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } } /* ========================================================== 9. HOVER Uniquement sur les appareils possédant réellement un pointeur avec état hover. ========================================================== */ @media (max-width: 980px) and (hover: hover) { .header-menu .et_mobile_menu li > a:hover { opacity: 1; background: var(--cw-mobile-menu-hover-bg); } } /* ========================================================== 10. MOBILE ========================================================== */ @media (max-width: 767px) { .header-main { gap: 10px; } .header-main .header-logo img { width: 125px; } .header-main .header-cta .et_pb_button { padding: 9px 12px; font-size: 13px; } } /* ========================================================== 11. TYPOGRAPHIE DES SOUS-MENUS ========================================================== */ .header-menu .et-menu-nav ul.sub-menu a, .header-menu .et_mobile_menu ul.sub-menu a { font-weight: 300 !important; }