/* ============================================================= RESET & BASE ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Palette Elyha Digital — Terminal Green ── */ --color-bg: #080c08; /* fond quasi-noir, légère teinte verte */ --color-surface: #0d120d; /* surface légèrement plus claire */ --color-surface-2: #131813; /* surface secondaire */ --color-accent: #39FF14; /* vert néon phosphore — couleur principale */ --color-accent-2: #00FFB2; /* cyan-vert — couleur secondaire */ --color-text: #d8ead8; /* texte principal, blanc légèrement verdâtre */ --color-text-muted: rgba(57 255 20 / 0.40); /* texte secondaire, vert terminal atténué */ --color-border: rgba(57 255 20 / 0.10); /* bordures subtiles vertes */ /* ── Lueurs néon (réutilisables) ── */ --glow-sm: 0 0 8px rgba(57 255 20 / 0.55), 0 0 20px rgba(57 255 20 / 0.25); --glow-md: 0 0 10px rgba(57 255 20 / 0.65), 0 0 30px rgba(57 255 20 / 0.35), 0 0 60px rgba(57 255 20 / 0.15); /* ── Typographie — Space Mono (terminal / code) ── */ --font-display: 'Space Mono', 'Courier New', monospace; --font-body: 'Space Mono', 'Courier New', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; /* ── Espacements ── */ --section-pad-v: clamp(4rem, 10vw, 8rem); --section-pad-h: clamp(1.5rem, 6vw, 5rem); /* ── Transitions douces ── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ── Fonds des panels horizontaux (teintes vert sombre) ── */ --panel-1: #0d1a0d; --panel-2: #0a150f; --panel-3: #0f1a0a; --panel-4: #121a0d; --panel-5: #0a1a14; } html { font-size: 16px; scroll-behavior: auto; /* Lenis prend en charge le smooth scroll */ } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; /* Lenis nécessite que le scroll soit sur ou body */ } /* Empêche le défilement horizontal sur toute la page */ .site-wrapper { overflow-x: hidden; } /* ============================================================= ACCESSIBILITÉ — REDUCED MOTION Toutes les animations sont désactivées si l'utilisateur a activé "Réduire les animations" dans son système. ============================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Signale aussi à JS que les animations doivent être évitées */ :root { --reduced-motion: 1; } } /* ============================================================= NAVIGATION — EN-TÊTE FIXE Logo D:\_ avec curseur clignotant, positionné en haut à gauche. Mix-blend-mode: normal pour garder la lisibilité sur tous les fonds. ============================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 1.4rem var(--section-pad-h); display: flex; align-items: center; justify-content: space-between; /* Dégradé masquant vers le bas pour la lisibilité du logo */ background: linear-gradient(to bottom, rgba(8 12 8 / 0.9) 0%, transparent 100%); pointer-events: none; /* la page reste cliquable sous le header */ } .site-logo { pointer-events: all; display: inline-flex; align-items: baseline; font-family: var(--font-mono); font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 400; color: var(--color-accent); text-decoration: none; letter-spacing: 0.05em; text-shadow: var(--glow-sm); } /* Le "D" du logo : Roboto Mono — même esprit mono mais sans les empattements (spurs) du D de Space Mono. */ .site-logo__d { font-family: 'Roboto Mono', 'Space Mono', monospace; font-weight: 500; } .site-logo__cursor { display: inline-block; animation: cursorBlink 1s step-end infinite; } /* ── Contacts (haut droite) — texte complet au repos, repliés en icônes pendant le scroll de l'intro (.is-collapsed via main.js). Le survol d'une icône ré-affiche l'info complète. ── */ .site-contacts { display: flex; align-items: center; gap: 1.75rem; } .contact-item { pointer-events: all; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--color-accent); text-decoration: none; text-shadow: var(--glow-sm); } /* NB : le repli texte → icône est entièrement piloté par GSAP (scrubé avec le vol du logo dans main.js). Pas de transition CSS ici : elle lisserait chaque frame du scrub et créerait un effet de traîne. */ .contact-item__text { display: inline-block; max-width: 260px; overflow: hidden; white-space: nowrap; } .contact-item__icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-left: 0.6rem; opacity: 0; transform: scale(0.5); filter: drop-shadow(0 0 6px rgba(57 255 20 / 0.45)); } /* Survol/focus : l'info complète ressort depuis l'icône. !important requis pour passer devant les styles inline posés par GSAP. */ .contact-item:hover .contact-item__text, .contact-item:focus-visible .contact-item__text { max-width: 260px !important; opacity: 1 !important; transform: translateX(0) !important; transition: max-width 0.45s var(--ease-out-expo), opacity 0.3s ease, transform 0.45s var(--ease-out-expo); } /* Mobile : pas la place pour le texte → icônes seules dès le départ */ @media (max-width: 768px) { .contact-item__text { display: none; } .contact-item__icon { opacity: 1; transform: scale(1); margin-left: 0; } .site-contacts { gap: 1.25rem; } } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================= TYPOGRAPHIE GLOBALE ============================================================= */ .section__eyebrow { font-family: var(--font-mono); font-size: clamp(0.65rem, 1.2vw, 0.8rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); text-shadow: var(--glow-sm); margin-bottom: 1rem; } .section__title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 5.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .section__title em { font-style: normal; color: var(--color-accent); text-shadow: var(--glow-sm); } .section__subtitle { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--color-text-muted); max-width: 40ch; } .section__body { font-size: clamp(0.95rem, 1.5vw, 1.1rem); color: var(--color-text-muted); max-width: 50ch; line-height: 1.75; } /* ============================================================= LAYOUT — SECTION BASE ============================================================= */ .section { position: relative; width: 100%; padding: var(--section-pad-v) var(--section-pad-h); overflow: hidden; } .section__inner { max-width: 1300px; margin: 0 auto; } /* Layout 2 colonnes */ .section__inner--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .section__inner--reverse { direction: rtl; } .section__inner--reverse > * { direction: ltr; } /* Layout centré */ .section__inner--center { text-align: center; display: flex; flex-direction: column; align-items: center; } /* ============================================================= PHASE 1 — HERO ============================================================= */ .section--hero { position: relative; overflow: hidden; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(57 255 20 / 0.07) 0%, transparent 70%), var(--color-bg); } .section--hero .section__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* ── Scène d'intro : logo géant centré + Bienvenue + hint ── */ .hero-intro { position: absolute; inset: 0; z-index: 300; /* au-dessus du header fixe (200) pendant le vol du logo */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; pointer-events: none; } .intro-logo { display: inline-flex; align-items: baseline; font-family: var(--font-mono); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 400; color: var(--color-accent); letter-spacing: 0.05em; text-shadow: var(--glow-md); will-change: transform; } .intro-logo .site-logo__cursor { display: inline-block; animation: cursorBlink 1s step-end infinite; } .intro-welcome { font-family: var(--font-mono); font-size: clamp(0.85rem, 1.6vw, 1.1rem); letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-text-muted); } .hero-intro__hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); margin-top: 0; } /* ── Effet frappe : les segments sont vidés/re-remplis par le JS. Un caret suit le dernier caractère écrit. ── */ .type-seg.is-typing::after { content: '_'; color: var(--color-accent); text-shadow: var(--glow-sm); animation: cursorBlink 0.7s step-end infinite; } /* ── Fallback reduced-motion : pas d'intro, contenu directement visible ── */ @media (prefers-reduced-motion: reduce) { .hero-intro { display: none; } } /* ── Anti-FOUC : le texte du hero est masqué dès le premier rendu quand le JS est actif (classe "js" posée inline dans le ). main.js le vide puis le réaffiche pour l'effet frappe. Sans JS ou en reduced-motion : texte visible normalement. ── */ @media (prefers-reduced-motion: no-preference) { .js .section--hero .type-seg, .js .section--hero .section__subtitle { visibility: hidden; } } .section--hero .section__title { /* Taille contenue : tout le bloc (eyebrow + titre + sous-titre) doit tenir dans les 100vh du hero pinné (overflow hidden) */ font-size: clamp(2.4rem, 6.5vw, 5.5rem); } /* Indicateur de scroll */ .scroll-hint { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.95; } .scroll-hint__line { display: block; width: 2px; height: 3rem; border-radius: 1px; background: linear-gradient(to bottom, transparent, var(--color-accent)); box-shadow: 0 0 10px rgba(57 255 20 / 0.75), 0 0 26px rgba(57 255 20 / 0.35); animation: scrollLineAnim 1.8s var(--ease-out-expo) infinite; } @keyframes scrollLineAnim { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } } .scroll-hint__label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); } /* ============================================================= PHASE 1 — BLOCS VERTICAUX ============================================================= */ .section--vertical { min-height: 80vh; display: flex; align-items: center; } .section--v1 { background: linear-gradient(135deg, var(--color-bg) 60%, var(--color-surface)); } .section--v2 { background: linear-gradient(225deg, var(--color-bg) 60%, var(--color-surface)); } /* Carte placeholder visuelle */ .section__visual--card { aspect-ratio: 4 / 3; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; /* le canvas liquid-reveal respecte l'arrondi */ } /* ── Effets WebGL (Liquid / Pixel Reveal) dans les cartes ── */ .liquid-reveal, .pixel-reveal { width: 100%; height: 100%; touch-action: pan-y; /* le scroll tactile reste naturel */ } .liquid-reveal canvas, .pixel-reveal canvas { display: block; width: 100%; height: 100%; } .card-placeholder { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-accent); text-shadow: var(--glow-sm); text-transform: uppercase; } /* ============================================================= PHASE 2 — SECTION TRANSITION DIAGONALE (2 slides) La section est pinnée ~3.5vh de scroll. .diagonal-slide--1 et --2 sont position: absolute, centrés. GSAP anime chacun en translateX + translateY + opacity. ============================================================= */ .section--diagonal-trigger { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } /* Fond commun — 2 couches superposées pour le cross-fade */ .diagonal-bg { position: absolute; inset: 0; z-index: 0; } .diagonal-bg--1 { background: radial-gradient(ellipse 100% 80% at 20% 50%, rgba(57 255 20 / 0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0 255 180 / 0.05) 0%, transparent 60%), var(--color-surface); } /* Fond slide 2 : teinte cyan-vert légèrement différente pour la différenciation */ .diagonal-bg--2 { background: radial-gradient(ellipse 80% 70% at 80% 30%, rgba(57 255 20 / 0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 70%, rgba(0 255 180 / 0.07) 0%, transparent 60%), var(--color-surface-2); opacity: 0; /* le JS fait le cross-fade */ } /* Slides diagonales — superposées, plein écran */ .diagonal-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: var(--section-pad-v) var(--section-pad-h); will-change: transform, opacity; z-index: 1; } .diagonal-slide__inner { max-width: 700px; } .diagonal-slide__title { font-size: clamp(2.5rem, 7vw, 6rem); } /* Flèche indicatrice diagonale */ .diagonal-arrow { position: absolute; bottom: 2rem; right: 3rem; font-size: 3rem; color: var(--color-accent); opacity: 0.3; transform: rotate(45deg); pointer-events: none; z-index: 2; } /* ============================================================= PHASE 3 — SCROLL HORIZONTAL Le wrapper est pinné via ScrollTrigger. Le track intérieur translate en X. ============================================================= */ .horizontal-scroll-wrapper { position: relative; overflow: hidden; /* Fond sombre partagé — même logique que la section diagonale */ background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(57 255 20 / 0.03) 0%, transparent 70%), var(--color-bg); } /* Rail horizontal — largeur = nb_panels × 100vw */ .horizontal-track { display: flex; /* width calculée dynamiquement en JS */ height: 100vh; will-change: transform; } /* Panneau individuel */ .h-panel { flex: 0 0 100vw; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: visible; /* halos peuvent déborder légèrement vers les panels adjacents */ position: relative; transform-origin: center center; will-change: transform, opacity, filter; } /* Halos colorés par panel — remplacent les fonds solides */ /* Chaque panel a un halo radial discret centré sur lui */ .h-panel--1, .h-panel--2, .h-panel--3, .h-panel--4 { background-color: transparent; } .h-panel--1::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(57 255 20 / 0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .h-panel--2::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(0 255 180 / 0.11) 0%, transparent 70%); pointer-events: none; z-index: 0; } .h-panel--3::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(57 255 20 / 0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } .h-panel--4::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(150 255 80 / 0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* Séparateur supprimé — les panels sont transparents, pas de bordure */ .h-panel::after { display: none; } .h-panel__inner { position: relative; /* au-dessus du halo ::before */ z-index: 1; max-width: 680px; padding: 3rem; display: flex; flex-direction: column; gap: 1.5rem; } .h-panel__title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; } .h-panel__body { font-size: clamp(0.9rem, 1.5vw, 1.05rem); color: var(--color-text-muted); max-width: 45ch; } .h-panel__visual { width: 80px; height: 80px; background: transparent; border: 1px solid rgba(57 255 20 / 0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.6; } /* Numéro décoratif en fond de panel */ .h-panel__inner::before { content: attr(data-num); position: absolute; bottom: 1.5rem; right: 2rem; font-size: clamp(5rem, 15vw, 12rem); font-weight: 800; color: rgba(57 255 20 / 0.07); line-height: 1; pointer-events: none; user-select: none; } /* ============================================================= PHASE 4 — SECTION CTA FINALE ============================================================= */ .section--cta { height: 80vh; /* section courte : 80% du viewport */ display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 3vw, 3rem) var(--section-pad-h); overflow: hidden; background: radial-gradient(ellipse 70% 50% at 50% 80%, rgba(57 255 20 / 0.10) 0%, transparent 70%), var(--color-bg); } .section--cta .section__title { font-size: clamp(2.2rem, 5.5vw, 5rem); /* légèrement réduit pour tenir en 100vh */ } .cta-button { display: inline-block; margin-top: 2.5rem; padding: 0.85rem 2.5rem; background: transparent; color: var(--color-accent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase; border: 1px solid var(--color-accent); box-shadow: var(--glow-sm); transition: background 0.25s var(--ease-out-expo), color 0.25s, box-shadow 0.25s; } .cta-button:hover { background: var(--color-accent); color: var(--color-bg); box-shadow: var(--glow-md); } /* ============================================================= FOOTER ============================================================= */ .site-footer { padding: 2rem var(--section-pad-h); border-top: 1px solid var(--color-border); text-align: center; } .site-footer__copy { font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.05em; } /* ============================================================= PORTFOLIO CARDS — Panel 4 Réalisations ============================================================= */ .h-panel__portfolio { display: flex; gap: 1.25rem; margin-top: 0.5rem; flex-wrap: wrap; } .portfolio-card { display: flex; flex-direction: column; flex: 1 1 160px; max-width: 210px; text-decoration: none; border: 1px solid var(--color-border); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .portfolio-card:hover { border-color: var(--color-accent); box-shadow: var(--glow-sm); } .portfolio-card__thumb { width: 100%; aspect-ratio: 4 / 3; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .portfolio-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; filter: saturate(0.7) brightness(0.85); transition: filter 0.3s; } .portfolio-card:hover .portfolio-card__thumb img { filter: saturate(1) brightness(1); } .portfolio-card__info { padding: 0.6rem 0.75rem; border-top: 1px solid var(--color-border); background: var(--color-surface); } .portfolio-card__name { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.1em; } .portfolio-card__url { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-accent); text-shadow: var(--glow-sm); margin-top: 0.15rem; opacity: 0.75; } /* ============================================================= RESPONSIVE — MOBILE Sur mobile, la section diagonale et le scroll horizontal sont remplacés par un défilement vertical simplifié. ============================================================= */ @media (max-width: 768px) { /* ── Layout split → 1 colonne ── */ .section__inner--split { grid-template-columns: 1fr; gap: 2rem; } .section__inner--reverse { direction: ltr; } /* ── Désactivation du scroll horizontal natif en CSS ── Le JS détectera aussi isMobile et skippera le pin/horizontal ── */ .horizontal-scroll-wrapper { height: auto !important; /* annule la hauteur calculée en JS */ } .horizontal-track { flex-direction: column; height: auto; width: 100% !important; transform: none !important; /* annule tout translateX injecté par GSAP */ } .h-panel { flex: 0 0 auto; width: 100%; height: auto; min-height: 80vh; } /* ── Transition diagonale simplifiée (mobile) ── Les slides sont en position static et s'empilent verticalement. Les transforms GSAP sont annulées par le guard JS (isMobile). ── */ .section--diagonal-trigger { min-height: auto; display: block; padding: var(--section-pad-v) var(--section-pad-h); } .diagonal-slide { position: static; /* sort du flux absolu → s'empile normalement */ transform: none !important; opacity: 1 !important; padding: 0; margin-bottom: 3rem; } .diagonal-slide--2 { margin-bottom: 0; } .diagonal-bg { display: none; /* fond géré par la section parente sur mobile */ } .diagonal-arrow { display: none; } /* CTA : retour à min-height sur mobile pour éviter le débordement */ .section--cta { height: auto; min-height: 100svh; } } /* ============================================================= SPHÈRE 3D — ÉCOSYSTÈME DES AGENTS IA Section immersive entre "Nos clients" et le CTA final. Prototype validé : labs/agents-sphere. Piloté par agents-sphere.js (auto-init sur [data-agents-sphere], fallback cartes statiques). ============================================================= */ .agents-sphere-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #0a120c 0%, var(--color-bg) 70%); } .sphere-headline { position: relative; z-index: 4; text-align: center; padding: 5.5rem 1.5rem 0; /* dégage le header fixe du site */ pointer-events: none; } .sphere-headline h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); color: var(--color-text); font-weight: 700; } .sphere-headline h2 em { font-style: normal; color: var(--color-accent); text-shadow: var(--glow-sm); } .sphere-headline p { margin-top: 0.5rem; font-size: clamp(0.72rem, 1.4vw, 0.85rem); color: rgba(216 234 216 / 0.55); } /* ── Scène : canvas WebGL + calque HTML des zones ── */ .sphere-stage { position: relative; width: min(880px, 96vw); aspect-ratio: 1 / 1; max-height: 78vh; margin: 0 auto; /* Le doigt peut toujours scroller verticalement : le JS ne détourne que les gestes horizontaux (seuil de direction). */ touch-action: pan-y; } .sphere-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Calque HTML — les 6 zones projetées sur la sphère. Pas de z-index sur le conteneur : chaque zone est empilée individuellement (arrière z:1 < canvas z:2 < avant z:3). */ .sphere-zones { position: absolute; inset: 0; pointer-events: none; /* les zones individuelles réactivent les events */ } .sphere-zone { position: absolute; top: 0; left: 0; width: clamp(190px, 30%, 250px); transform: translate(-50%, -50%); text-align: center; will-change: transform, opacity, filter; pointer-events: none; user-select: none; -webkit-user-select: none; } /* Zone de face → cliquable */ .sphere-zone.is-front { pointer-events: auto; cursor: pointer; } .sphere-zone__id { font-size: 0.6rem; letter-spacing: 0.28em; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 0.35rem; } .sphere-zone__title { font-family: var(--font-display); font-size: clamp(0.85rem, 1.6vw, 1.05rem); font-weight: 700; color: var(--color-accent); text-shadow: var(--glow-sm); margin-bottom: 0.4rem; } .sphere-zone__main { font-size: clamp(0.66rem, 1.25vw, 0.78rem); line-height: 1.5; color: var(--color-text); } .sphere-zone__sub { font-size: clamp(0.6rem, 1.1vw, 0.68rem); line-height: 1.5; color: rgba(216 234 216 / 0.55); margin-top: 0.35rem; /* La phrase secondaire n'apparaît qu'au premier plan (JS) */ opacity: 0; transition: opacity 0.4s; } .sphere-zone.is-active .sphere-zone__sub { opacity: 1; } /* Mini-illustration (canvas 2D animé par le JS) */ .sphere-zone__illu { display: block; margin: 0.6rem auto 0; width: 130px; height: 56px; opacity: 0.9; } /* Bouton "Découvrir cet agent" — 4 agents uniquement, visible seulement sur zone sélectionnée */ .sphere-zone__cta { display: inline-block; margin-top: 0.6rem; padding: 0.35rem 0.9rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); background: rgba(57 255 20 / 0.06); border: 1px solid rgba(57 255 20 / 0.4); cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s, background 0.25s, color 0.25s; pointer-events: none; } .sphere-zone.is-selected .sphere-zone__cta { opacity: 1; transform: translateY(0); pointer-events: auto; } .sphere-zone__cta:hover { background: var(--color-accent); color: #041004; box-shadow: var(--glow-sm); } /* ── Indication d'interaction ── */ .sphere-hint { position: relative; z-index: 4; padding: 0 1.5rem 3rem; font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-muted); text-align: center; pointer-events: none; } /* ── Fallback accessible : cartes statiques (WebGL indisponible ou prefers-reduced-motion) ── */ .sphere-fallback { display: none; position: relative; z-index: 4; width: min(1100px, 92vw); margin: 2rem auto 4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .sphere-fallback.is-visible { display: grid; } .fallback-card { border: 1px solid var(--color-border); background: rgba(13 18 13 / 0.75); padding: 1.5rem 1.25rem; } .fallback-card h3 { font-size: 0.95rem; color: var(--color-accent); margin-bottom: 0.5rem; } .fallback-card p { font-size: 0.75rem; line-height: 1.6; } .fallback-card p + p { margin-top: 0.4rem; color: rgba(216 234 216 / 0.55); } /* Mode fallback : scène 3D et hint masqués */ .agents-sphere-section.is-fallback .sphere-stage, .agents-sphere-section.is-fallback .sphere-hint { display: none; } @media (max-width: 768px) { .sphere-zone { width: clamp(150px, 44%, 200px); } .sphere-zone__illu { width: 100px; height: 44px; } }