/* animations.css — version safe */ /* Par défaut : TOUT est visible. L’anim ne s’applique que si JS tourne et ajoute .js sur */ [data-reveal]{ opacity:1; transform:none; } /* Animations seulement si JS actif */ .js [data-reveal]{ transition: opacity .5s ease, transform .5s ease; } .js [data-reveal]:not(.is-revealed){ /* petite pré-entrée sans masquer complètement */ opacity:.999; /* ≈ visible, évite le flash vide */ transform: translateY(6px); } .js .is-revealed{ opacity:1; transform: none; } /* Respect des préférences utilisateurs */ @media (prefers-reduced-motion: reduce){ .js [data-reveal], .js [data-reveal]:not(.is-revealed){ transition: none; transform: none; opacity: 1; } } /*===================================================== ====== Réseau international ====== =====================================================*/ .section.network{ position: relative; padding: clamp(48px, 8vw, 96px) 0; overflow: hidden; background: var(--bg, #fff); } /* Grand mot en arrière-plan (dans l’esprit de “Miya”) */ .section.network::before{ content:"Réseau"; position:absolute; inset:0; z-index:0; pointer-events:none; display:block; text-align:center; font-weight:800; letter-spacing:-.02em; color:#0f172a; opacity:.035; filter:blur(.2px); font-size:clamp(140px, 22vw, 320px); line-height:1; transform:translateY(15%); } /* Motif de cercles subtil (évoque la planète/orbites) */ .section.network::after{ content:""; position:absolute; inset: -20% -10% -10% -10%; z-index:0; pointer-events:none; background: radial-gradient(circle at 20% 30%, rgba(13,34,53,.08) 0 2px, transparent 3px) 0 0/120px 120px, radial-gradient(circle at 80% 70%, rgba(7,209,255,.10) 0 2px, transparent 3px) 0 0/140px 140px, radial-gradient(60% 60% at 50% 40%, rgba(110,91,255,.10), transparent 60%); mix-blend-mode: multiply; opacity:.5; } /* Contenu */ .network .container{ max-width: var(--container, 1120px); margin:0 auto; padding:0 16px; position:relative; z-index:1; } .network-head{ text-align:center; margin: 0 auto clamp(28px, 5vw, 48px); max-width: 920px; } .network-title{ margin:0 0 10px; color: var(--ink, #0e1220); font-size: clamp(26px, 4.2vw, 44px); line-height:1.1; font-weight:800; letter-spacing:-.01em; position: relative; display:inline-block; } /* Soulignement dégradé sous le titre (accent) */ .network-title::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-8px; height:4px; width: 56%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-1, #6e5bff), var(--brand-2, #07d1ff)); opacity:.85; } .network-subtitle{ margin:16px auto 0; max-width: 720px; color: var(--muted, #475569); font-size: clamp(16px, 2.4vw, 18px); line-height:1.6; } /* Bloc média : ratio doux + cadre premium */ .network-media{ margin: clamp(28px, 6vw, 56px) auto 0; max-width: 1000px; aspect-ratio: 16/9; border-radius: var(--radius, 16px); background: linear-gradient(180deg, #fff, #f7f8fb); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); overflow: hidden; position: relative; border: 1px solid var(--border, #e5e7eb); } .network-media img{ width:100%; height:100%; object-fit: cover; display:block; } /* Petits orbes décoratifs (optionnels) */ .network-media::before, .network-media::after{ content:""; position:absolute; border-radius:999px; filter:blur(8px); pointer-events:none; } .network-media::before{ width:160px; height:160px; left:-40px; top:-40px; background: radial-gradient(circle, rgba(110,91,255,.35), rgba(110,91,255,0)); } .network-media::after{ width:220px; height:220px; right:-60px; bottom:-60px; background: radial-gradient(circle, rgba(7,209,255,.35), rgba(7,209,255,0)); } /* Mode sombre optionnel */ @media (prefers-color-scheme: dark){ .section.network{ background:#0b1020; } .section.network::before{ color:#fff; opacity:.03; } .network-title{ color:#e6eaf2; } .network-subtitle{ color:#b9c3d1; } .network-media{ background: linear-gradient(180deg, #0e1426, #0b1020); border-color: rgba(255,255,255,.06); } }