/* ============================================
   LA SOCIÉTÉ - CSS ORIGINAL
   Adapté pour site multi-pages Hugo
   ============================================ */

/* Font Founders Grotesk - IDENTIQUE À L'ORIGINAL */
@font-face {
    font-family: 'FoundersGroteskTextWeb-Regular';
    src: url('/webfonts/FoundersGroteskTextWeb-Regular.eot');
    src: url('/webfonts/FoundersGroteskTextWeb-Regular.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/FoundersGroteskTextWeb-Regular.woff') format('woff'),
         url('/webfonts/FoundersGroteskTextWeb-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Body - IDENTIQUE À L'ORIGINAL */
body {
    background: #f9f6f3;
    font: 20px/24px FoundersGroteskTextWeb-Regular, Courier, monospace;
    text-align: left;
    margin: 0;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a:hover {
    color: #333;
}

/* ============================================
   MENU - IDENTIQUE À L'ORIGINAL
   ============================================ */

.menu {
    padding: calc(4 * 19px);
    position: relative;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu li {
    margin-right: 20px;
}

.first-item, .second-item, .third-item, .fourth-item {
    position: absolute;
    top: 0;
}

.first-item { left: 0; }
.second-item { left: calc(45% + 20px); }
.third-item { left: calc(70% + 20px); }
.fourth-item { right: 0; }

/* ============================================
   CONTENU DES PAGES
   Pour pages /bureau/, /references/, etc.
   Position identique au système :target original
   ============================================ */

.page-content {
    position: absolute;
    top: auto;
    left: calc(45% + 20px);
    width: calc(45vw - 40px);
    max-width: 550px;
}

/* Couleur orangered pour liens spéciaux (comme portfolio) */
.page-content a.special {
    color: orangered;
}

/* ============================================
   GALERIE - HOME PAGE
   Remplace .figure img de l'original
   Même position centrale
   ============================================ */

.gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 80vw;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Masquer la scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Masquer scrollbar Chrome/Safari */
.gallery::-webkit-scrollbar {
    display: none;
}

.projet {
    margin-bottom: 40px;
    text-align: center;
    cursor: pointer;
}

.projet img {
    width: auto;
    height: 75vh; /* Plus grand pour portfolio */
    max-width: 90vw; /* Limite largeur */
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Préserve proportions */
    transition: opacity 0.2s ease;
}

/* Curseur personnalisé desktop - comme flèche hover */
@media (min-width: 601px) {
    .projet:hover {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>'), auto;
    }
}

/* ============================================
   FOOTER - IDENTIQUE À L'ORIGINAL
   ============================================ */

.footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.footer2 {
    position: absolute;
    bottom: 20px;
    left: calc(45% + 20px);
}

/* ============================================
   MEDIA QUERIES - IDENTIQUE À L'ORIGINAL
   ============================================ */

/* Moyen écran */
@media screen and (max-width: 1200px) {
    /* Ajustements si nécessaires */
}

/* Mobile */
@media screen and (max-width: 600px) {
    body {
        font: 16px/18px FoundersGroteskTextWeb-Regular, Courier, monospace;
    }

    /* Menu mobile - positions verticales */
    .second-item, .third-item, .fourth-item {
        top: auto;
        left: 20px;
    }

    .second-item { top: calc(3 * 18px); }
    .third-item { top: calc(4 * 18px); }
    .fourth-item { top: calc(5 * 18px); }

    /* Contenu pages mobile */
    .page-content {
        position: absolute;
        top: calc(8 * 19px);
        left: 20px;
        width: calc(100vw - 40px);
        max-width: none;
    }

    /* Galerie mobile */
    .gallery {
        position: absolute;
        top: calc(8 * 19px);
        left: 20px;
        transform: none;
        width: calc(100vw - 40px);
        max-width: none;
        max-height: none;
        overflow-y: visible;
    }

    .projet img {
        width: 100%;
        height: auto;
        max-width: calc(100vw - 40px);
        object-fit: contain; /* Préserve proportions */
    }

    /* Footer mobile */
    .footer2 { 
        display: none;
    }
}