/* ============================================
   PHOTOGRAPHE TEMPLATE
   ============================================ */

@font-face {
    font-family: 'Guggenheim Sans';
    src: url('/webfonts/GuggenheimSans-Regular.woff2') format('woff2'),
         url('/webfonts/GuggenheimSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ============================================
   VARIABLES — modifier cette section
   ============================================ */

:root {
    /* — Typographie — */
    --font-family: 'Guggenheim Sans', sans-serif;
    --font-size-body: 14px;
    --font-size-nav: 14px;

    /* — Espacement — */
    --body-padding: 30px;       /* marges latérales */

    /* — Navigation — */
    --nav-pad: 22px;            /* padding autour du nom et du burger */
    --content-offset: 130px;    /* espace sous la nav avant le contenu */

    /* — Séries (home et pages série) — */
    --strip-height: 68vh;       /* hauteur commune à toutes les images */
    --serie-gap: 18vh;          /* espace vertical entre les séries sur la home */

    /* — Index (grille masonry) — */
    --masonry-gutter: 48px;

    /* — Page Informations — */
    --info-width: 45vw;
    --info-max-width: 550px;

    /* — Couleurs — */
    --bg: #ffffff;
    --text: rgba(0, 0, 0, 0.85);
    --text-hover: #000000;
}


/* ============================================
   BASE
   ============================================ */

html {
    scrollbar-gutter: stable;
}

body {
    background: var(--bg);
    color: var(--text);
    font: var(--font-size-body) / 1.5 var(--font-family);
    margin: 0;
    padding: 0 var(--body-padding);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font: inherit;
    margin: 0 0 1em;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--text);
    text-decoration: none;
}

a:hover {
    color: var(--text-hover);
}

a:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--body-padding);
    background: var(--text);
    color: var(--bg);
    padding: 6px 12px;
    font: var(--font-size-body) / 1.5 var(--font-family);
    z-index: 9999;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--nav-pad);
}


/* ============================================
   NAVIGATION
   ============================================ */

.nav-name {
    position: fixed;
    top: var(--nav-pad);
    left: var(--body-padding);
    font: var(--font-size-nav) / 1 var(--font-family);
    color: var(--text);
    z-index: 300;
    -webkit-tap-highlight-color: transparent;
}

.burger {
    position: fixed;
    top: var(--nav-pad);
    right: var(--body-padding);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

.burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--text);
}

.nav-close {
    position: absolute;
    top: var(--nav-pad);
    right: var(--body-padding);
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

.nav-close::before,
.nav-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1px;
    background: var(--text);
}

.nav-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.burger:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 4px;
}

/* Overlay menu */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.nav-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
}

.nav-overlay ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-overlay li + li {
    margin-top: 0.75em;
}

.nav-overlay a {
    font: var(--font-size-nav) / 1.5 var(--font-family);
    color: var(--text);
    display: block;
    padding: 4px 0;
}



/* ============================================
   HOME — SCROLL VERTICAL DE SÉRIES
   ============================================ */

.home {
    padding-top: var(--content-offset);
    padding-bottom: var(--serie-gap);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home .photo {
    align-self: center;
}


/* ============================================
   SÉRIE — STRIP HORIZONTAL
   ============================================ */

.serie {
    position: relative;
    margin-left: calc(-1 * var(--body-padding));
    width: calc(100% + 2 * var(--body-padding));
    overflow: hidden;
    height: var(--strip-height);
    margin-bottom: var(--serie-gap);
}

.home .serie:last-child,
.home .photo:last-child { margin-bottom: 0; }

.serie__track {
    position: relative;
    height: 100%;
}

.serie__item {
    position: absolute;
    top: 0;
    height: 100%;
    left: 100%; /* off-screen par défaut — JS repositionne */
}

.serie__item:first-child {
    left: 0; /* premier visible en attendant JS */
}

.serie__item img {
    height: 100%;
    width: auto;
    display: block;
}


/* Boutons peek */
.serie__next,
.serie__prev {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.serie__next { right: 0; }
.serie__prev { left: 0; }

@media screen and (max-width: 600px) {
    .serie__next,
    .serie__prev { width: 12vw; }
}

/* Image seule */
.photo {
    height: var(--strip-height);
    margin-bottom: var(--serie-gap);
}

.photo img {
    height: 100%;
    width: auto;
    display: block;
}

/* Légende — bas gauche de l'écran au survol */
.caption {
    position: fixed;
    bottom: var(--body-padding);
    left: var(--body-padding);
    margin: 0;
    font: var(--font-size-nav) / 1 var(--font-family);
    color: var(--text);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .caption { transition: opacity 0.2s; }
}

@media (hover: hover) {
    .serie__item:hover .caption { opacity: 1; }
}


/* ============================================
   INDEX — GRILLE DES SÉRIES
   ============================================ */

.series-index {
    padding-top: var(--content-offset);
    padding-bottom: 80px;
    padding-left: 220px;
    padding-right: 220px;
}

.series-grid {
    opacity: 0;
}

.series-grid.is-ready {
    opacity: 1;
}

.serie-card {
    width: calc((100% - 3 * var(--masonry-gutter)) / 4);
    margin-bottom: var(--masonry-gutter);
    display: block;
    box-sizing: border-box;
}

.serie-card img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================
   PAGE SÉRIE (single)
   ============================================ */

.serie-page {
    padding-top: var(--content-offset);
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.serie-page .serie {
    margin-bottom: 0;
}


/* ============================================
   PAGE CONTENU (Informations, 404)
   ============================================ */

.page-content {
    padding-top: var(--content-offset);
    padding-bottom: 80px;
    width: var(--info-width);
    max-width: var(--info-max-width);
}


/* ============================================
   PAGE BIO
   ============================================ */

.bio-content {
    padding-top: var(--content-offset);
    padding-bottom: 80px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.bio-lang {
    position: fixed;
    top: var(--nav-pad);
    left: max(var(--body-padding), calc(50% - 240px));
    font: var(--font-size-body) / 1 var(--font-family);
    color: var(--text);
    z-index: 101;
}

.bio-lang strong {
    font-weight: bold;
}

.bio-lang a {
    font-weight: normal;
    color: var(--text);
}

.bio-body {
    margin-top: 4.5em;
}

.bio-body h2 {
    font: var(--font-size-body) / 1.5 var(--font-family);
    font-weight: bold;
    margin: 0 0 0.5em;
}

.bio-body p {
    margin: 0 0 0.5em;
}

.bio-body hr {
    border: none;
    border-top: 1px dashed var(--text);
    opacity: 0.35;
    margin: 2em 0;
}


/* ============================================
   MOBILE  (≤ 600px)
   ============================================ */

@media screen and (max-width: 600px) {
    :root {
        --body-padding: 16px;
        --nav-pad: 16px;
        --content-offset: 89px;
        --serie-gap: 12vh;
        --strip-height: min(45vh, 76vw);
        --masonry-gutter: 12px;
    }

    .page-content {
        width: 100%;
        max-width: none;
    }

    .serie-card {
        width: calc((100% - 2 * var(--masonry-gutter)) / 3);
    }

    .bio-lang {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Séries : respectent les marges latérales du corps */
    .serie {
        margin-left: 0;
        width: 100%;
    }

    /* Images seules : pleine largeur disponible */
    .photo {
        height: auto;
    }
    .photo img {
        width: 100%;
        height: auto;
    }
}