/* Theme Name: Consultix Child (ERCA) Template: consultix Description: Child theme for ERCA/ARCC — custom header (menu) and footer from the erca_homepage template. Version: 1.0 */ /* ================= ADAPTATIONS ERCA (header/footer) ================= */ /* ================================================================ EN-TETE DES PAGES INTERNES — reprise du design "entete.html" (carte arrondie + image de fond, menu centre, accents dorés). Tout est scope sous .erca-siteheader pour NE PAS toucher le hero de l'accueil, qui reutilise les memes classes (.gl-topbar/.gl-mlink…). NB : pas d'overflow:hidden sur .navbar (sinon le menu mobile, positionne en absolute sous la barre, serait rogne) — on arrondit plutot la couche image .nav-bg elle-meme. ================================================================ */ .erca-siteheader { background: transparent; position: relative; z-index: 30; margin-bottom: 0; } .erca-siteheader .eph-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } .erca-siteheader .navbar { position: relative; border-radius: 22px; background: #23282f; margin-top: 22px; } .erca-siteheader .nav-bg { position: absolute; inset: 0; z-index: 0; border-radius: 22px; overflow: hidden; } .erca-siteheader .nav-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; filter: brightness(.62) saturate(.85); } /* barre au-dessus de l'image */ .erca-siteheader .gl-topbar { position: relative; z-index: 3; margin: 0; padding: 10px 26px; gap: 24px; text-shadow: 0 1px 10px rgba(4, 40, 16, .25); } /* menu centre, texte blanc, soulignement doré sur l'actif */ .erca-siteheader .gl-mainmenu { overflow: visible; justify-content: center; gap: 26px; flex: 1 1 auto; } .erca-siteheader .gl-mlink { color: #fff; opacity: .92; font-size: 15.5px; font-weight: 600; } .erca-siteheader .gl-mlink:hover { opacity: 1; } .erca-siteheader .gl-mlink .gl-plus { color: #f4cf1e; font-weight: 800; } .erca-siteheader .gl-mlink.active { opacity: 1; } .erca-siteheader .gl-mlink.active::after { background: #f4cf1e; } /* bouton recherche : rond terracotta comme le template */ .erca-siteheader .gl-search { background: #AD4F2E; color: #fff; } .erca-siteheader .gl-search:hover { background: rgba(255, 255, 255, .3); } .erca-siteheader .lang-pill { color: #fff; } /* Marque : « ERCA / ARCC » + tagline alignés à GAUCHE (comme la home), mais le bloc texte reste centré verticalement à côté du logo (align-self seulement sur b/i, PAS sur le conteneur — sinon le texte remonte en haut). */ .erca-siteheader .gl-brand2-txt { text-align: left !important; align-items: flex-start !important; } .erca-siteheader .gl-brand2-txt b, .erca-siteheader .gl-brand2-txt i { width: 100% !important; text-align: left !important; align-self: flex-start !important; margin: 0 !important; } /* espace sous l'en-tete avant le contenu de la page */ .erca-content { position: relative; } /* Pages internes : un peu d'air en haut d'un bloc trop rapproché. WPBakery pose déjà `.vc_custom_1672224418569{padding-top:10px!important}` (CSS inline chargé après le nôtre) => on monte la spécificité pour passer devant. */ body .vc_custom_1672224418569 { padding-top: 45px !important; } /* ------------------------------------------------------------------ TEMPORAIRE — met en exergue le bouton « Conference Website » du rail : son infobulle (libellé) reste AFFICHÉE par défaut, pas seulement au survol. (Le libellé du rail est une infobulle absolue verte, cf. bloc « RAIL » plus bas ; on force donc son état "visible" — sélecteur #fabw pour la spécificité id, qui gagne quel que soit l'ordre.) Pour le désactiver quand la conférence sera finie : supprimer ce bloc, ou vider l'URL « Conference » (Personnaliser → ERCA → Réseaux sociaux), ce qui retire complètement l'icône. ------------------------------------------------------------------ */ /* Infobulle figée TANT QUE l'utilisateur n'a pas survolé une autre icône. Au 1er survol d'une autre icône, le JS ajoute `.conf-released` sur #fabw : l'infobulle Conference redevient alors normale (au survol uniquement) et ne se re-fige plus jusqu'au rechargement de la page. */ #fabw:not(.conf-released) .fab-soc-library .fab-lbl { opacity: 1 !important; pointer-events: auto !important; transform: translateY(-50%) translateX(0) !important; } /* Entre le breakpoint burger (1080px) et le plein desktop, le menu horizontal + la marque + les controles peuvent depasser : on resserre gaps/typo pour que tout tienne (evite un debordement horizontal ~1100-1300px). */ @media (min-width: 761px) and (max-width: 1300px) { .erca-siteheader .gl-topbar { gap: 14px; padding: 10px 18px; } .erca-siteheader .gl-mainmenu { gap: 15px; } .erca-siteheader .gl-mlink { font-size: 14px; } .erca-siteheader .gl-brand2-img { height: 64px; } } @media (max-width: 760px) { .erca-siteheader .eph-wrap { padding: 0 14px; } .erca-siteheader .gl-topbar { padding: 8px 16px; } .erca-siteheader .navbar { margin-top: 14px; } } /* ================================================================ BANDEAU "SLIDE" DES PAGES INTERNES (Revolution Slider .sliderabm/…2) Objectif : MÊME largeur que la carte du menu (1400px centré, padding 0 24px) + coins arrondis + alignement gauche exact. Problème : RevSlider place rs-module-wrap en position:absolute avec un `left` négatif calculé (ex. -134px) → décalé. On le ré-ancre à gauche du conteneur, pleine largeur. ================================================================ */ [class*="sliderabm"] { padding-top: 14px; /* >= 10px d'air entre le menu et le slide */ box-sizing: border-box; } [class*="sliderabm"] .wpb_wrapper > .vc_column-inner, [class*="sliderabm"] > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } /* La slide vit dans le conteneur de contenu du thème (~1200px) alors que le menu utilise un wrap de 1400px. Pour que la slide fasse la MÊME largeur que le menu : on sort le wrapper de son conteneur (full-bleed jusqu'à la largeur du body, scrollbar exclue via --erca-sbw) puis on recentre le slider sur la MÊME géométrie que .eph-wrap (max 1400px, gouttiere 24px). */ :root { --erca-sbw: 0px; } /* filet de securite : aucun debordement horizontal du full-bleed (la barre sticky et le rail social sont rendus hors de #page => non impactes). */ #page { overflow-x: clip; } [class*="sliderabm"] .wpb_wrapper { position: relative; margin-left: calc(50% - 50vw + (var(--erca-sbw) / 2)); margin-right: calc(50% - 50vw + (var(--erca-sbw) / 2)); } /* RevSlider place rs-module-wrap en absolute avec un left négatif calculé. On GARDE l'absolute (RevSlider réserve ainsi la hauteur du bandeau => pas de double espace en dessous) et on le recentre à la largeur du wrap du menu via left:50% + translateX(-50%). */ [class*="sliderabm"] rs-module-wrap { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; width: min(1352px, calc(100vw - var(--erca-sbw) - 48px)) !important; max-width: none !important; } [class*="sliderabm"] rs-module { width: 100% !important; max-width: 100% !important; } /* coins arrondis sur le conteneur du slider ET l'image de fond */ [class*="sliderabm"] .wpb_wrapper, [class*="sliderabm"] rs-module-wrap, [class*="sliderabm"] rs-module, [class*="sliderabm"] .rev_slider, [class*="sliderabm"] .rev_slider_wrapper { border-radius: 22px !important; overflow: hidden !important; } [class*="sliderabm"] .rev-slidebg, [class*="sliderabm"] .tp-bgimg, [class*="sliderabm"] img.rev-slidebg { border-radius: 22px !important; } @media (max-width: 760px) { [class*="sliderabm"] { padding: 2px 14px 0; } } /* ============================================================ CORRECTIF ANTI-CONSULTIX Consultix (ou le plugin mega-menu) force `display:block !important` sur les elements