/* ========================================
   CARDS — FLOAT EFFECT
   ======================================== */

.member,
.project,
.contact {
    --card-accent: var(--blue);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding: 25px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);

    transition:
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 280ms ease,
        background-color 280ms ease,
        box-shadow 280ms ease;
}

/* ========================================
   EFFETS VISUELS DES CARTES
   ======================================== */

/* Fine ligne colorée en haut */

.member::before,
.project::before,
.contact::before {
    content: "";
    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;
    background: var(--card-accent);
    opacity: 0.7;

    pointer-events: none;

    transition:
        opacity 280ms ease,
        height 280ms ease;
}

/* Lueur colorée discrète */

.member::after,
.project::after,
.contact::after {
    content: "";
    position: absolute;
    z-index: 0;

    top: -70px;
    right: -70px;

    width: 150px;
    height: 150px;

    background: var(--card-accent);
    opacity: 0;
    filter: blur(65px);
    border-radius: 50%;

    pointer-events: none;
    transition: opacity 280ms ease;
}

/* Le contenu reste au-dessus des effets */

.member > *,
.project > *,
.contact > * {
    position: relative;
    z-index: 1;
}

/* Flottement doux au survol */

.member:hover,
.project:hover,
.contact:hover {
    transform: translateY(-6px);

    background: var(--surface-hover);
    border-color: var(--card-accent);

    box-shadow:
        0 12px 28px rgb(0 0 0 / 22%),
        0 0 14px color-mix(
            in srgb,
            var(--card-accent) 9%,
            transparent
        );
}

.member:hover::before,
.project:hover::before,
.contact:hover::before {
    opacity: 1;
    height: 3px;
}

.member:hover::after,
.project:hover::after,
.contact:hover::after {
    opacity: 0.12;
}

/* Focus clavier : même indication que le survol */

.member:focus-within,
.project:focus-within,
.contact:focus-within {
    border-color: var(--card-accent);

    box-shadow:
        0 0 0 2px color-mix(
            in srgb,
            var(--card-accent) 35%,
            transparent
        );
}

/* Titres et textes */

.member h3,
.project h3,
.contact h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--card-accent);
    font-size: 1.2rem;
}

.member p,
.project p,
.contact p {
    margin: 7px 0;
    color: var(--muted);
}

.member img {
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;

    object-fit: contain;
    border-radius: 12px;
}

.project a,
.contact a {
    overflow-wrap: anywhere;
}

/* ========================================
   PROJECT COLORS
   Une couleur propre à chaque projet
   ======================================== */

/* Système d'exploitation */

.project-nextos {
    --card-accent: #58a6ff;
}

/* Système de fichiers */

.project-qosfs {
    --card-accent: #7bc96f;
}

/* Projet prévu */

.project-brick {
    --card-accent: #eac45e;
}

/* Outil de développement */

.project-icc {
    --card-accent: #56b6a0;
}

/* Outil de communication */

.project-imb {
    --card-accent: #79a9d8;
}

/* Jeux */

.project-mfi {
    --card-accent: #eac45e;
}

.project-instance-destroy {
    --card-accent: #91a4ba;
}

/* GitHub */

.project-github {
    --card-accent: #56b6a0;
}

/* ========================================
   PROJECT CATEGORY BADGE
   ======================================== */

.project-category {
    display: inline-block;

    margin-bottom: 12px;
    padding: 4px 10px;

    color: var(--card-accent);

    background: color-mix(
        in srgb,
        var(--card-accent) 10%,
        var(--surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--card-accent) 30%,
        var(--border)
    );

    border-radius: 20px;

    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.2px;
}

/* ========================================
   CONTACT CARDS
   Couleur alternée pour chaque membre
   ======================================== */

.contact:nth-child(4n + 1) {
    --card-accent: var(--blue);
}

.contact:nth-child(4n + 2) {
    --card-accent: #56b6a0;
}

.contact:nth-child(4n + 3) {
    --card-accent: #7bc96f;
}

.contact:nth-child(4n + 4) {
    --card-accent: var(--yellow);
}

/* ========================================
   ACCESSIBILITY
   Respecte les préférences de mouvement
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .member,
    .project,
    .contact,
    .member::before,
    .project::before,
    .contact::before,
    .member::after,
    .project::after,
    .contact::after {
        transition: none;
    }

    .member:hover,
    .project:hover,
    .contact:hover {
        transform: none;
    }

    .member::after,
    .project::after,
    .contact::after {
        display: none;
    }
}