/* ============================================================
   AUDIT — Pinned horizontal scroll + rail lumineux.

   Pattern (spec) :
   - .audit-hpin est un container haut. À l'intérieur, .audit-hpin__sticky
     est épinglé (position:sticky top:0 height:100vh).
   - La hauteur du container = 100vh + scrollDistance (calculée en JS
     via track.scrollWidth - viewport). Pendant tout ce scroll vertical,
     le JS translate le track horizontalement.
   - Rail à 62% hauteur, beam lumineux dont la pointe reste à 60% vw.
   - Blocs éteints (opacity .16, saturate .2, translateY 24px), s'allument
     quand la pointe passe leur centre → classe .actif.
   ============================================================ */

/* ── Continuité visuelle : les livrables prolongent la frise audit ──
   Même fond que .audit-hpin (radial cyan/violet + linear night-1→2→1),
   padding réduit → pas de rupture visuelle, on lit ça comme la même
   séquence "AUDIT" avec juste un pattern différent (tabs vs frise). */
.audit-livrables-cont {
    position: relative;
    padding: 40px 0 96px;
    background:
        radial-gradient(ellipse 1400px 700px at 15% 20%, rgba(56, 189, 248, 0.05), transparent 60%),
        radial-gradient(ellipse 1200px 600px at 85% 80%, rgba(139, 92, 246, 0.05), transparent 60%),
        linear-gradient(180deg, var(--osm-night-1, #0A0E27) 0%, var(--osm-night-2, #0F1330) 100%);
}
.audit-livrables-cont .audit-block { margin: 0; }

/* Palette alignée sur la charte site (cyan #38BDF8 + violet #8B5CF6) */
.audit-hpin {
    --accent: #38BDF8;                              /* osm-cyan */
    --accent-2: #8B5CF6;                            /* osm-violet */
    --accent-glow: rgba(56, 189, 248, 0.50);
    --accent-soft: rgba(56, 189, 248, 0.15);
    --rail-off: rgba(148, 163, 184, 0.18);
    position: relative;
    /* Background continu avec le reste du site (osm-night-1 → 2 → 1)
       + orbes ambiance discrètes cyan/violet */
    background:
        radial-gradient(ellipse 1400px 700px at 15% 20%, rgba(56, 189, 248, 0.05), transparent 60%),
        radial-gradient(ellipse 1200px 600px at 85% 80%, rgba(139, 92, 246, 0.05), transparent 60%),
        linear-gradient(180deg, var(--osm-night-1, #0A0E27) 0%, var(--osm-night-2, #0F1330) 50%, var(--osm-night-1, #0A0E27) 100%);
    /* Fallback statique = 400vh en attendant que le JS mesure. */
    height: 400vh;
    contain: layout paint;
}

.audit-hpin__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* ── TITRE : centré au démarrage, glisse vers la gauche au scroll.
   Compact (1 ligne au lieu de 2) + lead retiré pour laisser de l'espace
   sous le titre → les blocs above ne le touchent plus. ── */
.audit-hpin__intro {
    position: absolute;
    top: 2vh;
    left: 50%;
    z-index: 20;
    max-width: 720px;
    width: 90vw;
    text-align: center;
    pointer-events: none;
    --intro-tx: 0px;
    transform: translate3d(calc(-50% + var(--intro-tx)), 0, 0);
    will-change: transform;
}
/* Overrides minimaux — .gg-section__title fournit taille/gradient/centrage
   standard. Ici on réduit juste la margin-bottom (48px→0) et max-width
   (le titre est déjà borné par .audit-hpin__intro à 720px). */
.audit-hpin__title.gg-section__title {
    margin: 0 auto;
    max-width: 100%;
}
/* Lead retiré du rendu (info secondaire) — évite tout empiètement */
.audit-hpin__lead { display: none; }

/* ── TRACK : bande en flex, translateX pilotée par JS ─────────── */
.audit-hpin__track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
    width: max-content;
    padding: 0 40vw 0 30vw;   /* 30vw à gauche (laisse place au titre), 40vw à droite (dernier bloc reste lisible) */
    gap: 4vw;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* ── RAIL horizontal continu à 62% hauteur du viewport ────────── */
.audit-hpin__rail {
    position: absolute;
    top: 62%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--rail-off);
    border-radius: 2px;
    z-index: 1;
    pointer-events: none;
}
/* BEAM lumineux qui grandit — gradient violet → cyan (charte site) */
.audit-hpin__beam {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
        rgba(139, 92, 246, 0.0) 0%,
        rgba(139, 92, 246, 0.55) 30%,
        rgba(99, 102, 241, 0.85) 70%,
        var(--accent) 100%);
    border-radius: 2px;
    box-shadow:
        0 0 12px 1px var(--accent-glow),
        0 0 30px 4px rgba(139, 92, 246, 0.20);
    will-change: width;
}
/* TIP : point cyan pulsant à l'extrémité (= 60vw viewport) */
.audit-hpin__tip {
    position: absolute;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(50%, -50%);
    box-shadow:
        0 0 0 6px rgba(56, 189, 248, 0.20),
        0 0 22px 4px var(--accent-glow);
    animation: audit-tip-pulse 1.6s ease-in-out infinite;
}
@keyframes audit-tip-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px rgba(56, 189, 248, 0.20),
            0 0 22px 4px var(--accent-glow);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(56, 189, 248, 0.06),
            0 0 32px 8px rgba(56, 189, 248, 0.75);
    }
}

/* ── BLOCS : héritent de .glow-card (bg glass, bord, spotlight border
   qui suit la souris ::before + dot pattern ::after, hover translateY).
   Ici on ne définit QUE le layout (position, size) + les états éteint/actif.
   min-height fixé pour éviter le min-height:220px par défaut de glow-card. ── */
.audit-hpin__block {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: min(28vw, 380px);
    min-height: 0;                                  /* override glow-card:220px */
    /* État ÉTEINT par défaut */
    opacity: 0.16;
    filter: saturate(0.2);
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        filter 0.7s ease,
        transform 0.7s ease,
        border-color 0.7s ease,
        box-shadow 0.7s ease,
        background 0.7s ease;
    will-change: opacity, transform, filter;
}
/* Position verticale : blocs alternent au-dessus (data-position=above)
   et en-dessous (data-position=below) du rail (62% hauteur).
   above pushé à 28vh pour laisser un vrai espace visuel sous le titre. */
.audit-hpin__block[data-position="above"] {
    align-self: flex-start;
    margin-top: 28vh;
}
.audit-hpin__block[data-position="below"] {
    align-self: flex-end;
    margin-bottom: 5vh;
}

/* État ALLUMÉ : réactive la card (opacity/saturate/translate) mais laisse
   le glow-card gérer bg/border/shadow. On garde le hover natif du site. */
.audit-hpin__block.actif {
    opacity: 1;
    filter: saturate(1);
    transform: translateY(0);
}
/* Petit boost visuel supplémentaire quand actif — halo cyan/violet subtil */
.audit-hpin__block.actif {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.6),
        0 0 35px -12px rgba(56, 189, 248, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Hover d'un bloc actif : conserver le pattern glow-card mais renforcé */
.audit-hpin__block.actif:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, 0.40);
    box-shadow:
        0 30px 60px -20px rgba(139, 92, 246, 0.30),
        0 0 40px -8px rgba(56, 189, 248, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Contenu du bloc */
.audit-hpin__year {
    font-family: var(--osm-ff-heading);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    /* Gradient charte cyan → violet (comme les titres du site) */
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 4px;
}
.audit-hpin__block-title {
    font-family: var(--osm-ff-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--osm-white);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.audit-hpin__block-desc {
    font-size: 0.88rem;
    color: rgba(148, 163, 184, 0.85);
    line-height: 1.5;
    margin: 6px 0 0;
}

/* ── STEM : trait vertical qui relie le bloc au rail ─────────── */
.audit-hpin__stem {
    position: absolute;
    left: 50%;
    width: 2px;
    background: var(--rail-off);
    transform: translateX(-50%);
    transition: background 0.7s ease, box-shadow 0.7s ease;
    z-index: 0;
}
/* Above : stem descend du bas du bloc jusqu'au rail (14vh plus bas
   pour compenser la nouvelle margin-top 28vh) */
.audit-hpin__block[data-position="above"] .audit-hpin__stem {
    top: 100%;
    height: 14vh;
}
/* Below : stem monte du haut du bloc jusqu'au rail (7vh au-dessus) */
.audit-hpin__block[data-position="below"] .audit-hpin__stem {
    bottom: 100%;
    height: 7vh;
}
.audit-hpin__block.actif .audit-hpin__stem {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px 1px var(--accent-glow);
}

/* ── JOINT : point sur le rail à l'aplomb du bloc ─────────────── */
.audit-hpin__joint {
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--osm-night-1, #0b0b1e);
    border: 2px solid var(--rail-off);
    transform: translate(-50%, -50%);
    transition: border-color 0.7s ease, box-shadow 0.7s ease, background 0.7s ease;
    z-index: 3;
}
.audit-hpin__block[data-position="above"] .audit-hpin__joint {
    top: calc(100% + 14vh);
}
.audit-hpin__block[data-position="below"] .audit-hpin__joint {
    bottom: calc(100% + 7vh);
}
.audit-hpin__block.actif .audit-hpin__joint {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px 2px var(--accent-glow);
}

/* ══════════════════════════════════════════════════════════════
   FALLBACKS : mobile & prefers-reduced-motion → flux vertical
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .audit-hpin { height: auto; }
    .audit-hpin__sticky {
        position: static;
        height: auto;
        overflow: visible;
        padding: 80px 20px 60px;
    }
    .audit-hpin__intro {
        position: relative;
        top: auto; left: auto;
        max-width: none;
        margin-bottom: 40px;
    }
    .audit-hpin__track {
        position: relative;
        display: block;
        width: auto;
        padding: 0;
        transform: none !important;
    }
    .audit-hpin__rail { display: none; }
    .audit-hpin__block {
        width: 100%;
        opacity: 1;
        filter: saturate(1);
        transform: none;
        margin: 0 0 24px !important;
        align-self: stretch;
    }
    .audit-hpin__stem, .audit-hpin__joint { display: none; }
}