/* ============================================
   NICO SILBERFADEN
   ============================================ */

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


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

:root {
    /* — Typographie — */
    --font-family: 'Ouverture', system-ui, sans-serif;
    --font-size-body: 17px;
    --font-size-nav: 17px;      /* nom + lien Information : écart nom/lien à 320px de large : voir CLAUDE.md (≥ 24px requis) */
    --letter-spacing: 0.3px;    /* interlettrage de tout le site (hérité depuis body) ; 0 = police d'origine */

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

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

    /* — Séries et images de la home — */
    --ratio-max: 1.6;           /* rapport largeur/hauteur de la photo la plus large qui doit tenir entière (les panoramas plus larges sont réduits) */
    --strip-fit: calc((100vw - 2 * (var(--peek) + var(--peek-gap))) / var(--ratio-max)); /* hauteur maximale pour que cette photo tienne sans rognage */
    --strip-height: min(68svh, var(--strip-fit));  /* hauteur commune à toutes les images — svh évite le redimensionnement au scroll (barre d'adresse iOS) */
    --serie-gap: 28svh;          /* espace vertical entre les séries sur la home */
    --peek: 120px;               /* largeur visible des images voisines dans une bande, collées aux bords (lu aussi par serie.js) */
    --peek-gap: 16px;           /* écart minimal entre la photo centrale et les aperçus */

    /* — Pages texte (404 : --info-* ; Information : --bio-width) — */
    --info-width: 45vw;
    --info-max-width: 550px;
    --bio-width: 700px;

    /* — Pages — */
    --page-pad-bottom: 80px;    /* espace sous le contenu des pages texte */

    /* — 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);
    letter-spacing: var(--letter-spacing);
    margin: 0;
    padding: 0 var(--body-padding);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Texte réservé aux lecteurs d'écran (h1 des pages sans titre visible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

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

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

p {
    margin: 0 0 1em;
}

strong,
b {
    font-weight: normal;   /* la police n'a qu'une graisse : pas de faux gras */
}

em,
i {
    font-style: normal;                 /* la police n'a pas d'italique : pas de faux italique */
    text-decoration: underline;         /* l'emphase est soulignée */
    text-underline-offset: 0.2em;
}

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;
    z-index: 9999;
}

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


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

/* Nom (gauche) et lien Information (droite) : même ligne, même style */
.nav-name,
.nav-link {
    position: fixed;
    top: var(--nav-pad);
    font: var(--font-size-nav) / 1 var(--font-family);
    color: var(--text);
    z-index: 300;
}

.nav-name { left: var(--body-padding); }
.nav-link { right: var(--body-padding); }


/* ============================================
   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;
}

/* Premier élément de la home : seul sur le premier écran — l'élément suivant commence sous la ligne de flottaison */
.home > h1 + * {
    margin-bottom: max(var(--serie-gap), calc(100svh - var(--content-offset) - var(--strip-height)));
}


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

.serie {
    position: relative;
    margin-left: calc(-1 * var(--body-padding));
    width: calc(100% + 2 * var(--body-padding));
    overflow-x: clip; overflow-y: visible;
    height: var(--strip-height);
    margin-bottom: var(--serie-gap);
    container-type: inline-size;  /* permet l'unité cqw ci-dessous */
}

.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.is-start {
    left: 0; /* image de départ visible en attendant que serie.js la centre */
}

.serie__item img {
    height: 100%;
    width: auto;
    max-width: calc(100cqw - 2 * (var(--peek) + var(--peek-gap))); /* jamais plus large que la bande moins aperçus et écarts : ni rognage, ni contact avec les aperçus */
    object-fit: contain;                       /* l'image se réduit entière, sans déformation */
    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;
}
.serie__next { right: 0; }
.serie__prev { left: 0; }

.serie__next:focus-visible,
.serie__prev:focus-visible {
    outline-offset: -4px;
}

/* Sans JS (pas de classe js sur <html>) : la bande devient une rangée qui défile à la main ; les boutons, inopérants, sont masqués */
html:not(.js) .serie {
    overflow-x: auto;
    padding-inline: var(--body-padding);
    box-sizing: border-box;
}
html:not(.js) .serie__track {
    display: flex;
    gap: var(--peek-gap);
    width: max-content;
}
html:not(.js) .serie__item { position: static; }
html:not(.js) .serie__next,
html:not(.js) .serie__prev { display: none; }

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

.photo img {
    height: 100%;
    width: auto;
    max-width: calc(100vw - 2 * (var(--peek) + var(--peek-gap))); /* même limite que la photo centrale d'une bande : une photo a la même taille seule ou en série */
    object-fit: contain;
    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,
    .photo:hover .caption { opacity: 1; }
}


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

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


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

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

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

/* Liens soulignés dans le texte : la couleur seule ne les distingue pas (WCAG 1.4.1) */
.bio-body a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.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: 18svh; 
        --peek: 16px;               /* aperçu plus large sur mobile : zone de toucher confortable */
        --peek-gap: 8px;
        --strip-height: min(45svh, var(--strip-fit));
    }

    .serie__next,
    .serie__prev { width: 12vw; }

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

/* Légende en surimpression sur l'image de départ d'une bande (au survol) */
.caption--over { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 12px 0 0; color: var(--text); font: 13px / 1.45 var(--font-family); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .caption--over { transition: opacity 0.25s; } }
@media (hover: hover) { .serie__item:hover .caption--over { opacity: 1; } }

.slant { font-style: normal; } /* légendes en romain : la police n'a pas d'italique, le navigateur en simulait un */

/* Photos voisines d'une bande : toute leur surface visible est cliquable (serie.js) */
.serie__item.is-prev,
.serie__item.is-next { cursor: pointer; }

/* Image de survol : static/hover/<serie>/<meme nom>.webp remplace la photo sous la souris */
.serie__item img.serie__hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; pointer-events: none; }
@media (hover: hover) { .serie__item:hover img.serie__hover { opacity: 1; } }

/* Image seule : cadre ajusté à la photo, légende juste dessous au survol (comme les séries) */
.photo { display: flex; align-items: center; justify-content: center; }
.photo__frame { position: relative; }
.photo__frame img { height: auto; width: auto; max-height: var(--strip-height); }
.photo__frame .caption { position: absolute; left: 0; right: 0; top: 100%; bottom: auto; margin: 0; padding: 12px 0 0; font: 13px / 1.45 var(--font-family); white-space: normal; }
@media (hover: hover) { .photo__frame:hover .caption { opacity: 1; } }

/* Image de survol d'une image seule : static/hover/<meme nom>.webp */
.photo__frame img.photo__hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; opacity: 0; pointer-events: none; }
@media (hover: hover) { .photo__frame:hover img.photo__hover { opacity: 1; } }

/* Page Information : listes Press / Solo shows / Group shows (bloc <div class="one-line"> dans information.md),
   une entrée par ligne sur grand écran ; les plus longues dépassent à droite de la colonne. Retour à la ligne normal en dessous de 1300px */
@media screen and (min-width: 1300px) { .bio-body .one-line p { white-space: nowrap; } }