/* =========================================================================
   home.css — Styles specific to the redesigned homepage (index.html only)
   Loaded AFTER components.css and scoped under body.home-v2 so the case
   study pages (cs-*.html) keep their current look untouched.
   Visual identity (blue gradient italics + animated mesh background) is
   intentionally preserved; this file only introduces the new STRUCTURE:
   docked header avatar, full-viewport parallax work cards, testimonials
   and the refreshed footer.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HEADER — brand/avatar dock on the left, nav + language on the right
   ------------------------------------------------------------------------- */

/* Layout (container justify + over-dark background) and the language pill are
   shared with the case-study header — see components.css. This file keeps only
   the homepage-specific header bits: the reduced blur radius, borderless edge,
   theme-aware text colours and the avatar dock-in. */
.home-v2 .site-header {
    background: var(--color-surface-glass);
    border-bottom: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color var(--transition-fast);
}

/* Nav, language and avatar name are secondary; hover & active go to primary.
   Both colours flip automatically over dark sections (dark-surface override in
   base.css), so no theme-specific values are needed here. */
.home-v2 .site-header .nav-link,
.home-v2 .site-header .lang-switch,
.home-v2 .header-avatar__name {
    color: var(--color-text-secondary);
}

.home-v2 .site-header .nav-link:hover,
.home-v2 .site-header .nav-link.active,
.home-v2 .site-header .lang-switch .lang-btn:hover,
.home-v2 .site-header .lang-switch .lang-btn.active {
    color: var(--color-text-primary);
}

/* Docked avatar: hidden until the hero photo scrolls past, then it fades in
   as a small "back to top" control in the top-left of the sticky header. */
.header-avatar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    text-decoration: none;
    color: var(--color-text-primary);
    /* Start hidden and slightly shifted so the reveal reads as a dock-in */
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.site-header.is-docked .header-avatar {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.header-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.header-avatar__name {
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Right-hand cluster: nav links then the language switch, grouped and pushed
   fully to the right (override components.css width:100% + space-between). */
.home-v2 .nav-and-lang-container {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
}

/* No scroll fade-in anywhere on the homepage: content is shown immediately. */
.home-v2 .fade-up {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
   2. HERO — keep the existing hero, just make the photo the dock source
   ------------------------------------------------------------------------- */

/* Subtle affordance that the hero photo is clickable / linked to top */
.home-v2 .hero-photo-container {
    cursor: default;
}

/* Hero fills exactly the viewport MINUS the sticky header (which sits in-flow
   above it). This keeps the "voir mes case studies" button visible at the
   bottom, while the first case-study card starts just below the fold so it only
   reveals on scroll — and stays hidden when scrolling back up too. */
.home-v2 .hero-fullscreen {
    /* viewport − header + small buffer, so the card starts a hair below the
       fold (never a subpixel sliver) while the discover button stays visible */
    min-height: calc(100vh - var(--header-h, 72px) + 10px);
    min-height: calc(100svh - var(--header-h, 72px) + 10px);
}

.home-v2 .btn-discover {
    color: var(--color-text-secondary);
}

/* Keep the discover button pinned to the bottom of the hero at EVERY size
   (desktop, iPad, mobile). This also makes the hero content the only in-flow
   child, so it stays vertically centred across breakpoints. */
.home-v2 .hero-footer {
    position: absolute;
    bottom: var(--space-32);
    left: 0;
    right: 0;
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   3. WORK — full-viewport parallax case-study cards
   Each card is 100vh. The mockup scene bleeds full-bleed and is anchored
   to the right (object-position: right) so narrowing the window crops the
   empty left side first, keeping the device visible. A horizontal scrim
   guarantees text legibility on both light and dark scenes.
   ------------------------------------------------------------------------- */

/* The work wrapper breaks out of the centered .container to go edge-to-edge */
.work-fullbleed {
    padding: 0;
    position: relative;
}

/* Backdrop coloured to match the incoming card (JS-driven). Absolutely
   positioned INSIDE the work section so it only ever affects the case-study
   cards — never the hero, about or contact sections. Sits behind the cards;
   during a card's fade-in it shows the incoming card's colour instead of the
   white page. */
.work-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    transition: background-color 0.45s ease;
    pointer-events: none;
}

.work-card {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

/* Full-bleed visual layer = exactly the card. The image is a touch taller than
   the card and vertically centred; parallax translates the IMG within its
   overscan, so object-fit stays width-driven (no over-zoom) and no hard edge is
   revealed. Anchored right so the empty left of the scene is cropped first. */
.work-card__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.work-card__visual img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 118%;
    object-fit: cover;
    object-position: right center;
    /* centre the slightly-taller image, then offset by the parallax amount */
    transform: translateY(calc(-50% + var(--visual-y, 0px)));
    will-change: transform;
}

/* Cross-page morph: each case-study card visual shares its view-transition-name
   with the matching case-study hero banner (see components.css), so navigating
   to/from the case study morphs the same scene between the two framings. */
.work-card--nps .work-card__visual img {
    view-transition-name: nps-hero;
}

.work-card--rdv .work-card__visual img {
    view-transition-name: rdv-hero;
}

.work-card--wero .work-card__visual img {
    view-transition-name: wero-hero;
}

.work-card--business .work-card__visual img {
    view-transition-name: business-hero;
}

/* Solid card background matching the scene's own colour. The mockup scenes
   already carry a solid area behind the text, so no translucent scrim overlay
   is used (kept clean per design). This bg only shows at parallax edges. */
.work-card--dark {
    background-color: var(--color-bg-dark);
}

.work-card--light {
    background-color: var(--color-bg-muted);
}

/* Inner container keeps the text aligned with the rest of the site grid
   (parallax target: --content-y, moved opposite to the visual for depth) */
.work-card__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-48);
    transform: translateY(var(--content-y, 0));
    will-change: transform;
}

/* Content order: title → company (tight) → KPI (near) → CTA (much further) */
.work-card__content {
    max-width: 480px;
    display: flex;
    flex-direction: column;
}

.work-card__title {
    order: 1;
    font-family: var(--font-display);
    font-size: 2.75rem; /* 44px */
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0;
}

.work-card__company {
    order: 2;
    margin-top: var(--space-12);
    /* tight to the title */
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* KPI: small return-arrow + big value + smaller sub, all on one baseline */
.work-card__kpi {
    order: 3;
    margin-top: var(--space-40);
    /* near the company, but a clear step */
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
}

.work-card__kpi-arrow {
    align-self: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.work-card__kpi-value {
    font-family: var(--font-display);
    font-size: 2.5rem; /* 40px */
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.work-card__kpi-sub {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.4;
}

/* Card text: title + main KPI are primary, the rest secondary. Dark cards flip
   both values to their light-on-dark equivalents via the base.css override, so
   one pair of rules covers both themes. */
.work-card__title,
.work-card__kpi-value {
    color: var(--color-text-primary);
}

.work-card__company,
.work-card__kpi-arrow,
.work-card__kpi-sub {
    color: var(--color-text-secondary);
}

/* CTA — sits much further below the KPI (per reference). Sober glass pill by
   default; on hover a "lightning" highlight sweeps its contour left→right. */
.work-cta {
    order: 4;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    align-self: flex-start;
    margin-top: var(--space-96);
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    /* Liquid-glass: real background blur + saturation boost */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Dark card: translucent white glass with a bright top edge (no drop shadow) */
.work-card--dark .work-cta {
    background: var(--glass-fill-on-dark);
    border: 1px solid var(--glass-edge-on-dark);
    box-shadow: inset 0 1px 0 var(--glass-sheen-on-dark),
        inset 0 -6px 12px var(--glass-shade-on-dark);
    color: var(--color-text-primary);
}

/* Light card: frosted white glass with a crisp highlight (no drop shadow) */
.work-card--light .work-cta {
    background: var(--glass-fill-on-light);
    border: 1px solid var(--glass-edge-on-light);
    box-shadow: inset 0 1px 0 var(--glass-sheen-on-light),
        inset 0 -6px 12px var(--glass-shade-on-light);
    color: var(--color-text-primary);
}

.work-card--dark .work-cta:hover {
    background: var(--glass-fill-on-dark-hover);
}

.work-card--light .work-cta:hover {
    background: var(--glass-fill-on-light-hover);
}

/* Arrow behaviour like the contact links: horizontal by default, tilts up to
   45deg on hover. The SVG is drawn diagonal (↗), so rotate(45deg) makes it
   horizontal and rotate(0) returns it to the up-right diagonal. */
.work-cta__arrow {
    transition: transform var(--transition-fast);
    transform: rotate(45deg);
}

.work-cta:hover .work-cta__arrow {
    transform: rotate(0deg);
}

/* Lightning contour: masked 1.5px gradient border with a bright travelling
   band that loops continuously while hovered (clearly visible, not a one-off). */
.work-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(105deg,
            transparent 30%,
            var(--glass-spark) 44%,
            rgba(255, 255, 255, 1) 50%,
            var(--glass-spark) 56%,
            transparent 70%);
    background-size: 220% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
}

.work-cta:hover::before {
    opacity: 1;
    animation: cta-lightning 1s linear;
}

@keyframes cta-lightning {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

/* -------------------------------------------------------------------------
   4. TESTIMONIALS — sober italic quotes, no photos, no decorative marks
   ------------------------------------------------------------------------- */

.testimonials {
    margin-top: var(--space-80);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
    margin-top: var(--space-32);
}

/* Layout only: the frosted surface comes from .glass-card (components.css). */
.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.testimonial__quote {
    font-style: italic;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.testimonial__author {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: auto;
    /* Light divider between the quote and the name */
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-line-08);
}

.testimonial__author strong {
    display: block;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   5. ABOUT — fill the full container width; only the intro <p> stays narrow
   ------------------------------------------------------------------------- */

.home-v2 .profile-unified-container {
    max-width: none;
}

/* -------------------------------------------------------------------------
   6. CONTACT / FOOTER — dark section, inverted text, copyright pinned bottom
   ------------------------------------------------------------------------- */

/* Compact dark contact section (no full-page stretch); copyright sits close to
   the last CTAs and near the very bottom of the page. Title, body and links get
   their light-on-dark colours from the dark-surface override in base.css. */
.home-v2 #contact {
    background-color: var(--color-bg-dark);
    padding-bottom: var(--space-32);
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-48);
    margin-bottom: var(--space-96);
}

.home-footer-copyright {
    color: var(--color-text-secondary);
    font-size: 0.8125rem; /* 13px */
}

/* -------------------------------------------------------------------------
   6. RESPONSIVE — parallax disabled below 1024px; cards relax to auto height
   ------------------------------------------------------------------------- */

/* Tablet-landscape band (901–1024): kill the parallax and scale the type
   down, but KEEP the desktop right-anchored crop. At this width there's still
   room for the copy on the left, so re-centring the mockup only made it float
   in the middle — the visual re-anchoring now lives in the ≤900 block below. */
@media (max-width: 1024px) {

    /* Kill parallax offsets on tablet/mobile for performance & layout safety */
    .work-card__visual,
    .work-card__inner {
        transform: none !important;
    }

    /* iPad/tablet: cards still fill the viewport (like desktop & mobile) */
    .work-card {
        min-height: 100vh;
        min-height: 100svh;
    }

    .work-card__title {
        font-size: 2rem; /* 32px */
    }

    /* KPI value never larger than the project title */
    .work-card__kpi-value {
        font-size: 2rem; /* 32px */
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* Narrow tablet / portrait iPad and below (≤900): now the right-anchored crop
   starts covering the copy, so bleed the scene 20% past the left edge and
   centre it — the empty side of the mockup ends up under the text. */
@media (max-width: 1200px) {

    .work-card__visual {
        inset: 0 0 0 -50%;
    }

    .work-card__visual img {
        object-position: center center;
    }
}

/* 1201–1900px: the wide cover crop leaves the mockup's baked-in right-hand
   background between the device and the card edge, so the device reads as
   centred. Pull object-position left of 100% to crop that background and
   re-anchor the device to the right. Phone scenes (nps, wero) need a stronger
   pull than the wider laptop scenes (rdv, business). Above ~1900px there's no
   horizontal overflow left to shift, so the default right-anchor reads fine. */
@media (min-width: 1201px) and (max-width: 1900px) {

    .work-card--nps .work-card__visual img,
    .work-card--wero .work-card__visual img {
        object-position: 70% center;
    }

    .work-card--rdv .work-card__visual img,
    .work-card--business .work-card__visual img {
        object-position: 80% center;
    }
}

@media (max-width: 768px) {

    /* Menu centred in the header; the docked avatar sits absolutely on the
       left and the language on the right so it doesn't offset the centring.
       The header keeps tight side padding (16px) so the centred nav + edge
       language fit on one line even with the longer FR labels. */
    .home-v2 .site-header .container {
        justify-content: center;
        position: relative;
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }

    .home-v2 .site-header .nav-link {
        font-size: 0.8125rem; /* 13px */
    }

    .home-v2 .nav-and-lang-container {
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        justify-content: center;
        margin-left: 0;
        gap: var(--space-12);
    }

    .home-v2 .site-nav {
        width: auto;
        display: block;
    }

    .home-v2 .site-nav .nav-links {
        flex-wrap: nowrap;
        gap: var(--space-20);
    }

    /* Language pinned to the right edge (out of flow) so the nav menu itself
       centres in the header, not the nav+language group. */
    .home-v2 .lang-switch {
        position: absolute;
        right: var(--space-16);
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }

    /* The pill is out of flow, so the centred nav would otherwise run under it
       as soon as the labels get longer (FR: "À propos"). Reserve its width. */
    .home-v2 .site-header .container {
        padding-right: calc(var(--space-16) + 96px);
    }

    /* Docked avatar: photo only (name hidden), absolutely positioned on the
       left and vertically centred; hidden until it actually docks. */
    .header-avatar__name {
        display: none;
    }

    .home-v2 .header-avatar {
        position: absolute;
        left: var(--space-16);
        top: 50%;
        transform: translateY(-50%);
    }

    .home-v2 .site-header.is-docked .header-avatar {
        transform: translateY(-50%);
    }

    .home-v2 .site-header:not(.is-docked) .header-avatar {
        display: none;
    }

    /* 48px side padding across the mobile layout (header, hero, about, contact) */
    .home-v2 .container {
        padding-left: var(--space-48);
        padding-right: var(--space-48);
    }

    /* Centre the hero content vertically like desktop: don't let the wrapper
       grow, and drop the reserved bottom padding (the discover button is now
       absolutely pinned, so no in-flow space is needed for it). */
    .home-v2 .hero-content-wrapper {
        flex: 0 1 auto;
        padding-bottom: 0;
    }

    /* Text overlaid on the visual (visual bleed + centring handled in the
       shared <=1024 block above). */
    .work-card {
        min-height: 82vh;
        padding: var(--space-48) 0;
    }

    .work-card__inner {
        padding: var(--space-48);
    }

    .work-card__content {
        max-width: 70%;
    }

    .work-card__title {
        font-size: 1.75rem; /* 28px */
    }

    /* KPI value the same size as the title (never bigger) */
    .work-card__kpi-value {
        font-size: 1.75rem; /* 28px */
    }

    .work-card__kpi {
        margin-top: var(--space-32);
    }

    /* Hero: put "Product Designer" on its own line */
    .hero-sep {
        display: none;
    }

    .hero-role {
        display: block;
    }

    .contact-links {
        flex-direction: column;
        gap: var(--space-24);
    }
}

/* Respect users who prefer reduced motion: no parallax, no lightning sweep,
   no bouncing discover arrow */
@media (prefers-reduced-motion: reduce) {

    .work-card__visual,
    .work-card__inner {
        transform: none !important;
    }

    .work-cta:hover::before {
        animation: none;
    }

    .icon-arrow-down {
        animation: none;
    }
}

/* CTA "case study à venir" : non cliquable, atténué, sans effets hover */
.work-cta--soon {
    opacity: 0.55;
    pointer-events: none;
}