/* 4.1. Header et Navigation principale */ .site-header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background-color:var(--color-header);z-index:var(--z-index-header);box-shadow:0 2px 5px rgba(0,0,0,0.2);display:flex}.main-navigation{width:100%;height:100%}.nav-container{width:100%;height:100%;display:grid;grid-template-columns:auto 1fr auto;padding:0 10px}/* Site Branding & Logo */ .site-branding{grid-column:1;display:flex;align-items:center;padding-left:clamp(10px,2vw,20px)}.site-logo-link{display:flex;align-items:center;text-decoration:none}.tt-logo{display:block;transition:opacity 0.2s ease}.tt-logo-full{height:40px;width:auto;color:var(--color-accent)}.tt-logo-compact{height:36px;width:auto;color:var(--color-accent);display:none}.tt-logo-frame{transition:stroke 0.3s ease}.tt-logo text,.tt-logo tspan{font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif}.tt-logo-text-tech{font-size:19px;font-weight:700;letter-spacing:3px}.tt-logo-text-talk{font-size:19px;font-weight:400;letter-spacing:3px}.tt-logo-monogram{font-size:22px;font-weight:700;letter-spacing:2px}.site-logo-link:hover .tt-logo{opacity:0.8}/* Hamburger Icon */ .hamburger-icon{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px}.hamburger-icon span{display:block;width:100%;height:2px;background-color:var(--color-accent);border-radius:1px;transition:transform 0.3s ease,opacity 0.3s ease}body.menu-active .hamburger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}body.menu-active .hamburger-icon span:nth-child(2){opacity:0}body.menu-active .hamburger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}/* Navigation Buttons */ .nav-buttons{grid-column:2;display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,20px)}.nav-button{color:var(--color-text);text-decoration:none;transition:background-color 0.3s;position:relative;overflow:hidden;isolation:isolate;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);--wisp-radius:14px;--wisp-ringA:rgba(24,180,255,.8);--wisp-ringB:rgba(0,150,255,.85);--wisp-glow:12px;display:inline-flex;align-items:center;line-height:1;height:auto;padding:clamp(0.375rem,1vw,0.5rem) clamp(0.625rem,1.5vw,0.875rem);align-self:center;min-height:2.25rem;font-size:clamp(0.75rem,1.4vw,0.9375rem);white-space:nowrap}/* Canvas d'animation */ .nav-button>.nv-wisps{position:absolute;inset:0;display:block;pointer-events:none;z-index:0;/* sous ton texte si ton label est z-index:1 */ mix-blend-mode:lighten;/* optionnel,pour un look plus hextech */ opacity:0;transition:opacity .25s ease}.nav-button.active>.nv-wisps{opacity:1}/* Actif = plus lumineux + animation ON (le JS détecte .active) */ .nav-button.active::before{opacity:1}.nav-button:hover::before{opacity:.9}/* Assure que le texte est au-dessus du canvas */ .nav-button>*:not(.nv-wisps){position:relative;z-index:1}.nav-button::before{content:"";z-index:2;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:/* Chanfrein haut-gauche (135deg) */ linear-gradient(135deg,transparent calc(50% - 1.5px),var(--color-accent) calc(50% - 1.5px),var(--color-accent) calc(50% + 1.5px),transparent calc(50% + 1.5px)) -1px -1px / 8px 8px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 7px 0 / 15% 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 0 7px / 2px 15% no-repeat,/* Chanfrein haut-droite (45deg) */ linear-gradient(45deg,transparent calc(50% - 1.5px),var(--color-accent) calc(50% - 1.5px),var(--color-accent) calc(50% + 1.5px),transparent calc(50% + 1.5px)) calc(100% + 1px) -1px / 8px 8px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) calc(100% - 7px) 0 / 15% 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 100% 7px / 2px 15% no-repeat,/* Chanfrein bas-droite (135deg) */ linear-gradient(135deg,transparent calc(50% - 1.5px),var(--color-accent) calc(50% - 1.5px),var(--color-accent) calc(50% + 1.5px),transparent calc(50% + 1.5px)) calc(100% + 1px) calc(100% + 1px) / 8px 8px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) calc(100% - 7px) 100% / 15% 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 100% calc(100% - 7px) / 2px 15% no-repeat,/* Chanfrein bas-gauche (45deg) */ linear-gradient(45deg,transparent calc(50% - 1.5px),var(--color-accent) calc(50% - 1.5px),var(--color-accent) calc(50% + 1.5px),transparent calc(50% + 1.5px)) -1px calc(100% + 1px) / 8px 8px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 7px 100% / 15% 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) 0 calc(100% - 7px) / 2px 15% no-repeat}.nav-button:hover{background-color:rgba(255,255,255,0.1)}.nav-button.active{background-color:#111}.mobile-menu-toggle{display:none;/* Géré en responsive */ background:none;border:none;color:var(--color-text);font-size:24px;cursor:pointer;padding:10px}