.elementor-kit-4736{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Manrope", Sans-serif;font-weight:400;}.elementor-kit-4736 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4736 h1{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-kit-4736 h2{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-kit-4736 h3{font-family:"Montserrat", Sans-serif;}.elementor-kit-4736 h4{font-family:"Montserrat", Sans-serif;}.elementor-kit-4736 h5{font-family:"Montserrat", Sans-serif;}.elementor-kit-4736 h6{font-family:"Montserrat", Sans-serif;}.elementor-kit-4736 button,.elementor-kit-4736 input[type="button"],.elementor-kit-4736 input[type="submit"],.elementor-kit-4736 .elementor-button{font-family:"Montserrat", Sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* === ALPINE-PRECISION-V33-ECHELLE === */ /* Echelle typographique v3.3 - derivee des mesures navigateur du 26/08/2026 References : #7938 (home EN) et #6706 (Zurich EN). Ne pas modifier sans remesurer. */ :root{ --hv33-font-title:'Montserrat',sans-serif; --hv33-font-body:'Manrope',sans-serif; --hv33-weight-title:600; --hv33-weight-title-accent:800; --hv33-container:1100px; --hv33-h1:102px; --hv33-h2:82px; --hv33-h3:46px; --hv33-h4:32px; --hv33-h5:24px; --hv33-h6:19px; --hv33-body:16px; --hv33-body-lg:22px; --hv33-kicker:11px; --hv33-caption:13px; --hv33-lh-tight:.95; --hv33-lh-h3:1.05; --hv33-lh-h4:1.15; --hv33-lh-h5:1.25; --hv33-lh-h6:1.3; --hv33-lh-body:1.65; --hv33-ls-tight:-.04em; --hv33-ls-h3:-.02em; --hv33-ls-h4:-.01em; } @media(max-width:1100px){:root{ --hv33-h1:72px; --hv33-h2:56px; --hv33-h3:36px; --hv33-h4:28px; --hv33-h5:22px; --hv33-h6:18px; --hv33-body-lg:20px; }} @media(max-width:700px){:root{ --hv33-h1:48px; --hv33-h2:40px; --hv33-h3:28px; --hv33-h4:24px; --hv33-h5:20px; --hv33-h6:17px; --hv33-body:15px; --hv33-body-lg:18px; --hv33-caption:12px; }} /* Pattern hero editorial : H1 descriptif au cran H3, surmonte d'un hero typographique decoratif. Utilise sur #7938 (WE BUILD). Mesure 26/08 : 36px, hors echelle, donc aligne sur le cran H3. N'affecte que .hv-hero-sr. */ .hv-hero-sr, h1.hv-hero-sr, .elementor-widget-heading.hv-hero-sr .elementor-heading-title{ font-family:var(--hv33-font-title)!important; font-size:var(--hv33-h3)!important; font-weight:var(--hv33-weight-title)!important; line-height:var(--hv33-lh-h3)!important; letter-spacing:var(--hv33-ls-h3)!important; text-transform:none!important; } /* Garde-fou : les titres restent en Montserrat quoi qu'il arrive. Le snippet #6942 force la police de corps sur body,p,li,td,th,span,div ; sans cette regle, un titre dont le texte est dans un span imbrique bascule. Regression mesuree le 26/08/2026 sur 2 H3 de #7938 (Events, Retail). */ h1,h2,h3,h4,h5,h6, h1 span,h2 span,h3 span,h4 span,h5 span,h6 span, .elementor-heading-title, .elementor-widget-heading .elementor-heading-title{ font-family:var(--hv33-font-title)!important; } /* === FIN ALPINE-PRECISION-V33-ECHELLE === */ /* ======================================== HYPERVISUAL — Alpine Precision Design System Custom CSS Global v3.0 — 31/03/2026 ======================================== */ /* Material Symbols config */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; font-size: inherit; } /* H1 hero — Bold 700 (override ExtraBold global) */ .hv-hero-title .elementor-heading-title, .elementor-widget-heading.hv-h1 .elementor-heading-title { font-weight: 700 !important; letter-spacing: -0.04em !important; text-transform: uppercase !important; line-height: 0.9 !important; } /* Text-shadow hero */ .hv-text-shadow .elementor-heading-title, .hv-text-shadow { text-shadow: 0px 4px 12px rgba(0,0,0,0.30) !important; } /* Accent bar avant titres */ .hv-accent-bar::before { content: ''; display: block; width: 48px; height: 4px; background: #0099CC; margin-bottom: 32px; } /* Nav sticky shadow */ .elementor-sticky--stuck { box-shadow: 0 12px 32px rgba(27,58,92,0.06) !important; } /* Viewfinder corners */ .hv-card-viewfinder { position: relative; overflow: visible; } .hv-card-viewfinder::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-top: 2px solid #0099CC; border-left: 2px solid #0099CC; z-index: 2; } .hv-card-viewfinder::after { content: ''; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-bottom: 2px solid #0099CC; border-right: 2px solid #0099CC; z-index: 2; } /* Inputs bottom-border style */ .hv-form-underline .elementor-field-group input, .hv-form-underline .elementor-field-group textarea, .hv-form-underline .elementor-field-group select { border: none !important; border-bottom: 2px solid #C3C6CF !important; border-radius: 0 !important; padding-left: 0 !important; background: transparent !important; transition: border-color 200ms ease; font-family: 'Manrope', sans-serif !important; } .hv-form-underline .elementor-field-group input:focus, .hv-form-underline .elementor-field-group textarea:focus { border-bottom-color: #0099CC !important; outline: none !important; box-shadow: none !important; } /* Boutons border-radius forcé 0 */ .elementor-button { border-radius: 0 !important; } /* Watermark décoratif */ .hv-watermark { position: absolute; font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: clamp(200px, 25vw, 400px); color: rgba(255,255,255,0.05); pointer-events: none; user-select: none; z-index: 0; line-height: 1; letter-spacing: -0.05em; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* ============================================================ HV TACTILE & LISIBILITE V1 — 11/08/2026 Audit responsive complet (protocole dainamics.ch §5 etendu au tactile) : mesure sur profil reel hover:none + pointer:coarse. Constat avant : 26 types de cibles sous 44px (WCAG 2.5.5 / Apple HIG), 21 types de texte sous 12px, sur toutes les pages. Ces regles n'agissent qu'en contexte tactile ou sous 1025px : le desktop pointeur fin est strictement intact. ============================================================ */ /* --- plancher AA 24x24 tous pointeurs (WCAG 2.2 SC 2.5.8). Mesure sur desktop souris : icones sociales 16x16, langues 16 de large, « Explore » 17 de haut, CTA secondaire du hero 22 de haut. La zone de clic grandit, le dessin ne bouge pas. --- */ .hv-hdr-v4 .hv-util-link,.hv-hdr-v4 .hv-util-social,.hv-hdr-v4 .hv-util-lang{ min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;} .hv-hero-cta2,.hv-cta-top,.hv-step-link,.hv-explore,.hv-ft-cta, .elementor a.e-paragraph-link-base{min-height:24px;display:inline-flex;align-items:center;} /* liens de listes du pied : 18px de haut mesures */ .hv-col a,.hv-foot-right a,.hv-foot-left a,.hv-social a{ min-height:24px;display:inline-flex;align-items:center;} .hv-social a{min-width:24px;justify-content:center;} @media (hover:none) and (pointer:coarse){ /* --- barre utilitaire : icones mesurees a 14x14 et 16x16, langues 16x23. Les reseaux cedent sous 641px : 9 cibles a 44px ne tiennent pas dans 390 (mesure : 526px exiges). Ils restent dans le pied. --- */ .hv-hdr-v4 .hv-util{height:auto !important;min-height:44px !important;} .hv-hdr-v4 .hv-util-left,.hv-hdr-v4 .hv-util-right{align-items:center !important;} .hv-hdr-v4 .hv-util-link, .hv-hdr-v4 .hv-util-social, .hv-hdr-v4 .hv-util-lang{ min-height:44px !important;min-width:44px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important;} /* --- header : logo 165x36, CTA 116x39 --- */ .hv-hdr-v4 .hv-logo{min-height:44px !important;} .hv-hdr-v4 .hv-cta{min-height:44px !important;display:inline-flex !important;align-items:center !important;} /* --- pied : colonnes 18px, mentions legales 23px, reseaux 32x32 --- */ .hv-col a,.hv-foot-right a,.hv-foot-left a{ min-height:44px !important;display:inline-flex !important;align-items:center !important; padding-right:10px !important;} .hv-social a{min-width:44px !important;min-height:44px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important;} /* --- liens de section mesures a 23px de haut --- */ .hv-cta-top,.hv-step-link,.hv-explore,.hv-hero-cta2,.hv-ft-cta{ min-height:44px !important;display:inline-flex !important;align-items:center !important;} /* --- nav desktop sur ecran tactile large (iPad Pro paysage) : boutons a 39px --- */ .hv-hdr-v4 .hv-item,.hv-hdr-v4 .hv-nav-center a,.hv-hdr-v4 .hv-dd a,.hv-hdr-v4 .hv-entry{ min-height:44px !important;display:inline-flex !important;align-items:center !important;} /* --- liens de cartes atomiques (« Explore → ») : 59x17 --- */ .elementor a.e-paragraph-link-base{ min-height:44px !important;display:inline-flex !important;align-items:center !important;} /* --- formulaires (FluentForm + Elementor) : champs et boutons a 38px --- */ .ff-el-form-control,.ff-btn,.ff-btn-submit, .elementor-field-group input,.elementor-field-group select, .elementor-field-group textarea,.elementor-button{min-height:44px !important;} } @media (hover:none) and (pointer:coarse) and (max-width:640px){ .hv-hdr-v4 .hv-util-social{display:none !important;} } /* en tactile sous 1151px (iPad Air paysage compris), les cibles a 44px plus les separateurs exigent plus que la largeur disponible : on resserre les gouttieres et on retire les traits de separation. */ @media (hover:none) and (pointer:coarse) and (max-width:1150px){ .hv-hdr-v4 .hv-util{padding:0 6px !important;gap:2px !important;} .hv-hdr-v4 .hv-util-left,.hv-hdr-v4 .hv-util-right{gap:2px !important;} .hv-hdr-v4 .hv-util-divider{display:none !important;} } /* --- plancher de lisibilite 12px, mobile et tablette (mesure : 10 a 11px). Classes triplees : les widgets portent des regles a 2 classes en !important qui gagnaient autrement la cascade. --- */ @media (max-width:1024px),(hover:none) and (pointer:coarse){ .hv-kpi-lab.hv-kpi-lab.hv-kpi-lab,.hv-stat-lab.hv-stat-lab.hv-stat-lab, .hv-mark-sub.hv-mark-sub.hv-mark-sub,.lab.lab.lab,.pill.pill.pill, .hv-wm-tech.hv-wm-tech.hv-wm-tech,.hv-stat-src.hv-stat-src.hv-stat-src, .hv-dif-slide-tag.hv-dif-slide-tag.hv-dif-slide-tag, .hv-eyebrow.hv-eyebrow.hv-eyebrow,.hv-sector.hv-sector.hv-sector, .hv-step-tag.hv-step-tag.hv-step-tag,.hv-tm-right.hv-tm-right.hv-tm-right, .hv-wm-eyebrow.hv-wm-eyebrow.hv-wm-eyebrow, .hv-dif-eyebrow.hv-dif-eyebrow.hv-dif-eyebrow, .hv-dif-hint.hv-dif-hint.hv-dif-hint,.hv-note-tag.hv-note-tag.hv-note-tag, .hv-foot-left.hv-foot-left.hv-foot-left,.hv-eye-tag.hv-eye-tag.hv-eye-tag, .hv-sw-eyebrow.hv-sw-eyebrow.hv-sw-eyebrow, .hv-col-h.hv-col-h.hv-col-h,.hv-dd-arrow.hv-dd-arrow.hv-dd-arrow, .hv-util-center.hv-util-center.hv-util-center,.hv-explore.hv-explore.hv-explore, .hv-ft-tag.hv-ft-tag.hv-ft-tag,.hv-ft-cta.hv-ft-cta.hv-ft-cta{font-size:12px !important;} /* pied et mega-menu : intitules de colonnes et mentions legales */ .hv-col h3.hv-col h3,.hv-foot-right a.hv-foot-right a{font-size:12px !important;} .hv-wrap .hv-col h3,.hv-wrap .hv-foot-right a{font-size:12px !important;} } /* === HV MOBILE V2 (11/08) — header epure + alternance Solutions === */ /* 1. HEADER MOBILE : le CTA quitte le header, le burger passe a droite. Le panneau du burger porte deja « START A PROJECT » en pleine largeur (classe .hv-mob-cta, distincte de .hv-cta : celle-ci n'est pas touchee). Mesure avant : logo 165 + burger 44 + CTA 112 = 321px pour 390. */ @media (max-width:1100px){ .hv-hdr-v4 .hv-cta{display:none !important;} .hv-hdr-v4 .hv-burger{margin-left:auto !important;} } /* === HV MENU MOBILE — ALIGNEMENTS (11/08) === Le panneau .hv-mob est un enfant direct de , hors de .hv-hdr-v4. Mesures avant, panneau ouvert (constantes a toutes les largeurs) : - croix .hv-mob-close : boite 44x44, bord droit a vw-16, centre y 36 - titre « MENU » : margin-bottom 12px -> en centrage flex la marge compte, le texte remonte de 6px. Centre y 30 au lieu de 36. - chevrons .hv-mob-chev : carre pivote qui deborde sa boite de 2.1px, centre x a vw-20.95 contre vw-38 pour la croix, soit 17px trop a droite. */ body .hv-mob .hv-mob-title{margin-bottom:0 !important;} body .hv-mob .hv-mob-chev{margin-right:17px !important;} /* === HV HEADER SUPPRESSIONS V1 (14/08) === */ /* baseline du bandeau retiree */ .hv-hdr-v4 .hv-util-center{ display:none !important; } /* X et Instagram retires ; LinkedIn et YouTube conserves. Le balisage reste en place : le pied du menu mobile s'en sert. */ .hv-hdr-v4 .hv-util-social[aria-label="X"], .hv-hdr-v4 .hv-util-social[aria-label="Instagram"]{ display:none !important; } /* === HV LANGUE NAV V1 (14/08) — petite liste ancree sur son bouton === */ .hv-hdr-v4 .hv-item-wrap[data-key="lang"]{ position:relative !important; } .hv-hdr-v4 #hv-dd-lang{ min-width:0 !important; width:96px !important; } .hv-hdr-v4 #hv-dd-lang .hv-dd-entry{ padding:9px 18px !important; letter-spacing:.06em; } .hv-hdr-v4 #hv-dd-lang .hv-dd-entry[aria-current="page"]{ color:var(--hv-cyan) !important; font-weight:600 !important; } .hv-hdr-v4 .hv-item-wrap[data-key="lang"] .hv-item{ letter-spacing:.06em; } /* la langue quitte le bandeau ; son balisage reste pour le menu mobile */ .hv-hdr-v4 .hv-util-right .hv-util-lang, .hv-hdr-v4 .hv-util-right .hv-util-divider{ display:none !important; } /* === HV HEADER V5 (14/08) — le header ne touche plus au flux === L'ancien repli changeait la hauteur du document : le navigateur recalait le scroll de 38px, ce qui refranchissait le seuil et relancait la bascule en boucle. D'ou le clignotement. Ici le bloc reserve 126px en permanence, la barre est fixed, et les trois etats tiennent dans une seule transform. */ .hv-hdr-v4{ height:126px !important; } .hv-hdr-v4 .hv-hdr-wrap{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:9999 !important; transform:translateY(0); transition:transform 260ms cubic-bezier(0.16,1,0.3,1) !important; } /* le bandeau ne se replie plus en hauteur : il sort par le haut */ .hv-hdr-v4 .hv-hdr-wrap.scrolled .hv-util{ height:38px !important; opacity:1 !important; padding:0 32px !important; } .hv-hdr-v4 .hv-hdr-wrap[data-etat="barre"]{ transform:translateY(-38px); } .hv-hdr-v4 .hv-hdr-wrap[data-etat="cache"]{ transform:translateY(-100%); } /* liste des langues : alignee sur le bas de la bande blanche comme les autres. 22px = centrage vertical du bouton (44px) dans la barre (88px). */ .hv-hdr-v4 #hv-dd-lang{ top:calc(100% + 22px) !important; } @media (prefers-reduced-motion: reduce){ .hv-hdr-v4 .hv-hdr-wrap{ transition:none !important; } } /* === HV HEADER V6 (14/08) — finitions du bandeau et de la nav === */ /* la ligne grise sous Technologies..Services : ombre par defaut des