/* À METTRE TOUT EN HAUT DU FICHIER */
.hidden { 
    display: none !important; 
}
/* =========================================
   1. LAYOUT DESKTOP (TA BASE INTACTE)
   ========================================= */
   .project-detail-section {
    padding: 120px 60px;
    background: #fff;
    color: #000;
    min-height: 100vh;
}

/* TITRE ET CATÉGORIE ALIGNÉS */
.project-main-title {
    display: flex;
    align-items: baseline;
    gap: 15px;
    font-size: 3.5vw;
    font-weight: 900;
    margin-bottom: 30px;
}

#p-desc, #p-skills {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #1f1f1f;
    max-width: 65ch;
    text-align: left;         
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 24px;
}

.project-detail-section, .footer {
    opacity: 0;
    visibility: hidden;
}

.category-right {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.8vw;
    opacity: 0.6;
    font-style: italic;
}

/* GRILLE PRINCIPALE PC */
.project-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 100px;
}

.project-text-content {
    margin-bottom: 50px;
    text-align: left;
}

.section-small-label {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    margin-bottom: 15px;
    opacity: 0.7;
}

.meta-boxes-grid, .tooling-grid-perfect {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.meta-box, .tool-tag {
    border: 0.5px solid #000;
    padding: 12px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.tool-tag { justify-content: space-between; }
.tool-tag img { width: 18px; height: 18px; object-fit: contain; }

/* PREVIEW ET GALERIE DESKTOP (SCROLL CONSERVÉ) */
.project-preview-side img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.media-row {
    display: flex;
    flex-direction: row; /* Horizontal sur PC */
    gap: 15px;
    height: 450px;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: flex-start;
}

.media-row img { height: 100%; width: auto; object-fit: cover; flex-shrink: 0; }
.media-row video { height: 250px; width: auto; object-fit: cover; display: block; flex-shrink: 0; }

.video-centered-container {
    width: 100%;
    max-width: 1100px;
    margin: 80px auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 80px !important;
    aspect-ratio: auto !important;
    height: auto !important;
}

.video-centered-container iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; background: #000; }

/* NAVIGATION BAS DE PAGE */
.project-footer-nav { margin-top: 100px; text-align: center; }
.back-btn { text-decoration: none; color: #000; font-size: 20px; font-weight: 700; }

/* HEADER GALERIE DESKTOP */
.gallery-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; opacity: 0; visibility: hidden; }
.gallery-title { font-size: 40px; font-weight: 900; margin-bottom: 0; opacity: 1 !important; }

.scroll-indicator { display: flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.arrow-icon { width: 18px; height: 18px; animation: arrow-slide 1.8s infinite ease-in-out; }

@keyframes arrow-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.site-link-btn { text-decoration: none; color: inherit; background-color: #000; color: #fff !important; transition: all 0.3s ease; border: 1px solid #000; }
.site-link-btn:hover { background-color: transparent; color: #000 !important; transform: translateY(-2px); }


/* =========================================
   2. RESPONSIVE TABLETTE (1024px)
   ========================================= */
@media (max-width: 1024px) {
    .project-main-grid {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    /* PLACEMENT : Contexte et Tech sous la photo preview */
    .project-text-content { display: contents; }
    #p-desc, #p-skills { order: 1; }
    .project-preview-side { order: 2; }
    .section-small-label, .meta-boxes-grid, .tooling-grid-perfect, .skills-spacing { order: 3; }

    /* EMPILEMENT PHOTOS (PLUS DE SCROLL) */
    .media-row {
        flex-direction: column;
        height: auto;
        gap: 30px;
    }
    .media-row img, .media-row video { width: 100%; height: auto; }

    /* CACHER FLÈCHES */
    .scroll-indicator, .nav-arrow { display: none !important; }
}


/* =========================================
   3. RESPONSIVE MOBILE (480px)
   ========================================= */
@media (max-width: 480px) {
    .project-detail-section { padding: 80px 24px; }
    .project-main-title { flex-direction: column; align-items: flex-start; font-size: 28px; }

    .project-main-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .category-right {
        /* On augmente la taille (on passe de 16px à 20px ou 22px) */
        font-size: 20px !important; 
        
        /* On remonte un peu l'opacité pour qu'il soit moins "effacé" */
        opacity: 0.5 !important; 
        
        /* On lui donne un peu plus de graisse si nécessaire */
        font-weight: 500; 
        
        /* Optionnel : un petit décalage pour ne pas qu'il colle trop au titre */
        margin-top: 2px;
    }

    /* Si tu veux qu'il soit sur sa propre ligne bien distincte */
    .project-main-title {
        gap: 5px !important;
    }

    /* PLACEMENT : Photo preview sous le titre */
    .project-preview-side { order: -1; }

    /* EMPILEMENT PHOTOS */
    .media-row {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }
    .media-row img, .media-row video { width: 100%; height: auto; }

    /* CACHER FLÈCHES */
    .scroll-indicator, .nav-arrow { display: none !important; }

    .meta-boxes-grid, .tooling-grid-perfect { grid-template-columns: repeat(2, 1fr); }
    .gallery-title { font-size: 28px; }
}