/* ---- Scène : fond teinté par projet + perspective 3D ----
   Chaque carte définit --p-rgb (couleur d'accent du projet) en inline.
   Le parallaxe GSAP (±10px) s'applique à ce wrapper. */
.portfolio-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 46px 30px 0;
    perspective: 900px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(var(--p-rgb), 0.14), transparent 65%),
        linear-gradient(160deg, #0e0e16 0%, var(--bg-deep) 70%);
    will-change: transform;
}

/* Halo coloré diffus derrière le mockup — s'embrase au hover */
.portfolio-glow {
    position: absolute;
    left: 50%;
    bottom: -20%;
    width: 80%;
    height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(var(--p-rgb), 0.35), transparent 70%);
    filter: blur(50px);
    opacity: 0.45;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

/* ---- Mockup navigateur flottant ---- */
.portfolio-screen {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #101018;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: none;
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 60px -20px rgba(0, 0, 0, 0.7),
        0 18px 40px -18px rgba(var(--p-rgb), 0.35);
    transform: translateY(14px) rotateX(4deg);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
    will-change: transform;
}

/* Barre de fenêtre façon navigateur */
.screen-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.screen-dots {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.screen-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.4s ease;
}

/* Les trois feux macOS s'allument au hover */
.portfolio-item:is(:hover, :focus-visible, .is-awake) .screen-dots i:nth-child(1) { background: #FF5F57; }
.portfolio-item:is(:hover, :focus-visible, .is-awake) .screen-dots i:nth-child(2) { background: #FEBC2E; }
.portfolio-item:is(:hover, :focus-visible, .is-awake) .screen-dots i:nth-child(3) { background: #28C840; }

.screen-url {
    flex: 1;
    padding: 4px 12px;
    background: rgba(5, 5, 5, 0.5);
    border-radius: 20px;
    font-family: 'Inter', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.4px;
    color: var(--text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: color 0.4s ease;
}

.portfolio-item:is(:hover, :focus-visible, .is-awake) .screen-url { color: var(--text-dim); }

/* Fenêtre de la capture */
.screen-viewport {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-deep);
}

/* La capture — discrète par défaut, se "réveille" au hover */
.portfolio-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: object-position 5s cubic-bezier(0.33, 1, 0.68, 1), filter 0.6s ease;
    filter: saturate(0.75) brightness(0.8);
    will-change: object-position, filter;
}

/* Reflet qui balaye l'écran au hover */
.screen-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.14) 48%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 2;
}

.portfolio-item:is(:hover, :focus-visible, .is-awake) .screen-glare {
    transition: transform 0.9s var(--ease);
    transform: translateX(120%);
}


/* Cadres restaurés dans la grille éditoriale existante. */
.portfolio-media { align-items: flex-start; padding: 70px 24px 0; }
.portfolio-screen { max-width: 480px; }
.portfolio-item:is(:hover, :focus-visible) .portfolio-screen { transform: translateY(2px) rotateX(0); }
@media(max-width:620px) {
    .portfolio-media { padding: 60px 16px 0; }
    .screen-bar { gap: 8px; padding: 8px; }
    .screen-url { font-size: .6rem; }
}

/* Expanded collection: readable previews and descriptions on every screen. */
.portfolio-demo-note{max-width:740px;margin:18px auto 0;color:var(--text-dim);font-size:.85rem;line-height:1.7;text-align:center}
.portfolio-expanded .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.portfolio-expanded .portfolio-item.is-live-project{grid-column:auto;grid-row:auto;aspect-ratio:auto;min-height:0;height:auto;display:flex;flex-direction:column}
.portfolio-expanded .portfolio-media{position:relative;inset:auto;padding:64px 24px 0;min-height:0;overflow:hidden}
.portfolio-expanded .portfolio-screen{max-width:none;transform:none}
.portfolio-expanded .portfolio-thumbnail{filter:none}
.portfolio-expanded .portfolio-overlay{position:relative;inset:auto;min-height:0;padding:28px;flex:1;background:#101018;opacity:1;transform:none}
.portfolio-expanded .project-copy{max-width:calc(100% - 38px)}
.portfolio-expanded .project-copy p{display:block;opacity:1;transform:none;color:var(--text-dim);font-size:.9rem;line-height:1.7}
.portfolio-expanded .portfolio-overlay h3{font-size:clamp(1.4rem,2.3vw,2rem);padding-right:0}
.portfolio-expanded .project-arrow{right:24px;bottom:30px}
.portfolio-contact{margin-top:48px;padding:32px;border:1px solid #ffffff20;border-radius:24px;background:linear-gradient(120deg,#a855f715,#050505);display:flex;align-items:center;justify-content:space-between;gap:24px}
.portfolio-contact h3{font-size:clamp(1.4rem,2.5vw,2rem);margin:0 0 12px}.portfolio-contact p{color:var(--text-dim);line-height:1.7}.portfolio-contact .cta-button{flex-shrink:0}
@media(max-width:760px){.portfolio-expanded .portfolio-grid{grid-template-columns:1fr}.portfolio-expanded .portfolio-media{padding:60px 16px 0}.portfolio-expanded .portfolio-overlay{padding:24px 20px}.portfolio-contact{align-items:flex-start;flex-direction:column;padding:24px}.portfolio-demo-note{text-align:left}}