*, *::before, *::after {
            margin: 0; padding: 0; box-sizing: border-box;
        }

        :root {
            --bg:       #0e0e0e;
            --surface:  #181818;
            --border:   rgba(255,255,255,0.07);
            --hover:    #202020;
            --text:     #f0f0f0;
            --muted:    #666;
            --font:     "Instrument Sans", Helvetica, sans-serif;
        }

        html, body {
            height: 100%;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 56px 24px;
        }

        /* ── Grain ── */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
            background-size: 200px;
            pointer-events: none;
            z-index: 0;
        }

        /* ── Carte centrale ── */
        .card {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ── Avatar logo ── */
        .avatar {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: var(--surface);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            margin-bottom: 18px;
            opacity: 0;
            transform: translateY(10px);
            animation: up 0.5s ease 0.08s forwards;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* ── Nom & rôle ── */
        .name {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -0.2px;
            opacity: 0;
            animation: up 0.5s ease 0.15s forwards;
        }

        .role {
            font-size: 13px;
            color: var(--muted);
            margin-top: 4px;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: up 0.5s ease 0.21s forwards;
        }

        /* ── Séparateur ── */
        .sep {
            width: 28px;
            height: 1px;
            background: var(--border);
            margin: 26px 0;
            opacity: 0;
            animation: up 0.5s ease 0.27s forwards;
        }

        /* ── Liste liens ── */
        .list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .item {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 14px 18px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 11px;
            text-decoration: none;
            color: var(--text);
            transition: background 0.18s, border-color 0.18s, transform 0.18s;
            opacity: 0;
            transform: translateY(8px);
        }

        .item:hover {
            background: var(--hover);
            border-color: rgba(255,255,255,0.13);
            transform: translateY(-2px);
        }

        .icon {
            width: 34px;
            height: 34px;
            border-radius: 7px;
            background: rgba(255,255,255,0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .icon svg {
            width: 17px;
            height: 17px;
            fill: var(--text);
        }

        .txt {
            display: flex;
            flex-direction: column;
            gap: 1px;
            flex: 1;
        }

        .lbl {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
        }

        .val {
            font-size: 11.5px;
            color: var(--muted);
        }

        .arrow {
            color: var(--muted);
            font-size: 15px;
            transition: transform 0.18s, color 0.18s;
        }

        .item:hover .arrow {
            transform: translateX(3px);
            color: var(--text);
        }

        /* Délais échelonnés */
        .item:nth-child(1) { animation: up 0.42s ease 0.33s forwards; }
        .item:nth-child(2) { animation: up 0.42s ease 0.40s forwards; }
        .item:nth-child(3) { animation: up 0.42s ease 0.47s forwards; }
        .item:nth-child(4) { animation: up 0.42s ease 0.54s forwards; }
        .item:nth-child(5) { animation: up 0.42s ease 0.61s forwards; }

        /* ── Footer ── */
        .foot {
            margin-top: 30px;
            font-size: 10.5px;
            color: rgba(255,255,255,0.18);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            opacity: 0;
            animation: up 0.5s ease 0.78s forwards;
        }

        @keyframes up {
            to { opacity: 1; transform: translateY(0); }
        }