/* ── FONTS ── */
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Thin.otf') format('opentype'); font-weight: 100; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-ExtraLight.otf') format('opentype'); font-weight: 200; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Light.otf') format('opentype'); font-weight: 300; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Regular.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Medium.otf') format('opentype'); font-weight: 500; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-SemiBold.otf') format('opentype'); font-weight: 600; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Bold.otf') format('opentype'); font-weight: 700; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-ExtraBold.otf') format('opentype'); font-weight: 800; }
@font-face { font-family: 'Nohemi'; src: url('/fonts/Nohemi-Black.otf') format('opentype'); font-weight: 900; }

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

:root {
    --bg: #FCFCFC;
    --text: #131313;
    --muted: #888;
    --border: #E8E8E8;
    --font: 'Nohemi', sans-serif;
    --pad: 48px;
    --accent: #ff2f44; /* couleur principale — configurable via CMS */
    --pad-sm: 24px;

    /* ── Échelle typographique desktop (base 1rem = 16px) ── */
    /* H1 : 40-48px → 2.75rem = 44px                        */
    /* H2 : 32-36px → 2.125rem = 34px                       */
    /* H3 : 24-28px → 1.625rem = 26px                       */
    /* Body : 16-18px → 1.0625rem = 17px                    */
    /* Small : 14px → 0.875rem                              */
    --text-h1:    2.75rem;
    --text-h2:    2.125rem;
    --text-h3:    1.625rem;
    --text-body:  1.0625rem;
    --text-small: 0.875rem;
    --text-xs:    0.75rem;

    /* Interlignes */
    --lh-heading: 1.15;
    --lh-body:    1.55;

    /* Letter-spacing */
    --ls-h1:    -0.02em;
    --ls-h2:     0em;
    --ls-h3:     0em;
    --ls-body:   0em;
    --ls-nav:    0.02em;
    --ls-label:  0.08em;

    /* Alias legacy */
    --h1-size: var(--text-h1);   --h1-ls: var(--ls-h1);
    --h2-size: var(--text-h2);   --h2-ls: var(--ls-h2);
    --h3-size: var(--text-h3);   --h3-ls: var(--ls-h3);
    --body-size: var(--text-body); --body-ls: var(--ls-body);
    --nav-ls: var(--ls-nav);
}

html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none; /* évite le rebond brusque en haut/bas */
}

/* Compositing hint pour éviter les repaints pendant le scroll */
body { will-change: scroll-position; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ── LOADING SCREEN ── */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    will-change: opacity;
}
.loading-screen.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Zone réservée pour l'animation que tu fourniras */
.loading-anim-slot {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Spinner par défaut — sera remplacé par ton animation */
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-logo-wrapper {
    font-size: 1.6rem;
    line-height: 1;
    user-select: none;
}
.loading-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* ── LOGO DANS LE HEADER ── */
.header-logo {
    display: flex;
    align-items: center;
    height: 40px;
    flex-shrink: 0;
}
.logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
}
.logo-text {
    font-family: var(--font);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}
.logo-fallback {
    font-size: 1.6rem;
    line-height: 1;
}

/* ── HEADER / NAV ── */
/* Pill wrapper (home page) — transparent sur les autres pages */
/* ── HEADER GLASS PILL ── */
.header-pill {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 16px;
    cursor: default;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px var(--pad);
    position: sticky;
    top: 17px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 53;
    border-bottom: none;
    transition: none;
}

/* Pseudo-élément glassmorphisme — fond de la pill */
.site-header::before {
    content: '';
    position: absolute;
    left: var(--pad);
    top: 10px; bottom: 10px;
    width: var(--pill-w, 80px);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(245,245,245,0.72) 100%);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 6px 28px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease, width 0.52s cubic-bezier(0.16,1,0.3,1);
}

/* ── Autres pages : pill pleine largeur toujours visible ── */
body:not(.page-home) .site-header::before {
    opacity: 1;
    width: calc(100% - 2 * var(--pad));
}
body:not(.page-home) .site-header.scrolled .header-pill { cursor: pointer; }
body:not(.page-home) .site-header.scrolled.expanded .header-pill { cursor: default; }

/* ── Home : transparent → pill compacte au scroll → étendue au clic ── */
body.page-home .site-header {
    position: fixed;
    left: 0; right: 0;
}
body.page-home .site-header::before { opacity: 0; }
body.page-home .site-header.scrolled::before { opacity: 1; }
body.page-home .site-header.scrolled .header-pill { cursor: pointer; }
body.page-home .site-header.scrolled.expanded .header-pill { cursor: default; }

/* Pill étendue (clic logo) */
.site-header.scrolled.expanded::before {
    width: calc(100% - 2 * var(--pad));
}

/* ── Texte blanc sur hero (home non-scrollé) ── */
body.page-home .site-header:not(.scrolled) .site-nav a        { color: #fff; }
body.page-home .site-header:not(.scrolled) .site-nav a::after { background: #fff; }
body.page-home .site-header:not(.scrolled) .nav-toggle span   { background: #fff; }
body.page-home .site-header:not(.scrolled) .logo-img.logo-invert { filter: brightness(0) invert(1); }
body.page-home .logo-img { transition: filter 0.4s ease; }

/* ── Nav couleur scrollé (toutes pages) ── */
.site-nav a { transition: color 0.4s ease; }
.site-header.scrolled .site-nav a    { color: var(--text); }
.site-header.scrolled .nav-toggle span { background: var(--text); }

/* ── Autres pages : nav toujours avec padding droit (pill pleine largeur) ── */
body:not(.page-home) .site-nav { padding-right: 20px; }

/* ── Desktop — nav slide/fade (home uniquement) ── */
@media (min-width: 769px) {
    body.page-home .site-nav {
        transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1),
                    transform 0.42s cubic-bezier(0.16,1,0.3,1);
    }
    body.page-home .site-header.scrolled .site-nav {
        opacity: 0;
        transform: translateX(20px);
        pointer-events: none;
    }
    body.page-home .site-header.scrolled.expanded .site-nav {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        padding-right: 20px;
    }
}

/* ── Mobile — pill pleine largeur dès le scroll (couvre logo + burger) ── */
@media (max-width: 768px) {
    .site-header.scrolled::before {
        opacity: 1;
        width: calc(100% - 2 * var(--pad));
    }
}

.site-nav { display: flex; gap: 36px; }

.site-nav a {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: var(--nav-ls);
    transition: opacity 0.2s;
    position: relative;
}
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.25s;
}
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }
.site-nav a:hover { color: var(--accent) !important; opacity: 1; }

/* MOBILE NAV TOGGLE */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 5px;
    z-index: 52;   /* au-dessus du nav overlay */
    position: relative;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.3s ease,
                width     0.3s ease;
    transform-origin: center;
}
/* Animation burger → × */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── PAGE WRAPPER ── */
.page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ── SECTION CLIENTS ── */
.clients-section {
    padding: 32px var(--pad) 60px;
    overflow: hidden;
    background: var(--clients-section-bg, var(--bg));
    margin-top: 0;
}
/* Colle le bandeau clients directement sur la section */
#ticker-clients + .clients-section,
#ticker-clients { display: block; }
.clients-heading {
    font-size: var(--text-h3);
    font-weight: 900;
    letter-spacing: var(--ls-h3, -0.02em);
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 48px;
    text-align: center;
}
/* ── Desktop : grille centrée ── */
.clients-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 56px 80px;
}
.client-logo-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.45;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.client-logo-btn:hover { opacity: 1; transform: scale(1.08); }
/* Hover désactivé */
.clients-no-hover .client-logo-btn {
    opacity: 1;
    cursor: default;
    transition: none;
}
.clients-no-hover .client-logo-btn:hover { opacity: 1; transform: none; }
.client-logo-btn img { height: 180px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.client-logo-placeholder {
    height: 180px;
    font-size: var(--text-h3);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
}

/* ── Mobile : grille ou carrousel selon débordement ── */
@media (max-width: 768px) {
    .clients-section { padding: 48px 0; }
    .clients-section .clients-heading { padding: 0 var(--pad); margin-bottom: 32px; }

    /* Par défaut : logos sur une ligne, centrés, wrap désactivé */
    .clients-logos {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0;
    }
    .client-logo-btn {
        padding: 0 20px;
        opacity: 0.55;
        flex-shrink: 0;
    }
    .client-logo-btn:hover { transform: none; opacity: 0.55; }
    .client-logo-btn:active { opacity: 1; }
    .client-logo-btn img { height: 100px; max-width: 100px; }
    .client-logo-placeholder { height: 100px; font-size: 1rem; }

    /* Carrousel actif uniquement quand JS détecte le débordement */
    .clients-logos.logos-carousel {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
    }
    .clients-logos.logos-carousel::-webkit-scrollbar { display: none; }
    .clients-logos.logos-carousel.grabbing { cursor: grabbing; }
}

/* ── POPUP TÉMOIGNAGE ── */
.client-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.client-popup-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.client-popup-card {
    background: var(--bg);
    max-width: 500px;
    width: 100%;
    padding: 40px;
    position: relative;
    transform: translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-popup-overlay.open .client-popup-card { transform: translateY(0); }
.client-popup-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}
.client-popup-close:hover { color: var(--text); }
.client-popup-logo {
    height: 40px;
    margin-bottom: 28px;
}
.client-popup-logo img { height: 100%; width: auto; object-fit: contain; }
.client-popup-logo-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.client-popup-testimonial {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 24px;
    white-space: pre-line;
}
.client-popup-author {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
}
.client-popup-socials {
    display: flex;
    gap: 14px;
}
.client-popup-socials a {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--text);
    padding-bottom: 1px;
    transition: opacity 0.2s;
}
.client-popup-socials a:hover { opacity: 0.55; }

@media (max-width: 768px) {
    .client-popup-card { padding: 32px 24px; }
}

/* ── FOOTER ── */
/* ── FOOTER ── */
.site-footer {
    background: var(--text);
    color: #fcfcfc;
    padding: 48px var(--pad) 0;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    border-top: none;
}
.footer-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 24px;
    padding-bottom: 52px;
}
.footer-copy {
    font-size: 0.75rem;
    color: rgba(252,252,252,0.38);
    line-height: 1;
}
.footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1.5px solid rgba(255,255,255,0.65);
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #fcfcfc;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}
.footer-cta:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.9);
}
.footer-cols {
    display: flex;
    gap: 72px;
    justify-content: flex-end;
    align-items: end;
}
.footer-nav,
.footer-social { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a,
.footer-social a {
    font-size: 0.82rem;
    color: rgba(252,252,252,0.52);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1;
    text-align: right;
}
.footer-nav a:hover,
.footer-social a:hover { color: #fcfcfc; }
.footer-brand {
    display: block;
    font-size: clamp(56px, 18.5vw, 280px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fcfcfc;
    line-height: 0.80;
    white-space: nowrap;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    text-transform: uppercase;
    user-select: none;
}
.footer-brand-img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Legacy — plus utilisé mais gardé pour compatibilité */
.footer-links { display: none; }

/* ── PAGE TRANSITIONS ── */

/* ── PAGE TRANSITION — rectangle plein ── */
#page-transition {
    position: fixed;
    inset: 0;
    background: var(--accent);
    z-index: 9999;
    pointer-events: none;
    transform: translateY(-100%);
    will-change: transform;
}

@keyframes pt-cover {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes pt-reveal {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

#page-transition.pt-covering {
    animation: pt-cover 0.55s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
#page-transition.pt-revealing {
    animation: pt-reveal 0.55s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* ── MOBILE : carte active au centre de l'écran ── */
@media (hover: none) {
    .project-card.mobile-active .card-info {
        grid-template-rows: 1fr;
        opacity: 1;
    }
    .project-card.mobile-active .card-info-inner {
        transform: translateY(0);
    }
    /* Hover media visible dès que le texte apparaît */
    .project-card.mobile-active .card-hover-media {
        opacity: 1;
    }
}

/* ── LOADING ── */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: opacity 0.4s;
}
.loading-screen.hidden { opacity: 0; pointer-events: none; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    :root {
        --pad: 20px;
        /* H1 : 28-32px → 1.875rem = 30px  */
        /* H2 : 24-28px → 1.625rem = 26px  */
        /* H3 : 20-22px → 1.3125rem = 21px */
        /* Body : 16px strict (iOS zoom)    */
        --text-h1:   1.875rem;
        --text-h2:   1.625rem;
        --text-h3:   1.3125rem;
        --text-body: 1rem;
    }

    .site-header { padding: 20px var(--pad); }

    .site-nav {
        display: flex;
        position: fixed;
        inset: 0;
        background: var(--accent);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 44px;
        z-index: 51;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-16px);
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .site-nav.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }
    /* Liens blancs sur fond accent */
    .site-nav a {
        font-size: 2rem;
        font-weight: 700;
        color: #ffffff !important;
        text-align: center;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.32s ease, transform 0.32s ease, color 0.2s;
    }
    .site-nav a::after { background: #ffffff !important; }
    .site-nav.open a {
        opacity: 1;
        transform: translateY(0);
    }
    .site-nav.open a:nth-child(1) { transition-delay: 0.06s; }
    .site-nav.open a:nth-child(2) { transition-delay: 0.13s; }
    .site-nav.open a:nth-child(3) { transition-delay: 0.20s; }
    .site-nav.open a:nth-child(4) { transition-delay: 0.27s; }

    .nav-toggle {
        display: flex;
        z-index: 54;
        margin-right: 20px; /* espace entre le burger et le bord droit de la pill */
    }
    .nav-toggle.open span { background: #ffffff !important; }
    .nav-toggle.open span:nth-child(1),
    .nav-toggle.open span:nth-child(3) { width: 26px; }

    /* Mobile pill full-width — déjà dans la règle scrolled::before */
    /* Vérifier que le pill couvre bien logo + burger */

    .footer-top {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 24px;
        padding-bottom: 40px;
    }
    .footer-cols { justify-content: center; }
    .footer-nav,
    .footer-social { align-items: center; }
    .footer-brand { font-size: clamp(44px, 22vw, 120px); }
}

/* ── CURSOR BUBBLE (pages projet) ── */
#cursor-bubble {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 220px;
    padding: 10px 18px;
    background: #131313;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 40px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    opacity: 0;
    transform: translate(-50%, -130%) scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: transform, opacity;
}
#cursor-bubble.visible {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1);
}

/* ── MOBILE IMAGE CAPTION (pages projet) ── */
#mobile-img-caption {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: rgba(19,19,19,0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 80vw;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
}
#mobile-img-caption.visible { opacity: 1; }

/* ── HERO REVEAL OVERLAY (accueil) ── */
#hero-reveal {
    position: fixed;
    inset: 0;
    background: #131313;
    z-index: 500;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease;
}
#hero-reveal.out { opacity: 0; }