@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --primary: #4f8ef7;
    --primary-light: #93c5fd;
    --secondary: #8b5cf6;
    --accent: #06b6d4;
    --dark: #0d1117;
    --card-bg: rgba(22, 27, 34, 0.8);
    --border: rgba(255,255,255,0.07);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark);
    color: #e6edf3;
    overflow-x: hidden;
}

/* ── Arrière-plan animé ── */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Force GPU compositing sur Safari pour éviter les artefacts */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;
}

.orb {
    position: absolute;
    border-radius: 50%;
    -webkit-filter: blur(70px);
    filter: blur(70px);
    will-change: transform;
    /* Évite les glitchs de rendu Safari sur les bords */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.orb-1 {
    width: 750px;
    height: 750px;
    background: radial-gradient(circle at center, rgba(79,142,247,0.45), transparent 70%);
    top: -200px;
    left: -150px;
    animation: drift-1 20s ease-in-out infinite;
}

.orb-2 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle at center, rgba(139,92,246,0.42), transparent 70%);
    bottom: -180px;
    right: -100px;
    animation: drift-2 26s ease-in-out infinite;
}

.orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at center, rgba(6,182,212,0.35), transparent 70%);
    top: 45%;
    left: 55%;
    animation: drift-3 32s ease-in-out infinite;
}

.orb-4 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at center, rgba(244,114,182,0.30), transparent 70%);
    top: 20%;
    right: 15%;
    animation: drift-4 24s ease-in-out infinite;
}

.orb-5 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at center, rgba(79,142,247,0.32), transparent 70%);
    bottom: 20%;
    left: 10%;
    animation: drift-5 28s ease-in-out infinite;
}

@keyframes drift-1 {
    0%,100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(80px, 60px) scale(1.08); }
    66%      { transform: translate(-40px, 100px) scale(0.95); }
}

@keyframes drift-2 {
    0%,100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-70px, -80px) scale(1.05); }
    66%      { transform: translate(50px, -40px) scale(1.10); }
}

@keyframes drift-3 {
    0%,100% { transform: translate(-50%, -50%) scale(1); }
    25%      { transform: translate(-50%, -50%) translate(60px, -80px) scale(1.12); }
    50%      { transform: translate(-50%, -50%) translate(-80px, 40px) scale(0.9); }
    75%      { transform: translate(-50%, -50%) translate(40px, 70px) scale(1.06); }
}

@keyframes drift-4 {
    0%,100% { transform: translate(0, 0); }
    50%      { transform: translate(-60px, 80px); }
}

@keyframes drift-5 {
    0%,100% { transform: translate(0, 0); }
    50%      { transform: translate(70px, -60px); }
}

/* ── Particules flottantes ── */
.particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: white;
    opacity: 0;
    animation: particle-float linear infinite;
}

@keyframes particle-float {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

h1, h2, h3, .font-tech {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow {
    text-shadow: 0 0 30px rgba(79, 142, 247, 0.4);
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(79,142,247,0.2);
    border-color: rgba(79,142,247,0.3);
}

.grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.floating {
    animation: float 7s ease-in-out infinite;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-light);
}

/* Fix Safari : backdrop-filter sur le header */
header {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

/* Modale légale */
.legal-modal-content h2 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.legal-modal-content h3 {
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
}
.legal-modal-content p,
.legal-modal-content li {
    color: #d1d5db;
    margin-bottom: 0.5rem;
}
.legal-modal-content a {
    color: var(--primary);
    text-decoration: underline;
}
.legal-modal-content ul {
    list-style-position: inside;
    list-style-type: disc;
    padding-left: 1rem;
}
.legal-modal-content strong {
    color: white;
}