/* =========================================
   1. BASE & COMMUN
========================================= */
body {
    font-family: "Times New Roman", Times, Georgia, serif;
    margin: 0px; 
    padding: 0; 
    background-color: #9f9f9f; 
    color: #000000;
    overflow-x: hidden; 
}

a {
    text-decoration: none;
    color: inherit;
}

.center-button {
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1000; 
    font-size: 1.2rem;
    color: hsl(0, 0%, 100%); 
    text-decoration: none;
}

.logo-link {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 60px;
    height: auto;
    display: block;
}

.logo-link img {
    width: 100%;
    height: auto;
}


/* =========================================
   2. PAGE D'ACCUEIL (index.html)
========================================= */
.projets-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start; 
    gap: 0px; 
    width: 100%; 
}

.projet {
    display: flex;
    flex-direction: column;
    position: relative; 
    z-index: 1; 
    /* La transition a été retirée car le display:none est instantané */
}

/* EFFET DE DISPARITION ET SUPPRESSION DU VIDE */
.projets-grid.project-open .projet:not(.actif) {
    display: none; /* Supprime physiquement l'espace pour empêcher de scroller dans le vide */
}

.projet.actif {
    z-index: 50; 
}

.main-image {
    width: 100%; 
    height: auto;
    object-fit: contain;
    display: block; 
}

.details {
    display: none;
    margin-top: 0px;
    margin-bottom: 40px; 
    width: 0; 
    min-width: 100%;
    overflow: visible; 
}

.details.visible {
    display: block; 
}

/* --- LA GALERIE D'IMAGES --- */
.galerie-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0; 
    width: 100vw; 
    margin-left: calc(-1 * var(--offset-left, 0px));
}

.galerie-spacer {
    width: var(--offset-left, 0px);
    height: 1px;
    flex-shrink: 0;
}

.galerie-ligne img {
    max-width: 450px; 
    max-height: 90vh; 
    width: auto;
    height: auto;
    display: block;
}

.galerie-ligne iframe {
    width: 450px; 
    height: 253px; 
    max-width: 100%;
}

/* --- LA GRILLE DE TEXTE EN 3 COLONNES --- */
.project-info-grid {
    display: grid;
    /* Tu peux modifier ces valeurs pour changer la largeur de tes colonnes (ex: 20% 30% 50% ou 1fr 2fr 1fr) */
    grid-template-columns: 200px 200px 1fr; 
    gap: 40px;
    margin-top: 40px; /* L'espace entre la galerie d'images et ton texte */
    margin-bottom: 40px;
    color: hsl(0, 0%, 100%);
    width: 100vw; 
    margin-left: calc(-1 * var(--offset-left, 0px)); 
    padding: 0 20px; 
    box-sizing: border-box;
}

.project-info-col {
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.project-info-col h2,
.project-info-col p {
    margin: 0;
    word-wrap: break-word;
}


/* =========================================
   3. PAGE INDEX DE LISTE (wip.html)
========================================= */
.page-index {
    padding: 0px; 
}

.index-grid {
    display: grid;
    grid-template-columns: 250px 200px 1fr 250px; 
    gap: 20px;
    padding: 10px 0;
    align-items: baseline;
}

.index-header {
    position: sticky;
    top: 0;
    background-color: #9f9f9f;
    font-weight: bold;
    z-index: 100;
    border-bottom: 1px solid #000;
    padding-top: 8px;
    padding-bottom: 8px;
}

.index-item {
    border-bottom: 1px solid #000;
    cursor: pointer;
}

.index-item:hover {
    color: hsl(0, 0%, 100%); 
}

#hover-image {
    position: fixed;
    width: 250px; 
    height: auto;
    pointer-events: none; 
    z-index: 9999;
    display: none;
}

.index-details {
    display: none;
    padding: 20px 0 30px 0; 
    border-bottom: 1px solid #000; 
    max-width: 100%; 
}

.index-details.visible {
    display: flex;
    flex-wrap: nowrap; 
    align-items: flex-start;
    gap: 40px; 
}

.index-desc {
    width: 500px; 
    flex-shrink: 0; 
}

.index-galerie {
    display: flex;
    flex-wrap: nowrap;
    gap: 0; 
    overflow-x: auto; 
    overflow-y: hidden;
    padding-bottom: 15px; 
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.index-galerie::-webkit-scrollbar {
    height: 6px;
}

.index-galerie::-webkit-scrollbar-thumb {
    background-color: #000;
}

.index-galerie img,
.index-galerie iframe {
    height: 180px; 
    width: auto;
    object-fit: contain;
    flex-shrink: 0; 
    display: block;
}


/* =========================================
   4. PAGE ABOUT (about.html)
========================================= */
.page-about {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 80px 20px; 
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; 
    position: relative;
    z-index: 10;
}

.manifeste {
    margin: 60px 0;
    max-width: 800px; 
}

.manifeste p {
    margin: 0 0 10px 0; 
    color: hsl(0, 0%, 100%); 
    font-size: 1rem; 
}

.insta-link, .insta-links-bottom a {
    color: hsl(0, 0%, 100%); 
    text-decoration: none;
    font-size: 1rem; 
    font-weight: normal; 
}

.insta-link:hover, .insta-links-bottom a:hover {
    color: #000000; 
}

.insta-links-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; 
    margin-top: 20px;
}

.image-fantome {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 200px; 
    height: auto;
    z-index: 500; 
    transition: opacity 0s; 
    filter: grayscale(100%);
}

.image-fantome:hover {
    opacity: 0; 
}


/* =========================================
   5. CURSEUR CUSTOM PARTOUT (BLINDAGE)
========================================= */
html, body, * {
    cursor: url('../assets/images/curseur.svg') 16 16, auto !important;
}

a, 
.center-button, 
.main-image,
.index-item,
a:active,
.center-button:active,
.main-image:active,
.index-item:active {
    cursor: url('../assets/images/curseur.svg') 16 16, pointer !important;
}