/* =============================================
   Synchrone.tv — Shared Styles
   ============================================= */

/* Désactivation globale de la sélection de texte */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
::selection { background: transparent; color: inherit; }
::-moz-selection { background: transparent; color: inherit; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0c; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Glassmorphism nav */
#main-nav {
    transition: background 300ms ease, backdrop-filter 300ms ease,
                -webkit-backdrop-filter 300ms ease;
}

.glass-nav {
    background: rgba(10, 10, 12, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Floating pill (timecode) */
.glass-pill {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* YouTube embed responsive */
.yt-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}
.yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

/* Project gallery (Swiper) */
.project-gallery {
    width: 100%;
    height: 100%;
}
.project-gallery .swiper-slide {
    width: 280px;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 0.75rem;
    overflow: hidden;
}
/* Desktop : le JS calcule la largeur pour maintenir 16:9 selon la hauteur flex-1 */
@media (min-width: 1024px) {
    .project-gallery .swiper-slide {
        aspect-ratio: unset;
    }
}
.project-gallery .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.project-gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s, transform 0.3s;
    display: block;
}
.project-gallery .swiper-slide img:hover {
    filter: brightness(1.05);
    transform: scale(1.03);
}

/* Swiper nav buttons */
.project-gallery .swiper-button-prev,
.project-gallery .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(10, 10, 12, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: white;
    transition: background 0.2s;
}
.project-gallery .swiper-button-prev:hover,
.project-gallery .swiper-button-next:hover {
    background: rgba(255,255,255,0.15);
}
.project-gallery .swiper-button-prev::after,
.project-gallery .swiper-button-next::after {
    font-size: 0.65rem;
    font-weight: 700;
}
.project-gallery .swiper-button-prev.swiper-button-disabled,
.project-gallery .swiper-button-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Pôles d'expertise — état actif au défilement sur mobile */
@media (hover: none) {
    .pole-card.card-active .pole-card-img {
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }
    .pole-card.card-active .pole-card-icon {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .pole-card.card-active .pole-card-desc {
        opacity: 1 !important;
        height: auto !important;
    }
}