/* ===========================================================================
   bv-portfolio.css — Portfolio Baptiste Vidal.
   Inspiré du rendu éditorial de Bruno Tyzio : intro 2 colonnes (texte +
   mensurations en monospace à gauche, portrait à droite), filtres
   minimalistes, grille mosaïque dense, CTA bandeau.
   =========================================================================== */

/* ─── Hero éditorial : 2 colonnes intro ─────────────────────────────── */
.bv-portfolio-hero {
    /* +header pour passer SOUS la navbar fixe + air supplémentaire éditorial */
    padding-top: calc(var(--bv-header-h) + clamp(32px, 5vh, 64px));
    padding-inline: var(--bv-page-margin);
    padding-bottom: clamp(48px, 8vh, 96px);
}
.bv-portfolio-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: stretch;
}
@media (max-width: 880px) {
    .bv-portfolio-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

.bv-portfolio-hero__col {
    display: flex;
    flex-direction: column;
    /* On garde le contenu en haut, l'image à droite peut être plus haute,
       les mensurations restent collées au reste du texte. */
    justify-content: flex-start;
    gap: clamp(20px, 3vh, 32px);
}

.bv-portfolio-hero__title {
    font-family: var(--bv-font-display);
    font-size: var(--bv-fs-h1);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: var(--bv-ls-display);
    color: var(--bv-text);
    margin: 0 0 var(--bv-space-5) 0;
    max-width: 14ch;
}
.bv-portfolio-hero__breadcrumb {
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    color: var(--bv-text-muted);
    margin: 0 0 var(--bv-space-4) 0;
}
.bv-portfolio-hero__breadcrumb a { color: inherit; }

/* Variante simple (page catégorie) — 1 colonne, pas de portrait */
.bv-portfolio-hero--simple .bv-portfolio-hero__simple {
    max-width: 60ch;
}
.bv-cat-description {
    margin-top: var(--bv-space-5);
    font-size: var(--bv-fs-body-lg);
    line-height: var(--bv-lh-normal);
    color: var(--bv-text-muted);
    max-width: 56ch;
}

.bv-portfolio-hero__image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f1efe8;
}
.bv-portfolio-hero__image picture,
.bv-portfolio-hero__image picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25%;
    display: block;
}

/* ─── Mensurations style fiche (Bruno Tyzio) ───────────────────────── */
.bv-mens {
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    line-height: 1.85;
    color: var(--bv-text);
    letter-spacing: 0;
}
.bv-mens__group {
    list-style: none;
    margin: 0 0 var(--bv-space-5) 0;
    padding: 0;
}
.bv-mens__group:last-child { margin-bottom: 0; }
.bv-mens__group li {
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    color: var(--bv-text);
}
.bv-mens__cat {
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bv-text);
    margin: 0 0 var(--bv-space-3) 0;
}
.bv-mens__pipes {
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    line-height: 1.85;
    color: var(--bv-text-muted);
    margin: 0;
}

/* ─── Filtres ───────────────────────────────────────────────────────── */
.bv-filters-wrap {
    border-block: 1px solid var(--bv-border);
    background: rgba(250, 250, 248, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: var(--bv-header-h);
    z-index: 10;
}
.bv-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bv-space-2);
    padding: var(--bv-space-3) var(--bv-page-margin);
}
.bv-filter {
    appearance: none;
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-family: var(--bv-font-body);
    font-size: var(--bv-fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--bv-ls-caps);
    font-weight: 500;
    color: var(--bv-text-muted);
    cursor: pointer;
    transition: color var(--bv-d-fast) ease;
    position: relative;
}
.bv-filter:hover { color: var(--bv-text); }
.bv-filter.is-active { color: var(--bv-text); }
.bv-filter.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1px;
    background: currentColor;
}
.bv-filter-count {
    margin-left: auto;
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-micro);
    color: var(--bv-text-muted);
}

/* ─── Grille staggered (style Bruno Tyzio) ──────────────────────────
   Layout 2 colonnes décalées verticalement : col1 commence en haut,
   col2 démarre plus bas pour créer un rythme éditorial. Chaque image
   garde son ratio naturel (height: auto). Gros gaps verticaux entre
   les photos d'une même colonne. Sur mobile (<720px), une seule colonne
   sans décalage. */
.bv-portfolio-grid-section {
    padding-block: clamp(40px, 6vh, 80px);
}
.bv-portfolio-grid-section > .bv-container {
    max-width: 1100px;
    margin-inline: auto;
}
.bv-stagger {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 80px);
}
.bv-stagger__col {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 9vh, 120px);
}
.bv-stagger__col--shifted {
    padding-top: clamp(64px, 12vh, 160px);
}
@media (max-width: 720px) {
    .bv-stagger { grid-template-columns: 1fr; column-gap: 0; row-gap: clamp(40px, 7vh, 80px); }
    .bv-stagger__col { gap: clamp(40px, 7vh, 80px); }
    .bv-stagger__col--shifted { padding-top: 0; }
}

.bv-tile {
    display: block;
    overflow: hidden;
    background: #f1efe8;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: opacity 0.4s var(--bv-ease-out);
    width: 100%;
}
.bv-tile.bv-tile--hidden { display: none; }
.bv-tile picture,
.bv-tile picture img,
.bv-tile__img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--bv-ease-out);
}
.bv-tile:hover picture img,
.bv-tile:hover .bv-tile__img {
    transform: scale(1.03);
}
.bv-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.3) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--bv-d-normal) var(--bv-ease-out);
    pointer-events: none;
}
.bv-tile:hover::after { opacity: 1; }

/* ─── Variante statique (page catégorie) : pas d'interaction ─────── */
.bv-stagger--static .bv-tile {
    cursor: default;
    pointer-events: none;
}
.bv-stagger--static .bv-tile::after { display: none; }
.bv-stagger--static .bv-tile picture img,
.bv-stagger--static .bv-tile .bv-tile__img {
    transition: none;
}
.bv-stagger--static .bv-tile:hover picture img,
.bv-stagger--static .bv-tile:hover .bv-tile__img {
    transform: none;
}
.bv-tile__cats {
    position: absolute;
    inset: auto var(--bv-space-3) var(--bv-space-3) var(--bv-space-3);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--bv-d-normal) var(--bv-ease-out), transform var(--bv-d-normal) var(--bv-ease-out);
    pointer-events: none;
}
.bv-tile:hover .bv-tile__cats { opacity: 1; transform: translateY(0); }
.bv-tile__cats span {
    background: rgba(250, 250, 248, 0.95);
    color: var(--bv-text);
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-micro);
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
}

/* ─── Sous-nav catégories (page catégorie) ─────────────────────────── */
.bv-cat-subnav {
    border-block: 1px solid var(--bv-border);
    background: rgba(250, 250, 248, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: var(--bv-header-h);
    z-index: 10;
}
.bv-cat-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bv-space-5);
    padding: var(--bv-space-3) var(--bv-page-margin);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bv-cat-link {
    font-size: var(--bv-fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--bv-ls-caps);
    font-weight: 500;
    color: var(--bv-text-muted);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color var(--bv-d-fast) ease, border-color var(--bv-d-fast) ease;
}
.bv-cat-link:hover { color: var(--bv-text); opacity: 1; }
.bv-cat-link.is-active { color: var(--bv-text); border-bottom-color: var(--bv-text); }

/* ─── Empty states ──────────────────────────────────────────────────── */
.bv-empty-state {
    padding: clamp(40px, 8vh, 80px) var(--bv-space-5);
    text-align: center;
    color: var(--bv-text-muted);
    font-family: var(--bv-font-mono);
    font-size: var(--bv-fs-caption);
    border: 1px dashed var(--bv-border);
}

/* ─── CTA bandeau noir ──────────────────────────────────────────────── */
.bv-cta-band {
    background: var(--bv-bg-dark);
    color: var(--bv-bg);
    padding-block: clamp(56px, 8vh, 96px);
}
.bv-cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bv-space-5);
}
@media (min-width: 720px) {
    .bv-cta-band__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--bv-space-7);
    }
}
.bv-cta-band__lead {
    font-family: var(--bv-font-display);
    font-size: var(--bv-fs-h2);
    line-height: 1.15;
    letter-spacing: var(--bv-ls-tight);
    color: var(--bv-bg);
    max-width: 26ch;
    margin: 0;
}
.bv-cta-band .bv-btn {
    border-color: var(--bv-bg);
    color: var(--bv-bg);
    flex-shrink: 0;
}
.bv-cta-band .bv-btn--solid {
    background: var(--bv-bg);
    color: var(--bv-text);
}
.bv-cta-band .bv-btn--solid:hover {
    background: transparent;
    color: var(--bv-bg);
}

/* ── Mensurations (landing Mannequinat) ──────────────────────────────── */
.bv-measurements__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    background: var(--bv-border, #E8E6E0);
    border: 1px solid var(--bv-border, #E8E6E0);
    margin: 0;
}
.bv-measurements__list > div {
    background: var(--bv-bg, #FAFAF8);
    padding: 1.25rem 1.5rem;
}
.bv-measurements__list dt {
    font-size: var(--fs-micro, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bv-text-muted, #6B6B6B);
    margin-bottom: 0.35rem;
}
.bv-measurements__list dd {
    margin: 0;
    font-size: var(--fs-body-lg, 1.125rem);
}

/* ── Tuile vidéo dans une galerie ────────────────────────────────────── */
.bv-tile__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0A0A0A;
}
.bv-tile__video iframe,
.bv-tile__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ── Métier "dense" (Mannequinat) : paddings réduits, pas de centrage vertical ── */
.bv-metier-page--dense .bv-portfolio-hero {
    padding-bottom: clamp(20px, 3vh, 36px);
}
.bv-metier-page--dense .bv-section {
    padding-block: clamp(24px, 4vh, 44px);
}
.bv-metier-page--dense .bv-section.bv-metier-cats {
    min-height: 0;          /* déjà assez de contenu : pas besoin de remplir l'écran */
    align-items: stretch;
}

/* ── Landing métier : sous-catégories centrées + rangées équilibrées ── */
/* Bloc centré verticalement dans l'écran (sauf mobile où le contenu s'empile). */
.bv-section.bv-metier-cats {
    display: flex;
    align-items: center;
    min-height: 78vh;
}
.bv-section.bv-metier-cats > .bv-container {
    width: 100%;
}
/* Flex (et non grid) pour que les rangées incomplètes se centrent au lieu de
   rester collées à gauche : Comédien (2 centrées), Création (3 + 2 centrées). */
.bv-cat-grid.bv-cat-grid--metier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.bv-cat-grid--metier .bv-cat-tile {
    flex: 0 1 calc((100% - 3 * var(--bv-gutter)) / 4); /* jusqu'à 4 par rangée */
    min-width: 220px;
}
/* 5 sous-catégories (Création de contenu) → 3 par rangée = 3 en haut, 2 centrées en bas. */
.bv-cat-grid--cols3 .bv-cat-tile {
    flex-basis: calc((100% - 2 * var(--bv-gutter)) / 3);
}
@media (max-width: 960px) {
    .bv-section.bv-metier-cats { min-height: auto; }
    .bv-cat-grid--metier .bv-cat-tile { flex-basis: calc((100% - var(--bv-gutter)) / 2); }
}
@media (max-width: 480px) {
    .bv-cat-grid--metier .bv-cat-tile { flex-basis: 100%; }
}