/* Theme Name: Inotek Child Theme URI: https://wp.themevally.com/inotek/ Description: Inotek Child Theme customise pour BAYADEV Author: Theme-vally / BAYADEV Author URI: https://bayadev.fr Template: inotek Domain Path: /languages/ Version: 1.0.43 */ /* ========================================================= BAYADEV - Selecteur de langue FR / EN dans le header ========================================================= */ /* Conteneur global du switch FR / EN. Role : - garder les liens FR / EN alignes horizontalement ; - conserver une distance propre avec les elements du header ; - rester au-dessus du fond et des effets visuels du header. Reglages utiles : - gap : espace entre FR, le separateur et EN ; - margin-right : distance avec les elements situes a droite ; - z-index : priorite d'affichage au-dessus du decor. */ .bayadev-header-lang-switcher { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-right: 18px !important; position: relative !important; z-index: 99 !important; } /* Lien individuel FR ou EN. Objectif : - style tres discret par defaut ; - lisible sur fond sombre ; - aucun fond ni bordure pour ne pas concurrencer le CTA principal. Reglages utiles : - color : couleur inactive ; - font-size : taille du texte ; - font-weight : epaisseur du texte. */ .bayadev-header-lang-switcher .bayadev-lang-item { color: rgba(255, 255, 255, 0.78) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; text-transform: uppercase !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; transition: color 0.2s ease, opacity 0.2s ease !important; } /* Etat actif et survol. Le bleu #1d8cff reprend l'accent principal BAYADEV. */ .bayadev-header-lang-switcher .bayadev-lang-item:hover, .bayadev-header-lang-switcher .bayadev-lang-item.active { color: #1d8cff !important; } /* Separateur entre FR et EN. Il doit rester visible mais secondaire. */ .bayadev-header-lang-switcher .bayadev-lang-separator { color: rgba(255, 255, 255, 0.35) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; } /* Mobile / tablette. On masque le switch dans le header desktop pour eviter les chevauchements avec le menu mobile et les icones du theme. */ @media (max-width: 991px) { .bayadev-header-lang-switcher { display: none !important; } } /* ========================================================= BAYADEV - Hero principal ========================================================= */ /* ========================================================= ZONE 1 - REGLAGES GRAND ECRAN / DESKTOP / DELL 23" ========================================================= Cette zone pilote le rendu principal sur grand ecran. Si le rendu est bon sur le Dell 23 pouces, eviter de modifier les valeurs de cette zone sans tester le rendu global du Hero. Reglages principaux : - variables du droide : taille, position, zoom ; - variables du contenu : position, titre, description ; - variables des badges : largeur, taille, hauteur ; - variable du bouton : distance avec le bloc badges. */ .tv-hero-section.style-8 { /* Droide / humanoide : - width : taille visuelle de base ; - scale : zoom global ; - x/y : position fine ; - margin-top : position verticale du bloc image. */ --bayadev-droid-width: 560px; --bayadev-droid-scale: 1; /* POSITION DU DROIDE - GRAND ECRAN / DESKTOP --------------------------------------------------------- --bayadev-droid-x : - augmenter la valeur positive pour deplacer le droide vers la droite ; - diminuer la valeur pour le ramener vers la gauche. --bayadev-droid-y : - valeur positive = descend ; - valeur negative = remonte. Ces variables concernent uniquement le droide. Elles ne modifient jamais le noyau, les orbites ou les badges. */ --bayadev-droid-x: 230px; --bayadev-droid-y: 20px; --bayadev-droid-margin-top: 125px; /* ========================================================= POSITIONNEMENT INDEPENDANT DES ELEMENTS - GRAND ECRAN ========================================================= Chaque element possede maintenant ses propres coordonnees. TITRE : - --bayadev-title-x : negatif = gauche, positif = droite ; - --bayadev-title-y : negatif = haut, positif = bas. DESCRIPTION : - --bayadev-description-x : negatif = gauche, positif = droite ; - --bayadev-description-y : negatif = haut, positif = bas. BOUTON : - --bayadev-button-x : negatif = gauche, positif = droite ; - --bayadev-button-y : negatif = haut, positif = bas. IMPORTANT : Le bouton est deplace avec transform: translate(). Son mouvement ne modifie donc pas la hauteur de la colonne, ne deplace pas le droide et ne deplace pas le systeme orbital. */ --bayadev-title-x: -220px; --bayadev-title-y: -100px; --bayadev-description-x: -220px; --bayadev-description-y: -80px; --bayadev-button-x: -220px; --bayadev-button-y: 48px; /* Espace structurel fixe entre la description et le bouton. Cette valeur reste moderee afin de ne jamais agrandir excessivement la colonne et de ne pas influencer l'alignement du droide. Pour descendre visuellement le bouton, modifier uniquement --bayadev-button-y. */ --bayadev-button-base-gap: 34px; /* Slogan principal. Le titre est volontairement large pour garder une composition ambitieuse et premium sur desktop. */ --bayadev-hero-title-size: 64px; --bayadev-hero-title-line-height: 1.3; --bayadev-hero-title-width: 900px; /* Description sous le slogan. La taille reste contenue pour ne pas concurrencer le titre. */ --bayadev-hero-text-size: 16px; --bayadev-hero-text-line-height: 1.65; /* Badges expertise - version "executive stack". Strategie design : - abandonner les badges alignes et les panneaux trop visibles ; - presenter les expertises comme une liste premium de capacites ; - ajouter une numerotation editoriale et une ligne lumineuse active ; - donner un rendu plus sobre, credible et haut de gamme. Reglages utiles : - --bayadev-badges-width : largeur totale du stack ; - --bayadev-badge-font-size : taille du texte ; - --bayadev-badge-min-height : hauteur minimale de chaque ligne. */ --bayadev-badges-width: 720px; --bayadev-badge-font-size: 13px; --bayadev-badge-min-height: 32px; --bayadev-badge-max-width: 100%; /* Distance entre badges et bouton. L'ancien espace etait trop grand : le CTA semblait detache du bloc de preuve. Cette valeur garde le CTA proche de la matrice tout en laissant respirer les animations. */ position: relative !important; } /* Position du bloc texte principal. Toute la colonne gauche est deplacee via variables pour pouvoir ajuster rapidement le rendu desktop/laptop sans modifier chaque element. */ .tv-hero-section.style-8 .hero-content-left { /* Le conteneur ne doit plus etre deplace. Le titre, la description et le bouton sont positionnes separement. */ position: relative !important; transform: none !important; } /* Slogan / titre principal. Important : - width et max-width utilisent la meme variable pour stabiliser le layout ; - la taille et la hauteur de ligne sont pilotees depuis la zone de reglages. */ .tv-hero-section.style-8 .hero-content-left .title { width: var(--bayadev-hero-title-width) !important; max-width: var(--bayadev-hero-title-width) !important; font-size: var(--bayadev-hero-title-size) !important; line-height: var(--bayadev-hero-title-line-height) !important; /* Position du titre uniquement. Ne modifie ni la description, ni le bouton, ni le droide. */ transform: translate( var(--bayadev-title-x), var(--bayadev-title-y) ) !important; } /* Mots cles du slogan : meme bleu que le CTA principal avec brillance. */ .tv-hero-section.style-8 .hero-content-left .title .bayadev-title-accent { position: relative !important; display: inline-block !important; color: #1d8cff !important; background: linear-gradient(100deg, #1d8cff 0%, #39baff 48%, #1d8cff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 12px rgba(29, 140, 255, .48), 0 0 28px rgba(29, 140, 255, .26) !important; filter: drop-shadow(0 0 8px rgba(29, 140, 255, .30)) !important; animation: bayadevTitleAccentGlow 3.8s ease-in-out infinite !important; } /* Description sous le slogan. Elle doit rester lisible mais secondaire par rapport au titre. */ .tv-hero-section.style-8 .hero-content-left .text { font-size: var(--bayadev-hero-text-size) !important; line-height: var(--bayadev-hero-text-line-height) !important; } /* Espace renforce entre le slogan et la description. */ .tv-hero-section.style-8 .hero-content-left .text-icon { /* Position de la description uniquement. Le margin-top reste fixe pour conserver une structure stable. Pour deplacer visuellement la description, modifier uniquement --bayadev-description-x et --bayadev-description-y. */ margin-top: 34px !important; transform: translate( var(--bayadev-description-x), var(--bayadev-description-y) ) !important; } /* POSITION INDEPENDANTE DU BOUTON --------------------------------------------------------- Le bouton utilise un transform independant. Pour le deplacer : - --bayadev-button-x : horizontalement ; - --bayadev-button-y : verticalement. Ne pas utiliser une tres grande margin-top pour le deplacer : une grande marge agrandit la colonne Bootstrap et peut faire bouger le droide aligne au centre de la ligne. Le transform ne modifie pas le flux du document : le titre, la description, le droide et les orbites restent fixes. */ .tv-hero-section.style-8 .hero-content-left .bayadev-hero-btn-wrapper, .tv-hero-section.style-8 .hero-content-left .theme-btn-wrapper.bayadev-hero-btn-wrapper { margin-top: var(--bayadev-button-base-gap) !important; transform: translate( var(--bayadev-button-x), var(--bayadev-button-y) ) !important; transform-origin: left center !important; position: relative !important; z-index: 90 !important; } /* Badge natif au-dessus du slogan. On le masque pour ne pas ajouter une micro-information concurrente au bloc expertise. */ .tv-hero-section.style-8 .hero-content-left .sub-title { display: none !important; } /* Carte "40+ Successfully Finished Works". Masquee pour garder le Hero plus propre et eviter les elements flottants qui affaiblissent le positionnement premium. */ .tv-hero-section.style-8 .hero-right .counter-info { display: none !important; } /* Carte "10+ active customers". Masquee pour conserver une composition plus selective. */ .tv-hero-section.style-8 .info-box { display: none !important; } /* Conteneur parent du droide. position: relative permet de garder un contexte de placement fiable. */ .tv-hero-section.style-8 .hero-right { position: relative !important; } /* Bloc qui porte l'image du droide. Le margin-top reste pilote par variable pour faciliter les ajustements selon la taille d'ecran. */ .tv-hero-section.style-8 .hero-right .image-thumb { margin-top: var(--bayadev-droid-margin-top) !important; position: relative !important; z-index: 40 !important; } /* Wrapper interne de l'image. Le placement global du droide est applique ici, tandis que l'image elle-meme conserve son animation de flottement. */ .tv-hero-section.style-8 .hero-right .image-thumb .image { position: relative !important; display: flex !important; justify-content: flex-end !important; align-items: flex-end !important; transform: translate(var(--bayadev-droid-x), var(--bayadev-droid-y)) scale(var(--bayadev-droid-scale)) !important; transform-origin: center bottom !important; will-change: transform !important; } /* Image du droide / humanoide. Important : - ne pas ajouter de transform fixe ici ; - l'animation bayadevHumanoidFloat agit sur l'image ; - le wrapper .image gere le placement global. */ .tv-hero-section.style-8 .hero-right .image-thumb .image img { width: var(--bayadev-droid-width) !important; max-width: none !important; height: auto !important; margin-right: 0 !important; transform-origin: center bottom !important; animation: bayadevHumanoidFloat 5.5s ease-in-out infinite !important; will-change: transform, filter !important; } /* Animation premium du droide. Mouvement volontairement lent et subtil : - donne de la presence ; - evite un rendu gadget ; - garde le focus sur le message et le CTA. */ @keyframes bayadevHumanoidFloat { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(0, 180, 255, 0)); } 25% { transform: translateY(-6px) rotate(-0.35deg) scale(1.006); filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.16)); } 50% { transform: translateY(-10px) rotate(0.25deg) scale(1.012); filter: drop-shadow(0 0 16px rgba(0, 180, 255, 0.22)); } 75% { transform: translateY(-5px) rotate(0.15deg) scale(1.006); filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.16)); } } /* ========================================================= ZONE 2 - REGLAGES LAPTOP COMPACT / LENOVO 15,6" ========================================================= Ce bloc s'active sur : - les grands ecrans CSS inferieurs a 1700px ; - ou les ecrans avec une hauteur disponible inferieure a 850px. Pourquoi : deux ecrans peuvent etre en 1920 x 1080 mais ne pas produire le meme viewport CSS, notamment a cause du zoom Windows 125% / 150%. Objectif : conserver un Hero lisible sur laptop sans casser le rendu desktop. */ @media (min-width: 1200px) and (max-width: 1700px), (min-width: 1200px) and (max-height: 850px) { .tv-hero-section.style-8 { /* REGLAGES INDEPENDANTS - LAPTOP COMPACT / LENOVO 15,6" --------------------------------------------------------- Modifie chaque element separement : TITRE : --bayadev-title-x / --bayadev-title-y DESCRIPTION : --bayadev-description-x / --bayadev-description-y BOUTON : --bayadev-button-x / --bayadev-button-y DROIDE : --bayadev-droid-x / --bayadev-droid-y Le systeme orbital conserve ses propres valeurs dans .bayadev-orbital-expertise. */ --bayadev-title-x: -35px; --bayadev-title-y: -80px; --bayadev-description-x: -35px; --bayadev-description-y: -60px; --bayadev-button-x: -35px; --bayadev-button-y: 48px; --bayadev-button-base-gap: 34px; --bayadev-hero-title-size: 48px; --bayadev-hero-title-line-height: 1.3; --bayadev-hero-text-size: 14px; --bayadev-hero-text-line-height: 1.55; /* Matrice expertise sur laptop compact : largeur reduite, texte legerement plus petit, bouton rapproche. */ --bayadev-badges-width: 620px; --bayadev-badge-font-size: 11px; --bayadev-badge-min-height: 38px; --bayadev-badge-max-width: 100%; --bayadev-droid-width: 500px; --bayadev-droid-scale: 0.8; --bayadev-droid-x: 160px; --bayadev-droid-y: -70px; --bayadev-droid-margin-top: 110px; } } /* Responsive grand laptop / petit desktop. Ici on reduit les deplacements et on conserve des badges lisibles pour eviter que le contenu sorte du Hero. */ @media (max-width: 1199px) { .tv-hero-section.style-8 { --bayadev-droid-width: 500px; --bayadev-droid-scale: 0.90; --bayadev-droid-x: 55px; --bayadev-droid-y: 10px; --bayadev-droid-margin-top: 118px; /* REGLAGES INDEPENDANTS - TABLETTE / PETIT DESKTOP --------------------------------------------------------- Chaque element peut etre deplace sans influencer les autres. */ --bayadev-title-x: -18px; --bayadev-title-y: -42px; --bayadev-description-x: -18px; --bayadev-description-y: 0px; --bayadev-button-x: -18px; --bayadev-button-y: 34px; --bayadev-button-base-gap: 34px; --bayadev-hero-title-size: 48px; --bayadev-hero-title-line-height: 1.3; --bayadev-hero-text-size: 15px; --bayadev-hero-text-line-height: 1.55; --bayadev-badges-width: 620px; --bayadev-badge-font-size: 11px; --bayadev-badge-min-height: 38px; --bayadev-badge-max-width: 100%; } } /* ========================================================= BAYADEV - AI Orbital Knowledge Core Version 1.0.36 - badges premium epures, sans numero ni globe ========================================================= */ .tv-hero-section.style-8 .hero-inner { position: relative !important; min-height: 790px !important; overflow: hidden !important; } .tv-hero-section.style-8 .hero-inner > .container { position: relative !important; z-index: 30 !important; } .tv-hero-section.style-8 .hero-content-left { position: relative !important; z-index: 80 !important; } .tv-hero-section.style-8 .hero-right { z-index: 60 !important; } /* IMPORTANT - POSITION DU NOYAU ET DES ORBITES --------------------------------------------------------- La position du systeme orbital est controlee uniquement ici avec : - left ; - top ; - --orbital-width ; - --orbital-height. Les variables du texte et du droide declarees plus haut n'ont aucun effet sur ce bloc. Ne modifie pas ces valeurs pour deplacer le titre ou le droide. */ .tv-hero-section.style-8 .bayadev-orbital-expertise { /* Reglages independants du systeme orbital. - left/top deplacent uniquement le noyau, les orbites et les badges ; - scale ajuste leur taille globale sans toucher au texte ni au droide. */ --orbital-width: 800px; --orbital-height: 580px; --core-size: 152px; --bayadev-orbital-left: 53.8%; --bayadev-orbital-top: 56%; --bayadev-orbital-scale: .97; --orbital-slash-angle: 70deg; position: absolute !important; left: var(--bayadev-orbital-left) !important; top: var(--bayadev-orbital-top) !important; width: var(--orbital-width) !important; height: var(--orbital-height) !important; transform: translate(-50%, -50%) scale(var(--bayadev-orbital-scale)) !important; transform-origin: 50% 50% !important; z-index: 45 !important; isolation: isolate !important; pointer-events: none !important; } .tv-hero-section.style-8 .bayadev-orbital-aura { position: absolute !important; left: 50% !important; top: 50% !important; width: 64% !important; aspect-ratio: 1 !important; transform: translate(-50%, -50%) !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(89,220,255,.18), rgba(51,103,255,.13) 28%, rgba(91,50,255,.08) 48%, transparent 72%) !important; filter: blur(15px) !important; opacity: .95 !important; animation: bayadevOrbitalAura 5.8s ease-in-out infinite !important; } /* ========================================================= BAYADEV - Noyau minimal : logo + halo lumineux ========================================================= */ .tv-hero-section.style-8 .bayadev-knowledge-core { position: absolute !important; left: 50% !important; top: 50% !important; width: var(--core-size) !important; height: var(--core-size) !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; pointer-events: none !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; animation: bayadevCoreEntry 1.15s cubic-bezier(.2,.8,.2,1) both !important; } .tv-hero-section.style-8 .bayadev-core-glow { position: absolute !important; left: 50% !important; top: 50% !important; width: 132% !important; height: 132% !important; transform: translate(-50%, -50%) scale(.96) !important; transform-origin: center center !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(115,226,255,.19) 18%, rgba(29,140,255,.18) 38%, rgba(74,76,255,.09) 57%, transparent 74%) !important; filter: blur(14px) !important; opacity: .92 !important; pointer-events: none !important; z-index: 1 !important; animation: bayadevCoreGlowPulse 4.8s ease-in-out infinite !important; will-change: transform, opacity, filter !important; } .tv-hero-section.style-8 .bayadev-core-glow::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 58% !important; height: 58% !important; transform: translate(-50%, -50%) !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(93,215,255,.19) 32%, rgba(29,140,255,.08) 58%, transparent 78%) !important; filter: blur(7px) !important; opacity: .88 !important; } .tv-hero-section.style-8 .core-logo-svg { position: relative !important; z-index: 4 !important; display: block !important; width: 96px !important; max-width: 68% !important; height: auto !important; margin: 0 !important; overflow: visible !important; transform-origin: center center !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.25)) drop-shadow(0 0 12px rgba(83,213,255,.52)) drop-shadow(0 0 24px rgba(29,140,255,.25)) !important; animation: bayadevCoreLogoFloat 4.8s ease-in-out infinite !important; transition: filter .28s ease, transform .28s ease, opacity .28s ease !important; will-change: transform, filter !important; } /* Moteur orbital compatible Chrome, Edge, Firefox et Safari. Le mouvement n'utilise plus offset-path : chaque satellite est porte par un rotor circulaire GPU, puis la trajectoire est aplatie en ellipse avec scaleY(). Une contre-rotation synchronisee maintient chaque badge a 0 degre. */ .tv-hero-section.style-8 .bayadev-orbit { position: absolute !important; left: 50% !important; top: 50% !important; width: var(--orbit-w) !important; height: var(--orbit-h) !important; transform: translate(-50%, -50%) rotate(var(--orbit-angle)) !important; transform-origin: center !important; z-index: 5 !important; pointer-events: none !important; opacity: 0; animation: bayadevOrbitReveal 1.1s ease forwards !important; animation-delay: var(--orbit-delay) !important; } .tv-hero-section.style-8 .bayadev-orbit-track { position: absolute !important; left: 50% !important; top: 50% !important; width: var(--orbit-w) !important; height: var(--orbit-w) !important; transform: translate(-50%, -50%) rotate(var(--orbit-angle)) scaleY(var(--orbit-scale-y)) !important; transform-origin: center !important; z-index: 30 !important; pointer-events: none !important; } .tv-hero-section.style-8 .bayadev-orbit-rotor { position: absolute !important; inset: 0 !important; transform-origin: 50% 50% !important; animation: bayadevOrbitRotor var(--orbit-duration) linear var(--phase-delay) infinite !important; animation-direction: var(--orbit-direction) !important; animation-play-state: running !important; will-change: transform !important; } .tv-hero-section.style-8 .bayadev-orbit-anchor { position: absolute !important; left: 100% !important; top: 50% !important; width: 1px !important; height: 1px !important; } /* Annule en temps reel la rotation du rotor. */ .tv-hero-section.style-8 .bayadev-orbit-counter-rotor { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; transform-origin: 0 0 !important; animation: bayadevOrbitCounterRotor var(--orbit-duration) linear var(--phase-delay) infinite !important; animation-direction: var(--counter-direction) !important; animation-play-state: running !important; will-change: transform !important; } /* Annule l'ecrasement elliptique et l'angle fixe du plan orbital. */ .tv-hero-section.style-8 .bayadev-orbit-plane-corrector { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; transform: scaleY(var(--orbit-scale-y-inverse)) rotate(var(--orbit-counter-angle)) !important; transform-origin: 0 0 !important; } /* Cinq orbites independantes et davantage espacees. Les neuf badges sont repartis sur ces trajectoires avec des phases distinctes. Chaque ligne definit : - dimensions et excentricite ; - angle reel de l'orbite ; - angle inverse pour garder le badge droit ; - vitesse, sens et phase de depart par defaut. */ .tv-hero-section.style-8 .bayadev-orbit-1, .tv-hero-section.style-8 .bayadev-orbit-track-1 { --orbit-w:314px; --orbit-h:132px; --orbit-angle:10deg; --orbit-counter-angle:-10deg; --orbit-scale-y:.4204; --orbit-scale-y-inverse:2.3788; --orbit-duration:56s; --orbit-direction:normal; --counter-direction:reverse; --orbit-delay:.42s; --phase-delay:-4s; } .tv-hero-section.style-8 .bayadev-orbit-2, .tv-hero-section.style-8 .bayadev-orbit-track-2 { --orbit-w:414px; --orbit-h:190px; --orbit-angle:42deg; --orbit-counter-angle:-42deg; --orbit-scale-y:.4589; --orbit-scale-y-inverse:2.1790; --orbit-duration:71s; --orbit-direction:reverse; --counter-direction:normal; --orbit-delay:.58s; --phase-delay:-17s; } .tv-hero-section.style-8 .bayadev-orbit-3, .tv-hero-section.style-8 .bayadev-orbit-track-3 { --orbit-w:520px; --orbit-h:260px; --orbit-angle:76deg; --orbit-counter-angle:-76deg; --orbit-scale-y:.5000; --orbit-scale-y-inverse:2.0000; --orbit-duration:89s; --orbit-direction:normal; --counter-direction:reverse; --orbit-delay:.74s; --phase-delay:-31s; } .tv-hero-section.style-8 .bayadev-orbit-4, .tv-hero-section.style-8 .bayadev-orbit-track-4 { --orbit-w:628px; --orbit-h:344px; --orbit-angle:112deg; --orbit-counter-angle:-112deg; --orbit-scale-y:.5478; --orbit-scale-y-inverse:1.8256; --orbit-duration:111s; --orbit-direction:reverse; --counter-direction:normal; --orbit-delay:.90s; --phase-delay:-49s; } .tv-hero-section.style-8 .bayadev-orbit-5, .tv-hero-section.style-8 .bayadev-orbit-track-5 { --orbit-w:736px; --orbit-h:430px; --orbit-angle:146deg; --orbit-counter-angle:-146deg; --orbit-scale-y:.5842; --orbit-scale-y-inverse:1.7116; --orbit-duration:137s; --orbit-direction:normal; --counter-direction:reverse; --orbit-delay:1.06s; --phase-delay:-68s; } .tv-hero-section.style-8 .orbit-line { position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 1px solid rgba(82,213,255,.15) !important; box-shadow: inset 0 0 12px rgba(60,173,255,.035), 0 0 10px rgba(45,174,255,.05) !important; } .tv-hero-section.style-8 .bayadev-orbit:nth-of-type(3n) .orbit-line { border-color: rgba(102,142,255,.17) !important; } .tv-hero-section.style-8 .orbit-light { position: absolute !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #8ae9ff !important; box-shadow: 0 0 8px #63ddff, 0 0 18px rgba(74,184,255,.75) !important; } .tv-hero-section.style-8 .orbit-light-one { left: 8% !important; top: 50% !important; } .tv-hero-section.style-8 .orbit-light-two { right: 12% !important; top: 24% !important; width: 3px !important; height: 3px !important; opacity: .58 !important; } /* Le satellite est place au bout du rotor. Son mouvement est gere par les wrappers parents. */ .tv-hero-section.style-8 .bayadev-orbital-satellite { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; pointer-events: auto !important; outline: none !important; opacity: 1 !important; } .tv-hero-section.style-8 .satellite-module { position: absolute !important; left: 0 !important; top: 0 !important; display: flex !important; align-items: center !important; gap: 0 !important; width: max-content !important; min-width: max-content !important; max-width: none !important; min-height: 38px !important; padding: 6px 11px !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; backface-visibility: hidden !important; border-radius: 999px !important; color: #fff !important; background: linear-gradient(110deg, rgba(255,255,255,.15), rgba(255,255,255,.035) 42%, rgba(50,142,255,.08)), rgba(7,18,68,.66) !important; border: 1px solid rgba(117,220,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 24px rgba(0,0,0,.24), 0 0 18px rgba(52,176,255,.13) !important; backdrop-filter: blur(13px) saturate(145%) !important; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease !important; animation: bayadevSatelliteReveal .7s cubic-bezier(.2,.8,.2,1) calc(.25s + (var(--satellite-order) * .08s)) both !important; } .tv-hero-section.style-8 .satellite-orb { display: none !important; } .tv-hero-section.style-8 .satellite-orb::after { display: none !important; } .tv-hero-section.style-8 .satellite-copy { display: block !important; min-width: 0 !important; } .tv-hero-section.style-8 .satellite-number { display: none !important; } .tv-hero-section.style-8 .satellite-label { display: flex !important; flex-direction: column !important; justify-content: center !important; overflow: visible !important; color: rgba(255,255,255,.96) !important; font-size: 11.5px !important; font-weight: 800 !important; line-height: 1.16 !important; white-space: nowrap !important; } .tv-hero-section.style-8 .satellite-label-line { display: block !important; white-space: nowrap !important; } .tv-hero-section.style-8 .satellite-link { position: absolute !important; left: 0 !important; top: 0 !important; width: 128px !important; height: 1px !important; transform: translateY(-50%) scaleX(0) !important; transform-origin: left center !important; background: linear-gradient(90deg, rgba(112,231,255,.92), rgba(68,132,255,.08)) !important; box-shadow: 0 0 10px rgba(73,200,255,.54) !important; opacity: 0 !important; transition: transform .28s ease, opacity .28s ease !important; pointer-events: none !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite:hover, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible { z-index: 100 !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-module { transform: translate(-50%, -50%) scale(1.075) !important; border-color: rgba(151,238,255,.82) !important; background: linear-gradient(110deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 42%, rgba(50,142,255,.16)), rgba(8,28,101,.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 30px rgba(0,0,0,.3), 0 0 27px rgba(55,202,255,.36) !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-link, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-link { transform: translateY(-50%) scaleX(1) !important; opacity: .82 !important; } /* Quand le curseur reste sur un badge expertise : - le halo du noyau devient plus intense ; - le logo s'illumine fortement ; - le logo grandit tres legerement ; - l'effet reste actif jusqu'a ce que le curseur quitte le badge. */ .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:hover) .bayadev-core-glow, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:focus-visible) .bayadev-core-glow { opacity: 1 !important; filter: blur(19px) brightness(1.55) saturate(1.35) !important; } /* Illumination directe du logo pendant le survol ou le focus d'un badge. */ .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:hover) .core-logo-svg, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:focus-visible) .core-logo-svg { animation-play-state: paused !important; transform: scale(1.075) !important; filter: brightness(1.3) saturate(1.25) drop-shadow(0 0 7px rgba(255,255,255,.72)) drop-shadow(0 0 14px rgba(181,244,255,.90)) drop-shadow(0 0 26px rgba(70,218,255,.95)) drop-shadow(0 0 44px rgba(29,140,255,.76)) drop-shadow(0 0 68px rgba(80,72,255,.42)) !important; } .tv-hero-section.style-8 .bayadev-orbital-particles { position: absolute !important; inset: 0 !important; z-index: 18 !important; pointer-events: none !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span { position: absolute !important; width: 3px !important; height: 3px !important; border-radius: 50% !important; background: #a8efff !important; box-shadow: 0 0 8px rgba(96,218,255,.88) !important; opacity: 0 !important; animation: bayadevDataParticle 6.5s ease-in-out infinite !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(1) { left:34%; top:35%; animation-delay:.3s !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(2) { left:61%; top:31%; animation-delay:1.4s !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(3) { left:69%; top:57%; animation-delay:2.5s !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(4) { left:42%; top:70%; animation-delay:3.4s !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(5) { left:26%; top:54%; animation-delay:4.2s !important; } .tv-hero-section.style-8 .bayadev-orbital-particles span:nth-child(6) { left:54%; top:44%; animation-delay:5.1s !important; } @keyframes bayadevCoreEntry { from { opacity:0; transform:translate(-50%,-50%) scale(.72); filter:blur(7px); } to { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } } @keyframes bayadevCoreGlowPulse { 0%,100% { transform:translate(-50%,-50%) scale(.94); opacity:.68; filter:blur(14px); } 50% { transform:translate(-50%,-50%) scale(1.08); opacity:1; filter:blur(17px); } } @keyframes bayadevOrbitReveal { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0); } } @keyframes bayadevOrbitRotor { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bayadevOrbitCounterRotor { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bayadevSatelliteReveal { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:blur(0); } } @keyframes bayadevSatelliteOrbPulse { 0%,100% { opacity:.38; transform:scale(.92); } 50% { opacity:.86; transform:scale(1.12); } } @keyframes bayadevCoreLogoFloat { 0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 5px rgba(255,255,255,.25)) drop-shadow(0 0 12px rgba(83,213,255,.52)) drop-shadow(0 0 24px rgba(29,140,255,.25)); } 50% { transform:translateY(-2px) scale(1.025); filter:drop-shadow(0 0 7px rgba(255,255,255,.34)) drop-shadow(0 0 16px rgba(83,213,255,.66)) drop-shadow(0 0 28px rgba(29,140,255,.34)); } } @keyframes bayadevTitleAccentGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(29, 140, 255, .22)); } 50% { filter: drop-shadow(0 0 13px rgba(29, 140, 255, .52)); } } @keyframes bayadevOrbitalAura { 0%,100% { transform:translate(-50%,-50%) scale(.96); opacity:.72; } 50% { transform:translate(-50%,-50%) scale(1.06); opacity:1; } } @keyframes bayadevDataParticle { 0%,12% { opacity:0; transform:translate(0,0) scale(.6); } 35% { opacity:.88; } 72% { opacity:.34; transform:translate(38px,-28px) scale(1.15); } 100% { opacity:0; transform:translate(56px,-42px) scale(.55); } } /* ========================================================= BAYADEV - ORBITAL PREMIUM INTERFACE 1.0.37 ========================================================= Cette couche modernise uniquement le systeme expertise sur desktop : - profondeur holographique autour du noyau ; - orbites plus fines avec segments lumineux ; - badges en verre technique avec indicateur d'activite ; - hierarchie visuelle renforcee sans modifier les trajectoires. IMPORTANT : Toutes les regles sont limitees a min-width: 1200px. La grille tablette/mobile existante reste donc intacte. */ @media (min-width: 1200px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { perspective: 1100px !important; filter: drop-shadow(0 24px 42px rgba(0, 10, 54, .28)) !important; } /* Interface holographique situee derriere les orbites. */ .tv-hero-section.style-8 .bayadev-orbital-interface { position: absolute !important; inset: 8% 12% !important; z-index: 2 !important; pointer-events: none !important; opacity: .46 !important; -webkit-mask-image: radial-gradient(circle at center, #000 0 43%, rgba(0,0,0,.7) 61%, transparent 83%) !important; mask-image: radial-gradient(circle at center, #000 0 43%, rgba(0,0,0,.7) 61%, transparent 83%) !important; } .tv-hero-section.style-8 .orbital-interface-grid { position: absolute !important; inset: 0 !important; border-radius: 50% !important; background-image: linear-gradient(rgba(101, 218, 255, .032) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 218, 255, .032) 1px, transparent 1px) !important; background-size: 38px 38px !important; transform: rotate(-8deg) scale(.94) !important; box-shadow: inset 0 0 70px rgba(34, 119, 255, .08) !important; } .tv-hero-section.style-8 .orbital-axis { position: absolute !important; left: 50% !important; top: 50% !important; background: linear-gradient(90deg, transparent, rgba(112, 224, 255, .11), transparent) !important; box-shadow: 0 0 14px rgba(65, 190, 255, .13) !important; } .tv-hero-section.style-8 .orbital-axis-horizontal { width: 84% !important; height: 1px !important; transform: translate(-50%, -50%) !important; } .tv-hero-section.style-8 .orbital-axis-vertical { width: 1px !important; height: 76% !important; transform: translate(-50%, -50%) !important; background: linear-gradient(180deg, transparent, rgba(112, 224, 255, .09), transparent) !important; } .tv-hero-section.style-8 .orbital-scan-beam { position: absolute !important; left: 50% !important; top: 50% !important; width: 46% !important; height: 46% !important; transform-origin: 0 0 !important; background: conic-gradient(from 0deg, rgba(71, 210, 255, .11), transparent 16%, transparent 100%) !important; border-radius: 50% !important; animation: bayadevOrbitalScan 13s linear infinite !important; opacity: .38 !important; } /* Noyau : double coque technique et etiquette centrale. */ .tv-hero-section.style-8 .bayadev-knowledge-core { border-radius: 50% !important; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.12), rgba(25,118,255,.065) 38%, rgba(4,13,52,.16) 68%, transparent 72%) !important; } .tv-hero-section.style-8 .bayadev-core-shell { position: absolute !important; left: 50% !important; top: 50% !important; border-radius: 50% !important; pointer-events: none !important; } .tv-hero-section.style-8 .bayadev-core-shell-outer { width: 112% !important; height: 112% !important; transform: translate(-50%, -50%) rotate(18deg) !important; border: 1px solid rgba(123, 225, 255, .36) !important; border-left-color: rgba(78, 129, 255, .08) !important; border-bottom-color: rgba(78, 129, 255, .10) !important; box-shadow: inset 0 0 22px rgba(40, 165, 255, .08), 0 0 28px rgba(29, 140, 255, .14) !important; animation: bayadevCoreShellSpin 28s linear infinite !important; } .tv-hero-section.style-8 .bayadev-core-shell-inner { width: 76% !important; height: 76% !important; transform: translate(-50%, -50%) rotate(-12deg) !important; border: 1px dashed rgba(142, 235, 255, .30) !important; box-shadow: inset 0 0 18px rgba(43, 187, 255, .10) !important; animation: bayadevCoreShellSpinReverse 22s linear infinite !important; } /* Orbites plus fines, mieux integrees au fond bleu nuit. */ .tv-hero-section.style-8 .orbit-line { border-color: rgba(107, 210, 255, .13) !important; background: radial-gradient(circle at 18% 50%, rgba(123, 231, 255, .34) 0 1px, transparent 2px), radial-gradient(circle at 82% 50%, rgba(83, 143, 255, .25) 0 1px, transparent 2px) !important; box-shadow: inset 0 0 16px rgba(46, 165, 255, .025), 0 0 12px rgba(45, 174, 255, .04) !important; } /* Hierarchie des trajectoires : - orbites internes plus presentes ; - orbites externes plus discretes pour alleger la composition. */ .tv-hero-section.style-8 .bayadev-orbit-1 .orbit-line { opacity: .96 !important; } .tv-hero-section.style-8 .bayadev-orbit-2 .orbit-line { opacity: .82 !important; } .tv-hero-section.style-8 .bayadev-orbit-3 .orbit-line { opacity: .68 !important; } .tv-hero-section.style-8 .bayadev-orbit-4 .orbit-line { opacity: .54 !important; } .tv-hero-section.style-8 .bayadev-orbit-5 .orbit-line { opacity: .42 !important; } .tv-hero-section.style-8 .orbit-line::before { content: "" !important; position: absolute !important; inset: -1px !important; border-radius: inherit !important; border-top: 1px solid rgba(151, 239, 255, .38) !important; border-right: 1px solid transparent !important; border-bottom: 1px solid transparent !important; border-left: 1px solid transparent !important; filter: drop-shadow(0 0 6px rgba(83, 207, 255, .34)) !important; opacity: .70 !important; } .tv-hero-section.style-8 .orbit-light { width: 4px !important; height: 4px !important; background: #d3f8ff !important; box-shadow: 0 0 5px #fff, 0 0 12px #5bd9ff, 0 0 22px rgba(54, 131, 255, .75) !important; } /* Badge expertise premium epure. Objectifs : - aucun numero ; - aucun globe ou indicateur circulaire ; - forme capsule coherente avec la reference fournie ; - double liseré lumineux cyan/bleu ; - fond sombre translucide pour rester lisible sur les orbites. */ .tv-hero-section.style-8 .satellite-module { min-height: 44px !important; padding: 9px 18px !important; gap: 0 !important; border-radius: 999px !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(17, 43, 103, .80), rgba(5, 15, 53, .88)) !important; border: 1px solid rgba(92, 196, 255, .72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(39, 101, 255, .18), 0 0 0 1px rgba(38, 111, 255, .14), 0 8px 22px rgba(0, 0, 0, .25), 0 0 14px rgba(38, 157, 255, .24) !important; -webkit-backdrop-filter: blur(14px) saturate(145%) !important; backdrop-filter: blur(14px) saturate(145%) !important; } /* Reflet lumineux discret sur le bord superieur de la capsule. */ .tv-hero-section.style-8 .satellite-module::before { content: "" !important; position: absolute !important; left: 11% !important; right: 11% !important; top: -1px !important; height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, rgba(160, 241, 255, .95), transparent) !important; box-shadow: 0 0 10px rgba(74, 206, 255, .72) !important; opacity: .90 !important; } /* Halo externe fin, proche du badge de reference. */ .tv-hero-section.style-8 .satellite-module::after { content: "" !important; position: absolute !important; inset: 2px !important; border-radius: inherit !important; border: 1px solid rgba(103, 167, 255, .16) !important; pointer-events: none !important; } /* Securite : ces anciens elements restent masques meme s'ils sont en cache HTML. */ .tv-hero-section.style-8 .satellite-orb, .tv-hero-section.style-8 .satellite-number { display: none !important; } .tv-hero-section.style-8 .satellite-copy { display: block !important; width: 100% !important; min-width: 0 !important; } .tv-hero-section.style-8 .satellite-label { align-items: center !important; text-align: center !important; color: rgba(255,255,255,.98) !important; font-size: 11.8px !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -.01em !important; text-shadow: 0 1px 7px rgba(0, 7, 34, .82), 0 0 10px rgba(78, 181, 255, .10) !important; } /* Expertises principales de BAYADEV. La classe .is-primary est ajoutee par le renderer PHP uniquement aux domaines strategiques. Elle renforce legerement le badge sans creer de rupture visuelle avec les autres expertises. */ .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-module { min-height: 46px !important; padding-inline: 20px !important; border-color: rgba(127, 224, 255, .88) !important; background: linear-gradient(180deg, rgba(22, 57, 126, .88), rgba(5, 18, 62, .92)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(39,101,255,.20), 0 0 0 1px rgba(38,111,255,.18), 0 10px 25px rgba(0,0,0,.27), 0 0 18px rgba(60,190,255,.32) !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-label { font-size: 12px !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-module { transform: translate(-50%, -50%) scale(1.065) !important; border-color: rgba(173, 243, 255, .96) !important; background: linear-gradient(180deg, rgba(24, 66, 145, .92), rgba(6, 24, 78, .94)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(49, 122, 255, .24), 0 0 0 1px rgba(81, 172, 255, .22), 0 12px 30px rgba(0,0,0,.30), 0 0 18px rgba(95, 220, 255, .48), 0 0 34px rgba(40, 111, 255, .30) !important; } @keyframes bayadevOrbitalScan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bayadevCoreShellSpin { from { transform: translate(-50%, -50%) rotate(18deg); } to { transform: translate(-50%, -50%) rotate(378deg); } } @keyframes bayadevCoreShellSpinReverse { from { transform: translate(-50%, -50%) rotate(-12deg); } to { transform: translate(-50%, -50%) rotate(-372deg); } } } /* Laptop compact. */ @media (min-width: 1200px) and (max-width: 1700px), (min-width: 1200px) and (max-height: 850px) { .tv-hero-section.style-8 .hero-inner { min-height: 680px !important; } .tv-hero-section.style-8 .bayadev-orbital-expertise { --orbital-width: 690px; --orbital-height: 495px; --core-size: 122px; --bayadev-orbital-left: 53.1%; --bayadev-orbital-top: 55%; --bayadev-orbital-scale: .96; } .tv-hero-section.style-8 .bayadev-orbit-1, .tv-hero-section.style-8 .bayadev-orbit-track-1 { --orbit-w:258px; --orbit-h:110px; --orbit-scale-y:.4264; --orbit-scale-y-inverse:2.3455; } .tv-hero-section.style-8 .bayadev-orbit-2, .tv-hero-section.style-8 .bayadev-orbit-track-2 { --orbit-w:340px; --orbit-h:158px; --orbit-scale-y:.4647; --orbit-scale-y-inverse:2.1519; } .tv-hero-section.style-8 .bayadev-orbit-3, .tv-hero-section.style-8 .bayadev-orbit-track-3 { --orbit-w:424px; --orbit-h:216px; --orbit-scale-y:.5094; --orbit-scale-y-inverse:1.9630; } .tv-hero-section.style-8 .bayadev-orbit-4, .tv-hero-section.style-8 .bayadev-orbit-track-4 { --orbit-w:510px; --orbit-h:282px; --orbit-scale-y:.5529; --orbit-scale-y-inverse:1.8085; } .tv-hero-section.style-8 .bayadev-orbit-5, .tv-hero-section.style-8 .bayadev-orbit-track-5 { --orbit-w:598px; --orbit-h:354px; --orbit-scale-y:.5919; --orbit-scale-y-inverse:1.6895; } .tv-hero-section.style-8 .core-logo-svg { width:78px !important; max-width:68% !important; } .tv-hero-section.style-8 .bayadev-core-glow { width:136% !important; height:136% !important; filter:blur(12px) !important; } .tv-hero-section.style-8 .satellite-module { min-height:36px !important; width:max-content !important; min-width:0 !important; max-width:none !important; padding:6px !important; gap:0 !important; } } /* Tablette et mobile : grille statique, les sept orbites sont masquees. */ @media (max-width: 1199px) { .tv-hero-section.style-8 .hero-inner { min-height:auto !important; overflow:hidden !important; } .tv-hero-section.style-8 .bayadev-orbital-expertise { position:relative !important; left:auto !important; top:auto !important; width:min(100% - 30px, 720px) !important; height:auto !important; margin:38px auto 24px !important; padding:112px 12px 12px !important; transform:none !important; transform-origin:center !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:9px !important; z-index:70 !important; } .tv-hero-section.style-8 .bayadev-orbital-aura, .tv-hero-section.style-8 .bayadev-orbit, .tv-hero-section.style-8 .bayadev-orbital-particles { display:none !important; } .tv-hero-section.style-8 .bayadev-knowledge-core { left:50% !important; top:56px !important; --core-size:92px; } .tv-hero-section.style-8 .core-logo-svg { width:62px !important; max-width:68% !important; } .tv-hero-section.style-8 .bayadev-core-glow { width:138% !important; height:138% !important; filter:blur(10px) !important; } .tv-hero-section.style-8 .bayadev-orbit-track { position:contents !important; display:contents !important; width:auto !important; height:auto !important; transform:none !important; } .tv-hero-section.style-8 .bayadev-orbit-rotor, .tv-hero-section.style-8 .bayadev-orbit-anchor, .tv-hero-section.style-8 .bayadev-orbit-counter-rotor, .tv-hero-section.style-8 .bayadev-orbit-plane-corrector { position:contents !important; display:contents !important; transform:none !important; animation:none !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite { position:relative !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; offset-path:none !important; offset-distance:0 !important; opacity:1 !important; animation:none !important; } .tv-hero-section.style-8 .satellite-module { position:relative !important; left:auto !important; top:auto !important; width:100% !important; min-width:0 !important; max-width:none !important; min-height:54px !important; transform:none !important; border-radius:12px !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-module { transform:translateY(-2px) !important; } .tv-hero-section.style-8 .satellite-label, .tv-hero-section.style-8 .satellite-label-line { white-space:normal !important; } .tv-hero-section.style-8 .satellite-link { display:none !important; } } @media (max-width:767px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:575px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { grid-template-columns:1fr !important; padding-inline:16px !important; } } /* ========================================================= REGLAGES MOBILE ========================================================= Sur mobile, le droide et le bloc texte sont empiles. Ces variables permettent des corrections locales sans deplacer le noyau de la grille d'expertises. - --bayadev-title-x / y : position du titre ; - --bayadev-description-x / y : position de la description ; - --bayadev-button-x / y : position du bouton ; - --bayadev-button-base-gap : petit espace structurel stable ; - --bayadev-droid-x / y : position du droide. */ @media (max-width: 767px) { .tv-hero-section.style-8 { --bayadev-title-x: 0px; --bayadev-title-y: -20px; --bayadev-description-x: 0px; --bayadev-description-y: 4px; --bayadev-button-x: 0px; --bayadev-button-y: 24px; --bayadev-button-base-gap: 28px; --bayadev-droid-x: 20px; } } @media (max-width: 575px) { .tv-hero-section.style-8 { --bayadev-title-x: 0px; --bayadev-title-y: -10px; --bayadev-description-x: 0px; --bayadev-description-y: 2px; --bayadev-button-x: 0px; --bayadev-button-y: 18px; --bayadev-button-base-gap: 24px; --bayadev-droid-x: 10px; } } @media (prefers-reduced-motion: reduce) { .tv-hero-section.style-8 .bayadev-orbital-aura, .tv-hero-section.style-8 .bayadev-knowledge-core, .tv-hero-section.style-8 .bayadev-core-glow, .tv-hero-section.style-8 .core-logo-svg, .tv-hero-section.style-8 .bayadev-orbit, .tv-hero-section.style-8 .bayadev-orbit-rotor, .tv-hero-section.style-8 .bayadev-orbit-counter-rotor, .tv-hero-section.style-8 .bayadev-orbital-satellite, .tv-hero-section.style-8 .bayadev-orbital-particles span, .tv-hero-section.style-8 .orbital-scan-beam, .tv-hero-section.style-8 .bayadev-core-shell { animation:none !important; } .tv-hero-section.style-8 .bayadev-knowledge-core, .tv-hero-section.style-8 .bayadev-orbit, .tv-hero-section.style-8 .bayadev-orbital-satellite { opacity:1 !important; } .tv-hero-section.style-8 .bayadev-core-glow { transform:translate(-50%,-50%) scale(1) !important; opacity:.84 !important; } } /* ========================================================= BAYADEV - ORBITAL DEPTH SYSTEM 1.0.38 ========================================================= Cette couche finale complete la version 1.0.37 sans modifier : - la position du titre ; - la position de la description ; - la position du bouton ; - la position du droide ; - la geometrie generale du noyau. Ameliorations ajoutees : 1. deux largeurs normalisees pour les badges ; 2. profondeur avant / arriere synchronisee avec les orbites ; 3. hierarchie plus nette entre expertises principales et secondaires ; 4. mise en lumiere de l'orbite associee au badge survole ; 5. attenuation tres legere des autres badges pendant l'interaction ; 6. noyau plus net et plus reactif, sans texte supplementaire. */ @media (min-width: 1200px) { /* Variables de personnalisation rapides. --badge-width-standard : largeur des libelles courts ; --badge-width-long : largeur des libelles longs ; --depth-scale-back : reduction lorsque le badge passe en profondeur ; --depth-scale-front : agrandissement lorsque le badge passe au premier plan. */ .tv-hero-section.style-8 .bayadev-orbital-expertise { /* Les badges epousent maintenant leur contenu : aucune largeur fixe. --badge-padding pilote les quatre cotes avec une valeur unique afin que l'espace horizontal soit strictement identique a l'espace vertical. */ --badge-padding: 12px; --depth-scale-back: .92; --depth-scale-front: 1.035; } /* Largeur automatique et padding uniforme. Le badge reste compact, quelle que soit la longueur du libelle. */ .tv-hero-section.style-8 .bayadev-orbital-satellite.is-standard .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-long .satellite-module { width: max-content !important; min-width: 0 !important; max-width: none !important; padding: var(--badge-padding) !important; } /* Profondeur orbitale. La premiere animation conserve l'apparition progressive existante. La seconde fait varier tres legerement l'echelle, l'opacite et la nettete. Elle reutilise exactement la duree, le sens et la phase de l'orbite afin que l'effet paraisse lie au mouvement reel du satellite. */ .tv-hero-section.style-8 .bayadev-orbital-satellite .satellite-module { animation: bayadevSatelliteReveal .7s cubic-bezier(.2,.8,.2,1) calc(.25s + (var(--satellite-order) * .08s)) both, bayadevSatelliteDepth var(--orbit-duration) ease-in-out var(--phase-delay) infinite !important; animation-direction: normal, var(--orbit-direction) !important; will-change: transform, opacity, filter !important; } /* TOUTES LES EXPERTISES SONT PRINCIPALES --------------------------------------- Aucun style secondaire n'est applique dans cette version. Chaque badge utilise la classe .is-primary et beneficie exactement du meme niveau de contraste, de lumiere et de lisibilite. */ /* EXPERTISES PRINCIPALES ---------------------- Toutes les expertises affichees recoivent le meme traitement principal : contour cyan intense, fond bleu plus lumineux, halo externe et texte blanc. La largeur reste calculee uniquement a partir du contenu. */ .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary.is-long .satellite-module { width: max-content !important; min-width: 0 !important; max-width: none !important; padding: var(--badge-padding) !important; background: linear-gradient(180deg, rgba(150,236,255,.20), rgba(33,118,255,.10) 46%, rgba(7,24,79,.88)), rgba(7, 27, 88, .92) !important; border: 1px solid rgba(158, 239, 255, .88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(54,120,255,.22), 0 0 0 1px rgba(65,174,255,.18), 0 8px 22px rgba(0,0,0,.26), 0 0 15px rgba(69,210,255,.42), 0 0 28px rgba(36,116,255,.22) !important; opacity: 1 !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-module::before { opacity: 1 !important; background: linear-gradient(180deg, transparent, #b9f6ff, #40cfff, #2f78ff, transparent) !important; box-shadow: 0 0 12px rgba(91, 223, 255, .92) !important; } .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-label { color: #ffffff !important; font-size: 11.8px !important; font-weight: 850 !important; text-shadow: 0 0 8px rgba(100, 220, 255, .38) !important; } /* Interaction globale : lorsque l'utilisateur vise un badge, les autres deviennent legerement plus discrets. L'attenuation reste faible afin de ne jamais provoquer de clignotement ou de rupture visuelle. */ .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:hover) .bayadev-orbital-satellite:not(:hover) .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:focus-visible) .bayadev-orbital-satellite:not(:focus-visible) .satellite-module { opacity: .72 !important; filter: saturate(.78) brightness(.88) !important; } /* Le badge actif reste net et legerement plus present. */ .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-module { animation-play-state: paused !important; opacity: 1 !important; filter: brightness(1.08) saturate(1.14) !important; } /* Mise en lumiere ciblee de l'orbite qui porte le badge actif. */ .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-1 .bayadev-orbital-satellite:hover) .bayadev-orbit-1 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-1 .bayadev-orbital-satellite:focus-visible) .bayadev-orbit-1 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-2 .bayadev-orbital-satellite:hover) .bayadev-orbit-2 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-2 .bayadev-orbital-satellite:focus-visible) .bayadev-orbit-2 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-3 .bayadev-orbital-satellite:hover) .bayadev-orbit-3 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-3 .bayadev-orbital-satellite:focus-visible) .bayadev-orbit-3 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-4 .bayadev-orbital-satellite:hover) .bayadev-orbit-4 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-4 .bayadev-orbital-satellite:focus-visible) .bayadev-orbit-4 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-5 .bayadev-orbital-satellite:hover) .bayadev-orbit-5 .orbit-line, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbit-track-5 .bayadev-orbital-satellite:focus-visible) .bayadev-orbit-5 .orbit-line { opacity: 1 !important; border-color: rgba(151, 235, 255, .58) !important; box-shadow: inset 0 0 18px rgba(74, 188, 255, .07), 0 0 15px rgba(77, 203, 255, .20) !important; } /* Noyau : halo plus compact, logo plus net et reaction subtile au survol. */ .tv-hero-section.style-8 .bayadev-core-glow { width: 118% !important; height: 118% !important; filter: blur(10px) !important; } .tv-hero-section.style-8 .core-logo-svg { filter: brightness(1.06) contrast(1.06) drop-shadow(0 0 5px rgba(255,255,255,.30)) drop-shadow(0 0 13px rgba(83,213,255,.58)) drop-shadow(0 0 24px rgba(29,140,255,.28)) !important; } .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:hover) .bayadev-core-shell-outer, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:focus-visible) .bayadev-core-shell-outer { border-color: rgba(158, 239, 255, .62) !important; box-shadow: inset 0 0 22px rgba(40,165,255,.12), 0 0 34px rgba(29,140,255,.24) !important; } @keyframes bayadevSatelliteDepth { 0%, 100% { transform: translate(-50%, -50%) scale(var(--depth-scale-back)); opacity: .74; filter: brightness(.82) saturate(.76) blur(.15px); } 25% { transform: translate(-50%, -50%) scale(.98); opacity: .90; filter: brightness(.96) saturate(.94) blur(0); } 50% { transform: translate(-50%, -50%) scale(var(--depth-scale-front)); opacity: 1; filter: brightness(1.06) saturate(1.08) blur(0); } 75% { transform: translate(-50%, -50%) scale(.98); opacity: .90; filter: brightness(.96) saturate(.94) blur(0); } } } /* Ajustements laptop : tailles normalisees mais plus compactes. */ @media (min-width: 1200px) and (max-width: 1700px), (min-width: 1200px) and (max-height: 850px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { --badge-width-standard: 126px; --badge-width-long: 166px; --depth-scale-back: .94; --depth-scale-front: 1.025; } } /* Le mode mouvement reduit neutralise aussi la profondeur 3D. */ @media (prefers-reduced-motion: reduce) { .tv-hero-section.style-8 .bayadev-orbital-satellite .satellite-module { animation: none !important; opacity: 1 !important; filter: none !important; } } /* ========================================================= BAYADEV - ORBITAL DEPTH SYSTEM 1.0.40 Simplification a 7 expertises / 4 orbites ========================================================= Objectifs de cette revision : - retirer Cloud Solutions & API Integration ; - retirer E-commerce Solutions ; - repartir les 7 expertises restantes sur seulement 4 orbites ; - augmenter l'espace reel entre les badges en mouvement ; - alleger le decor sans modifier le titre, la description, le bouton ou le positionnement independant de la droide. */ @media (min-width: 1200px) { /* La cinquieme orbite n'est plus utilisee par le renderer PHP. Cette regle defensive la masque egalement si un ancien fragment HTML reste temporairement present dans un cache WordPress ou Elementor. */ .tv-hero-section.style-8 .bayadev-orbit-5, .tv-hero-section.style-8 .bayadev-orbit-track-5 { display: none !important; } /* Nouvelle geometrie a quatre niveaux. Orbite 1 : Software Engineering + AI Solutions Orbite 2 : Embedded Systems + Custom Software Development Orbite 3 : Robotics & Computer Vision + Web & Mobile Applications Orbite 4 : Research & Development Les ecarts entre les dimensions evitent que les capsules de deux trajectoires voisines se superposent trop souvent. */ .tv-hero-section.style-8 .bayadev-orbit-1, .tv-hero-section.style-8 .bayadev-orbit-track-1 { --orbit-w: 326px; --orbit-h: 138px; --orbit-angle: 8deg; --orbit-counter-angle: -8deg; --orbit-scale-y: .4233; --orbit-scale-y-inverse: 2.3623; --orbit-duration: 62s; --orbit-direction: normal; --counter-direction: reverse; } .tv-hero-section.style-8 .bayadev-orbit-2, .tv-hero-section.style-8 .bayadev-orbit-track-2 { --orbit-w: 452px; --orbit-h: 212px; --orbit-angle: 46deg; --orbit-counter-angle: -46deg; --orbit-scale-y: .4690; --orbit-scale-y-inverse: 2.1321; --orbit-duration: 82s; --orbit-direction: reverse; --counter-direction: normal; } .tv-hero-section.style-8 .bayadev-orbit-3, .tv-hero-section.style-8 .bayadev-orbit-track-3 { --orbit-w: 586px; --orbit-h: 306px; --orbit-angle: 88deg; --orbit-counter-angle: -88deg; --orbit-scale-y: .5222; --orbit-scale-y-inverse: 1.9140; --orbit-duration: 106s; --orbit-direction: normal; --counter-direction: reverse; } .tv-hero-section.style-8 .bayadev-orbit-4, .tv-hero-section.style-8 .bayadev-orbit-track-4 { --orbit-w: 724px; --orbit-h: 410px; --orbit-angle: 132deg; --orbit-counter-angle: -132deg; --orbit-scale-y: .5663; --orbit-scale-y-inverse: 1.7659; --orbit-duration: 134s; --orbit-direction: reverse; --counter-direction: normal; } /* Hierarchie des lignes : nette au centre, plus discrete a l'exterieur. */ .tv-hero-section.style-8 .bayadev-orbit-1 .orbit-line { opacity: .94 !important; } .tv-hero-section.style-8 .bayadev-orbit-2 .orbit-line { opacity: .76 !important; } .tv-hero-section.style-8 .bayadev-orbit-3 .orbit-line { opacity: .58 !important; } .tv-hero-section.style-8 .bayadev-orbit-4 .orbit-line { opacity: .42 !important; } } /* Adaptation laptop compact. Les quatre trajectoires restent suffisamment espacees malgre la reduction proportionnelle du systeme orbital. */ @media (min-width: 1200px) and (max-width: 1700px), (min-width: 1200px) and (max-height: 850px) { .tv-hero-section.style-8 .bayadev-orbit-1, .tv-hero-section.style-8 .bayadev-orbit-track-1 { --orbit-w: 270px; --orbit-h: 116px; --orbit-scale-y: .4296; --orbit-scale-y-inverse: 2.3276; } .tv-hero-section.style-8 .bayadev-orbit-2, .tv-hero-section.style-8 .bayadev-orbit-track-2 { --orbit-w: 370px; --orbit-h: 176px; --orbit-scale-y: .4757; --orbit-scale-y-inverse: 2.1023; } .tv-hero-section.style-8 .bayadev-orbit-3, .tv-hero-section.style-8 .bayadev-orbit-track-3 { --orbit-w: 474px; --orbit-h: 254px; --orbit-scale-y: .5359; --orbit-scale-y-inverse: 1.8661; } .tv-hero-section.style-8 .bayadev-orbit-4, .tv-hero-section.style-8 .bayadev-orbit-track-4 { --orbit-w: 584px; --orbit-h: 338px; --orbit-scale-y: .5788; --orbit-scale-y-inverse: 1.7278; } } /* ========================================================= BAYADEV - UNIFORMISATION DEFINITIVE DES BADGES 1.0.43 ========================================================= OBJECTIF -------- Tous les badges expertise utilisent exactement le meme rendu visuel, quelle que soit : - leur orbite ; - la longueur de leur texte ; - leur ancienne classe is-primary / is-secondary ; - leur position avant ou arriere dans l'animation. CAUSE DE L'ANCIENNE DIFFERENCE ----------------------------- Deux mecanismes produisaient des rendus differents : 1. certaines regles ciblaient uniquement .is-primary ; 2. l'animation bayadevSatelliteDepth modifiait en permanence l'opacite, la luminosite, la saturation et l'echelle de chaque badge. Cette couche finale neutralise ces differences sans modifier : - la rotation des orbites ; - la position du noyau ; - la position du texte, du bouton ou de la droide ; - les phases de depart des badges. ========================================================= */ @media (min-width: 1200px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { /* REGLAGE DU PADDING DES BADGES ----------------------------- --badge-padding-y : espace en haut et en bas du texte. --badge-padding-x : espace a gauche et a droite du texte. Pour modifier uniquement l'espace lateral, changer seulement : --badge-padding-x. */ --badge-padding-y: 8px; --badge-padding-x: 13px; } /* STYLE UNIQUE APPLIQUE A TOUS LES BADGES --------------------------------------- Aucun selecteur .is-primary, .is-secondary, .is-long ou .is-standard n'est necessaire pour definir l'apparence. */ .tv-hero-section.style-8 .bayadev-orbital-satellite .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-secondary .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-long .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-standard .satellite-module { width: max-content !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; padding: var(--badge-padding-y) var(--badge-padding-x) !important; border-radius: 999px !important; opacity: 1 !important; filter: none !important; background: linear-gradient( 180deg, rgba(150, 236, 255, .20), rgba(33, 118, 255, .10) 46%, rgba(7, 24, 79, .88) ), rgba(7, 27, 88, .92) !important; border: 1px solid rgba(158, 239, 255, .88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(54,120,255,.22), 0 0 0 1px rgba(65,174,255,.18), 0 8px 22px rgba(0,0,0,.26), 0 0 15px rgba(69,210,255,.42), 0 0 28px rgba(36,116,255,.22) !important; /* Une seule animation d'apparition est conservee. L'ancienne animation de profondeur est retiree ici car elle rendait certains badges plus sombres ou plus petits selon leur position. */ animation: bayadevSatelliteReveal .7s cubic-bezier(.2,.8,.2,1) calc(.25s + (var(--satellite-order) * .08s)) both !important; } /* Reflet superieur identique sur chaque capsule. */ .tv-hero-section.style-8 .bayadev-orbital-satellite .satellite-module::before, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-module::before, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-secondary .satellite-module::before { opacity: 1 !important; background: linear-gradient( 90deg, transparent, #b9f6ff, #40cfff, #2f78ff, transparent ) !important; box-shadow: 0 0 12px rgba(91,223,255,.92) !important; } /* Typographie strictement identique sur tous les badges. */ .tv-hero-section.style-8 .bayadev-orbital-satellite .satellite-label, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-primary .satellite-label, .tv-hero-section.style-8 .bayadev-orbital-satellite.is-secondary .satellite-label { color: #ffffff !important; font-size: 11.8px !important; font-weight: 850 !important; line-height: 1.18 !important; text-align: center !important; text-shadow: 0 0 8px rgba(100,220,255,.38) !important; } /* Etat normal uniforme : aucune attenuation automatique des badges. Les autres badges ne deviennent plus gris ou sombres lorsqu'un badge est survole. */ .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:hover) .bayadev-orbital-satellite:not(:hover) .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-expertise:has(.bayadev-orbital-satellite:focus-visible) .bayadev-orbital-satellite:not(:focus-visible) .satellite-module { opacity: 1 !important; filter: none !important; } /* Le survol reste volontairement interactif. Seul le badge vise change temporairement, puis retrouve exactement le meme style que les autres lorsque le curseur le quitte. */ .tv-hero-section.style-8 .bayadev-orbital-satellite:hover .satellite-module, .tv-hero-section.style-8 .bayadev-orbital-satellite:focus-visible .satellite-module { animation-play-state: paused !important; transform: translate(-50%, -50%) scale(1.055) !important; opacity: 1 !important; filter: brightness(1.08) saturate(1.10) !important; border-color: rgba(185,246,255,.98) !important; } } /* Laptop compact : meme style, padding legerement reduit uniquement. */ @media (min-width: 1200px) and (max-width: 1700px), (min-width: 1200px) and (max-height: 850px) { .tv-hero-section.style-8 .bayadev-orbital-expertise { --badge-padding-y: 7px; --badge-padding-x: 11px; } }