/* ===================================
   PROJETS.CSS — Styles spécifiques pages projet
   Chargé APRÈS style.css
   =================================== */

/* ─── NAV — gradient spécifique aux pages projet ────────── */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 14, 26, .9) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* ─── EYEBROW — variant gauche pour contexte projet ────────
   Override du centré de style.css par sélecteurs parents     */
.proj-overview .eyebrow,
.proj-results  .eyebrow,
.proj-gallery  .eyebrow,
.proj-next     .eyebrow,
.proj-text-img-content .eyebrow {
    text-align: left;
    justify-content: flex-start;
    gap: 1rem;
}
.proj-text-img-content .eyebrow {
    margin-bottom: 1.5rem;
}
.proj-overview .eyebrow::before,
.proj-results  .eyebrow::before,
.proj-gallery  .eyebrow::before,
.proj-next     .eyebrow::before,
.proj-text-img-content .eyebrow::before {
    flex: 0 0 24px;
    max-width: 24px;
}
.proj-overview .eyebrow::after,
.proj-results  .eyebrow::after,
.proj-gallery  .eyebrow::after,
.proj-next     .eyebrow::after,
.proj-text-img-content .eyebrow::after {
    display: none;
}

/* ─── OVERVIEW LEFT COLUMN ─────────────────────────────────── */
.proj-overview-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ─── PROJECT HERO ─────────────────────────────────────────── */
.proj-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem;
    overflow: hidden;
    z-index: 2;
}
.proj-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.proj-hero-img img,
.proj-hero-img video,
.proj-hero-img .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proj-hero-img iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;   /* ratio 16:9 basé sur la largeur */
    min-height: 100vh;
    min-width: 177.78vh; /* ratio 16:9 basé sur la hauteur */
    pointer-events: none;
    border: none;
}
.proj-hero-img .ph {
    background: linear-gradient(160deg, #12192a 0%, #0a0e1a 60%, #1a1208 100%);
}
.proj-hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(10, 14, 26, .6) 40%, rgba(10, 14, 26, .2) 100%);
}
.proj-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.proj-hero-back {
    position: absolute;
    top: 6.25rem;
    left: 5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .3s;
}
.proj-hero-back::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--muted);
    transition: width .3s;
    flex-shrink: 0;
}
.proj-hero-back:hover {
    color: var(--cream);
}
.proj-hero-back:hover::before {
    width: 48px;
}
.proj-meta {
    display: flex;
    gap: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
}
.proj-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-family: var(--sans);
    font-size: 0.625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}
.proj-meta-item strong {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.proj-hero-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(4rem, 8vw, 7.5rem);
    line-height: .92;
    color: var(--cream);
    opacity: 0;
    transform: translateY(30px);
}

/* Corner marks sur le hero */
.proj-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 3;
}
.proj-corner::before,
.proj-corner::after {
    content: '';
    position: absolute;
    background: var(--line-num);
}
.proj-corner::before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
}
.proj-corner::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}
.proj-corner.br {
    bottom: 5rem;
    right: 5rem;
    transform: rotate(180deg);
}
.proj-corner.bl {
    bottom: 5rem;
    left: 5rem;
    transform: rotate(270deg);
}

/* ─── STATEMENT ─────────────────────────────────────────────── */
.proj-statement {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.proj-statement-text {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.15;
    color: var(--cream);
    text-align: center;
    max-width: 1000px;
}
.proj-statement-text em {
    font-style: normal;
    font-weight: 600;
}

/* ─── OVERVIEW ──────────────────────────────────────────────── */
.proj-overview {
    position: relative;
    z-index: 2;
    padding: 0 5rem 7.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.proj-overview-heading {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    color: var(--cream);
}
.proj-overview-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 520px;
}

/* ─── ROLE & TOOLS STRIP ────────────────────────────────────── */
.proj-strip {
    position: relative;
    z-index: 2;
    padding: 3rem 5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 5rem;
}
.proj-strip-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.proj-strip-col h4 {
    font-family: var(--sans);
    font-size: 0.625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 400;
}
.proj-strip-col ul {
    list-style: none;
}
.proj-strip-col li {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--muted);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.proj-strip-col li:last-child {
    border-bottom: none;
}
.proj-strip-col img{
    width: 2rem;
}

/* ─── IMAGE CORNERS ─────────────────────────────────────────── */
.img-corner {
    position: absolute;
    width: 10px;
    height: 10px;
}
.img-corner::before,
.img-corner::after {
    content: '';
    position: absolute;
    background: var(--line-num);
}
.img-corner::before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
}
.img-corner::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}
.img-corner.tl {
    top: 12px;
    left: 12px;
}
.img-corner.tr {
    top: 12px;
    right: 12px;
    transform: rotate(90deg);
}
.img-corner.bl {
    bottom: 12px;
    left: 12px;
    transform: rotate(270deg);
}
.img-corner.br {
    bottom: 12px;
    right: 12px;
    transform: rotate(180deg);
}

/* ─── FULL-WIDTH IMAGE ──────────────────────────────────────── */
.proj-fullimg {
    position: relative;
    z-index: 2;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.proj-fullimg-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.proj-fullimg-wrap img,
.proj-fullimg-wrap .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}
.proj-fullimg-wrap .ph {
    background: linear-gradient(135deg, #1a2035 0%, #0d1525 40%, #1c1008 100%);
}
.proj-fullimg-caption {
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    color: var(--muted);
    text-align: right;
}

/* ─── SIDE-BY-SIDE IMAGES ───────────────────────────────────── */
.proj-duo {
    position: relative;
    z-index: 2;
    padding: 0 5rem 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.proj-duo-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.proj-duo-item img,
.proj-duo-item .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proj-duo-item .ph {
    background: linear-gradient(135deg, #0d1820 0%, #1a3040 50%, #0a0e1a 100%);
}

/* ─── TEXT + IMAGE ──────────────────────────────────────────── */
.proj-text-img {
    position: relative;
    z-index: 2;
    padding: 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.proj-text-img.reverse {
    direction: rtl;
}
.proj-text-img.reverse > * {
    direction: ltr;
}
.proj-text-img-content {
    max-width: 520px;
}
.proj-text-img-content h3 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.05;
    color: var(--cream);
    margin-bottom: 1.75rem;
}
.proj-text-img-content p {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
}
.proj-text-img-content p + p {
    margin-top: 1rem;
}
.proj-text-img-visual {
    position: relative;
    overflow: hidden;
}
.proj-text-img-visual img,
.proj-text-img-visual .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proj-text-img-visual .ph {
    background: linear-gradient(160deg, #1a1510 0%, #2a1c0a 50%, #0a0e1a 100%);
}
.proj-scroll {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ─── RESULTS ───────────────────────────────────────────────── */
.proj-results {
    position: relative;
    z-index: 2;
    padding: 7.5rem 5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}
.proj-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}
.proj-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.proj-result-num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 1;
    color: var(--cream);
}
.proj-result-label {
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ─── GALLERY ───────────────────────────────────────────────── */
.proj-gallery {
    position: relative;
    z-index: 2;
    padding: 5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.proj-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 30vw;
    gap: 1rem;
}
.proj-gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.proj-gallery-item.span-2 {
    grid-column: span 2;
}
.proj-gallery-item.tall {
    grid-row: span 2;
}
.proj-gallery-item img,
.proj-gallery-item .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
    will-change: transform;
}
.proj-gallery-item .ph {
    background: linear-gradient(135deg, #0f1a15 0%, #0a1820 60%, #15100a 100%);
}
.proj-gallery-item:hover img,
.proj-gallery-item:hover .ph {
    transform: scale(1.05);
}
.proj-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(245, 230, 200, .06);
    pointer-events: none;
}

/* ─── VIDEO EMBED ───────────────────────────────────────────── */
.proj-video {
    position: relative;
    z-index: 2;
    padding: 5rem;
}
.proj-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg2);
}
.proj-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ─── NEXT PROJECT ──────────────────────────────────────────── */
.proj-next {
    position: relative;
    z-index: 2;
    padding: 7.5rem 5rem;
    border-top: 1px solid var(--line);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.proj-next-label {
    font-family: var(--sans);
    font-size: 0.625rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}
.proj-next a {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1;
    color: var(--cream);
    text-decoration: none;
    transition: opacity .3s;
}
.proj-next a:hover {
    opacity: .6;
}

/* ─── IMAGE STACK (scroll mask reveal) ─────────────────────── */
.proj-text-img--stack {
    align-items: center;
    height: 100vh;
}

.proj-img-stack {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    width: 100%;
    max-height: calc(100vh - 8rem);
}

.proj-img-stack-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    will-change: clip-path;
}

.proj-img-stack-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .proj-hero { padding: 0 2rem 3.75rem; }
    .proj-hero-back { left: 2rem; }
    .proj-hero-title { font-size: clamp(3rem, 10vw, 4.5rem); }
    .proj-corner.bl { left: 2rem; }
    .proj-corner.br { right: 2rem; }

    .proj-statement { padding: 5rem 2rem; }

    .proj-overview {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0 2rem 5rem;
    }
    .proj-strip {
        flex-direction: column;
        gap: 2.5rem;
        padding: 2.5rem 2rem;
    }
    .proj-fullimg { padding: 2.5rem 2rem; }
    .proj-duo {
        grid-template-columns: 1fr;
        padding: 0 2rem 2.5rem;
    }
    .proj-text-img {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 2rem;
    }
    .proj-text-img.reverse { direction: ltr; }
    .proj-results { padding: 5rem 2rem; }
    .proj-results-grid { grid-template-columns: 1fr; gap: 2rem; }
    .proj-gallery { padding: 2.5rem 2rem; }
    .proj-gallery-grid { grid-template-columns: 1fr 1fr; }
    .proj-gallery-item.span-2 { grid-column: span 2; }
    .proj-next { padding: 5rem 2rem; }
}