.elementor-7938 .elementor-element.elementor-element-de24795{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* === ETAPE 1 : Cache les 9 numeros === */ .elementor-element-e2a979e h3:first-of-type, .elementor-element-caa54cd h3:first-of-type, .elementor-element-ca551a8 h3:first-of-type, .elementor-element-ea9952d h3:first-of-type, .elementor-element-c5b5c75 h3:first-of-type, .elementor-element-9f09b51 h3:first-of-type, .elementor-element-6954c4b h3:first-of-type, .elementor-element-075b46a h3:first-of-type, .elementor-element-1dce0b5 h3:first-of-type { display: none !important; } /* === ETAPE 2 : Photos de fond sur 4 cards (Retail a deja sa photo native) === */ .elementor-element-e2a979e { background-image: url("http://hypervisual.ch/wp-content/uploads/2026/08/hv-sol-events.avif") !important; background-size: cover !important; background-position: center !important; } .elementor-element-ca551a8 { background-image: url("http://hypervisual.ch/wp-content/uploads/2026/08/hv-sol-hotels.avif") !important; background-size: cover !important; background-position: center !important; } .elementor-element-9f09b51 { background-image: url("http://hypervisual.ch/wp-content/uploads/2026/08/hv-sol-corporate.avif") !important; background-size: cover !important; background-position: center !important; } .elementor-element-6954c4b { background-image: url("http://hypervisual.ch/wp-content/uploads/2026/08/hv-sol-museums.avif") !important; background-size: cover !important; background-position: center !important; } /* === ETAPE 4 : Icone Lucide devant chaque titre === */ /* Le titre devient flex inline pour accueillir l'icone */ .elementor-element-e2a979e > .e-con h3, .elementor-element-caa54cd > .e-con h3, .elementor-element-ca551a8 > .e-con h3, .elementor-element-ea9952d > .e-con h3, .elementor-element-c5b5c75 > .e-con h3, .elementor-element-9f09b51 > .e-con h3, .elementor-element-6954c4b > .e-con h3, .elementor-element-075b46a > .e-con h3, .elementor-element-1dce0b5 > .e-con h3 { display: flex !important; align-items: center !important; gap: 12px !important; } /* L'icone en ::before */ .elementor-element-e2a979e > .e-con h3::before, .elementor-element-caa54cd > .e-con h3::before, .elementor-element-ca551a8 > .e-con h3::before, .elementor-element-ea9952d > .e-con h3::before, .elementor-element-c5b5c75 > .e-con h3::before, .elementor-element-9f09b51 > .e-con h3::before, .elementor-element-6954c4b > .e-con h3::before, .elementor-element-075b46a > .e-con h3::before, .elementor-element-1dce0b5 > .e-con h3::before { content: ''; display: inline-block; width: 24px; height: 24px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } .elementor-element-e2a979e > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20"); } .elementor-element-caa54cd > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20"); } .elementor-element-ca551a8 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20%20"); } .elementor-element-ea9952d > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20"); } .elementor-element-c5b5c75 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20"); } .elementor-element-9f09b51 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20%20%20"); } .elementor-element-6954c4b > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20%20%20%20"); } .elementor-element-075b46a > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20"); } .elementor-element-1dce0b5 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20%20%20"); } /* === ETAPE 5 : Masquer les kickers au repos (visibles seulement au hover) === */ /* Le kicker est le 1er SPAN.e-paragraph-base de chaque card */ .elementor-element-e2a979e .e-paragraph-base[class*="e-48f207a-"], .elementor-element-caa54cd .e-paragraph-base[class*="e-4b6e9d9-"], .elementor-element-ca551a8 .e-paragraph-base[class*="e-d779421-"], .elementor-element-ea9952d .e-paragraph-base[class*="e-d779421-"], .elementor-element-c5b5c75 .e-paragraph-base[class*="e-d779421-"], .elementor-element-9f09b51 .e-paragraph-base[class*="e-d779421-"], .elementor-element-6954c4b .e-paragraph-base[class*="e-7d67e77-"], .elementor-element-075b46a .e-paragraph-base[class*="e-8394e7b-"], .elementor-element-1dce0b5 .e-paragraph-base[class*="e-ebef03c-"] { opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; } /* === ETAPE 6 : Titres en blanc sur les 5 photo cards === */ .elementor-element-e2a979e > .e-con h3, .elementor-element-caa54cd > .e-con h3, .elementor-element-ca551a8 > .e-con h3, .elementor-element-9f09b51 > .e-con h3, .elementor-element-6954c4b > .e-con h3 { color: #FFFFFF !important; } /* === ETAPE 7 : Aligner les titres des 8 autres cards sur Retail (32px / 500) === */ .elementor-element-e2a979e > .e-con h3, .elementor-element-ca551a8 > .e-con h3, .elementor-element-ea9952d > .e-con h3, .elementor-element-c5b5c75 > .e-con h3, .elementor-element-9f09b51 > .e-con h3, .elementor-element-6954c4b > .e-con h3, .elementor-element-075b46a > .e-con h3, .elementor-element-1dce0b5 > .e-con h3 { font-size: 32px !important; font-weight: 500 !important; } /* === ETAPE 8 : Pousser le titre+icone vers le BAS du bloc contenu === */ .elementor-element-e2a979e > .e-con, .elementor-element-caa54cd > .e-con, .elementor-element-ca551a8 > .e-con, .elementor-element-ea9952d > .e-con, .elementor-element-c5b5c75 > .e-con, .elementor-element-9f09b51 > .e-con, .elementor-element-6954c4b > .e-con, .elementor-element-075b46a > .e-con, .elementor-element-1dce0b5 > .e-con { justify-content: flex-end !important; height: 100% !important; display: flex !important; flex-direction: column !important; } /* === ETAPE 9 : Collapser les wrappers Plus Addons des kickers et CTAs (sinon ils gardent leur hauteur naturelle) === */ .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-48f207a-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-4b6e9d9-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-d779421-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-7d67e77-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-8394e7b-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-ebef03c-"]) { /* Wrappers des kickers - on collapse */ height: 0 !important; overflow: hidden !important; margin: 0 !important; } /* Collapser les wrappers des CTAs (e-paragraph-base SPAN qui contient "Explore") */ /* Les CTAs ont des classes specifiques par card */ .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-d096efa-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-2e8bcf0-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-d00b22a-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-5193509-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-2e45667-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-1ce5238-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-454d886-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-cc2a583-"]), .elementor-element-6a0d192 .plus-widget-inner-wrap:has([class*="e-850ba88-"]) { height: 0 !important; overflow: hidden !important; margin: 0 !important; } /* === ETAPE 10 : Pousser le titre+icone vraiment en bas (collapse padding-bottom interne) === */ .elementor-element-e2a979e > .e-con, .elementor-element-caa54cd > .e-con, .elementor-element-ca551a8 > .e-con, .elementor-element-ea9952d > .e-con, .elementor-element-c5b5c75 > .e-con, .elementor-element-9f09b51 > .e-con, .elementor-element-6954c4b > .e-con, .elementor-element-075b46a > .e-con, .elementor-element-1dce0b5 > .e-con { padding-bottom: 0 !important; } /* === ETAPE 11 : Decaler les icones+titres vers la gauche (reduire padding-left) === */ .elementor-element-e2a979e, .elementor-element-caa54cd, .elementor-element-ca551a8, .elementor-element-ea9952d, .elementor-element-c5b5c75, .elementor-element-9f09b51, .elementor-element-6954c4b, .elementor-element-075b46a, .elementor-element-1dce0b5 { padding-left: 16px !important; } .elementor-element-e2a979e > .e-con, .elementor-element-caa54cd > .e-con, .elementor-element-ca551a8 > .e-con, .elementor-element-ea9952d > .e-con, .elementor-element-c5b5c75 > .e-con, .elementor-element-9f09b51 > .e-con, .elementor-element-6954c4b > .e-con, .elementor-element-075b46a > .e-con, .elementor-element-1dce0b5 > .e-con { padding-left: 0 !important; } /* === ETAPE 12 : Faire descendre encore plus icones+titres (reduire padding-bottom card) === */ .elementor-element-e2a979e, .elementor-element-caa54cd, .elementor-element-ca551a8, .elementor-element-ea9952d, .elementor-element-c5b5c75, .elementor-element-9f09b51, .elementor-element-6954c4b, .elementor-element-075b46a, .elementor-element-1dce0b5 { padding-bottom: 16px !important; } /* === ETAPE 13 : Agrandir 3 icones (Education, Corporate, Architects) === */ .elementor-element-c5b5c75 > .e-con h3::before { width: 36px !important; height: 36px !important; } .elementor-element-9f09b51 > .e-con h3::before { width: 30px !important; height: 30px !important; } .elementor-element-1dce0b5 > .e-con h3::before { width: 30px !important; height: 30px !important; } /* === ETAPE 13 : Agrandir 3 icones trop petites visuellement === */ /* Education: +8px (graduation-cap est fin) */ .elementor-element-c5b5c75 > .e-con h3::before { width: 32px !important; height: 32px !important; } /* Corporate: +4px */ .elementor-element-9f09b51 > .e-con h3::before { width: 28px !important; height: 28px !important; } /* Architects: +4px */ .elementor-element-1dce0b5 > .e-con h3::before { width: 28px !important; height: 28px !important; } /* === ETAPE 13 : Augmenter taille des icones Education / Corporate / Architects === */ /* Education : +12px (etait trop petit) */ .elementor-element-c5b5c75 > .e-con h3::before { width: 36px !important; height: 36px !important; } /* Corporate : +6px */ .elementor-element-9f09b51 > .e-con h3::before { width: 30px !important; height: 30px !important; } /* Architects : +6px */ .elementor-element-1dce0b5 > .e-con h3::before { width: 30px !important; height: 30px !important; } /* === ETAPE 15 (corr) : Icone Education stroke plus fin === */ .elementor-element-c5b5c75 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20") !important; } /* === Icone Corporate 36px (sans voile) === */ .elementor-element-9f09b51 > .e-con h3::before { width: 36px !important; height: 36px !important; } /* === ETAPE 16 : Icone Corporate stroke plus fin === */ .elementor-element-9f09b51 > .e-con h3::before { background-image: url("data:image/svg+xml;utf8,%20%20%20%20%20%20") !important; } /* ============================================================ ETAPE HOVER B (v2) : Voile sombre au hover des photo cards Via ::after pour ne pas alterer le contenu ============================================================ */ /* Les 5 photo cards : ajoute un overlay invisible au repos */ .elementor-element-e2a979e::after, .elementor-element-caa54cd::after, .elementor-element-ca551a8::after, .elementor-element-9f09b51::after, .elementor-element-6954c4b::after { content: ""; position: absolute; inset: 0; background: rgba(10, 30, 51, 0); z-index: 1; pointer-events: none; transition: background 0.6s cubic-bezier(0.45, 0, 0.15, 1); } /* Au hover : voile sombre s opacifie */ body .elementor-element-e2a979e:hover::after, body .elementor-element-caa54cd:hover::after, body .elementor-element-ca551a8:hover::after, body .elementor-element-9f09b51:hover::after, body .elementor-element-6954c4b:hover::after { background: rgba(10, 30, 51, 0.55); } /* S assurer que le contenu (icone, titre, reveal) est AU-DESSUS du voile */ .elementor-element-e2a979e > .e-con, .elementor-element-caa54cd > .e-con, .elementor-element-ca551a8 > .e-con, .elementor-element-9f09b51 > .e-con, .elementor-element-6954c4b > .e-con { position: relative !important; z-index: 5 !important; } /* Les wrappers Plus Addons du titre+icone aussi (sinon caches sous voile) */ .elementor-element-e2a979e .plus-widget-inner-wrap, .elementor-element-caa54cd .plus-widget-inner-wrap, .elementor-element-ca551a8 .plus-widget-inner-wrap, .elementor-element-9f09b51 .plus-widget-inner-wrap, .elementor-element-6954c4b .plus-widget-inner-wrap { position: relative; z-index: 5; } /* ============================================================ ETAPE HOVER C : No-photo cards - border cyan + shadow au hover (Healthcare, Education, Shopping, Architects) ============================================================ */ /* Au repos : preparer transitions */ .elementor-element-ea9952d, .elementor-element-c5b5c75, .elementor-element-075b46a, .elementor-element-1dce0b5 { transition: border-color 0.6s cubic-bezier(0.45, 0, 0.15, 1), box-shadow 0.6s cubic-bezier(0.45, 0, 0.15, 1) !important; } /* Au hover : border cyan + shadow + leger lift */ body .elementor-element-ea9952d:hover, body .elementor-element-c5b5c75:hover, body .elementor-element-075b46a:hover, body .elementor-element-1dce0b5:hover { border: 1px solid rgba(0, 184, 230, 0.30) !important; box-shadow: 0 16px 32px rgba(20, 48, 77, 0.10) !important; } /* Icone monte legerement au hover */ body .elementor-element-ea9952d:hover > .e-con h3::before, body .elementor-element-c5b5c75:hover > .e-con h3::before, body .elementor-element-075b46a:hover > .e-con h3::before, body .elementor-element-1dce0b5:hover > .e-con h3::before { transform: translateY(-4px); transition: transform 0.6s cubic-bezier(0.45, 0, 0.15, 1); } /* ============================================================ ETAPE HOVER D : Couleur du CTA cyan + fleche qui se decale ============================================================ */ /* Le CTA est le 3e e-paragraph-base (span) de chaque card. Au hover de la card, on lui donne une couleur cyan et un decalage anime. */ /* Couleur cyan sur le CTA au hover (toutes les cards) - specificite renforcee */ body body .elementor-element-e2a979e:hover [class*="e-d096efa-"], body body .elementor-element-caa54cd:hover [class*="e-2e8bcf0-"], body body .elementor-element-ca551a8:hover [class*="e-1ce5238-"], body body .elementor-element-ea9952d:hover [class*="e-1ce5238-"], body body .elementor-element-c5b5c75:hover [class*="e-1ce5238-"], body body .elementor-element-9f09b51:hover [class*="e-1ce5238-"], body body .elementor-element-6954c4b:hover [class*="e-454d886-"], body body .elementor-element-075b46a:hover [class*="e-cc2a583-"], body body .elementor-element-1dce0b5:hover [class*="e-850ba88-"] { color: #00B8E6 !important; transition: color 0.6s cubic-bezier(0.45, 0, 0.15, 1); } /* La fleche -> est dans le texte. Pour la decaler, le plus simple : letter-spacing au hover sur la fin */ /* Mais on ne peut pas isoler la fleche en CSS pur sans modifier le texte. */ /* Solution simple : utiliser inline-block + small transform sur tout le span au hover */ body .elementor-element-e2a979e:hover span.e-paragraph-base:last-of-type, body .elementor-element-caa54cd:hover span.e-paragraph-base:last-of-type, body .elementor-element-c5b5c75:hover span.e-paragraph-base:last-of-type, body .elementor-element-6954c4b:hover span.e-paragraph-base:last-of-type, body .elementor-element-075b46a:hover span.e-paragraph-base:last-of-type, body .elementor-element-9f09b51:hover span.e-paragraph-base:last-of-type, body .elementor-element-1dce0b5:hover span.e-paragraph-base:last-of-type, body .elementor-element-ca551a8:hover span.e-paragraph-base:last-of-type, body .elementor-element-ea9952d:hover span.e-paragraph-base:last-of-type { display: inline-block; letter-spacing: 0.02em; } /* ============================================================ ETAPE TAGS V2 : Tags sous le kicker (apres-kicker, avant titre) Format : TAG1 | TAG2 | TAG3 en cyan Position : ::after sur le kicker (.e-paragraph-base avec classe kicker) ============================================================ */ /* Bloc commun : style des tags sur tous les kickers */ .elementor-element-e2a979e .e-paragraph-base[class*="e-48f207a-"]::after, .elementor-element-caa54cd .e-paragraph-base[class*="e-4b6e9d9-"]::after, .elementor-element-ca551a8 .e-paragraph-base[class*="e-d779421-"]::after, .elementor-element-ea9952d .e-paragraph-base[class*="e-d779421-"]::after, .elementor-element-c5b5c75 .e-paragraph-base[class*="e-d779421-"]::after, .elementor-element-9f09b51 .e-paragraph-base[class*="e-d779421-"]::after, .elementor-element-6954c4b .e-paragraph-base[class*="e-7d67e77-"]::after, .elementor-element-075b46a .e-paragraph-base[class*="e-8394e7b-"]::after, .elementor-element-1dce0b5 .e-paragraph-base[class*="e-ebef03c-"]::after { display: block; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; margin-top: 6px; color: #00B8E6 !important; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.6s cubic-bezier(0.45, 0, 0.15, 1), max-height 0.6s cubic-bezier(0.45, 0, 0.15, 1), margin-top 0.6s cubic-bezier(0.45, 0, 0.15, 1); } /* Tags specifiques par card (contenu) */ .elementor-element-e2a979e .e-paragraph-base[class*="e-48f207a-"]::after { content: "LED VIDEO WALL | SCREEN RENTAL | MOBILE LED"; } .elementor-element-caa54cd .e-paragraph-base[class*="e-4b6e9d9-"]::after { content: "TRANSPARENT LED | WINDOW DISPLAY | HOLOBOX"; } .elementor-element-c5b5c75 .e-paragraph-base[class*="e-d779421-"]::after { content: "DIGITAL SIGNAGE | INTERACTIVE KIOSK | WAYFINDING"; } .elementor-element-6954c4b .e-paragraph-base[class*="e-7d67e77-"]::after { content: "AI AVATAR | HOLOBOX | HOLOGRAPHIC DISPLAY"; } .elementor-element-075b46a .e-paragraph-base[class*="e-8394e7b-"]::after { content: "WAYFINDING KIOSK | DOOH ADVERTISING | DIGITAL TOTEM"; } .elementor-element-9f09b51 .e-paragraph-base[class*="e-d779421-"]::after { content: "LOBBY LED WALL | DIGITAL SIGNAGE | BRAND WALL"; } .elementor-element-1dce0b5 .e-paragraph-base[class*="e-ebef03c-"]::after { content: "MEDIA FACADE | CUSTOM LED | LED INTEGRATION"; } .elementor-element-ca551a8 .e-paragraph-base[class*="e-d779421-"]::after { content: "HOTEL SIGNAGE | LOBBY DISPLAY | DOOR SIGNS"; } .elementor-element-ea9952d .e-paragraph-base[class*="e-d779421-"]::after { content: "HOSPITAL WAYFINDING | HEALTHCARE SIGNAGE | CHECK-IN KIOSK"; } /* Au hover : reveler les tags (max-height = 24px pour 1 ligne mono 10.5px + leading) */ body .elementor-element-e2a979e:hover .e-paragraph-base[class*="e-48f207a-"]::after, body .elementor-element-caa54cd:hover .e-paragraph-base[class*="e-4b6e9d9-"]::after, body .elementor-element-ca551a8:hover .e-paragraph-base[class*="e-d779421-"]::after, body .elementor-element-ea9952d:hover .e-paragraph-base[class*="e-d779421-"]::after, body .elementor-element-c5b5c75:hover .e-paragraph-base[class*="e-d779421-"]::after, body .elementor-element-9f09b51:hover .e-paragraph-base[class*="e-d779421-"]::after, body .elementor-element-6954c4b:hover .e-paragraph-base[class*="e-7d67e77-"]::after, body .elementor-element-075b46a:hover .e-paragraph-base[class*="e-8394e7b-"]::after, body .elementor-element-1dce0b5:hover .e-paragraph-base[class*="e-ebef03c-"]::after { opacity: 1 !important; max-height: 24px !important; } /* CTA cyan EN PERMANENCE (toutes les cards, repos ET hover) */ body .elementor-element-e2a979e [class*="e-d096efa-"], body .elementor-element-caa54cd [class*="e-2e8bcf0-"], body .elementor-element-ca551a8 [class*="e-1ce5238-"], body .elementor-element-ea9952d [class*="e-1ce5238-"], body .elementor-element-c5b5c75 [class*="e-1ce5238-"], body .elementor-element-9f09b51 [class*="e-1ce5238-"], body .elementor-element-6954c4b [class*="e-454d886-"], body .elementor-element-075b46a [class*="e-cc2a583-"], body .elementor-element-1dce0b5 [class*="e-850ba88-"] { color: #00B8E6 !important; } /* ============================================================ ETAPE FINALE : Tout le texte PHOTO CARDS au hover = BLANC PETANT OPAQUE ============================================================ */ body .elementor-element-e2a979e:hover .e-paragraph-base, body .elementor-element-e2a979e:hover h2, body .elementor-element-e2a979e:hover h3, body .elementor-element-e2a979e:hover h4, body .elementor-element-e2a979e:hover h5, body .elementor-element-e2a979e:hover h6, body .elementor-element-e2a979e:hover p, body .elementor-element-e2a979e:hover span { color: #FFFFFF !important; } body .elementor-element-caa54cd:hover .e-paragraph-base, body .elementor-element-caa54cd:hover h2, body .elementor-element-caa54cd:hover h3, body .elementor-element-caa54cd:hover h4, body .elementor-element-caa54cd:hover h5, body .elementor-element-caa54cd:hover h6, body .elementor-element-caa54cd:hover p, body .elementor-element-caa54cd:hover span { color: #FFFFFF !important; } body .elementor-element-ca551a8:hover .e-paragraph-base, body .elementor-element-ca551a8:hover h2, body .elementor-element-ca551a8:hover h3, body .elementor-element-ca551a8:hover h4, body .elementor-element-ca551a8:hover h5, body .elementor-element-ca551a8:hover h6, body .elementor-element-ca551a8:hover p, body .elementor-element-ca551a8:hover span { color: #FFFFFF !important; } body .elementor-element-9f09b51:hover .e-paragraph-base, body .elementor-element-9f09b51:hover h2, body .elementor-element-9f09b51:hover h3, body .elementor-element-9f09b51:hover h4, body .elementor-element-9f09b51:hover h5, body .elementor-element-9f09b51:hover h6, body .elementor-element-9f09b51:hover p, body .elementor-element-9f09b51:hover span { color: #FFFFFF !important; } body .elementor-element-6954c4b:hover .e-paragraph-base, body .elementor-element-6954c4b:hover h2, body .elementor-element-6954c4b:hover h3, body .elementor-element-6954c4b:hover h4, body .elementor-element-6954c4b:hover h5, body .elementor-element-6954c4b:hover h6, body .elementor-element-6954c4b:hover p, body .elementor-element-6954c4b:hover span { color: #FFFFFF !important; } /* Le CTA reste cyan au hover meme sur photo cards (declaration apres pour gagner) */ body body .elementor-element-e2a979e:hover [class*="e-d096efa-"], body body .elementor-element-caa54cd:hover [class*="e-2e8bcf0-"], body body .elementor-element-ca551a8:hover [class*="e-1ce5238-"], body body .elementor-element-ea9952d:hover [class*="e-1ce5238-"], body body .elementor-element-c5b5c75:hover [class*="e-1ce5238-"], body body .elementor-element-9f09b51:hover [class*="e-1ce5238-"], body body .elementor-element-6954c4b:hover [class*="e-454d886-"], body body .elementor-element-075b46a:hover [class*="e-cc2a583-"], body body .elementor-element-1dce0b5:hover [class*="e-850ba88-"] { color: #00B8E6 !important; } /* === HV LOT1 TYPO === */ /* Référence : section 03 « The Difference » → H2 82px / 600 / lh .95 / left 84 */ [data-id="20b0d43"] h2, [data-id="b076ab3"] h2{font-size:82px !important;font-weight:600 !important;line-height:.95 !important;} [data-id="de24795"] h2:first-of-type{font-weight:600 !important;} /* Alignement : les sections atomiques partaient a 94 (padding interne de 10px) */ [data-id="de24795"] h2, [data-id="20b0d43"] h2{margin-left:-10px !important;} /* Eyebrow « — 01 — Solutions » aligne sur la reference */ /* (LOT1 3d2e311 = conteneur de section, regle retiree — voir LOT3 hotfix) */ /* Filets : la reference n a QUE le filet avant → on retire les filets apres */ /* (selecteurs LOT1 errones retires — voir LOT3) */ /* Bandeau defilant : echelle display mesuree, contour attenue */ .hv-marquee-v1 .hv-tm-item{font-size:84px !important;font-weight:800 !important;letter-spacing:-.015em !important;} .hv-marquee-v1 .hv-tm-item.outline{-webkit-text-stroke-width:1px !important;opacity:.55 !important;} @media (max-width:1024px){ [data-id="20b0d43"] h2,[data-id="b076ab3"] h2{font-size:56px !important;} .hv-marquee-v1 .hv-tm-item{font-size:56px !important;} } @media (max-width:600px){ [data-id="20b0d43"] h2,[data-id="b076ab3"] h2{font-size:40px !important;} [data-id="de24795"] h2,[data-id="20b0d43"] h2{margin-left:0 !important;} .hv-marquee-v1 .hv-tm-item{font-size:40px !important;} } /* === HV LOT2 VISUELS === */ /* les images de cartes remplissent la carte : le theme ecrasait height:100% */ .hv-sw .hv-sw-card-img{height:100% !important;width:100% !important;object-position:center 42% !important;} /* === HV LOT3 EYEBROWS === */ /* 1. filet de queue en trop : sections 02, 04, 05, 06 */ .hv-eyebrow::after{content:none !important;} /* 3. filet avant manquant sur « — 01 — Solutions » (porte par le texte, pas le conteneur : sinon la boite passe de left 84 a 74) */ /* === HV EYEBROWS V3 : cadratin texte seul, pas de filet === */ .hv-eyebrow::before,.hv-sw-eyebrow::before{content:none !important;} /* ============================================================ HV MOTION V10 (14/08) — revelation des cartes Solutions Compositeur seul : plus aucune propriete de mise en page animee. Le conteneur de contenu a exactement la hauteur du bloc revele ; il se translate de 100% de lui-meme, et le titre, ancre a son bord haut, voyage avec lui. Geometrie identique a V9 au pixel. ============================================================ */ /* --- 0. Retail : figer les deux lavis cyan sur leur tiers de carte. Sans cela, la hauteur liberee par le conteneur leur profite. --- */ body .elementor-7938 [data-id="20b0d43"] article[data-id="caa54cd"] > [data-id="0257965"], body .elementor-7938 [data-id="20b0d43"] article[data-id="caa54cd"] > [data-id="2a44849"]{ flex:0 0 33.3333% !important; } body .elementor-7938 [data-id="20b0d43"] article[data-id="caa54cd"] > [data-id="2a44849"]{ margin-bottom:auto !important; } /* --- 1. le conteneur de contenu devient exactement le bloc revele --- */ body .elementor-7938 [data-id="20b0d43"] article > .e-con:has(> h3.e-heading-base){ height:auto !important; min-height:0 !important; flex:0 0 auto !important; padding-top:0 !important; transform:translateY(100%); transition:transform 240ms cubic-bezier(0.16,1,0.3,1) !important; } body .elementor-7938 [data-id="20b0d43"] article:hover > .e-con:has(> h3.e-heading-base), body .elementor-7938 [data-id="20b0d43"] article:focus-within > .e-con:has(> h3.e-heading-base){ transform:translateY(0); } /* --- 2. le titre s'ancre au bord haut du conteneur et voyage avec lui --- */ body .elementor-7938 [data-id="20b0d43"] article > .e-con > h3.e-heading-base{ position:absolute !important; left:0 !important; right:10px !important; bottom:100% !important; margin:0 !important; } /* --- 3. la description : hauteur naturelle, plus 17px pour passer sous le bord bas de la carte au repos (16px de padding + 1px de bord) --- */ body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base{ max-height:none !important; opacity:1 !important; margin:10px 0 12px !important; padding:0 !important; overflow:visible !important; transform:translateY(17px); transition:transform 240ms cubic-bezier(0.16,1,0.3,1) !important; } body .elementor-7938 [data-id="20b0d43"] article:hover .e-con p.e-paragraph-base{ transform:none; } /* --- 4. Explore : meme horloge, meme course --- */ body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{ max-height:none !important; opacity:1 !important; margin:0 !important; overflow:visible !important; transform:translateY(17px); transition:transform 240ms cubic-bezier(0.16,1,0.3,1) !important; } body .elementor-7938 [data-id="20b0d43"] article:hover .e-con span.e-paragraph-base:last-of-type{ transform:none; } /* --- 5. choregraphie morte des tags : le kicker porte opacity:0 et max-height:0 en permanence (ETAPE 5), son ::after n'atteint jamais l'ecran. On la coupe. --- */ body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:first-of-type::after{ content:none !important; } /* --- 6. calage sur pixels entiers : la hauteur du conteneur commande la translation. Une hauteur fractionnaire (90,25 / 111,17) fait reechantillonner la couche composee d'un demi-pixel ecran et adoucit les titres au repos. Interlignes en pixels entiers : description 2 lignes = 42, 3 lignes = 63, Explore = 26, soit un conteneur a 90 ou 111 pile. --- */ body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base{ line-height:21px !important; } body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{ line-height:26px !important; } /* --- 7. tactile : tout est visible, plus rien ne se translate --- */ @media (hover: none){ body .elementor-7938 [data-id="20b0d43"] article > .e-con:has(> h3.e-heading-base), body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base, body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{ transform:none !important; } } /* --- 8. mouvement reduit : l'etat change, sans la course --- */ @media (prefers-reduced-motion: reduce){ body .elementor-7938 [data-id="20b0d43"] article > .e-con:has(> h3.e-heading-base){ transition:none !important; } } /* === HV LOT5 MARQUEE === */ body .elementor-7938 [data-id="hvmarquee"] .hv-tm-meta{max-width:none !important;margin:0 0 24px !important;padding:0 74px !important;} body .elementor-7938 [data-id="hvmarquee"] .hv-tm-item.outline{color:#0099CC !important;-webkit-text-stroke:0 !important;} /* === HV A11Y V1 (contrastes geres dans les widgets ; ici : focus, tactile, durees, PRM) === */ body .elementor-7938 a:focus-visible, body .elementor-7938 button:focus-visible{outline:2px solid #0099CC !important;outline-offset:2px !important;} @media (hover: none){ body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base{max-height:none !important;opacity:1 !important;margin:10px 0 12px !important;} body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:first-of-type::after{max-height:none !important;opacity:1 !important;margin:0 0 12px !important;} body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{max-height:none !important;opacity:1 !important;transform:none !important;} } body .elementor-7938 [data-id="20b0d43"] article, body .elementor-7938 [data-id="20b0d43"] article::after, body .elementor-7938 [data-id="20b0d43"] article .e-heading-base, body .elementor-7938 [data-id="20b0d43"] article .e-paragraph-link-base, body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base, body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:first-of-type::after, body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{transition-duration:.24s !important;} @media (prefers-reduced-motion: reduce){ body .elementor-7938 [data-id="20b0d43"] article, body .elementor-7938 [data-id="20b0d43"] article::after, body .elementor-7938 [data-id="20b0d43"] article .e-heading-base, body .elementor-7938 [data-id="20b0d43"] article .e-paragraph-link-base, body .elementor-7938 [data-id="20b0d43"] article .e-con p.e-paragraph-base, body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:first-of-type::after, body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:last-of-type{transition:none !important;} } /* [25/08] REGLE SUPPRIMEE. Elle colorait en cyan #007BAE deux selecteurs a la fois, .hv-eye-tag et .hv-in. Or .hv-in est la classe d'ANIMATION de revelation (cf. LOT F, .hv-eye-h:not(.hv-in)), pas une classe de couleur : elle repeignait le H2 et les paragraphes de la section une fois reveles. Mesure : la page ne contient aucun element portant la premiere classe, la moitie conservee ne ciblait donc rien. Couleurs rendues au widget TRUST V5 (navy, encre, encre douce). */ /* === HERO V2 : neutralisation padding kit + fond === */ body .elementor-7938 [data-id="de24795"]{padding:0 !important;background-color:#071626;} /* === HV TYPO V2 : reprise Manrope sur la page (fossile DM Sans #6942) === */ body .elementor-7938 p, body .elementor-7938 b, body .elementor-7938 strong, body .elementor-7938 button{font-family:'Manrope', system-ui, sans-serif !important;}body .elementor-7938 .hv-how .hv-eyebrow,body .elementor-7938 .hv-why .hv-eyebrow{color:#0075A4 !important;} /* [25/08] HV EYEBROWS V4 SUPPRIME. Le bloc annulait le filet ::before des eyebrows de la section metriques. Mesure : la page ne contient aucun element portant cette classe, la regle ne ciblait rien. Meme cause que la regle de couleur retiree le meme jour. Le bloc HV EYEBROWS HARMONISATION V1 est conserve : lui cible aussi .hv-wm-eyebrow et les eyebrows de hv-how et hv-why, qui existent. */ /* === HV FONDS V2 : unification des clairs + traine navy (09/08) === */ body .elementor-7938 .hv-sw{background:#0A1E33 !important;} body .elementor-7938 [data-id="20b0d43"]{background-color:#F7F9FB !important;} body .elementor-7938 [data-id="hvmarquee"]{padding-top:0 !important;padding-bottom:0 !important;} body .elementor-7938 .hv-how{background:#FFFFFF !important;} /* === HV FONDS V3 : systeme tout-surface + conformite Solutions (09/08 soir) === */ body .elementor-7938 [data-id="969c871"]{background-color:#F7F9FB !important;} body .elementor-7938 .hv-how{background:#F7F9FB !important;} body .elementor-7938 .hv-how .hv-note,body .elementor-7938 .hv-how [class*="note"]{background:#FFFFFF !important;} body .elementor-7938 [data-id="20b0d43"] h2{color:#1B3A5C !important;} body .elementor-7938 [data-id="20b0d43"] article a span{color:#0099CC !important;font-size:13px !important;} body .elementor-7938 [data-id="20b0d43"] article :not(a) > span{color:rgba(255,255,255,.78) !important;} /* === HV FONDS V4 : 03 integree (surface) + filtre retail attenue (09/08) === */ body .elementor-7938 .hv-sw{background:transparent !important;} html body .elementor-7938 .hv-sw .hv-sw-eyebrow{color:#0075A4 !important;} body .elementor-7938 [data-id="20b0d43"] .elementor-element-caa54cd{background-image:linear-gradient(rgba(10,30,51,0.15) 0%, rgba(10,30,51,0.45) 55%, rgba(10,30,51,0.88) 100%), url('/wp-content/uploads/2025/12/29-luxury-retail-digital-signage.jpg') !important;} /* === HV V4b : H2 de la 03 en encre (copie harmonisation residuelle bat le widget) === */ html body .elementor-7938 .hv-sw .hv-sw-h2{color:#1B3A5C !important;} html body .elementor-7938 .hv-sw .hv-sw-h2 span{color:#0099CC !important;} html body .elementor-7938 .hv-sw .hv-sw-h2 .light{color:#8A98A8 !important;} /* === HV V5 : neutralisation grille (retour cartes) === */ @media(min-width:1101px){ body .elementor-7938 a.hv-wm-carte{padding:0 !important;background:transparent !important;} body .elementor-7938 a.hv-wm-carte:nth-child(-n+3){padding-bottom:0 !important;} body .elementor-7938 a.hv-wm-carte:nth-child(n+4){padding-top:0 !important;} } /* === HV V6 : filtre navy retail SUPPRIME (essai Jean) === */ body .elementor-7938 [data-id="20b0d43"] .elementor-element-caa54cd{background-image:url('/wp-content/uploads/2025/12/29-luxury-retail-digital-signage.jpg') !important;} /* === HV V7 : gate hover Solutions + aller vif === */ @media not ((hover:hover) and (pointer:fine)){ body .elementor-7938 [data-id="20b0d43"] article:hover .e-con span[class*="e-paragraph"]{transform:none !important;} body .elementor-7938 [data-id="20b0d43"] article:hover{transform:none !important;} } @media (hover:hover) and (pointer:fine){ body .elementor-7938 [data-id="20b0d43"] article:hover, body .elementor-7938 [data-id="20b0d43"] article:hover *{transition-duration:.28s !important;} } /* === HV V8 : retail sans filtre, cadrage d origine preserve (calque transparent) === */ body .elementor-7938 [data-id="20b0d43"] .elementor-element-caa54cd{background:linear-gradient(180deg,rgba(10,30,51,0) 0%,rgba(10,30,51,0) 100%),url('http://hypervisual.ch/wp-content/uploads/2025/12/29-luxury-retail-digital-signage.jpg') center center / cover no-repeat !important;} /* === HV MOTION V2 : survol WM adouci (skills review-animations) === */ /* scale 1.04->1.012 (a 4% le trait epaissit), 450->220ms, ease->courbe forte, flou 1.5px pour fondre la derive on/off, sortie 300ms (asymetrie enter/exit). */ body .elementor-7938 .hv-wm{--wm-ease-out:cubic-bezier(.23,1,.32,1);} body .elementor-7938 .hv-wm-im img{transition:transform 300ms var(--wm-ease-out) !important;} body .elementor-7938 .hv-wm-on{will-change:opacity;transition:opacity 300ms var(--wm-ease-out),filter 300ms var(--wm-ease-out) !important;} @media (hover:hover) and (pointer:fine){ body .elementor-7938 a.hv-wm-carte:hover .hv-wm-im img{transform:scale(1.012) !important;transition-duration:220ms !important;} body .elementor-7938 a.hv-wm-carte:hover .hv-wm-on{opacity:0 !important;filter:blur(1.5px) !important;transition-duration:220ms !important;} } body .elementor-7938 .hv-wm-ben{transition:color 220ms var(--wm-ease-out) !important;} body .elementor-7938 .hv-wm-im{transition:border-color 220ms var(--wm-ease-out) !important;} @media (prefers-reduced-motion:reduce){ body .elementor-7938 a.hv-wm-carte:hover .hv-wm-im img{transform:none !important;} body .elementor-7938 .hv-wm-on{transition:opacity 200ms linear !important;filter:none !important;} } /* === HV A11Y V3 : Explore lisible sur les 4 cartes Solutions sans photo === */ /* mesure avant : rgba(255,255,255,.78) sur #F7F9FB = 1.06:1 (invisible). apres : #191C1E = couleur du texte de la carte, 15.9:1. Hover #0075A4 (cyan texte valide sur surface claire ; #0099CC interdit < 18px par le DS). */ body .elementor-7938 .elementor-element-6a7a24a .e-paragraph-link-base, body .elementor-7938 .elementor-element-2b453d1 .e-paragraph-link-base, body .elementor-7938 .elementor-element-f6662f0 .e-paragraph-link-base, body .elementor-7938 .elementor-element-5d0bb3b .e-paragraph-link-base { color:#191C1E !important; transition:color 200ms cubic-bezier(.23,1,.32,1) !important; } body .elementor-7938 .elementor-element-6a7a24a .e-paragraph-link-base:hover, body .elementor-7938 .elementor-element-2b453d1 .e-paragraph-link-base:hover, body .elementor-7938 .elementor-element-f6662f0 .e-paragraph-link-base:hover, body .elementor-7938 .elementor-element-5d0bb3b .e-paragraph-link-base:hover { color:#0075A4 !important; } /* === HV PAGE RESPONSIVE V1 (11/08) — home V2, zero debordement 280 -> 3840 === */ /* Protocole d'audit dainamics.ch §5. Les regles header vivent dans les 3 templates (EN #17 / FR #4514 / DE #4515), pas ici. Aucune regle >= 1440px. */ /* BANDEAU DE CONFIANCE : grille 12 col dont les 11 gouttieres (352px) depassent l'ecran ; le bloc mobile existant du widget ne les reduisait pas. */ @media (max-width:640px){ body .elementor-7938 .hv-trust-v5 .hv-slab-grid{column-gap:0 !important;} } @media (min-width:320px) and (max-width:340px){ body .elementor-7938 .hv-trust-v5 .hv-slab-grid{padding:0 16px !important;} } @media (max-width:319px){ body .elementor-7938 .hv-trust-v5 .hv-slab-grid{padding:0 14px !important;} /* les 4 chiffres passent en colonne unique : 2 col exigent 287px pour 248 dispo */ body .elementor-7938 .hv-trust-v5 .hv-stats{grid-template-columns:1fr !important;gap:28px 0 !important;} body .elementor-7938 .hv-trust-v5 .hv-stat{padding:0 !important;} } /* SOLUTIONS : titres de cartes en nowrap 32px -> coupes dans la carte (« Shopping Centres » exige 319px pour 172 disponibles a 320, et reste coupe jusqu'a 1280). Le retour a la ligne ne s'active que lorsque le titre ne tient pas : a 1440 il reste sur une ligne. */ @media (max-width:1439px){ body .elementor-7938 [data-id="20b0d43"] article > .e-con h3{ white-space:normal !important;line-height:1.15 !important;align-items:center !important;} } @media (max-width:560px){ body .elementor-7938 [data-id="20b0d43"] article > .e-con h3{font-size:23px !important;} } @media (max-width:319px){ body .elementor-7938 [data-id="20b0d43"] article > .e-con h3{font-size:19px !important;} } /* === HV TACTILE PAGE V1 (11/08) — home V2 === */ /* Deux conteneurs vides a largeur figee debordaient de leur parent : 2a44849 = 400px dans la carte Retail de 300 (residu parasite deja repere dans l'inventaire de la section), 33e6192 = 760px dans un viewport de 390. Neutralises sans toucher a leur role eventuel. */ body .elementor-7938 .elementor-element-2a44849, body .elementor-7938 .elementor-element-33e6192{max-width:100% !important;} /* eyebrows atomiques de la page a 11px (Solutions, section 02) */ @media (max-width:1024px),(hover:none) and (pointer:coarse){ }/* Section « Selected Work » sous 320px : l'en-tete et la grille exigent 250 et 264px pour 232 disponibles (mesure a 280). On rend les enfants compressibles et on reduit la gouttiere interne. */ @media (max-width:319px){ } /* CONTRASTE DES CARTES PHOTO EN TACTILE — defaut mesure le 11/08. Le dessin d'origine revele la description AU SURVOL, et le survol amene un voile rgba(10,30,51,.55) qui rend le texte blanc lisible. En tactile la description est forcee visible (bloc a11y @media hover:none) mais le voile, lui, restait transparent : texte blanc sur photo claire. On pose donc le voile en permanence des qu'il n'y a pas de survol. Mesure sur la photo la plus claire (Retail), fond isole du texte : sans voile 1.01:1, avec ce voile 6.73:1 (AA exige 4.5:1). */ @media (hover:none){ body .elementor-7938 [data-id="20b0d43"] article.elementor-element-e2a979e::after, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-caa54cd::after, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-ca551a8::after, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-9f09b51::after, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-6954c4b::after{ background:linear-gradient(180deg,rgba(10,30,51,.40) 0%,rgba(10,30,51,.74) 46%,rgba(10,30,51,.90) 100%) !important;} } /* === HV MOBILE V2 — alternance Solutions (11/08) === */ /* 2. SOLUTIONS EN COLONNE UNIQUE (<=699px) : alternance photo / carte blanche. Ordre DOM : PHOTO PHOTO blanc PHOTO blanc PHOTO blanc PHOTO blanc -> deux photos collees en tete, ce que Jean a vu. 5 photos et 4 cartes blanches : l'alternance P B P B P B P B P tombe exactement juste. Entrelacement fait sur la PRIORITE COMMERCIALE deja etablie par la numerotation du site (01 Events ... 09 Architects) : chaque famille conserve son ordre interne, et les trois secteurs photo les plus vendeurs (Events, Retail, Hotels) occupent les places 1, 3 et 5. */ @media (max-width:699px){ body .elementor-7938 [data-id="6a0d192"] article{order:99;} body .elementor-7938 [data-id="6a0d192"] article.elementor-element-e2a979e{order:1;} /* 01 Events photo */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-ea9952d{order:2;} /* 04 Healthcare blanc */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-caa54cd{order:3;} /* 02 Retail photo */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-c5b5c75{order:4;} /* 05 Education blanc */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-ca551a8{order:5;} /* 03 Hotels photo */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-075b46a{order:6;} /* 08 Shopping blanc */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-9f09b51{order:7;} /* 06 Corporate photo */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-1dce0b5{order:8;} /* 09 Architects blanc */ body .elementor-7938 [data-id="6a0d192"] article.elementor-element-6954c4b{order:9;} /* 07 Museums photo */ } /* === HV CLIENTS V1 — debut (11/08/26) === */ .elementor-element-hvclients{padding:0!important} .hv-cli{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 85% at 76% 42%,#123049 0%,rgba(11,30,51,0) 62%),radial-gradient(90% 70% at 8% 96%,#0d2740 0%,rgba(11,30,51,0) 55%),#071626} .hv-cli::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,153,204,.30) 1.2px,transparent 1.8px),radial-gradient(circle,rgba(0,153,204,.16) 1.6px,transparent 2.4px);background-size:16px 16px,48px 48px;background-position:0 0,8px 8px;-webkit-mask-image:linear-gradient(135deg,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.6) 42%,#000 72%,#000 100%);mask-image:linear-gradient(135deg,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.6) 42%,#000 72%,#000 100%);opacity:.6} .hv-cli::after{content:"";position:absolute;top:-20%;left:-20%;width:140%;height:140%;z-index:3;pointer-events:none;opacity:0;will-change:transform;background:linear-gradient(135deg,#071626 0%,#071626 46%,rgba(7,22,38,0) 72%);transform:translate3d(30%,30%,0)} .hv-cli.is-on::after{opacity:1;animation:hvCliOn 820ms cubic-bezier(.16,1,.3,1) forwards} @keyframes hvCliOn{from{transform:translate3d(30%,30%,0)}to{transform:translate3d(-118%,-118%,0)}} .hv-cli-in{position:relative;z-index:2;max-width:1400px;width:100%;margin:0 auto;padding:96px 64px 104px} .hv-cli .hv-cli-eb{font-family:'Manrope',sans-serif;font-size:11px!important;font-weight:700!important;letter-spacing:3.3px!important;line-height:1.2!important;text-transform:uppercase;color:#5BCAFF!important;margin:0 0 20px} .hv-cli .hv-cli-h2{font-family:'Montserrat',sans-serif!important;font-weight:600!important;font-size:clamp(48px,6.5vw,82px)!important;line-height:.95!important;text-transform:none!important;letter-spacing:-.04em!important;color:#fff!important;margin:0 0 18px} .hv-cli .hv-cli-h2 span{display:block;color:#0099CC!important} .hv-cli .hv-cli-sub{font-family:'Manrope',sans-serif;font-size:15px!important;line-height:1.55!important;font-weight:300!important;color:rgba(255,255,255,.62)!important;max-width:560px;margin:0 0 52px} .hv-cli .hv-cli-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .hv-cli .hv-cli-c{background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:22px 30px;min-height:132px;text-decoration:none} .hv-cli .hv-cli-c img{width:100%;height:auto;display:block} .hv-cli a.hv-cli-c:focus-visible{outline:2px solid #5BCAFF;outline-offset:3px} @media(hover:hover) and (pointer:fine){.hv-cli a.hv-cli-c{transition:transform 180ms cubic-bezier(.16,1,.3,1),box-shadow 180ms cubic-bezier(.16,1,.3,1)}.hv-cli a.hv-cli-c:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.34)}} .hv-cli .hv-cli-grid .hv-cli-more{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)} .hv-cli .hv-cli-dots{display:flex;gap:9px} .hv-cli .hv-cli-dots i{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.30;display:block} .hv-cli .hv-cli-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(prefers-reduced-motion:reduce){.hv-cli.is-on::after{display:none}.hv-cli a.hv-cli-c{transition:none}.hv-cli a.hv-cli-c:hover{transform:none}} @media(max-width:1100px){.hv-cli-in{padding:72px 40px 80px}.hv-cli .hv-cli-grid{gap:14px}.hv-cli .hv-cli-c{padding:18px 22px;min-height:108px}} @media(max-width:900px){.hv-cli-in{padding:56px 20px 64px}.hv-cli .hv-cli-grid{grid-template-columns:repeat(3,1fr);gap:10px}.hv-cli .hv-cli-c{min-height:80px;padding:12px 14px;border-radius:10px}.hv-cli .hv-cli-dots i{width:7px;height:7px}}/* === HV CLIENTS V1 — fin === */ /* === HV EYEBROWS HARMONISATION V1 — debut (11/08/26) === */ /* eyebrows sur fond clair */ .hv-eye-tag,.hv-wm-eyebrow,.hv-how .hv-eyebrow,.hv-why .hv-eyebrow{color:#0075A4!important;margin-bottom:24px!important} /* eyebrows sur fond sombre */ .hv-cli .hv-cli-eb, .hv-dif-eyebrow{color:#5BCAFF!important;margin-bottom:24px!important} /* === HV EYEBROWS HARMONISATION V1 — fin === */ /* === HV VISEUR V1 (11/08) — coins repere sur les cartes de la section 03 === */ body .elementor-7938 [data-id="20b0d43"] article::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30)),linear-gradient(rgba(27,58,92,.30),rgba(27,58,92,.30));background-position:left 12px top 12px,left 12px top 12px,right 12px top 12px,right 12px top 12px,left 12px bottom 12px,left 12px bottom 12px,right 12px bottom 12px,right 12px bottom 12px;background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;background-repeat:no-repeat;} body .elementor-7938 [data-id="20b0d43"] article.elementor-element-caa54cd::before{background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55));background-position:left 12px top 12px,left 12px top 12px,right 12px top 12px,right 12px top 12px,left 12px bottom 12px,left 12px bottom 12px,right 12px bottom 12px,right 12px bottom 12px;background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;background-repeat:no-repeat;} /* === HV VISEUR V1 — fin === */ /* === HV RYTHME V1 (12/08) — echelle verticale unifiee 120px === */ body .elementor-7938 .elementor-element-969c871{padding-top:0!important;padding-bottom:0!important} body .elementor-7938 .hv-slab{padding-top:44px!important;padding-bottom:120px!important} body .elementor-7938 .hv-cli{padding-top:24px!important;padding-bottom:136px!important} body .elementor-7938 .hv-wm-inner{padding-top:120px!important;padding-bottom:120px!important} body .elementor-7938 .hv-dif{padding-top:56px!important} body .elementor-7938 .elementor-element-20b0d43{padding-top:110px!important;padding-bottom:117px!important} body .elementor-7938 .hv-selw{padding-top:120px!important;padding-bottom:109px!important} body .elementor-7938 .hv-how{padding-top:118px!important;padding-bottom:88px!important} body .elementor-7938 .hv-why{padding-top:118px!important;padding-bottom:120px!important} body .elementor-7938 .elementor-element-b076ab3{padding-top:100px!important;padding-bottom:46px!important;margin-top:0!important} body .elementor-7938 .hv-selw-eyebrow{margin-bottom:0!important} body .elementor-7938 .hv-how .hv-eyebrow,body .elementor-7938 .hv-why .hv-eyebrow{margin-bottom:0!important} body .elementor-7938 .e-ff9c0a9-49f7a45{margin-bottom:14px!important} body .elementor-7938 .hv-selw-mode{color:rgba(255,255,255,.8)!important} body .elementor-7938 .hv-selw-res{color:rgba(255,255,255,.86)!important} @media(max-width:1100px){body .elementor-7938 .hv-slab{padding-top:32px!important;padding-bottom:88px!important}body .elementor-7938 .hv-wm-inner,body .elementor-7938 .hv-selw,body .elementor-7938 .hv-how,body .elementor-7938 .hv-why{padding-top:88px!important;padding-bottom:88px!important}body .elementor-7938 .elementor-element-20b0d43,body .elementor-7938 .elementor-element-b076ab3{padding-top:80px!important;padding-bottom:80px!important}} @media(max-width:700px){body .elementor-7938 .hv-slab{padding-top:24px!important;padding-bottom:64px!important}body .elementor-7938 .hv-wm-inner,body .elementor-7938 .hv-selw,body .elementor-7938 .hv-how,body .elementor-7938 .hv-why{padding-top:64px!important;padding-bottom:64px!important}body .elementor-7938 .elementor-element-20b0d43,body .elementor-7938 .elementor-element-b076ab3{padding-top:60px!important;padding-bottom:60px!important}} /* === HV RYTHME V5 — fin === */ /* === HV RYTHME V6 (12/08) — recalage awards + uniformite responsive === */ body .elementor-7938 .hv-slab{padding-top:94px!important} @media(max-width:1100px){body .elementor-7938 h2,body .elementor-7938 .hv-h2,body .elementor-7938 .hv-cli-h2,body .elementor-7938 .hv-wm-h2,body .elementor-7938 .hv-dif-h2,body .elementor-7938 .hv-eye-h{font-size:56px!important}} @media(max-width:700px){body .elementor-7938 h2,body .elementor-7938 .hv-h2,body .elementor-7938 .hv-cli-h2,body .elementor-7938 .hv-wm-h2,body .elementor-7938 .hv-dif-h2,body .elementor-7938 .hv-eye-h{font-size:40px!important}} @media(max-width:1100px){body .elementor-7938 .hv-slab{padding-top:124px!important}body .elementor-7938 .hv-cli{padding-top:16px!important}body .elementor-7938 .hv-dif{padding-top:24px!important}body .elementor-7938 .elementor-element-20b0d43{padding-top:78px!important}body .elementor-7938 .hv-how,body .elementor-7938 .hv-why{padding-top:86px!important}body .elementor-7938 .elementor-element-b076ab3{padding-top:68px!important}} @media(max-width:900px){body .elementor-7938 .hv-slab{padding-top:125px!important}body .elementor-7938 .hv-cli{padding-top:32px!important}body .elementor-7938 .hv-dif{padding-top:0px!important}body .elementor-7938 .hv-wm-inner{padding-top:88px!important}} @media(max-width:700px){body .elementor-7938 .hv-slab{padding-top:109px!important}body .elementor-7938 .hv-cli{padding-top:8px!important}body .elementor-7938 .hv-dif{padding-top:0px!important}body .elementor-7938 .hv-wm-inner{padding-top:64px!important}body .elementor-7938 .elementor-element-20b0d43{padding-top:54px!important}body .elementor-7938 .hv-how,body .elementor-7938 .hv-why{padding-top:63px!important}body .elementor-7938 .elementor-element-b076ab3{padding-top:44px!important}} /* === HV RYTHME V6 — fin === */ /* === HV RYTHME V7 (12/08) — specificite H2 + recalage responsive === */ @media(max-width:1100px){html body .elementor-7938 h2,html body .elementor-7938 .hv-h2,html body .elementor-7938 .hv-cli-h2,html body .elementor-7938 .hv-wm-h2,html body .elementor-7938 .hv-dif-h2,html body .elementor-7938 .hv-eye-h{font-size:56px!important}} @media(max-width:700px){html body .elementor-7938 h2,html body .elementor-7938 .hv-h2,html body .elementor-7938 .hv-cli-h2,html body .elementor-7938 .hv-wm-h2,html body .elementor-7938 .hv-dif-h2,html body .elementor-7938 .hv-eye-h{font-size:40px!important}} @media(max-width:1100px){body .elementor-7938 .hv-slab{padding-top:62px!important}} @media(max-width:900px){body .elementor-7938 .hv-slab{padding-top:63px!important}body .elementor-7938 .hv-dif-head{padding-top:0px!important}} @media(max-width:700px){body .elementor-7938 .hv-slab{padding-top:39px!important}body .elementor-7938 .hv-dif-head{padding-top:0px!important}} /* === HV RYTHME V7 — fin === */ /* === HV RYTHME CONSERVE (12/08) — regles utiles extraites des blocs V1-V4 === */ body .elementor-7938 [data-id="hvmarquee"]{padding-left:0!important;padding-right:0!important;margin-top:0!important} body .elementor-7938 a.hv-wm-carte:nth-child(-n+3){padding-bottom:46px!important} body .elementor-7938 a.hv-wm-carte:nth-child(n+4){padding-top:42px!important} /* === HV RYTHME CONSERVE — fin === */ /* === HV RYTHME V8 (12/08) — specificite ID Difference + ancre mobile === */ @media(max-width:1100px){html body .elementor-7938 #hv-dif-section .hv-dif-h2{font-size:56px!important}} @media(max-width:700px){html body .elementor-7938 #hv-dif-section .hv-dif-h2{font-size:40px!important}} @media(max-width:700px){body .elementor-7938 .hv-dif{padding-top:0!important}body .elementor-7938 .hv-dif-head{margin-top:-24px!important}} /* === HV RYTHME V8 — fin === */ /* === HV AUDIT 0405 (12/08) — corrections mesurees sections 04 et 05 === */ html body .elementor-7938 .hv-ways .hv-ways-tab .hv-ways-thint{color:rgba(255,255,255,.58) !important} @media(max-width:1100px){html body .elementor-7938 .hv-ways .hv-ways-wrap{box-sizing:border-box !important}} html body .elementor-7938 .hv-selw .hv-selw-ctatop, html body .elementor-7938 .hv-selw .hv-selw-ctafoot{min-height:44px !important; align-items:center !important} /* === HV AUDIT 0405 — fin === */ /* === HV BANDE BLANCHE (12/08) — le fond sombre de la section 02 doit couvrir son padding === */ body .elementor-7938 .hv-dif{background-color:#071626 !important} /* === HV BANDE BLANCHE — fin === */ /* ===== LOT C — ACCESSIBILITE (14/08/26) ===== */ /* --- 1. Contrastes : #0099CC en petit corps ne passe pas. Le token accessible --hvs-cyant #0075A4 existe deja dans la charte. --- */ .hv-dd-arrow, .hv-entry-title .pillar, .hv-explore { color:#0075A4 !important; } /* pied de page : #0099CC sur #F0F4F8 = 2.96:1 */ .hv-mark-sub, .hv-col > h3, .hv-stay > h3, .ff-btn.ff-btn-submit { color:#00597E !important; } .hv-foot-right a { color:#5A6B7C !important; } /* [retire 25/08] "corps de texte a 4.48:1, il manque 0.02" : correctif devenu sans objet. Le widget TRUST V5 pose --hv-ink #191C1E (16.0:1) sur .hv-prose-lead et --hv-ink-soft #43474E (8.8:1) sur .hv-prose-body, fond #F7F9FB. Le correctif a survecu a son objet et forcait du cyan sur du corps de texte. */ /* --- 2. Plancher typographique a 11px --- */ .hv-util-center, .hv-entry-title .pillar, .hv-wm-no, .hv-wm-bandeau .lab, .hv-wm-bandeau .pill, .hv-ways-spec dt, .hv-selw-openb .hv-selw-vkick, .hv-mark-sub { font-size:11px !important; } /* --- 3. Cibles tactiles : porter la zone cliquable a 44px de haut sans deplacer le texte (padding + marge negative) --- */ .hv-hero-cta2, .hv-foot-right a, .hv-foot ul li a { display:inline-block; padding-block:11px; margin-block:-11px; } .hv-social a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* [retire] regle de cible tactile 1 : cassait le repli max-height des cartes Solutions */ /* --- 4. Focus clavier visible et homogene (aucun etat de focus explicite n'existait sur les liens de la page) --- */ .hv-hero-cta2:focus-visible, .hv-ways-cta:focus-visible, .hv-explore:focus-visible, .hv-dd-arrow:focus-visible, .hv-social a:focus-visible, .hv-foot-right a:focus-visible { outline:2px solid #0075A4; outline-offset:3px; border-radius:2px; } /* ===== FIN LOT C ===== */ /* ===== LOT C bis — SPECIFICITE ===== */ /* La regle « body .elementor-7938 [data-id="969c871"] .hv-prose-* » (0,3,1) battait « .hv-prose-* » (0,1,0) malgre !important. On monte a 0,3,2. */ /* [retire 25/08] surenchere de specificite sans objet depuis le retrait du LOT C ci-dessus : plus aucune regle ne dispute la couleur du corps au widget. */ /* « .hv-ft .hv-stay-ff .fluentform .ff-btn-submit{color:currentcolor} » (0,4,0) ramenait le bouton a #0099CC par heritage. */ html .hv-ft .hv-stay-ff .fluentform .ff-btn-submit, html .hv-ft .hv-stay button.ff-btn-submit { color:#00597E !important; } /* « .hv-hdr-v4 .hv-util-center{font-size:10px} » (0,2,0) battait « .hv-util-center » (0,1,0). */ html .hv-hdr-v4 .hv-util-center { font-size:11px !important; } /* kickers de Selected Work : 10px mesures */ html .hv-selw-pan .hv-selw-openb [class*="kick"], html .hv-selw-pan .hv-selw-openb [class*="vkick"], html .hv-selw-kicker { font-size:11px !important; } /* ===== FIN LOT C bis ===== */ /* ===== LOT C ter — FINITION ===== */ /* --- 1. Capitales de plus de 28 caracteres : la forme des mots disparait. Le texte source est deja en casse normale, seul le CSS majusculait. --- */ html .hv-selw-title { text-transform:none !important; } /* 34 a 41 car, 27px */ html .hv-wm-carte .hv-wm-ben { text-transform:none !important; } /* 28 a 34 car, 21px */ html .hv-ft-title { text-transform:none !important; } /* 33 car, 22px */ html .hv-wm-bandeau .lab { text-transform:none !important; } /* 33 car, 11px */ html .hv-hdr-v4 .hv-util-center{ text-transform:none !important; } /* 32 car, 11px */ /* conserves en capitales : etiquettes de 20 a 27 car (.hv-selw-kicker, .hv-wm-tech, .pill, .hv-explore, .hv-ft-cta, .hv-ways-thint) et l'affichage 84px de la marquee. */ /* --- 2. Cibles tactiles portees a 44px sans decaler la mise en page --- */ html .hv-util-link, html .hv-util-lang, html .hv-foot-right a, html .hv-foot ul li a { display:inline-flex; align-items:center; min-height:44px; } html .hv-util-social, html .hv-social a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } html .hv-nav button.hv-item, html .hv-nav a.hv-cta, html .hv-explore, html .hv-hero-cta2 { min-height:44px; display:inline-flex; align-items:center; } /* [retire] regle de cible tactile 2 : cassait le repli max-height des cartes Solutions */ /* le champ et le bouton de la newsletter */ html .hv-stay .ff-el-form-control, html .hv-stay .ff-btn-submit { min-height:44px; } /* --- 3. Le titre h1 lecteur d'ecran reste en capitales : il n'est pas rendu. --- */ /* ===== FIN LOT C ter ===== */ /* ===== LOT F — PERFORMANCE ===== */ /* --- 1. « transition: all » transitionne des proprietes non voulues et empeche le navigateur d'optimiser. 12 occurrences mesurees. « linear » est en outre le mauvais easing pour du survol. --- */ html .skip-link, html .hv-util-lang, html .hv-logo, html .hv-featured, html .hv-wm-carte, html .hv-dif-slide, html .hv-mob-link, html .hv-mob-cta, html .hv-mob-sub-in a, html .hv-mob-foot a.lang { transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease !important; } /* --- 2. « will-change » laisse au repos maintient une couche de composition en permanence sur 8 elements. On ne l'arme que pendant l'animation. --- */ html .hv-eye-h, html .hv-prose-lead, html .hv-prose-body, html .hv-stat, html .hv-wm-on { will-change: auto !important; } html .hv-eye-h:not(.hv-in), html .hv-prose-lead:not(.hv-in), html .hv-prose-body:not(.hv-in), html .hv-stat:not(.hv-in) { will-change: opacity, transform !important; } /* --- 3. Le bandeau utilitaire du header animait height et padding. transform ne declenche ni calcul de mise en page ni peinture. --- */ html .hv-hdr-v4 .hv-util { transition: opacity .35s cubic-bezier(0.16,1,0.3,1), transform .35s cubic-bezier(0.16,1,0.3,1) !important; } /* ===== FIN LOT F ===== */ /* ===== LOT F ter — RESTE ===== */ /* Les 2 derniers « transition:all » heritent de main.min.css d'Astra (selecteur « a »). On les nomme explicitement. */ html .elementor-7938 a.e-button-base, html .elementor-7938 .e-con a:not([class]) { transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease !important; } /* ===== FIN LOT F ter ===== */ /* ===== LOT F quater — INTERLETTRAGE ===== */ /* Les capitales ont besoin d'un interlettrage large pour respirer ; la casse normale non, et 0.30em sur du texte courant nuit a la lecture. Regression introduite par le lot C ter, corrigee ici. */ html .hv-hdr-v4 .hv-util-center { letter-spacing:.01em !important; } html .hv-wm-bandeau .lab { letter-spacing:.01em !important; } /* dernier texte fonctionnel sous le plancher : « Swiss tech & hosting » */ html .elementor-7938 .hv-ways-spec dt, html .elementor-7938 [class*="spec"] dt, html .elementor-7938 .hv-ways-body dt { font-size:11px !important; } /* ===== FIN LOT F quater ===== */ /* ===== MARQUES D'ANGLE SOLUTIONS (14/08) ===== */ /* 1. visibles au repos, effacees au survol */ body .elementor-7938 [data-id="20b0d43"] article::before{ opacity:1 !important; transition:opacity .28s cubic-bezier(0.16,1,0.3,1) !important; } body .elementor-7938 [data-id="20b0d43"] article:hover::before{ opacity:0 !important; } /* 2. blanc sur les 5 cartes a photo */ body .elementor-7938 [data-id="20b0d43"] article.elementor-element-e2a979e::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-caa54cd::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-6954c4b::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-9f09b51::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-ca551a8::before { background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) !important; } /* 3. cyan sur les 4 cartes sans photo */ body .elementor-7938 [data-id="20b0d43"] article.elementor-element-c5b5c75::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-075b46a::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-1dce0b5::before, body .elementor-7938 [data-id="20b0d43"] article.elementor-element-ea9952d::before { background-image:linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC),linear-gradient(#0099CC,#0099CC) !important; } /* ===== FIN MARQUES D'ANGLE ===== */ /* === HV FINITION V1 (14/08) — longueur de ligne + inset des CTA === */ /* mesure : 157 caracteres sur 640px a 15px, soit ~85 par ligne */ body .elementor-7938 .hv-selw-foot > p{ max-width:68ch !important; } /* bouton a hauteur fixe 58px, interligne 26.4px : (58-26.4)/2 = 15.8px de padding vertical, hauteur de boite inchangee (border-box) */ body .elementor-7938 a.e-button-base[class*="e-893dfcf"]{ padding-block:15.8px !important; } /* === HV FINITION V2 (14/08) === */ /* Les kickers portent opacity:0 et max-height:0 depuis l'ETAPE 5 : ils n'atteignent jamais l'ecran. V9 les neutralisait par font-size:0 ; on les sort du rendu, du flux et de l'arbre d'accessibilite. */ body .elementor-7938 [data-id="20b0d43"] article .e-con span.e-paragraph-base:first-of-type{ display:none !important; } /* CTA How We Work : boite fixe a 48px, bord 1px, interligne 26.4px. 9px de padding vertical laissent 28px de contenu : hauteur inchangee. */ body .elementor-7938 a.hv-ways-cta{ padding-block:9px !important; } /* === HV CLIENTS VAGUE V2 (14/08) — pilotee par le scroll === La progression suit le passage de la grille dans l'ecran, pas une horloge : on avance, la vague avance ; on remonte, elle repart en arriere. Aucun JavaScript. overflow:clip remplace overflow:hidden sur la section. hidden en fait un conteneur de defilement : la timeline s'y accrochait au lieu de la page et restait figee. clip decoupe a l'identique sans creer de conteneur. Tout est sous @supports : sans prise en charge, aucune animation et les logos restent simplement visibles. */ .hv-cli{ overflow:clip; } @supports (animation-timeline: view()){ .hv-cli .hv-cli-grid{ perspective:1100px; view-timeline-name:--hvGrilleClients; view-timeline-axis:block; } .hv-cli .hv-cli-c{ animation:hvCliVague linear both; animation-timeline:--hvGrilleClients; } /* rotate et non transform : une animation sur timeline de scroll reste active en permanence et garderait transform pour elle, ce qui tuerait le survol (-3px). Les deux proprietes se composent. */ @keyframes hvCliVague{ 0% { rotate:y -88deg; opacity:0; } 58% { opacity:1; } 76%,100% { rotate:y 0deg; opacity:1; } } /* carte par carte : decalage 3,5%, course 3%, fin a 52% du passage. Le titre sort a 61% : toutes les cartes sont posees avant. */ .hv-cli .hv-cli-c:nth-child(1){ animation-range:cover 0% cover 3%; } .hv-cli .hv-cli-c:nth-child(2){ animation-range:cover 3.5% cover 6.5%; } .hv-cli .hv-cli-c:nth-child(3){ animation-range:cover 7% cover 10%; } .hv-cli .hv-cli-c:nth-child(4){ animation-range:cover 10.5% cover 13.5%; } .hv-cli .hv-cli-c:nth-child(5){ animation-range:cover 14% cover 17%; } .hv-cli .hv-cli-c:nth-child(6){ animation-range:cover 17.5% cover 20.5%; } .hv-cli .hv-cli-c:nth-child(7){ animation-range:cover 21% cover 24%; } .hv-cli .hv-cli-c:nth-child(8){ animation-range:cover 24.5% cover 27.5%; } .hv-cli .hv-cli-c:nth-child(9){ animation-range:cover 28% cover 31%; } .hv-cli .hv-cli-c:nth-child(10){ animation-range:cover 31.5% cover 34.5%; } .hv-cli .hv-cli-c:nth-child(11){ animation-range:cover 35% cover 38%; } .hv-cli .hv-cli-c:nth-child(12){ animation-range:cover 38.5% cover 41.5%; } .hv-cli .hv-cli-c:nth-child(13){ animation-range:cover 42% cover 45%; } .hv-cli .hv-cli-c:nth-child(14){ animation-range:cover 45.5% cover 48.5%; } .hv-cli .hv-cli-c:nth-child(15){ animation-range:cover 49% cover 52%; } @media (prefers-reduced-motion: reduce){ .hv-cli .hv-cli-c{ animation:none; } } } /* ===== FAQ, mix des deux versions (20/08/2026, desktop) ===== La FAQ etait la SEULE section centree de la page : tous les autres H2 sont a gauche a 70 px. On la remet dans la colonne de lecture commune. Le conteneur faisait width:min(1240px,90vw) centre, soit un bord gauche a 92 px : on le cale sur la grille du site (1400 max + 64 de gouttiere) pour retrouver les 70 px. La liste garde sa largeur de 900 px, qui tient la relation question / marqueur. Marqueur passe en cyan (il etait navy, donc muet) et le survol agit desormais aussi sur le texte, pas seulement sur l'icone. */ .hvfq .hvfq__in{width:100%;max-width:1400px;padding-left:64px;padding-right:64px} .hvfq .hvfq__head{text-align:left} .hvfq .hvfq__lede{margin-left:0;margin-right:0} .hvfq .hvfq__list{margin-left:0;margin-right:auto} .hvfq .hvfq__ic{transition:transform 220ms cubic-bezier(0.16,1,0.3,1)} .hvfq .hvfq__ic::before,.hvfq .hvfq__ic::after{background:var(--hvq-cyan)} @media(hover:hover) and (pointer:fine){ .hvfq .hvfq__q:hover .hvfq__qt{color:var(--hvq-accent)} .hvfq .hvfq__q:hover .hvfq__ic{transform:scale(1.12)} } @media(max-width:1040px){.hvfq .hvfq__in{padding-left:38px;padding-right:38px}} @media(max-width:700px){.hvfq .hvfq__in{padding-left:22px;padding-right:22px}} /* Le H2 de la FAQ porte max-width + margin:0 auto : text-align:left sur le parent ne suffisait pas, la boite restait centree (bord a 325 au lieu de 77). */ .hvfq .hvfq__head .hvfq__h2{margin-left:0;margin-right:auto} /* Correction : le titre de la section avis avait ete cale sur « Swiss hands » (72 px), qui est lui-meme une EXCEPTION. Le releve des 11 H2 de la page donne 8 titres a 82 px et 3 a 72. La norme est 82 px / Montserrat 600 / interligne .95, comme documente dans le commentaire « Reference : section 03 The Difference » plus haut. */ .hv-rvs h2{font-size:clamp(38px,5.75vw,82px);line-height:.95} /* Meme cause que la landing : le