/*
Theme Name: Laëtitia Ramamonjisoa Portfolio
Theme URI:
Author: Laëtitia Ramamonjisoa
Description: Portfolio minimaliste — Art Director · Director
Version: 1.0
*/

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; }

body {
    background: #fff;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a { color: #000; text-decoration: none; }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── Page fade ──────────────────────────────────────────── */
body {
    opacity: 0;
    animation: pageFadeIn 0.4s ease forwards;
}

@keyframes pageFadeIn { to { opacity: 1; } }

/* ─── Header ─────────────────────────────────────────────── */
.site-header {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 24px 24px 20px;
    font-size: 12px;
    letter-spacing: 0.01em;
    position: relative;
}

.site-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-title a { font-weight: 700; font-size: 13px; }
body.home .site-title a { font-weight: 600; }

.site-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.02em;
}

/* Homepage : subtitle centré horizontalement dans le header */
body.home .site-subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px;
    white-space: nowrap;
    font-weight: 600;
}

.site-nav ul { list-style: none; display: flex; gap: 0; }

.site-nav ul li::before { content: "·"; margin: 0 0.5em; }
.site-nav ul li:first-child::before { content: none; }

.site-nav a { font-weight: 400; }

/* ─── Project item — base ────────────────────────────────── */
.project-item {
    position: relative;
    display: block;
    cursor: pointer;
}

/* ─── Thumb — 16:9 box ───────────────────────────────────── */
.project-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
}

.project-thumb img,
.project-thumb video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Video hover ────────────────────────────────────────── */
.thumb-video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.thumb-img {
    transition: opacity 0.4s ease;
}

.project-item.is-playing .thumb-video { opacity: 1; }
.project-item.is-playing .thumb-img   { opacity: 0; }

/* ─── Hover overlay — covers entire project-item ─────────── */
.project-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.project-item.is-hovered::after {
    background: rgba(0,0,0,0.3);
}

/* Vidéo en lecture sans survol : pas d'assombrissement (default ::after = transparent) */

/* ─── Hover label — white, centered over entire item ────── */
.project-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-align: center;
    z-index: 3;
}

.project-item.is-hovered .project-label { opacity: 1; }
.project-item.is-playing:not(.is-hovered) .project-label { opacity: 0; }

.project-label .label-title { font-weight: 700; }
.project-label .label-cat   { font-weight: 400; }

/* ─── Hero ───────────────────────────────────────────────── */
.project-hero { width: 100%; }

.hero-thumb {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    padding-bottom: 0 !important;
    position: relative;
}

.hero-thumb img,
.hero-thumb video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ─── Grid ───────────────────────────────────────────────── */
.project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* AÏNA — always full width */
.project-grid .project-item--full {
    grid-column: span 2;
}

/* ─── Split row + Double ─────────────────────────────────── */
.project-item.project-split,
.project-item.project-double {
    display: block;
    margin-top: 8px;
}

/* ─── Quad row — 4 photos portrait collées ───────────────── */
.project-item.project-quad {
    display: block;
    margin-top: 8px;
}

.quad-images {
    display: flex;
    gap: 0;
    height: 55vh;
    font-size: 0;
    line-height: 0;
}

.quad-photo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.quad-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-images {
    display: flex;
    gap: 0;
    height: 60vh;
    font-size: 0;
}

.split-left,
.split-right {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    font-size: 0;
    position: relative;
}

/* Per-side hover darkening when video is playing */
.split-left::after,
.split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.project-item.is-playing .split-left:hover::after,
.project-item.is-playing .split-right:hover::after {
    background: rgba(0,0,0,0.45);
}

.split-left .project-thumb,
.split-right .project-thumb {
    padding-bottom: 0;
    height: 100%;
}

/* ─── AÏNA — full width, normal 16:9 height ─────────────── */
.project-grid .project-item--full .project-thumb {
    padding-bottom: 28.125%; /* = 56.25% / 2 — matches half-width 16:9 height */
}

/* ─── AÏNA placeholder ───────────────────────────────────── */
.project-thumb.placeholder {
    background: #000;
}

.project-thumb.placeholder span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* ─── Project page ───────────────────────────────────────── */
.project-page {
    padding: 0;
}

.project-hero-img {
    width: 100%;
}

.project-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

.project-page-header {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 48px;
    margin-bottom: 48px;
    text-align: center;
}

.project-page-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.project-page-subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 4px;
}

.project-page-role,
.project-page-client {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 3px;
}

.project-gallery {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-bottom: 80px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

.project-media {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

.project-media img {
    width: 100%;
    height: auto;
    object-fit: unset;
    display: block;
}

.project-media video {
    width: 100%;
    height: auto;
    display: block;
}


/* ─── WordPress video cover ──────────────────────────────── */
.video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.video-wrap.is-playing .video-cover {
    opacity: 0;
    pointer-events: none;
}

/* Conteneur vidéo 16:9 — Vimeo et WordPress */
.video-wrap,
.vimeo-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-wrap video,
.vimeo-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* wheel events remontent au snap — activé seulement quand la vidéo joue */
}
.vimeo-wrap.is-playing iframe {
    pointer-events: auto;
}

/* ─── Video overlay hover ────────────────────────────────── */
/* Image de couverture Vimeo */
.vimeo-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.vimeo-wrap.is-playing .vimeo-cover {
    opacity: 0;
    filter: none;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.vimeo-wrap.is-hovered .video-overlay {
    background: rgba(0,0,0,0.12);
}

/* Hover : cover disparaît, player visible, titre flotte au-dessus */
.vimeo-wrap.is-hovered .vimeo-cover {
    opacity: 0;
    pointer-events: none;
}

.vimeo-wrap.is-hovered .video-overlay-title {
    opacity: 1;
}

/* Fin de vidéo : cover revenue, overlay sombre + titre */
.vimeo-wrap.is-ended .vimeo-cover {
    opacity: 1;
}

.vimeo-wrap.is-ended .video-overlay {
    background: rgba(0,0,0,0.55);
    pointer-events: auto;
    cursor: pointer;
}

.video-overlay-title {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

/* Ligne contexte bas de page */
.project-context {
    font-size: 11px;
    font-weight: 400;
    color: #000;
    padding: 48px 0;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Blu Samu layout ────────────────────────────────────── */

.blusamu-hero {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.blusamu-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.blusamu-hero-placeholder {
    width: 100%;
    height: 60vh;
    background: #000;
}

.blusamu-subtitle {
    position: absolute;
    bottom: 32px;
    left: 10vw;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.blusamu-intro {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 0 72px;
    text-align: center;
}

.blusamu-intro-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.blusamu-intro-sub {
    font-size: 12px;
    font-weight: 400;
    color: #000;
    margin-top: 4px;
}

.blusamu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 64px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

.blusamu-clip {
    display: block;
    text-decoration: none;
    color: #000;
}

.blusamu-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
    margin-bottom: 0;
}

/* Quand blusamu-thumb est aussi un embed Vimeo */
.blusamu-thumb.vimeo-wrap {
    height: 0;
    margin-bottom: 0;
}

.blusamu-thumb img,
.blusamu-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

/* Hover géré par JS (is-hovered), pas par CSS :hover */

.blusamu-clip-title {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8px;
}

.blusamu-note {
    max-width: 640px;
    margin-bottom: 48px;
    padding: 0 10vw;
}

.blusamu-note p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: #000;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
    padding: 40px 24px;
    font-size: 11px;
    text-align: center;
    color: #000;
}

.site-footer a { color: #000; }

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .project-grid { grid-template-columns: 1fr; }
    /* AÏNA "full" ne doit pas créer de 2e colonne implicite (sinon Tshegue + Blu Samu côte à côte) */
    .project-grid .project-item--full { grid-column: auto; }

    /* Nike & Givenchy (split) → une seule image 16:9, comme les autres projets */
    .project-split .split-images { height: auto; }
    .project-split .split-right { display: none; }
    .project-split .split-left .project-thumb {
        padding-bottom: 56.25%;
        height: 0;
    }

    /* Chloé (quad) → ne garder qu'UNE seule photo sur mobile (uniforme avec les autres rangées) */
    .project-quad .quad-photo:nth-child(n+2) { display: none; }
    .project-quad .quad-images { height: 56vh; }

    .hero-thumb { height: 50vh; }

    /* Mobile : titre + poste blancs toujours visibles, sans assombrissement ni vidéo */
    .project-item .project-label {
        opacity: 1;
        text-shadow: 0 1px 8px rgba(0,0,0,0.55);
    }
    .project-item::after { background: rgba(0,0,0,0) !important; }
    .project-item .thumb-video { display: none; }

    /* Header empilé à gauche (nom / poste / nav), aucun centrage absolu */
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .header-separator { display: none; }
    body.home .site-subtitle {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        white-space: normal;
    }
    /* Nav à la même taille que le sous-titre "Art Director · Director" (11px) */
    .site-nav ul { flex-wrap: wrap; font-size: 11px; }
    /* Points séparateurs en gras (mots en graisse normale) pour différencier la ligne nav */
    .site-nav ul li::before { font-weight: 700; }
}

/* ─── Default template — galerie photos horizontale ─────── */
.project-photo-gallery-h {
    width: 80vw;
    margin: 48px auto;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    user-select: none;
}
.project-photo-gallery-h::-webkit-scrollbar { display: none; }
.project-photo-gallery-h img {
    height: 45vh;
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
    display: block;
    pointer-events: none;
}

/* ─── Pages projet — header fixe + titre centré ─────────── */

body.single-project:not(.is-givenchy) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
}
body.admin-bar.single-project:not(.is-givenchy) .site-header { top: 32px; }

body.single-project:not(.is-givenchy) main.project-page {
    padding-top: var(--header-h, 68px);
}

.project-title-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 24px;
    gap: 4px;
    pointer-events: none;
    z-index: 101;
}
body.admin-bar .project-title-fixed { top: 32px; }
.project-title-main {
    font-size: 12px;
    font-weight: 700;
    color: #000;
}
.project-role-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000;
}

/* Titre blusamu-intro masqué (remplacé par le header fixe) */
body.single-project .blusamu-intro-title { display: none; }

/* ─── Givenchy — structure plein écran ───────────────────── */

/* Body : seul le conteneur scroll défile */
body.is-givenchy {
    overflow: hidden;
    height: 100vh;
}

/* Header fixe au-dessus du contenu */
body.is-givenchy .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
}
/* Compense la barre admin WordPress (+32px sur html) */
body.admin-bar.is-givenchy .site-header { top: 32px; }
body.admin-bar.is-givenchy .givenchy-page-title { top: 32px; }

/* Conteneur principal de snap — remplace le scroll document */
.givenchy-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
    background: #fff;
}
body.is-givenchy .site-footer { display: none; }
.givenchy-footer {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 10vw 48px;
    font-size: 11px;
    color: #000;
}
.givenchy-footer a { color: #000; }
.givenchy-footer .project-footer-context { margin: 0 0 6px; }
.givenchy-wrap::-webkit-scrollbar { display: none; }

/* Chaque écran = exactement 100vh */
.givenchy-screen {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--header-h, 68px);
    box-sizing: border-box;
    position: relative;
}

/* Fond noir pour FW21 */
.givenchy-screen--dark {
    background: #000;
}

/* Titre "Givenchy  2021–2022" centré dans la barre header, fixe */
.givenchy-page-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 24px;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    pointer-events: none;
    z-index: 101;
}
.givenchy-video-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 1;
    transition: opacity 0.3s;
}

/* Bloc label + galerie — utilisé pour Resort 22, 4G Bag, FW21 */
.givenchy-gallery-block {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px; /* espace entre le label et la galerie */
}
/* Le label est aligné avec la bordure gauche de la galerie */
.givenchy-gallery-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000;
    margin: 0;
    line-height: 1;
}
/* Outer à l'intérieur du bloc : prend toute la largeur du bloc */
.givenchy-gallery-block .givenchy-gallery-outer,
.givenchy-gallery-block .givenchy-fw21-outer {
    width: 100%;
    margin: 0;
}

/* ── Galeries horizontales (Resort 22 & 4G Bag) ─────────── */
.givenchy-gallery-outer {
    position: relative;
    width: 80vw;
    margin: 0 auto;
    overflow: hidden;
}
.givenchy-gallery {
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    user-select: none;
}
.givenchy-gallery::-webkit-scrollbar { display: none; }
.givenchy-gallery img {
    height: calc(100vh - var(--header-h, 68px) - 56px); /* plein écran moins header et label */
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
    display: block;
    pointer-events: none;
}

/* ── Flèche navigation ───────────────────────────────────── */
.givenchy-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: inherit;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: opacity 0.2s;
    z-index: 10;
}
.givenchy-arrow:hover { opacity: 0.5; }
.givenchy-arrow--left  { right: auto; left: 0; }
.givenchy-arrow--right { left: auto;  right: 0; }
.givenchy-arrow--light {
    background: rgba(0,0,0,0.45);
    color: #fff;
}

/* ── Vidéo Resort 22 ─────────────────────────────────────── */
.givenchy-video-full video {
    width: 100%;
    display: block;
}

/* ── Vidéos 4G Bag côte à côte ───────────────────────────── */
/* Dimensionnement par la largeur → ratio naturel, overlay collé à la vidéo */
.givenchy-videos-pair {
    display: flex;
    gap: 8px;
    width: 80vw;
    margin: 0 auto;
    align-items: flex-start;
}
.giv-bag-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.giv-bag-video,
.giv-bag-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.giv-bag-video { object-fit: cover; }
.giv-bag-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Survol vidéo Givenchy — titre blanc + assombrissement léger, comme Chanel */
.giv-bag-wrap.is-hovered .giv-bag-overlay,
.giv-resort-wrap.is-hovered .giv-bag-overlay {
    background: rgba(0,0,0,0.12);
}
.giv-bag-wrap.is-hovered .video-overlay-title,
.giv-resort-wrap.is-hovered .video-overlay-title {
    opacity: 1;
}

/* 4G Bag — bouton plein écran (révélé au survol desktop / tap mobile) */
.giv-fs-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 6;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.giv-bag-wrap.is-hovered .giv-fs-btn,
.giv-bag-wrap.show-fs .giv-fs-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ── Galerie FW21 — photos qui se touchent ───────────────── */
.givenchy-fw21-outer {
    position: relative;
    width: 80vw;
    margin: 0 auto;
    overflow: hidden;
}
.givenchy-fw21 {
    width: 100%;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: stretch;
    font-size: 0;
    line-height: 0;
}
.givenchy-fw21::-webkit-scrollbar { display: none; }
.givenchy-fw21 img {
    height: calc(100vh - var(--header-h, 68px) - 56px);
    width: auto;
    flex-shrink: 0;
    display: block;
    margin: 0;
    padding: 0;
}

/* ── Vidéo Resort 22 — même ratio que Chanel Film ─────────── */
.givenchy-video-full {
    width: auto;
    margin: 0 auto;
    position: relative;
}
.giv-resort-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: min(88vw, calc((100vh - var(--header-h, 68px) - 110px) * 16 / 9));
    height: auto;
    margin: 0 auto;
}
.giv-resort-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Client + année — déplacé dans le footer ─────────────── */
.givenchy-context { display: none; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .givenchy-gallery-outer,
    .givenchy-fw21-outer { width: 88vw; }
    .givenchy-gallery,
    .givenchy-fw21 { width: 100%; }
    .givenchy-videos-pair { flex-direction: column; width: 88vw; height: auto; gap: 8px; }
    /* Sans ce override, flex:1 en colonne (parent height auto) écrase la hauteur à 0 → vidéos invisibles */
    .givenchy-videos-pair .giv-bag-wrap { flex: none; width: 100%; }
    .givenchy-video-full { width: 88vw; }
    /* Resort 22 (Vimeo) : pleine largeur 16:9 sur mobile */
    .giv-resort-wrap { width: 88vw; }
    /* Écran vidéo "Film" : placement + espacement comme Chanel/Tshegue (titre en haut, gap 44px) */
    .givenchy-screen--video { justify-content: flex-start; }
    .givenchy-screen--video .project-section-label { margin: 0 0 44px; }
    .project-photo-gallery-h { width: 90vw; margin: 32px auto; }
    .project-photo-gallery-h img { height: 35vh; }
}

/* ═══════════════════════════════════════════════════════════
   SYSTÈME SNAP UNIVERSEL — toutes pages projet
   ═══════════════════════════════════════════════════════════ */

/* Body snap */
body.is-snap {
    overflow: hidden;
    height: 100vh;
}
body.is-snap main.project-page { padding-top: 0; }
body.is-snap .site-footer { display: none; }

/* Conteneur scroll snap */
.project-snap-wrap {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
    background: #fff;
}
.project-snap-wrap::-webkit-scrollbar { display: none; }

/* Écran 100vh */
.project-screen {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--header-h, 68px);
    box-sizing: border-box;
    position: relative;
}

/* Écrans vidéo — label toujours visible, vidéo entière dans l'écran */
.project-screen--video {
    justify-content: flex-start;
    padding-top: calc(var(--header-h, 68px) + 16px);
}
/* La vidéo s'adapte à l'espace restant, ratio 16:9 préservé */
.project-screen--video .project-vimeo-block {
    width: auto;
}
.project-screen--video .vimeo-wrap {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
    width: min(88vw, calc((100vh - var(--header-h, 68px) - 110px) * 16 / 9));
    height: auto;
    background: #000;
}

/* Hero — même traitement que les écrans vidéo */
.project-screen--hero {
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}
.project-hero-cover {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.project-hero-subtitle {
    position: absolute;
    bottom: 40px;
    left: 48px;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin: 0;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* Bloc galerie horizontale */
.project-gallery-block {
    width: 80vw;
    margin: 0 auto;
}
.project-gallery-outer {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.project-gallery-h {
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    user-select: none;
}
.project-gallery-h::-webkit-scrollbar { display: none; }
.project-gallery-h img {
    height: calc(100vh - var(--header-h, 68px) - 56px);
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
    display: block;
    pointer-events: none;
}

/* Bloc vidéo Vimeo / WP */
.project-vimeo-block {
    width: 80vw;
    margin: 0 auto;
}

/* Flèches galerie universelles */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    width: 32px; height: 32px;
    font-size: 20px;
    font-family: inherit;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; line-height: 1;
    transition: opacity 0.2s;
    z-index: 10;
}
.gallery-arrow:hover { opacity: 0.5; }
.gallery-arrow--left  { left: 0;  right: auto; }
.gallery-arrow--right { right: 0; left: auto; }

/* Footer — juste sous le dernier écran, pas de snap */
.project-snap-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 10vw 48px;
    font-size: 11px;
    color: #000;
}
.project-snap-footer a { color: #000; }
.project-footer-context {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 400;
}
.project-footer-note {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 480px;
}
.project-footer-detail {
    font-size: 10px;
    font-weight: 400;
    color: #666;
    margin: 0;
}
.givenchy-footer .project-footer-detail { margin: 0; }

/* ── Blu Samu — 2 clips par écran, ratio naturel ─────────── */
.blusamu-pair {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.blusamu-pair .blusamu-clip {
    flex: 1;
    min-width: 0;
}

/* Titre "4G Bag" de l'écran vidéos : visible mobile uniquement (desktop intouché) */
.giv-bagvideos-label { display: none; }

/* Mobile */
@media (max-width: 768px) {
    .project-gallery-block { width: 88vw; }
    .project-gallery-h img { height: calc(100vh - var(--header-h, 68px) - 40px); }
    .project-vimeo-block { width: 88vw; }
    .project-snap-footer { padding: 32px 6vw 40px; }

    /* ── Givenchy : titre "4G Bag" en haut à gauche (placement comme les labels galerie) ── */
    .giv-bagvideos-label {
        display: block;
        width: 88vw;
        margin: 0 auto 12px;
        text-align: left;
    }
    /* Overlay hover Givenchy inutile sur mobile : masqué pour ne pas gêner les contrôles vidéo */
    .giv-bag-overlay { display: none; }

    /* ── Vidéos Vimeo (Blu, Chanel…) : lecteur natif sur mobile ──
       iframe interactif + cover/overlay retirés → 1er clic = lecture,
       chaque vidéo indépendante, contrôles + plein écran natifs visibles. */
    .vimeo-wrap iframe { pointer-events: auto; }
    .vimeo-wrap .vimeo-cover,
    .vimeo-wrap .video-overlay { display: none; }
}

/* ── Lightbox galeries (pages projet, desktop + mobile) ── */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.93);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Indication discrète "cliquer pour agrandir" dans le coin de la galerie */
.has-zoom-hint { position: relative; }
.has-zoom-hint::after {
    content: "\2922";
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 11;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Template Chanel ──────────────────────────────────────── */
.project-section-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    color: #000;
    margin: 0 0 16px;
}
.project-section-label + .project-vimeo-block {
    margin-top: 44px;
}

/* Grille 2×2 épisodes */
.chanel-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    width: 72vw;
    margin: 0 auto;
}

.chanel-episode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Override du padding-bottom trick pour le contexte grille */
.chanel-doc-grid .vimeo-wrap {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
    height: auto;
}

.chanel-episode-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #000;
    margin: 0;
    text-align: center;
}

/* Label "Documentary Series" — juste au-dessus de la grille (titre + vidéos groupés, centrés) */
.project-screen--episodes .project-section-label {
    margin: 0 0 18px;
    text-align: center;
}

/* ── Page About ───────────────────────────────────────────── */
.about-main {
    padding: 64px 40px 48px;
}

.about-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 64px;
    max-width: 860px;
    margin: 0 auto;
}

.about-photo {
    flex: 0 0 auto;
}

.about-photo img {
    display: block;
    width: 360px;
    height: auto;
}

.about-text {
    flex: 1 1 0;
    max-width: 420px;
}

.about-bio p {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: #000;
    margin: 0 0 0.55em;
}

.about-bio p:last-child {
    margin-bottom: 0;
}

.about-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 24px;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
}

.about-contact a { color: #000; }

@media (max-width: 768px) {
    .about-main {
        padding: 20px;
    }
    .about-block {
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
    }
    .about-photo {
        width: 100%;
    }
    .about-photo img {
        width: 100%;
    }
    .about-text {
        max-width: 100%;
    }
}

/* ── IMANI bottom section (Festivals / Available on / Credits) ── */
.imani-end {
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--header-h, 68px) 20px 60px;
    text-align: center;
}

.imani-block {
    margin-bottom: 56px;
}

.imani-end .project-section-label {
    margin: 0 0 28px;
}

.festival-list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 56px;
}

.festival-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.festival-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    filter: brightness(0);
}

.festival-logo--clermont {
    height: 54px;
}

.festival-caption {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000;
}

.imani-available {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.imani-available a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.imani-available a:hover {
    border-bottom-color: #000;
}

.imani-available a:not(:first-child) {
    margin-left: 18px;
}

.imani-available a:not(:first-child)::before {
    content: "·";
    display: inline-block;
    margin-right: 18px;
    color: #000;
}

.imani-credits {
    margin-top: 8px;
}

.imani-credits p {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #000;
}

@media (max-width: 768px) {
    .imani-end {
        padding: 60px 20px 80px;
    }
    .festival-list {
        gap: 40px;
    }
    .festival-logo {
        height: 52px;
    }
    .festival-logo--clermont {
        height: 42px;
    }
    .imani-available a:not(:first-child) {
        margin-left: 12px;
    }
    .imani-available a:not(:first-child)::before {
        margin-right: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — Vidéos films empilées : UNE vidéo par écran plein.
   Snap fort (mandatory, comme Givenchy). Chanel = Blu (identique).
   Placé en fin de feuille pour primer sur les définitions de base.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Les conteneurs ne sont plus des écrans 100vh ni des cibles de snap :
       ce sont les vidéos elles-mêmes qui deviennent les écrans aimantés. */
    .project-screen--episodes,
    .project-screen--bspair {
        height: auto;
        min-height: 0;
        display: block;
        padding: 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* Grille / paire → simple colonne pleine largeur */
    .chanel-doc-grid,
    .blusamu-pair {
        display: block;
        width: 88vw;
        margin: 0 auto;
        gap: 0;
    }

    /* Positionnement vertical IDENTIQUE à l'écran "Film" (.project-screen--video) :
       justify-content: flex-start + padding-top: calc(var(--header-h) + 16px).
       → la vidéo tombe à la même hauteur que "Film". */
    .blusamu-pair .blusamu-clip {
        width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
        padding-top: calc(var(--header-h, 68px) + 16px);
        padding-bottom: 24px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Titre de série = équivalent du label "Film" : même marge (0 0 16px) */
    .blusamu-pair .blusamu-clip .series-inline {
        display: block;
        margin: 0 0 16px;
        text-align: center;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #000;
    }

    /* Vidéo : même écart que "Film" (.project-section-label + .project-vimeo-block { margin-top: 44px }) */
    .blusamu-pair .blusamu-clip .blusamu-thumb {
        margin-top: 44px;
    }

    /* Cartel (titre sous chaque vidéo) */
    .blusamu-clip-title {
        margin: 10px 0 0;
        text-align: center;
    }

    /* Le titre de série partagé (sticky) est réservé au DESKTOP : masqué sur mobile (remplacé par .series-inline) */
    .bs-video-zone .series-sticky { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Titre de série STICKY — Blu Samu (desktop + mobile).
   Reste collé sous le header pendant la zone vidéos, disparaît
   à la sortie (entrée galerie). Chanel : géré en mobile plus haut.
   ═══════════════════════════════════════════════════════════ */
.bs-video-zone .series-sticky {
    position: sticky;
    top: calc(var(--header-h, 68px) + 16px);
    z-index: 50;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #000;
}

/* Titre de série "inline" (dans chaque écran) : réservé au MOBILE — masqué en desktop (le sticky prend le relais). */
.series-inline { display: none; }