/*
 Theme Name:   Sansara Child
 Theme URI:    https://www.ogamifam.com
 Description:  Child theme for Sansara — OGF custom CSS/JS overrides
 Author:       OGAMIFAM
 Author URI:   https://www.ogamifam.com
 Template:     sansara
 Version:      1.7.45
 Text Domain:  sansara-child
*/

/* ═══════════════════════════════════════════════════════════════════════════
   OGF BRAND TYPOGRAPHY — self-hosted (RGPD-clean, aucun hotlink Google)
   Titres = Bebas Neue (condensé, impact frontal — canon DESIGN.md).
   Corps  = Inter (sans-serif neutre lisible).
   Fichiers : assets/fonts/*.woff2 (subset latin — couvre le français).
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/bebas-neue-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;         /* fichier variable unique (couvre 400→600) */
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
}

/* Titres — impact frontal partout (h1–h6 + titres du panel Geospace). */
h1, h2, h3, h4, h5, h6,
.entry-title, .portfolio-title,
.ogf-cat-title, .ogf-punch-text {
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
    letter-spacing: 0.02em;
}

/* Corps — sans-serif neutre lisible (Inter). !important : bat le <style> inline
   IBM Plex du thème Sansara (posé sur body, même spécificité, chargé après). */
body,
p, .ogf-cat-body, .ogf-cat-final-text {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ─── GLOBAL BLACK BACKGROUND ─────────────────────────────────────────────── */
html, body {
    background-color: #0d0b09 !important;
    color: #f2ede6 !important;
}

/* ─── HEADER — fix duplicate logos ────────────────────────────────────────── */
.logo img.dark,
.logo img.d-b {
    display: none !important;
}
.container-fluid > .logo {
    display: none !important;
}
.col-xs-12.col-sm-6.col-md-4 .logo {
    display: none !important;
}
.side-header .logo,
.main-row .logo {
    display: block !important;
}

/* ─── HEADER BACKGROUND ────────────────────────────────────────────────────── */
.site-header,
.side-header,
.header-inner {
    background-color: #0d0b09 !important;
    border-color: #3a3228 !important;
}

/* ─── BODY / PAGE BACKGROUNDS ─────────────────────────────────────────────── */
.site-content,
.content-area,
#page,
.main-content,
.portfolio-page,
.home-page {
    background-color: #0d0b09 !important;
}

.site-footer,
.footer-area,
.footer-widgets {
    background-color: #0d0b09 !important;
    color: #b8a99a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OGF GEOSPACE PANEL — split 50/50 category panel
   Triggered on click of .one-screen-categories .item > a
   v1.2 : content reveals on SCROLL (Geospace-style), photos interleaved with
          text, left photo + photos redirect to /portfolio/{slug}/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ────────────────────────────────────────────────────────── */
:root {
    --ogf-bg:        #0d0b09;
    --ogf-gold:      #c9a84c;
    --ogf-gold-bright: #f4d271;
    --ogf-cream:     #f2ede6;
    --ogf-muted:     #7a6e64;
    --ogf-border:    #2a2520;
    /* Flash accents — within the existing palette (amplified gold + blood red) */
    --ogf-flash-gold: #f5c518;
    --ogf-flash-red:  #e01e37;
    --ogf-panel-dur: 0.55s;
    --ogf-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Panel container ────────────────────────────────────────────────────── */
#ogf-geo-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    pointer-events: none;
    visibility: hidden;
    background: var(--ogf-bg);
}

#ogf-geo-panel.ogf-open {
    pointer-events: all;
    visibility: visible;
}

/* ─── Left side — full-bleed photo (click → category page) ─────────────────── */
#ogf-geo-left {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transform: translateX(-100%);
    transition: transform var(--ogf-panel-dur) var(--ogf-ease);
}

#ogf-geo-panel.ogf-open #ogf-geo-left {
    transform: translateX(0);
}

#ogf-geo-left-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ogf-border);
    transform: scale(1.05);
    transition: transform calc(var(--ogf-panel-dur) * 1.4) var(--ogf-ease);
}

#ogf-geo-panel.ogf-open #ogf-geo-left-photo {
    transform: scale(1);
}

#ogf-geo-left:hover #ogf-geo-left-photo {
    transform: scale(1.02);
}

#ogf-geo-left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13,11,9,0.3) 0%, transparent 60%);
    pointer-events: none;
}

#ogf-geo-left-num {
    position: absolute;
    bottom: 30px;                     /* footer line — aligned with the hint + caption */
    left: 40px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ogf-gold);
    font-family: 'Courier New', monospace;
    pointer-events: none;
}

/* "View category →" hint — signals the left photo is clickable */
.ogf-geo-left-hint {
    position: absolute;
    bottom: 30px;                     /* footer line — aligned with num + caption */
    right: 40px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ogf-cream);
    font-family: 'Courier New', monospace;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
    pointer-events: none;
}

#ogf-geo-panel.ogf-open .ogf-geo-left-hint {
    opacity: 0.85;
    transform: translateX(0);
}

/* ─── Right side — FIXED scene stage (scroll-jacked, no scrollbar) ──────────
   v1.4: the right column no longer scrolls. It is a fixed stage; the wheel /
   keys / touch advance a sequence of scenes IN PLACE (see ogf-gallery.js). */
#ogf-geo-right {
    position: relative;
    width: 50%;
    overflow: hidden;
    background: var(--ogf-bg);
    transform: translateX(100%);
    transition: transform var(--ogf-panel-dur) var(--ogf-ease);
}

#ogf-geo-panel.ogf-open #ogf-geo-right {
    transform: translateX(0);
}

/* ─── Scene stage ──────────────────────────────────────────────────────────
   Every scene is stacked absolutely inside the stage. Only the active one is
   visible; the rest are hidden and non-interactive. */
.ogf-stage {
    position: absolute;
    inset: 0;
}

.ogf-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s var(--ogf-ease), visibility 0s linear 0.6s;
}

.ogf-scene.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s var(--ogf-ease);
}

/* ── Text scenes (intro + final) — vertically centred, padded ── */
.ogf-scene--text,
.ogf-scene--final {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px;
}

/* Intro text: enters from below, exits FASTER than it arrives (David's brief:
   "le scroll down fait défiler le texte plus vite"). */
.ogf-scene--text .ogf-scene-inner {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.25s var(--ogf-ease), opacity 0.25s var(--ogf-ease);
    will-change: transform, opacity;   /* smooth live scrub (JS-driven) */
}

.ogf-scene--text.is-active .ogf-scene-inner {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.75s var(--ogf-ease) 0.1s, opacity 0.75s var(--ogf-ease) 0.1s;
}

/* Scroll hint — sits on the footer line, aligned with the left column's
   num + hint (same baseline, same font + size as the other inscriptions). */
.ogf-scroll-hint {
    position: absolute;
    left: 56px;                       /* matches the intro scene padding */
    bottom: 30px;                     /* footer line — aligned with num + hint + caption */
    margin-top: 0;
    font-size: 11px;                  /* same size as the footer inscriptions */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ogf-muted);
    font-family: 'Courier New', monospace;
    animation: ogf-hint-bob 1.8s var(--ogf-ease) infinite;
}

.ogf-scroll-hint span { color: var(--ogf-flash-gold); }

@keyframes ogf-hint-bob {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(5px); opacity: 1; }
}

/* ── Punchline marquee — confined to the RIGHT half only (from the centre split
   to the right edge). The overflow:hidden clips the text exactly on the centre
   line, so it VANISHES the moment it touches the split — it never crosses onto
   the left photo. Pinned just above the footer line. FIXED in place at all
   widths: it drifts right→left continuously; scrolling only accelerates the
   drift, stopping eases it back to the base speed (no zoom, no vertical rise,
   no fade). Motion is JS-driven (requestAnimationFrame): .ogf-punch-track
   carries the horizontal travel; #ogf-geo-marquee itself stays put. Shown only
   on the intro page via .is-live. ── */
#ogf-geo-marquee {
    position: absolute;
    left: 50%;                        /* start at the centre split */
    right: 0;                         /* … to the right edge = right column only */
    bottom: 76px;                     /* rides just above the footer inscriptions */
    z-index: 9998;                    /* over the right image, under the close button */
    overflow: hidden;                 /* clip travel + zoom cleanly ON the centre line */
    pointer-events: none;
    transform-origin: 0 bottom;       /* grow from the centre line, never leftward */
    opacity: 0;                       /* hidden until the intro page is live */
    transition: opacity 0.5s var(--ogf-ease);
    will-change: transform, opacity;
}

#ogf-geo-marquee.is-live { opacity: 0.68; }

.ogf-punch-track {
    display: flex;
    gap: 56px;                        /* space between looped copies */
    width: max-content;
    white-space: nowrap;
    will-change: transform;
}

.ogf-punch-text {
    font-size: clamp(27px, 3.5vw, 50px);  /* ~30% smaller than before (rest size) */
    line-height: 1.0;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ogf-gold);               /* or mat — le fil conducteur (DA), remplace le crème */
}

/* ── Photo scenes — full-bleed image + caption, 3 distinct entrances ── */
.ogf-scene--photo { overflow: hidden; }

.ogf-scene-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ogf-border);
    will-change: transform, opacity, clip-path;
}

.ogf-scene-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,11,9,0.85) 0%, rgba(13,11,9,0.1) 45%, transparent 70%);
    pointer-events: none;
}

.ogf-scene-caption {
    position: absolute;
    left: 40px;                       /* footer line — aligned with num + hint */
    right: 40px;
    bottom: 30px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--ogf-cream);
    font-family: 'Courier New', monospace;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ogf-ease), transform 0.5s var(--ogf-ease);
}

.ogf-scene--photo.is-active .ogf-scene-caption {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s var(--ogf-ease) 0.35s, transform 0.6s var(--ogf-ease) 0.35s;
}

/* Animation A — zoom in */
.anim-zoom .ogf-scene-photo {
    transform: scale(1.25);
    opacity: 0;
    transition: transform 1s var(--ogf-ease), opacity 0.7s var(--ogf-ease);
}
.anim-zoom.is-active .ogf-scene-photo {
    transform: scale(1);
    opacity: 1;
}

/* Animation B — horizontal wipe (clip-path) */
.anim-wipe .ogf-scene-photo {
    clip-path: inset(0 100% 0 0);
    opacity: 0.5;
    transition: clip-path 0.9s var(--ogf-ease), opacity 0.6s var(--ogf-ease);
}
.anim-wipe.is-active .ogf-scene-photo {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Animation C — vertical parallax rise */
.anim-parallax .ogf-scene-photo {
    transform: translateY(12%) scale(1.08);
    opacity: 0;
    transition: transform 1s var(--ogf-ease), opacity 0.8s var(--ogf-ease);
}
.anim-parallax.is-active .ogf-scene-photo {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Step indicator — vertical dots on the right edge ── */
.ogf-steps {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 11px;
    pointer-events: none;
}

.ogf-step-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--ogf-muted);
    background: transparent;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ogf-step-dot.is-on {
    background: var(--ogf-flash-gold);
    border-color: var(--ogf-flash-gold);
    transform: scale(1.35);
}

/* ─── Close button ────────────────────────────────────────────────────────── */
#ogf-geo-close {
    position: fixed;
    top: 28px;
    right: 32px;
    z-index: 10001;
    width: 44px;
    height: 44px;
    background: rgba(13,11,9,0.85);
    border: 1px solid var(--ogf-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    pointer-events: none;
}

#ogf-geo-panel.ogf-open #ogf-geo-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition-delay: 0.35s;
}

#ogf-geo-close:hover {
    background: var(--ogf-border);
}

#ogf-geo-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--ogf-cream);
    fill: none;
    stroke-width: 2;
}

/* ─── Content typography ─────────────────────────────────────────────────── */
.ogf-cat-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ogf-gold);
    font-family: 'Courier New', monospace;
    margin-bottom: 32px;
}

.ogf-cat-title {
    font-size: clamp(52px, 6vw, 84px);
    line-height: 0.92;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ogf-cream);
    margin-bottom: 48px;
    letter-spacing: -0.02em;
}

.ogf-cat-title .ogf-drop-cap {
    color: var(--ogf-flash-gold);
    text-shadow: 0 0 24px rgba(245, 197, 24, 0.25);
}

.ogf-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--ogf-flash-gold), var(--ogf-flash-red));
    margin-bottom: 40px;
}

.ogf-cat-body {
    font-size: 15px;
    line-height: 1.75;
    color: #b8a99a;
    max-width: 520px;
    margin-bottom: 48px;
}

/* ─── Photos — vertical crops that fill the column, revealed on scroll ───────
   Sansara-style: tall portrait frames, one under the other, each appearing
   dynamically as the visitor scrolls down. Up to 3, no square grid. */
.ogf-photos-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Full-bleed inside the right column: photos touch the centre split
       (kills the lateral gap with the left image) and reach the panel edge,
       so they truly fill their space. -56px cancels #ogf-geo-right-inner pad. */
    margin: 4px -56px 56px -56px;
}

.ogf-strip-photo {
    width: 100%;
    aspect-ratio: 3 / 4;            /* vertical / portrait crop, fills width */
    background-size: cover;
    background-position: center;
    background-color: var(--ogf-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ogf-strip-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13,11,9,0.25);
    transition: background 0.35s ease;
}

.ogf-strip-photo:hover::after {
    background: rgba(13,11,9,0);
}

/* Placeholder pattern until real photos are mounted in the WP portfolio */
.ogf-strip-photo.ogf-empty {
    background-image: repeating-linear-gradient(45deg, #17130f 0 10px, #1c1712 10px 20px);
}

/* ─── CTA link ───────────────────────────────────────────────────────────── */
.ogf-cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ogf-cream);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    border-bottom: 1px solid var(--ogf-flash-gold);
    padding-bottom: 4px;
    margin-bottom: 20px;
}

.ogf-cat-cta:hover {
    color: var(--ogf-flash-gold);
}

.ogf-cat-cta-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.ogf-cat-cta:hover .ogf-cat-cta-arrow {
    transform: translateX(4px);
}

/* ─── Scroll-linked line — author punchlines + progress fill ─────────────────
   The ribbon (.ogf-ticker) translates and the fill (.ogf-scrollline-fill)
   scales left→right, both driven by the right column's scroll position (JS
   updateScrollLine). Replaces the old time-based marquee animation. */
.ogf-scrollband {
    border-top: 1px solid var(--ogf-border);
    padding: 16px 0 0 0;
    margin-bottom: 56px;
}

.ogf-ticker-viewport {
    overflow: hidden;
    width: 100%;
}

.ogf-ticker {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    will-change: transform;
    transition: transform 0.08s linear;
}

.ogf-ticker span {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ogf-muted);
    font-family: 'Courier New', monospace;
}

.ogf-ticker span.ogf-punch {
    color: var(--ogf-cream);
}

.ogf-ticker span.ogf-ticker-dot {
    color: var(--ogf-flash-gold);
}

.ogf-scrollline {
    position: relative;
    height: 2px;
    margin-top: 14px;
    background: var(--ogf-border);
    overflow: hidden;
}

.ogf-scrollline-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ogf-flash-gold), var(--ogf-flash-red));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    transition: transform 0.08s linear;
}

/* ─── Closing block — text + button to the category (subtle flash ground) ──── */
.ogf-cat-final {
    padding: 36px 32px 40px 32px;
    border: 1px solid var(--ogf-border);
    border-radius: 2px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(245, 197, 24, 0.06), transparent 60%),
        radial-gradient(120% 100% at 100% 100%, rgba(224, 30, 55, 0.05), transparent 60%);
}

/* Brand logo, centred above the closing copy. */
.ogf-cat-final-logo {
    display: block;
    width: 152px;                 /* +15% (was 132px) */
    max-width: 48%;
    height: auto;
    margin: 0 auto 26px auto;
    pointer-events: none;
    user-select: none;
}

.ogf-cat-final-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ogf-cream);
    max-width: 520px;
    margin-bottom: 28px;
}

.ogf-cat-footer-line {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ogf-muted);
    margin: 0;
}

.ogf-cat-footer-line a {
    color: var(--ogf-flash-gold);
    text-decoration: none;
}

.ogf-cat-footer-line a:hover {
    text-decoration: underline;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #ogf-geo-panel {
        flex-direction: column;
    }

    #ogf-geo-left {
        width: 100%;
        height: 45vh;
        transform: translateY(-100%);
    }

    #ogf-geo-panel.ogf-open #ogf-geo-left {
        transform: translateY(0);
    }

    #ogf-geo-right {
        width: 100%;
        flex: 1;                 /* fill the remaining height (scenes are absolute) */
        transform: translateY(100%);
    }

    #ogf-geo-panel.ogf-open #ogf-geo-right {
        transform: translateY(0);
    }

    .ogf-scene--text,
    .ogf-scene--final {
        padding: 40px 24px;
    }

    #ogf-geo-marquee {
        bottom: 48px;
        left: 0;                      /* stacked layout: no vertical split → full width */
        right: 0;
        transform-origin: 50% bottom;
    }

    .ogf-punch-track {
        gap: 36px;
    }

    .ogf-punch-text {
        font-size: clamp(22px, 6vw, 34px);   /* ~30% smaller (rest size) */
    }

    .ogf-cat-title {
        font-size: 48px;
    }

    .ogf-geo-left-hint {
        bottom: 20px;
        right: 20px;
    }

    .ogf-scene-caption {
        left: 24px;
        right: 24px;
        bottom: 32px;
        font-size: 11px;
    }

    .ogf-scroll-hint {
        left: 24px;
        bottom: 32px;
    }

    .ogf-steps {
        right: 12px;
        gap: 9px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PROJECT (single-fw-portfolio) — injected header
   Composition top→bottom: header nav → trimmed logo → title → animated
   category menu → photos jointives. Markup injected by ogf-gallery.js
   (initSingleHeader). Namespaced ogf-single-* — no overlap with the panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Header navigation (centered over the existing site-header) ───────────── */
.single-fw-portfolio .site-header,
.tax-fw-portfolio-category .site-header { position: relative; }
#ogf-single-nav {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 26px; align-items: center; z-index: 20;
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    text-transform: uppercase; letter-spacing: .06em;
}
#ogf-single-nav a {
    color: var(--ogf-gold); text-decoration: none; font-size: 19px;
    white-space: nowrap; transition: color .2s;
}
#ogf-single-nav a:hover { color: var(--ogf-flash-red); }
/* Effet JACKPOT (reveal or→rouge, slot-machine) sur les liens du menu header —
   les <a class="ogf-nav-rev"> reçoivent la structure .ogf-rev via le JS (fillRevealLetters).
   Réutilise les styles .ogf-rev* globaux ; ne s'applique PAS au lien emphasis "Work with us". */
#ogf-single-nav a.ogf-nav-rev { position: relative; display: inline-flex; }
#ogf-single-nav a.ogf-nav-rev:hover .ogf-rev-t { transform: translateY(-100%); }
@media (max-width: 991px) { #ogf-single-nav { display: none; } }  /* mobile: theme burger */
/* Anti double-menu : sur les pages où le JS injecte notre menu jackpot (#ogf-single-nav)
   dans le .site-header, la nav native du thème (.navigation.visible_menu) coexiste et
   fait un double menu superposé/décalé. On masque la native UNIQUEMENT en desktop —
   en mobile #ogf-single-nav est caché (ci-dessus) et c'est le burger natif qui prend
   le relais, donc on NE touche PAS la native sous 992px. */
@media (min-width: 992px) {
    .site-header:has(#ogf-single-nav) .navigation { display: none !important; }
}

/* Option C — "Work with us" lifted (bright gold, bigger), Shop as a right-side button */
#ogf-single-nav a.ogf-single-emphasis { color: var(--ogf-gold-bright); font-size: 22px; font-weight: 600; text-shadow: 0 0 10px rgba(244,210,113,.28); transition: color .2s, text-shadow .2s; }
#ogf-single-nav a.ogf-single-emphasis:hover { color: var(--ogf-flash-red); text-shadow: none; }
/* .is-pulse = attention blink driven by the rotator while the "Come work with us" line crosses */
#ogf-single-nav a.ogf-single-emphasis.is-pulse { animation: ogf-wwu-pulse 1.3s ease-in-out infinite; }
@keyframes ogf-wwu-pulse {
    0%, 100% { color: var(--ogf-flash-red);   text-shadow: none; }
    50%      { color: var(--ogf-gold-bright); text-shadow: 0 0 10px rgba(244,210,113,.28); }
}
#ogf-single-actions { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 20; display:flex; align-items:center; gap:14px; }
/* Language switcher — left of the cart button, same gold/red DA as the header */
.ogf-single-lang { display:inline-flex; align-items:center; gap:9px; font-family:'Bebas Neue','Oswald','Arial Narrow',sans-serif; letter-spacing:.06em; font-size:15px; text-transform:uppercase; line-height:1; }
.ogf-single-lang a { color: var(--ogf-gold); text-decoration:none; opacity:.72; transition: color .2s, opacity .2s; }
.ogf-single-lang a:hover { opacity:1; color: var(--ogf-gold-bright); }
.ogf-single-lang a.on { color: var(--ogf-flash-red); opacity:1; }
/* Taille d'origine restaurée (16px / padding 7px 14px / cart 15px) + pulse rouge
   PERMANENT (keyframe ogf-shop-pulse rouge↔or ci-dessous). Au survol : animation
   figée en rouge plein. */
.ogf-single-shop { display:inline-flex; align-items:center; gap:7px; color: var(--ogf-gold); text-decoration:none; font-size:16px; line-height:1; border:1px solid var(--ogf-gold); border-radius:4px; padding:7px 14px; font-family:'Bebas Neue','Oswald','Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.06em; transition: background .2s, color .2s, border-color .2s; animation: ogf-shop-pulse 1.3s ease-in-out infinite; }
.ogf-single-shop .ogf-single-cart { font-size:15px; line-height:1; }
.ogf-single-shop:hover { background: var(--ogf-flash-red); border-color: var(--ogf-flash-red); color:#fff; animation:none; }
/* .is-pulse = attention blink driven by the rotator while the shop line crosses */
.ogf-single-shop.is-pulse { animation: ogf-shop-pulse 1.3s ease-in-out infinite; }
@keyframes ogf-shop-pulse {
    0%, 100% { background: var(--ogf-flash-red); border-color: var(--ogf-flash-red); color:#fff; }
    50%      { background: transparent;          border-color: var(--ogf-gold);      color: var(--ogf-gold); }
}
@media (max-width: 991px) { #ogf-single-actions { display:none; } }

/* ─── Hero block: logo → title → category menu ─────────────────────────────── */
#ogf-single-hero {
    background: transparent; text-align: center; overflow: hidden;
    padding: 26px 0 30px;
}
/* Per-page hero photo background (set by ogf-gallery.js via --ogf-hero-img,
   currently /services/). A dark top→bottom gradient veil is composited OVER the
   image in the same `background` so the logo + gold menu stay legible; the gold
   bottom line and layout are inherited from #ogf-single-hero above. */
#ogf-single-hero.ogf-hero-bg {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24) 60%, rgba(0,0,0,.42)),
        var(--ogf-hero-img);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#ogf-single-hero.ogf-hero-bg .ogf-single-logo { filter: drop-shadow(0 6px 26px rgba(0,0,0,.6)); }
#ogf-single-hero.ogf-hero-bg .ogf-catmenu     { text-shadow: 0 3px 18px rgba(0,0,0,.85); }
/* /services/ (page-id-1197) : masque tout le bloc bannière natif (photo + boutons
   sociaux + nav) — la même photo (N000944) sert désormais de fond au hero
   logo+menu ci-dessus. */
body.page-id-1197 .banner-area { display: none; }
.ogf-single-logo {
    display: block; margin: 0 auto 14px; height: 360px; width: auto;
    max-width: 94%; object-fit: contain;
}
.ogf-single-title {
    color: var(--ogf-cream) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(38px, 6vw, 74px); line-height: 1; margin: 0 0 18px; padding: 0 20px;
}
/* Category archive pages: the term name is redundant with the carousel — hide it.
   Single project pages keep their title. */
.tax-fw-portfolio-category .ogf-single-title { display: none !important; }

/* ─── Fixed category menu — "text reveal" jackpot (or → rouge) ──────────────
   Menu FIXE (plus de carrousel/chevrons). Chaque lettre vit dans une fenêtre
   overflow:hidden ; au survol .ogf-rev-t glisse vers le haut (l'or sort par le
   haut, un double rouge entre par le bas), décalé lettre par lettre via un
   transition-delay posé en JS. Effet porté du menu Salient "text reveal"
   (cubic-bezier(.25,1,.33,1), .55s). Catégorie courante = rouge permanent. */
/* Panneau "glass" CONTENU/centré derrière les items (plus de barre pleine largeur —
   le fond plein du #ogf-single-hero a été retiré). inline-flex = la pill épouse le
   contenu ; le parent hero (text-align:center) la centre. */
.ogf-catmenu {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
    font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .06em;
    background: rgba(10, 10, 10, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 168, 76, .30); border-radius: 999px;
    padding: 8px 26px;
}
.ogf-catmenu-item {
    position: relative; display: inline-flex; text-decoration: none;
    padding: 6px 18px; font-size: 30px;
}
.ogf-catmenu-sp { display: inline-block; width: .3em; }
.ogf-rev { overflow: hidden; display: inline-block; line-height: 1.18; vertical-align: top; }
.ogf-rev-t {
    display: block; position: relative; color: var(--ogf-gold);
    transition: transform .55s cubic-bezier(.25, 1, .33, 1);
}
.ogf-rev-d { position: absolute; left: 0; top: 100%; width: 100%; color: var(--ogf-flash-red); }
.ogf-catmenu-item:hover .ogf-rev-t { transform: translateY(-100%); }
/* Catégorie courante (single / archive) : rouge permanent */
.ogf-catmenu-item.is-current .ogf-rev-t { color: var(--ogf-flash-red); }
/* Un seul rouge à la fois : tant que le menu est survolé, la catégorie courante
   rend son rouge à l'item réellement survolé (elle repasse en or) ; souris hors
   du menu → la courante redevient rouge. */
.ogf-catmenu:hover .ogf-catmenu-item.is-current:not(:hover) .ogf-rev-t { color: var(--ogf-gold); }

/* Legacy in-content category menu, brought into the DA by JS (initHardcodedCatMenu).
   JS strips the inline styles and tags .ogf-cathard / .ogf-cathard-link; the
   bare &bull; separators inherit the muted-gold container color. */
.ogf-cathard {
    text-align: center; padding: 14px 0 22px; margin: 0 0 22px;
    border-bottom: 1px solid rgba(201, 168, 76, .35);
    font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(201, 168, 76, .4);
}
.ogf-cathard a.ogf-cathard-link {
    color: var(--ogf-gold); text-decoration: none; font-size: 20px;
    padding: 2px 10px; transition: color .25s;
}
.ogf-cathard a.ogf-cathard-link:hover { color: var(--ogf-flash-red); }
.ogf-cathard a.ogf-cathard-link.is-current {
    color: var(--ogf-flash-red); border-bottom: 2px solid var(--ogf-flash-red); padding-bottom: 3px;
}
/* Project title injected above the in-content menu (single project, JS) */
.ogf-cathard-title {
    text-align: center; margin: 30px 0 4px; padding: 0 12px;
    font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .04em;
    font-size: 30px; line-height: 1.05; color: #fff;
}
@media (max-width: 768px) { .ogf-cathard-title { font-size: 24px; } }

/* Center the project meta block (LOCATION / PHOTOGRAPHY / RETOUCHING) — float cols left-align when <4 items */
.single-fw-portfolio .project-detail.row { display: flex; flex-wrap: wrap; justify-content: center; }
.single-fw-portfolio .project-detail.row > [class*="col-"] { float: none; }

/* Portfolio archive — category filter styled DA (matches in-content menu) */
.filter-button-group .wrap button {
    font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .04em;
    font-size: 20px; line-height: 1; color: var(--ogf-gold);
    background: none; border: 0; padding: 2px 14px 4px; margin: 0 2px; cursor: pointer; transition: color .2s;
}
.filter-button-group .wrap button:hover { color: var(--ogf-flash-red); }
.filter-button-group .wrap button.active { color: var(--ogf-flash-red); border-bottom: 2px solid var(--ogf-flash-red); }
/* Portfolio archive — tile titles stay white on hover (was gold). */
.portfolio-block .portfolio-item .wrap h6 { transition: color .2s; }
.portfolio-block .portfolio-item:hover h6 { color: #fff; }

@media (max-width: 768px) {
    .ogf-single-logo { height: 200px; }
    .ogf-catmenu-item { font-size: 22px; padding: 6px 10px; }
}

/* ─── Hide the theme's native project title (now shown at the top) ─────────── */
/* Native page title: the injected hero replaces it on every page that gets the
   hero — i.e. all pages except the front page/blog home and WooCommerce (those
   keep the theme header + their own title). Hide the native .page-title there. */
body:not(.home):not(.home-page):not(.woocommerce-page):not(.woocommerce) .page-title { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Masonry jointif — photos gallery grid (Isotope, gutter 0)
   Kills the theme's grid gutters/margins so photos sit flush against each other.
   Pairs with initMasonryNoGaps() in ogf-gallery.js (re-inits Isotope gutter:0).
   ═══════════════════════════════════════════════════════════════════════════ */
.post-gallery-grid.popup-gallery { margin: 0 !important; }
.post-gallery-grid .popup-item { padding: 0 !important; }
/* The theme wraps each gallery photo in <a class> with margin-bottom:30px — that
   30px (not an Isotope gutter) is the residual gap between stacked photos. Kill it
   so items shrink to the image height → Isotope packs them flush. */
.post-gallery-grid .popup-item > a { display: block; margin: 0 !important; }
.post-gallery-grid .popup-item img { display:block; width:100%; height:auto; margin:0 !important; }

/* Category-archive project index — Sansara .portfolio-items (Isotope, Bootstrap
   cols col-md-4 with 0 15px gutters + container margin 0 -15px). Kill the gutters
   so the archive thumbnails sit flush. Pairs with initMasonryNoGaps() which
   re-inits Isotope (columnWidth '.grid-sizer', gutter 0) on this grid. Scoped to
   category-archive body so the rest of the site's portfolio grids stay untouched. */
.tax-fw-portfolio-category .portfolio-items { margin: 0 !important; }
.tax-fw-portfolio-category .portfolio-item  { padding: 0 !important; margin: 0 !important; }
.tax-fw-portfolio-category .portfolio-item img { display:block; width:100%; height:auto; margin:0 !important; }

/* B1 — archive cards render a real <img> (child content-fw-portfolio.php override)
   instead of the theme's forced-square background <div>. Neutralise any residual
   square (a-img height / inner-div padding-bottom set by the lazy-load plugin) so
   the card takes the image's native height → true masonry via initMasonryNoGaps(). */
.tax-fw-portfolio-category .portfolio-item .a-img { height: auto !important; padding: 0 !important; }
.tax-fw-portfolio-category .portfolio-item .a-img div { padding-bottom: 0 !important; height: auto !important; }
.tax-fw-portfolio-category .portfolio-item .a-img img { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage right-edge vertical nav — restore the missing gap before "Work with US!"
   The .os-buttons nav is rotate(-90°): buttons are inline-block laid out
   horizontally, so the VISUAL vertical spacing = each button's margin-right.
   "Work with US!" (a.button → /services/) is the LAST .button, so pt-addons.css
   zeroes its margin via `.one-screen-area .os-buttons .button:last-of-type`
   (specificity 0,4,0), gluing it to "Categories". We reclaim the 50px gap with a
   selector prefixed by .one-screen-area (specificity 0,4,1 > 0,4,0) — no !important. */
.one-screen-area .os-buttons a.button[href*="/services/"] { margin-right: 50px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Portfolio index — sequential band (initPortfolioRotator in ogf-gallery.js).
   Fills the gap between the category menu line (#ogf-single-hero) and the
   galleries grid (.portfolio-items). ONE sentence at a time: it enters from the
   right, crosses left→exits, then a pause, then the next one (JS Web Animations,
   see ogf-gallery.js). CTA(shop) / quote / CTA(service) / quote … CTAs alternate
   shop↔service. First letter of each sentence is gold (.ogf-rotator-first). Edge
   mask softens entry/exit. Author-voiced lines (Goines / Palahniuk / Ellis), no
   name attribution. Index only.
   ═══════════════════════════════════════════════════════════════════════════ */
.ogf-rotator {
    position: relative; overflow: hidden; width: 100%;
    min-height: 73px; margin: 24px auto 24px;
    display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ogf-rotator-line {
    position: absolute; top: 0; bottom: 0; left: 0;
    display: flex; align-items: center; white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .04em;
    font-size: 90px; line-height: 1; will-change: transform;
}
.ogf-rotator-quote { color: #fff; }
.ogf-rotator-cta   { color: #fff; text-decoration: none; }
.ogf-rotator-arrow { color: var(--ogf-flash-red); }
.ogf-rotator-first { color: var(--ogf-gold); }
.ogf-rotator-em    { color: var(--ogf-flash-red); }
/* Sansara réserve un .header-space de 78px APRÈS notre bande injectée — vide mort ici
   (header en position:relative, pas sticky). On retire celui qui suit la bande pour que
   la grille photo remonte et que le texte se centre dans la bande visible (ligne dorée
   du menu → haut des photos). Marges bande symétriques (24/24) = espace haut = bas. */
#ogf-rotator + .header-space { display: none; }
@media (max-width: 768px) {
    .ogf-rotator-line { font-size: 54px; }
    .ogf-rotator { min-height: 56px; margin: 16px auto 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer — align the left column (© / brand blurb, .widget_black_studio_tinymce)
   with LATEST PROJECTS / CONTACTS. Those two widgets carry margin-top:41px; the
   left one had 0, so it sat 41px higher. Match it for a homogeneous top line.
   (Verified live: only one .widget_black_studio_tinymce exists, in the footer.)
   ═══════════════════════════════════════════════════════════════════════════ */
footer .widget_black_studio_tinymce { margin-top: 71px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Home One-screen slider : masque le placeholder de sous-titre « project name »
   (champ sous-titre laissé vide → texte de démo du thème). On garde le vrai
   titre du slide (.h : « Night Riders », « BRUJOS », « Gotham »…).
   Les slides plein écran sont .item.one-screen-item-* DANS le conteneur .one-screen
   (PAS .one-screen-portfolio, qui est un bloc voisin = .portfolio-cols-slider).
   Scopé à .one-screen → n'affecte ni about-me, ni contact (autres blocs), ni /portfolio/.
   (Vérifié live : les 7 .sub-h de la home valent tous « project name ».)
   ═══════════════════════════════════════════════════════════════════════════ */
.one-screen .content .sub-h { display: none; }
/* Titre photo home (.h) harmonisé avec le titre photo de /portfolio/ (.cap .t) :
   même typo (Bebas Neue) + même taille (clamp 26→46px) + graisse 400 + tracking .03em.
   !important : la règle titre du thème Sansara n'est pas surchargeable en spécificité simple. */
.one-screen .content .h {
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
    font-size: clamp(26px, 4vw, 46px) !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTÈME 2 FONTES — Bebas Neue (display/nav) + Inter (corps)
   DNA (DESIGN.md) : titres = Bebas ; corps = sans-serif neutre = Inter.
   Le corps Inter est géré plus haut (règle body/p, L~42, désormais !important).
   Ici : héritage des contrôles UI + complément titres (classes .h1-.h6, graisse)
   + menu principal du site.
   ═══════════════════════════════════════════════════════════════════════════ */
input, button, select, textarea, optgroup { font-family: inherit; }   /* UI hérite du corps Inter */

/* Titres h1–h6 → Bebas Neue (DNA : titres = display). Complète la règle L34
   (qui couvre h1-h6 sans les classes .h1-.h6 ni la graisse). font-weight 400 :
   Bebas n'a que le 400 → tue la fausse-graisse 700 du thème. Tailles conservées. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .02em;
}

/* Titres du slider catégories de la home (.portfolio-categories-slider) : le thème
   les rend en 'IBM Plex Sans Condensed' via .h/.sub-h — hors scope de .one-screen .content .h.
   On les rattache au système Bebas (dernier texte IBM Plex visible de la home). */
.portfolio-categories-slider .h,
.portfolio-categories-slider .sub-h {
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
    font-weight: 400 !important;
}

/* Labels du carousel owl (Portrait/Warriors/Culture/Activism) : le thème les pose
   via .portfolio-categories-slider .item a > span en 'IBM Plex Sans Condensed' SANS
   fallback — ce sont des <span> sans classe, non couverts par la règle .h/.sub-h
   ci-dessus. IBM Plex étant dequeue (functions.php 2026-09-20), on les passe sur la
   fonte accent H74 Belanger (--ogf-accent-font, validée en mockups live comme
   candidat accent des mots forts catégories). Fallback Bebas dans la stack → si
   Belanger échoue, retour à Bebas, jamais de régression IBM Plex. Sélecteur repris
   tel quel du thème + !important. Belanger posé 2026-09-21 (v1.7.45). */
.portfolio-categories-slider .item a > span {
    font-family: var(--ogf-accent-font) !important;
    font-weight: 400 !important;
}

/* Menu latéral / menu principal du site → Bebas, cohérent avec la nav /portfolio/.
   #menu-main-header hérite juste de body → on force Bebas (plus spécifique, pas d'!important). */
#menu-main-header .menu a,
#menu-main-header .menu a span,
#menu-main-header > li > a,
#menu-main-header > li > a > span {
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #4 · CTA galerie projet (ogf-gallery.js → initSingleGalleryCTA)
   Bloc de conversion en fin de galerie + mini-CTA sticky. DA single-* :
   Bebas Neue, or (--ogf-gold) / or vif (--ogf-gold-bright) / rouge flash
   (--ogf-flash-red). Scopé single-fw-portfolio → aucun autre gabarit touché.
   ═══════════════════════════════════════════════════════════════════════════ */
.ogf-gallery-cta {
    text-align: center; padding: 64px 20px 72px;
    background: #0c0c0c; border-top: 1px solid rgba(201,168,76,.25);
}
.ogf-gcta-line {
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    text-transform: uppercase; letter-spacing: .05em;
    font-size: clamp(30px, 5vw, 58px); line-height: 1;
    color: var(--ogf-gold-bright); margin: 0 0 28px;
}
.ogf-gcta-q { color: var(--ogf-flash-red); }
.ogf-gcta-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.ogf-gcta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    text-transform: uppercase; letter-spacing: .06em; font-size: 22px; line-height: 1;
    text-decoration: none; border-radius: 5px; padding: 13px 30px;
    transition: background .2s, color .2s, border-color .2s;
}
.ogf-gcta-work { background: var(--ogf-flash-red); border: 1px solid var(--ogf-flash-red); color: #fff; }
.ogf-gcta-work:hover { background: transparent; color: var(--ogf-gold-bright); border-color: var(--ogf-gold); }
.ogf-gcta-shop { background: transparent; border: 1px solid var(--ogf-gold); color: var(--ogf-gold); }
.ogf-gcta-shop:hover { background: var(--ogf-gold); border-color: var(--ogf-gold); color: #0c0c0c; }
.ogf-gcta-shop .ogf-single-cart { font-size: 20px; line-height: 1; }

/* Mini-CTA sticky — remonte du bas au-delà de 55% de scroll, refermable */
.ogf-sticky-cta {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 160%);
    z-index: 120; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 18px; border-radius: 999px;
    background: rgba(12,12,12,.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(201,168,76,.35); box-shadow: 0 8px 30px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.25,1,.33,1), opacity .35s;
}
.ogf-sticky-cta.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ogf-sticky-cta a {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    text-transform: uppercase; letter-spacing: .05em; font-size: 16px; line-height: 1;
    text-decoration: none; border-radius: 999px; padding: 9px 18px;
    transition: background .2s, color .2s, border-color .2s;
}
.ogf-sticky-work { background: var(--ogf-flash-red); color: #fff; border: 1px solid var(--ogf-flash-red); }
.ogf-sticky-work:hover { background: transparent; color: var(--ogf-gold-bright); border-color: var(--ogf-gold); }
.ogf-sticky-shop { background: transparent; color: var(--ogf-gold); border: 1px solid var(--ogf-gold); }
.ogf-sticky-shop:hover { background: var(--ogf-gold); color: #0c0c0c; border-color: var(--ogf-gold); }
.ogf-sticky-shop .ogf-single-cart { font-size: 15px; line-height: 1; }
.ogf-sticky-close {
    background: none; border: none; cursor: pointer;
    color: var(--ogf-gold); font-size: 22px; line-height: 1; padding: 0 6px;
    opacity: .7; transition: opacity .2s, color .2s;
}
.ogf-sticky-close:hover { opacity: 1; color: var(--ogf-flash-red); }
@media (max-width: 768px) {
    .ogf-gcta-line { font-size: clamp(26px, 8vw, 40px); }
    .ogf-gcta-btn { font-size: 19px; padding: 12px 24px; }
    .ogf-sticky-cta { left: 12px; right: 12px; bottom: 12px; transform: translateY(160%); justify-content: center; }
    .ogf-sticky-cta.show { transform: translateY(0); }
    .ogf-sticky-cta a { font-size: 14px; padding: 8px 14px; }
}

/* ═══ Fonte accent H74 « Bitch Please » — self-hosted médiathèque, même origine ═══ */
@font-face {
    font-family: 'H74 Bitch Please';
    src: url('/wp-content/uploads/2025/07/H74-Bitch-Please-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* ═══ Fonte accent H74 « Belanger » — self-hosted médiathèque, même origine (2026-09-21) ═══
   Accent DNA « moments forts » (licence web H74 OK). La stack est factorisée dans la
   variable --ogf-accent-font (Belanger d'abord, fallback Bebas → jamais de retour IBM Plex).
   Classe utilitaire .ogf-accent réutilisable pour tout futur spot accent (évite de répéter
   la stack). Chemin racine-relatif = même-origine, zéro CORS www/non-www. */
@font-face {
    font-family: 'H74 Belanger';
    src: url('/wp-content/uploads/2025/07/H74-Belanger.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}
:root {
    --ogf-accent-font: 'H74 Belanger', 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
}
.ogf-accent {
    font-family: var(--ogf-accent-font) !important;
    font-weight: 400 !important;
}

/* ═══ Home intro — wordmark OGAMIFAM : Bitch Please + couleur d'origine thème (2026-09-21) ═══ */
.one-screen .item .top-title,
.site-dark .one-screen .item .top-title {
    font-family: 'H74 Bitch Please', 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    color: #4e4e4e !important;           /* couleur d'origine Sansara (pt-addons.css) — choix David */
    font-size: 30px !important;          /* taille déclarée .h4 (choix David) */
    line-height: 1.15;
}