/* ============================================================================
   ADEV V50, PowerLogy-inspired visual layer
   Loaded AFTER style.min.css; augments without rewriting.
   Adds: PWLG-OS status bar, numbered nav chips, frame boxes, oscilloscope
   monitor, corner brackets, scanlines, grid backdrop, char-by-char reveal,
   numeric ticker styling, sober fade/lift reveal.
   ============================================================================ */

:root {
    --v50-status-online: #36c46e;
    --v50-status-warn: #e63a3a;
    --v50-line-dark: rgba(243, 241, 236, 0.10);
    --v50-line-strong-dark: rgba(243, 241, 236, 0.42);
    --v50-line-light: rgba(13, 14, 16, 0.10);
    --v50-line-strong-light: rgba(13, 14, 16, 0.42);
    --v50-bg-monitor: #0a0b0d;
    /* A11Y: darken the soft body/caption grey. The base #6b6e74 on --bg-light
       (#f0ede6) is 4.37:1, just under WCAG AA 4.5:1 for normal text. #63666d
       lifts it to ~4.9:1 while staying a soft grey. Wins over base :root by
       load order (this file is loaded after style.min.css). */
    --tx-dark-soft: #63666d;
}

/* A11Y: the base global focus ring is `:focus-visible{outline:2px solid
   var(--accent,#b80303)}`. Brand red #b80303 on the dark surface #0d0e10 is
   only 2.81:1, below the 3:1 non-text-contrast bar (WCAG 1.4.11). --accent-hot
   (#e63a3a) gives 4.62:1 on dark and 3.57:1 on light, compliant on both. We
   override only outline-color (same 0,1,0 specificity, later load wins), so
   width/style/offset stay and components with their own outline:none focus
   styles (higher specificity) are untouched. */
:focus-visible {
    outline-color: var(--accent-hot, #e63a3a);
}

/* ============================================================================
   1, UTIL STRIP : PWLG-OS style refresh (version chip, hairlines, status pill)
   ============================================================================ */

.util-strip {
    border-bottom: 1px solid var(--v50-line-dark);
    background: var(--bg-dark);
    position: relative;
    z-index: 90;
}
.util-strip .util-inner,
.util-strip .container.util-inner {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tx-light-soft);
}
.util-strip .util-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.util-strip .util-key {
    color: var(--tx-light-strong);
    font-weight: 500;
}
.util-strip .util-val {
    color: var(--tx-light-mid);
    font-variant-numeric: tabular-nums;
}
.util-strip .util-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v50-status-online);
    box-shadow: 0 0 6px var(--v50-status-online);
    animation: v50-pulse-dot 2.2s ease-in-out infinite;
}
.util-strip .util-sep {
    display: inline-block;
    width: 1px;
    height: 11px;
    background: var(--v50-line-dark);
    margin: 0 2px;
}
.util-strip .util-os {
    color: var(--tx-light-strong);
    font-weight: 500;
}
.util-strip .util-os-version {
    color: var(--tx-light-soft);
    letter-spacing: 0.16em;
}
.util-strip .util-meta {
    color: var(--tx-light-soft);
    letter-spacing: 0.16em;
}
.util-strip .util-item--lang {
    margin-left: auto;
}
.util-strip .util-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--v50-line-dark);
    color: var(--tx-light-mid);
    transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.util-strip .util-lang:hover {
    border-color: var(--accent);
    color: var(--tx-light-strong);
    background: rgba(184, 3, 3, 0.06);
}

@keyframes v50-pulse-dot {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Light page variant (legal pages) */
.page-legal .util-strip {
    background: var(--bg-light);
    border-bottom-color: var(--v50-line-light);
}
.page-legal .util-strip .util-inner,
.page-legal .util-strip .container.util-inner {
    color: var(--tx-dark-soft);
}
.page-legal .util-strip .util-key { color: var(--tx-dark-strong); }
.page-legal .util-strip .util-val,
.page-legal .util-strip .util-os-version,
.page-legal .util-strip .util-meta { color: var(--tx-dark-soft); }
.page-legal .util-strip .util-os { color: var(--tx-dark-strong); }
.page-legal .util-strip .util-sep { background: var(--v50-line-light); }
.page-legal .util-strip .util-lang {
    border-color: var(--v50-line-light);
    color: var(--tx-dark-mid);
}
.page-legal .util-strip .util-lang:hover {
    border-color: var(--accent);
    color: var(--tx-dark-strong);
    background: rgba(184, 3, 3, 0.04);
}

@media (max-width: 768px) {
    .util-strip .util-meta--hide-mobile { display: none; }
    .util-strip .util-sep--hide-mobile  { display: none; }
}

/* ============================================================================
   2, HEADER NAV : numbered mono chips before each link
   ============================================================================ */

.header-nav a:not(.header-cta) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nav-num {
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent);
    opacity: 0.65;
    transition: opacity .25s var(--ease);
}
.header-nav a:not(.header-cta):hover .nav-num,
.header-nav a:not(.header-cta).active .nav-num {
    opacity: 1;
}
/* Hide the [0N] index chips except on wide desktops. Measured in-browser: WITH
   the chips, the 5-item nav (esp. FR "Outils propriétaires") + CTA only fit
   above ~1377px, so chips show only >1440px; below that the nav uses clean
   labels. Single source of truth — the old duplicate rule (was @1100px in the
   V50.16 area) has been removed. */
@media (max-width: 1440px) {
    .nav-num { display: none; }
}

/* ============================================================================
   V50.9, HEADER NAV : no label wrapping, protect logo aspect ratio, and
   collapse to the burger earlier (the 5-item nav, especially in French with
   "Outils propriétaires" / "À propos", was wrapping onto two lines and the
   logo was being horizontally squeezed by flex).
   ============================================================================ */

/* A nav label must never break across two lines */
.header-nav a { white-space: nowrap; }

/* The logo keeps its intrinsic ratio and is never compressed by the flex row */
.header-logo,
.header-logo .logo,
a.logo { flex: 0 0 auto; }
.logo-img-full {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0;
}

/* Collapse to the hamburger across the whole cramped range. Measured in-browser:
   even WITHOUT the [0N] chips, the FR nav ("Outils propriétaires" etc.) + CTA
   only fit above ~1160px, so we collapse at <=1200px. (Was 1024px, which left
   the primary CTA clipped/off-screen across the 1025-1200 band, worst in FR.)
   Re-declare the dropdown panel so it works up to 1200px. */
@media (max-width: 1200px) {
    .header-nav:not(.open) { display: none; }
    .header-burger { display: flex; }
    .header-nav.open {
        display: flex;
        flex-direction: column;
        /* Anchor to the bottom of the (fixed) #header via top:100% instead of a
           hard-coded 64px. On mobile the header bar is taller (~105px with the
           big logo), so top:64px made the panel overlap the logo + burger.
           absolute + top:100% follows the real header height at every width. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(13, 14, 16, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 20px;
        gap: 2px;
        border-top: 1px solid rgba(243, 241, 236, 0.10);
        align-items: stretch;
    }
    .header-nav.open a { font-size: 16px; padding: 13px 14px; white-space: normal; }
    .header-nav.open .header-cta { margin-top: 14px; margin-left: 0; justify-content: center; }
}

/* ============================================================================
   3, SECTION LABEL v2 : 3-part with hairline rules (opt-in)
   ============================================================================ */

.section-label.v2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.section-label.v2 .lbl-num {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-right: 2px;
}
.section-label.v2 .lbl-rule {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.section-label.v2 .lbl-trail {
    margin-left: 10px;
    opacity: 0.55;
    letter-spacing: 0.16em;
}

/* ============================================================================
   5, CORNER BRACKETS : decorative L-shapes at corners (opt-in)
   ============================================================================ */

.corner-bracket {
    position: relative;
}
.corner-bracket::before,
.corner-bracket::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border: 1px solid currentColor;
    opacity: 0.55;
    transition: opacity .25s var(--ease);
}
.corner-bracket::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.corner-bracket::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
.corner-bracket:hover::before,
.corner-bracket:hover::after {
    opacity: 0.85;
}

/* ============================================================================
   6, SCANLINES : barely-there horizontal lines for dark monitor surfaces
   ============================================================================ */

.scanlines {
    position: relative;
}
.scanlines::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(243, 241, 236, 0.022) 0px,
        rgba(243, 241, 236, 0.022) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: 1;
}
.section-light.scanlines::after {
    background: repeating-linear-gradient(
        0deg,
        rgba(13, 14, 16, 0.030) 0px,
        rgba(13, 14, 16, 0.030) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* ============================================================================
   11, STATUS PILL : compact REC/ONLINE badge with pulse dot
   ============================================================================ */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    font-family: var(--ff-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.status-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 5px currentColor;
    animation: v50-pulse-dot 2.2s ease-in-out infinite;
}
.status-pill--ok   { color: var(--v50-status-online); }
.status-pill--warn { color: var(--v50-status-warn); }

/* ============================================================================
   14, CAPABILITY CARDS : opt-in corner brackets
   ============================================================================ */

.capability.has-corners,
.lab-card.has-corners {
    /* No-op when class isn't applied; this is just to namespace the styling. */
}
.capability.has-corners::before,
.capability.has-corners::after,
.lab-card.has-corners::before,
.lab-card.has-corners::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border: 1px solid currentColor;
    opacity: 0.45;
    transition: opacity .25s var(--ease);
}
.capability.has-corners::before,
.lab-card.has-corners::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.capability.has-corners::after,
.lab-card.has-corners::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* ============================================================================
   15, MISC POLISH
   ============================================================================ */

/* Tabular nums on hero KPI counters */
.kpi-num,
.counter-value {
    font-variant-numeric: tabular-nums;
}

/* Cursor cue at end of hero h1 (sober terminal-style blink) */
.text-cursor::after {
    content: "▍";
    display: inline-block;
    margin-left: 6px;
    color: var(--accent);
    animation: v50-blink 1.1s steps(1) infinite;
    font-weight: 400;
    font-size: 0.78em;
    transform: translateY(-0.06em);
    opacity: 0.85;
}
@keyframes v50-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

/* (Removed) duplicate `.nav-num{display:none}` @1100px — the chip visibility
   is now governed by the single @1440px rule in the V50.8 header section. */

/* ============================================================================
   16, HERO INSTRUMENT : MONITOR.01 chrome refinements
   ============================================================================ */

.hero-instrument .inst-header {
    height: auto;
    padding: 9px 12px;
    border-bottom-color: var(--v50-line-dark);
}
.hero-instrument .inst-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--tx-light-strong);
}
.hero-instrument .inst-mod {
    color: var(--tx-light-strong);
    letter-spacing: 0.18em;
}
.hero-instrument .inst-meta {
    color: var(--tx-light-soft);
    letter-spacing: 0.14em;
    font-weight: 400;
}
.hero-instrument .status-pill {
    border-color: rgba(230, 58, 58, 0.55);
    color: var(--v50-status-warn);
    background: rgba(230, 58, 58, 0.06);
}

/* Make corner brackets brighter on the dark instrument */
.hero-instrument.corner-bracket::before,
.hero-instrument.corner-bracket::after {
    color: var(--tx-light-mid);
    opacity: 0.55;
    width: 12px;
    height: 12px;
}

/* Scanlines on the instrument should not cover the readout numbers
   or eat the canvas brightness, keep them subtle. */
.hero-instrument.scanlines::after {
    background: repeating-linear-gradient(
        0deg,
        rgba(243, 241, 236, 0.022) 0px,
        rgba(243, 241, 236, 0.022) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: 1;
}
.hero-instrument > * { position: relative; z-index: 2; }

/* ============================================================================
   V50.10, HARMONIZE CARD HOVER : the Capabilities cards had a top accent-bar
   wipe + radial glow but no lift, while the Lab cards had a 2px lift + a
   whiten but no accent bar. They now share one signature: lift 2px, whiten to
   #fff, and a red top-bar wipe. Capability keeps its icon/number flourishes.
   ============================================================================ */
.capability,
.lab-card {
    transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.capability:hover,
.lab-card:hover {
    transform: translateY(-2px);
    background: #fff;
}
/* Give the lab card the same top accent-bar wipe as the capability card */
.lab-card {
    position: relative;
    overflow: hidden;
}
.lab-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
    z-index: 1;
}
.lab-card:hover::before {
    transform: scaleX(1);
}

/* V50.1  Readout now has 5 cells (Vin, Vout, Iout, eta, Tj GaN), override the
   base 4-column grid. On very narrow widths the cells wrap nicely on their own. */
.hero-instrument .inst-readout { grid-template-columns: repeat(5, 1fr); }
.hero-instrument .inst-r { padding: 7px 9px; }
.hero-instrument .inst-r-k { font-size: 7.5px; }

/* V50.3  "Built on" hairline under the tool title (VOLTHERA). Makes the
   open-source stack lineage visible from the very first paragraph instead of
   buried in section 5. Sober, monospace, accent-coloured kernel names. */
.tdb-built-on {
    font-family: var(--ff-mono);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tx-dark-soft);
    margin: -10px 0 22px;
    padding: 10px 0 0;
    border-top: 1px dashed rgba(13, 14, 16, 0.15);
}
.tdb-built-on strong {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.tdb-built-on .tdb-built-on-sep {
    color: var(--tx-dark-soft);
    margin: 0 6px;
    opacity: 0.6;
}
.tdb-built-on .tdb-built-on-trail {
    display: inline-block;
    margin-left: 12px;
    color: var(--tx-dark-soft);
    opacity: 0.75;
    letter-spacing: 0.14em;
}

/* V50.5  Click-to-pin on flow-step (desktop). The base CSS only shows the
   detail on :hover; this rule keeps it open when the user clicks (toggling
   the .is-pinned class via script-v50.js). Mobile (<=700px) already has its
   own .is-open mechanism from script.min.js, so this scopes to desktop. */
@media (min-width: 701px) {
    .flow-step.is-pinned { z-index: 11; }
    .flow-step.is-pinned .flow-detail {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    .flow-step { cursor: pointer; }
}

/* V50.6  <abbr title="..."> default browser styling adds a dotted/solid
   underline that visually competes with links. Replace with a subtle dotted
   underline + help cursor that stays out of the way. */
abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
    cursor: help;
}
.section-dark abbr[title],
.flow-detail abbr[title] {
    border-bottom-color: rgba(0, 0, 0, 0.18);
}

/* V50.7  Re-skin .lab-note: previously it had a red left border + circled-i
   icon that read as "warning". Re-frame as a positive capability statement
   with a green border + plus-circle icon. */
.lab-note {
    border-left-color: var(--v50-status-online, #36c46e) !important;
    background: rgba(54, 196, 110, 0.04);
}
.lab-note svg {
    color: var(--v50-status-online, #36c46e) !important;
}

/* V50.2  TDB flow diagrams must stay inside the content text column.
   The base rule used width:calc(100% + 220px) to deliberately overflow, which
   was breaking the visual rhythm with the paragraphs above. Constrain to the
   parent and let long pipelines (5 steps) shrink the boxes a touch. */
.tdb-flow {
    width: 100%;
    max-width: 100%;
}
.tdb-flow--wca .tdb-flow-block {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 14px 11px 16px;
}
.tdb-flow--wca .tdb-flow-arrow {
    flex: 0 0 22px;
    width: 22px;
    padding: 0 4px;
}
.tdb-flow--wca .tdb-flow-title {
    font-size: 0.88rem;
    line-height: 1.22;
}
.tdb-flow--wca .tdb-flow-meta {
    font-size: 10px;
    line-height: 1.4;
}

/* ============================================================================
   17, SECTION LABELS : add hairline trailing line via ::after, preserved
   inline-block layout so existing markup never shifts. Subtle PowerLogy hint.
   ============================================================================ */

.section-label::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.32;
    transition: width .35s var(--ease), opacity .35s var(--ease);
    transform: translateY(-1px);
}
.section-head:hover .section-label::after {
    width: 44px;
    opacity: 0.55;
}


/* ============================================================================
   19, CAPABILITY NUMBERS : wrap in brackets [01] (PowerLogy DNA)
   ============================================================================ */

.cap-num::before,
.cap-num::after {
    color: var(--accent);
    opacity: 0.6;
    font-weight: 500;
    transition: opacity .3s var(--ease);
}
.cap-num::before { content: "["; margin-right: 1px; }
.cap-num::after  { content: "]"; margin-left: 1px; }
.capability:hover .cap-num::before,
.capability:hover .cap-num::after,
.capability--linked:hover .cap-num::before,
.capability--linked:hover .cap-num::after {
    opacity: 1;
}


/* ============================================================================
   20, FLOW STEP NUMBERS : the existing .flow-num already has a circular
   ring pseudo-element. We don't add brackets here to avoid conflicting.
   ============================================================================ */


/* ============================================================================
   21, SECTION LABEL HIDE ::after WHEN EMPTY OR CTA
   Avoid the trailing hairline on certain section labels (e.g. hero,
   tools-tab labels) where it would conflict.
   ============================================================================ */

.section-label.no-rule::after,
.section-label.static-label::after {
    display: none;
}


/* ============================================================================
   22, HERO ANIMATION : sober PowerLogy-style fade-up
   We kill the existing char-by-char animation (too flashy) and replace it
   with a single, sober block-level fade-up. Title → Lead → Actions stagger,
   ~150ms apart, 8px Y translate, 0.7s ease-out cubic-bezier.
   ============================================================================ */

/* 1. Disable the char-by-char rise from script.min.js */
.hero-title .char {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.hero-title .word {
    overflow: visible !important;
}

/* 2. Apply the new sober fade-up sequence */
.hero-title,
.hero-lead,
.hero-actions {
    opacity: 0;
    transform: translateY(10px);
    animation: v50-hero-fade 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title    { animation-delay: 0.20s; }
.hero-lead     { animation-delay: 0.42s; }
.hero-actions  { animation-delay: 0.58s; }

@keyframes v50-hero-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-lead,
    .hero-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* ============================================================================
   23, SECTION-LABEL HAIRLINE : stronger, always-on (PowerLogy signature)
   ============================================================================ */

.section-label::after {
    width: 36px;
    opacity: 0.42;
    transition: none;
}
.section-head:hover .section-label::after {
    width: 36px;
    opacity: 0.42;
}


/* ============================================================================
   24, CAPABILITY CARDS : corner brackets BY DEFAULT (subtle, not hover-only)
   ============================================================================ */

.services-grid .capability,
.services-grid .capability--linked {
    position: relative;
}
.services-grid .capability::before,
.services-grid .capability::after,
.services-grid .capability--linked::before,
.services-grid .capability--linked::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border: 1px solid var(--accent);
    opacity: 0.32;
    transition: opacity .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.services-grid .capability::before,
.services-grid .capability--linked::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.services-grid .capability::after,
.services-grid .capability--linked::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
.services-grid .capability:hover::before,
.services-grid .capability:hover::after,
.services-grid .capability--linked:hover::before,
.services-grid .capability--linked:hover::after {
    opacity: 0.85;
    width: 18px;
    height: 18px;
}


/* ============================================================================
   25, DARK / LIGHT SECTION DIVIDERS : crisp top hairlines (PWLG style)
   ============================================================================ */

.section-dark + .section-light,
.section-light + .section-dark {
    border-top: 1px solid var(--v50-line-strong-dark);
}
.section-dark {
    border-bottom: 1px solid var(--v50-line-dark);
}
.section-light {
    border-bottom: 1px solid rgba(13, 14, 16, 0.07);
}


/* ============================================================================
   27, HERO NOISE : barely-there
   ============================================================================ */

.hero .hero-noise {
    opacity: 0.18;
}


/* ============================================================================
   28, PAGE CURTAIN : keep the boot screen, dress it PowerLogy-style
   The original .page-curtain animation (curtain-out 1.2s after 0.6s delay)
   stays intact. We add a dot-grid backdrop, a pulsing status dot, monospaced
   sub-labels and a hairline divider to feel more "system init".
   ============================================================================ */

.page-curtain {
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%, #14171c 0%, #0d0e10 70%, #0a0b0d 100%);
}
.page-curtain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(243, 241, 236, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 241, 236, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 25%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 25%, transparent 80%);
    opacity: 0.85;
}
.page-curtain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(243, 241, 236, 0.020) 0px,
        rgba(243, 241, 236, 0.020) 1px,
        transparent 1px,
        transparent 3px
    );
}

.page-curtain .curtain-line {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(184, 3, 3, 0.55);
}

.page-curtain .curtain-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    max-width: 240px;
    height: 1px;
}

/* ADEV mark, sober, sized like a wordmark, sits ABOVE the red line. */
.page-curtain .curtain-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-44px);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 48px);
    letter-spacing: 0.04em;
    color: var(--tx-light-strong);
    line-height: 1;
    z-index: 3;
    opacity: 0;
    animation: v50-mark-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.10s forwards;
}

@keyframes v50-mark-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-38px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-44px);
    }
}

/* Sub-label sits BELOW the red line. */
.page-curtain .curtain-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(40px) !important;
    font-family: var(--ff-mono);
    color: var(--tx-light-soft);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    z-index: 2;
    text-align: center;
}

/* Add a small status block under the existing label using ::after on the
   label itself, purely chrome, no markup change needed. */
.page-curtain .curtain-label::after {
    content: "// BOOTING · v.2026.50";
    display: block;
    margin-top: 14px;
    font-family: var(--ff-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tx-light-soft);
    opacity: 0.75;
    animation: v50-pulse-dot 1.6s ease-in-out infinite;
}
.page-curtain .curtain-label::before {
    content: "● ";
    color: var(--v50-status-online);
    font-size: 0.7em;
    margin-right: 8px;
    text-shadow: 0 0 6px var(--v50-status-online);
    animation: v50-pulse-dot 1.6s ease-in-out infinite;
}


/* ============================================================================
   29, FLOW TRACK : strengthen the horizontal track + step chrome
   ============================================================================ */

.section--flow .flow-track::before {
    background: linear-gradient(
        90deg,
        rgba(184, 3, 3, 0.0) 0%,
        rgba(184, 3, 3, 0.55) 8%,
        rgba(184, 3, 3, 0.55) 92%,
        rgba(184, 3, 3, 0.0) 100%
    );
    height: 1px;
    top: 32px;
}
.flow-step h3 {
    font-family: var(--ff-display);
}


/* ============================================================================
   30, STRONGER MONO LABELS in capability cards (small caps for sub-labels)
   ============================================================================ */

.cap-list li,
.flow-detail li {
    /* keep readable, but a tad more "instrumented" */
    letter-spacing: 0.005em;
}


/* ============================================================================
   31, HEADER SCROLLED : tighter top edge, hairline
   ============================================================================ */

#header.scrolled {
    border-bottom-color: var(--v50-line-strong-dark);
}


/* ============================================================================
   33, STATS BAND : add [01]…[04] mono prefix on each stat (PowerLogy KPIs)
   ============================================================================ */

.stats-band {
    counter-reset: v50-stat;
}
.stats-band .stat {
    counter-increment: v50-stat;
    padding-top: 24px;
    position: relative;
}
.stats-band .stat::before {
    content: "[" counter(v50-stat, decimal-leading-zero) "]";
    display: block;
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.10em;
    color: var(--accent);
    margin-bottom: 14px;
    opacity: 0.85;
}


/* ============================================================================
   34, LAB CARDS : corner brackets by default + tighter chrome
   ============================================================================ */

.lab-grid .lab-card {
    position: relative;
}
.lab-grid .lab-card::before,
.lab-grid .lab-card::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border: 1px solid var(--accent);
    opacity: 0.32;
    transition: opacity .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.lab-grid .lab-card::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.lab-grid .lab-card::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
.lab-grid .lab-card:hover::before,
.lab-grid .lab-card:hover::after {
    opacity: 0.85;
    width: 18px;
    height: 18px;
}


/* ============================================================================
   35, FLOW STEPS : corner brackets at first and last cards only
   (subtle, framing the whole timeline)
   ============================================================================ */

.flow-track .flow-step:first-child::before,
.flow-track .flow-step:last-child::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border: 1px solid var(--accent);
    opacity: 0.45;
}
.flow-track .flow-step:first-child::before {
    top: -8px;
    left: -8px;
    border-right: 0;
    border-bottom: 0;
}
.flow-track .flow-step:last-child::after {
    bottom: -8px;
    right: -8px;
    border-left: 0;
    border-top: 0;
}


/* ============================================================================
   36, FOUNDER PHOTOS : add corner brackets on each photo (PowerLogy frame)
   ============================================================================ */

.founders .founder-photo {
    position: relative;
}
.founders .founder-photo::before,
.founders .founder-photo::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    border: 1px solid var(--accent);
    opacity: 0.55;
    z-index: 2;
}
.founders .founder-photo::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.founders .founder-photo::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}


/* ============================================================================
   37, SECTION TITLE : tighten kerning to feel more "instrument display"
   ============================================================================ */

.section-title {
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.025em;
}


/* ============================================================================
   38c, FOOTER : NDA-respectful client sectors (no names)
   Replaces the named client links ("They trust us") with static sector chips
   plus a small NDA note. No client is identified anywhere.
   ============================================================================ */

.partners--sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.partner--sector {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--v50-line-dark);
    font-family: var(--ff-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx-light-mid);
    background: rgba(243, 241, 236, 0.03);
    cursor: default;
    /* override .partner--text link affordances */
    border-radius: 0;
}
.partner--sector::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: 7px;
    background: var(--accent);
    opacity: 0.7;
}
.footer-sector-note {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tx-light-soft);
    margin: 2px 0 0;
}

/* Light-page footers (legal pages) keep the same dark footer, so no override
   needed, the footer is always dark. */


/* ============================================================================
   38b, VOLTHERA panel : hero figure + UI screenshots
   Used in the VOLTHERA tab on tools.html / fr/tools.html. The hero figure is
   the rendered thermal field; the screenshots are framed UI captures that
   sit between paragraphs.
   ============================================================================ */

/* JEDEC k_eq cascade : tighter mono block, dark-on-light */
.tdb-section pre.tdb-code {
    margin: 14px 0 18px;
    padding: 14px 18px;
    background: #0d0e10;
    color: #f3f1ec;
    font-family: var(--ff-mono);
    font-size: 12.5px;
    line-height: 1.65;
    border-left: 2px solid var(--accent);
    overflow-x: auto;
    white-space: pre;
}
.tdb-section pre.tdb-code sub {
    font-size: 0.78em;
    color: rgba(243, 241, 236, 0.78);
}

@media (max-width: 768px) {
    .tdb-section pre.tdb-code {
        font-size: 11px;
        padding: 12px 14px;
    }
}


/* ============================================================================
   38a, PORTFOLIO : arrow navigation (no more scroll-hijack)
   Wrapper goes back to natural height so the page scrolls past the section
   without "unrolling" the projects. Navigation happens via arrow buttons.
   ============================================================================ */

.hscroll-wrapper {
    height: auto !important;
    width: 100%;
}
.hscroll-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: hidden !important;
    -webkit-mask: none !important;
            mask: none !important;
    display: block !important;
    padding: 32px 0 64px;
}
.hscroll-track {
    /* The existing CSS has `transform: none !important` at @media(max-width:900px)
       which blocks JS-set transforms. We override at the same priority below. */
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    padding: 0 8vw !important;
    flex-direction: row !important;   /* override existing column on mobile */
    height: auto !important;
    gap: 4vw !important;
}
.hscroll-track .hslide {
    flex: 0 0 auto;
}

/* Arrow buttons, sides of the sticky frame */
.hscroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: rgba(243, 241, 236, 0.06);
    border: 1px solid rgba(243, 241, 236, 0.20);
    color: var(--tx-light-strong);
    cursor: pointer;
    z-index: 10;
    transition:
        background .25s var(--ease),
        border-color .25s var(--ease),
        opacity .25s var(--ease),
        transform .25s var(--ease);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hscroll-arrow:hover:not([disabled]) {
    background: rgba(184, 3, 3, 0.18);
    border-color: var(--accent);
    color: var(--tx-light-strong);
}
.hscroll-arrow:active:not([disabled]) {
    transform: translateY(-50%) scale(0.94);
}
.hscroll-arrow[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
}
.hscroll-arrow svg {
    width: 22px;
    height: 22px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* V50.8  Pull both arrows inward so the "next" arrow clears the right-edge
   scroll-spy rail (.rail-dot) and the pair sits closer to the slides.
   Asymmetric: the next arrow gets a touch more inset because the rail dots
   live on the right edge of the viewport. */
.hscroll-arrow--prev {
    left: clamp(20px, 4vw, 64px);
}
.hscroll-arrow--next {
    right: clamp(36px, 6vw, 104px);
}

/* Progress chrome, keep but rebrand "scroll" hint as a counter only */
.hscroll-progress {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 32px auto 0;
    justify-content: center;
}
.hscroll-progress .hpn-hint {
    display: none;
}
.hscroll-progress-bar {
    width: 160px !important;
}

@media (max-width: 768px) {
    /* On mobile we reposition the arrows ON the image area (top of the slide)
       so they're always reachable in the viewport, and we shrink them slightly. */
    .hscroll-sticky {
        padding: 16px 0 32px;
    }
    .hscroll-arrow {
        width: 40px;
        height: 40px;
        top: 20%;
        background: rgba(13, 14, 16, 0.55);
        border-color: rgba(243, 241, 236, 0.30);
    }
    .hscroll-arrow:hover:not([disabled]) {
        background: rgba(184, 3, 3, 0.55);
    }
    .hscroll-arrow svg { width: 16px; height: 16px; }
    .hscroll-arrow--prev { left: 8px; }
    .hscroll-arrow--next { right: 8px; }

    /* Track padding tighter on mobile so slides take more horizontal room */
    .hscroll-track {
        padding: 0 4vw !important;
        gap: 4vw !important;
    }
    .hscroll-track .hslide {
        flex: 0 0 92vw;
        max-width: 92vw;
    }

    /* A tiny "← swipe →" hint appears under the progress bar on mobile only */
    .hscroll-progress::after {
        content: "← Swipe →";
        display: block;
        position: absolute;
        left: 50%;
        bottom: -22px;
        transform: translateX(-50%);
        font-family: var(--ff-mono);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--tx-light-soft);
        opacity: 0.55;
        white-space: nowrap;
    }
    html[lang="fr"] .hscroll-progress::after {
        content: "← Glissez →";
    }
    .hscroll-progress {
        position: relative !important;
        margin-bottom: 32px;
    }
}


/* ============================================================================
   38, FLOW-DETAIL : remove the "+" bullet, keep clean lines
   The hover popover on flow steps was prefixing each bullet with a red "+".
   Looks cluttered, replace with a sober dash treatment.
   ============================================================================ */

.flow-detail li::before {
    content: "" !important;
}
.flow-detail li {
    padding-left: 12px !important;
    position: relative;
}
.flow-detail li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 6px;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
}


/* ============================================================================
   39, ABBR : nicer underline + tooltip cue
   ============================================================================ */

abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}


/* ============================================================================
   40, PORTFOLIO (hscroll) : remove inline link helper space
   ============================================================================ */

.project-link:empty {
    display: none;
}


/* ============================================================================
   41, MOBILE TIDY-UP
   ============================================================================ */

@media (max-width: 768px) {
    .util-strip .util-inner,
    .util-strip .container.util-inner {
        gap: 10px;
        font-size: 10px;
        height: 26px;
        letter-spacing: 0.14em;
    }
    .section-label::after { display: none; }
    .services-grid .capability::before,
    .services-grid .capability::after,
    .services-grid .capability--linked::before,
    .services-grid .capability--linked::after {
        width: 10px;
        height: 10px;
    }
}

/* ============================================================================
   V50.11, A11y CONTRAST: accent-coloured INFORMATIONAL text on the dark theme.
   --accent (#b80303) measures 2.81:1 on #0d0e10, below WCAG 1.4.3 AA (4.5:1).
   Use the brighter --accent-hot (#e63a3a, 4.63:1) for accent text that conveys
   meaning on dark backgrounds (portfolio counter, dark tools TOC, dark numbers).
   Accent text on LIGHT sections keeps the deeper red (good contrast there).
   ============================================================================ */
.hpn-current,
.tools-doc-nav--dark a.is-active,
.tools-doc-nav--dark .tdn-tool,
.tools-doc-nav--dark .tdb-num,
.section-dark .tdb-num,
.tools-doc-body--dark .tdb-fig-label,
.stat-num em {
    color: var(--accent-hot, #e63a3a);
}
/* R4: the "UNDER NDA" / "SOUS NDA" placeholder label inherited --tx-light-soft
   (#7a7d83) on --bg-dark-elev (#16181b) = 4.31:1, just under AA 4.5:1. Lift the
   label text (not the decorative icon, which stays soft) to ~5:1. */
.placeholder-content span {
    color: #85888e;
}

/* A11y FOCUS: the base zeroes the outline (outline:0) even for :focus-visible on
   these two controls, leaving keyboard users with no visible focus ring. Restore
   one (equal specificity, later load wins). */
.modal-close:focus-visible,
.tools-tab:focus-visible:not([aria-hidden="true"]) {
    outline: 2px solid var(--accent-hot, #e63a3a);
    outline-offset: 2px;
}

/* ============================================================================
   V50.12, A11y KEYBOARD: the "How we work" flow-step detail panels were
   revealed on :hover only (mouse-only) on desktop. script-v50.js now makes
   each step focusable (tabindex + role=button + aria-expanded + Enter/Space);
   here we reveal the detail on keyboard focus and when pinned, on every
   breakpoint, and give the focused step a visible focus ring.
   ============================================================================ */
@media (min-width: 701px) {
    .flow-step:focus-within .flow-detail,
    .flow-step.is-pinned .flow-detail {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    .flow-step:focus-visible {
        outline: 2px solid var(--accent-hot, #e63a3a);
        outline-offset: 3px;
        border-radius: 4px;
    }
}

/* ============================================================================
   V50.13, PORTFOLIO DOT INDICATORS: clickable direct-access dots so visitors
   see there are three projects and can jump straight to any of them (the
   audit flagged that 2/3 cards sat off-screen with weak affordance). Built by
   script-v50.js and appended into .hscroll-progress next to the 01/03 counter.
   ============================================================================ */
.hscroll-dots {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-left: 18px;
}
.hscroll-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--v50-line-strong-dark, rgba(243, 241, 236, 0.42));
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hscroll-dot:hover { border-color: var(--accent-hot, #e63a3a); }
.hscroll-dot.is-active {
    background: var(--accent-hot, #e63a3a);
    border-color: var(--accent-hot, #e63a3a);
    transform: scale(1.25);
}
.hscroll-dot:focus-visible {
    outline: 2px solid var(--accent-hot, #e63a3a);
    outline-offset: 3px;
}
/* Light legal/sitemap pages don't have the portfolio; no override needed. */


/* ============================================================================
   V50.14, PORTFOLIO AFFORDANCE + MOBILE IMAGE + NDA CHIP
   Make it obvious there are several projects: stronger, clearly-visible
   prev/next arrows, a gentle "more this way" pulse on the next arrow, and the
   01/03 counter + dots shown on every breakpoint (base CSS hid them <=900px).
   A small-but-visible "under NDA" chip sits on each project image (top-right).
   Also: a slightly smaller, centred project image on mobile.
   ============================================================================ */

/* Stronger arrows (desktop) - elevated fill so they read against the dark bg */
.hscroll-arrow {
    width: 58px;
    height: 58px;
    background: rgba(22, 24, 27, 0.85);
    border-color: rgba(243, 241, 236, 0.42);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.hscroll-arrow svg { width: 25px; height: 25px; }
.hscroll-arrow:hover:not([disabled]) {
    background: var(--accent, #b80303);
    border-color: var(--accent-hot, #e63a3a);
    color: #fff;
}

/* Gentle "more projects this way" pulse on the next arrow (stops on last slide
   because the arrow is then [disabled]). Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .hscroll-arrow--next:not([disabled])::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 1px solid var(--accent-hot, #e63a3a);
        animation: adevArrowPulse 2.8s ease-out infinite;
        pointer-events: none;
    }
}
@keyframes adevArrowPulse {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(1.3); }
    100% { opacity: 0;    transform: scale(1.3); }
}

/* Counter + dots: always visible (base CSS hides .hscroll-progress <=900px) */
@media (max-width: 900px) {
    .hscroll-progress { display: flex !important; }
}
.hscroll-progress { font-size: 12px; }
.hscroll-dot { width: 10px; height: 10px; }

/* "Under NDA" confidentiality chip, top-right of each project image */
.project-nda {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 10px;
    background: rgba(13, 14, 16, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bd-dark, #25272b);
    color: var(--tx-light-mid, #b6b8bd);
    font-family: var(--ff-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    z-index: 4;
}

/* Mobile: legible, centred project image. MUST override the base rule
   `.hslide .project-media{height:100%}` (specificity 0,2,0) — height:100% +
   aspect-ratio against an indefinite parent COLLAPSES the image on iOS Safari
   (renders tiny). Force width-based sizing (height:auto) so it's large and
   identical on every browser, while still smaller than the desktop image. */
@media (max-width: 900px) {
    .hslide .project-media {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        width: 90%;
        max-width: 440px;
        margin-inline: auto;
    }
}
@media (max-width: 768px) {
    .hscroll-arrow {
        width: 46px;
        height: 46px;
        background: rgba(22, 24, 27, 0.82);
        border-color: rgba(243, 241, 236, 0.44);
    }
    .hscroll-arrow svg { width: 19px; height: 19px; }
    .project-status, .project-nda {
        font-size: 9px;
        padding: 4px 7px;
        letter-spacing: 0.12em;
    }
}


/* ============================================================================
   V50.15, TOOLS DOC MOBILE READABILITY
   The mobile override set the doc grid to `grid-template-columns:1fr`, whose
   track minimum is min-content -> a wide table/code block forced the whole doc
   column to ~446px and an ancestor overflow:hidden clipped it (content cut off
   / illegible on phones). Let the column shrink, and keep tables/code/equations
   contained so they never force the page width.
   ============================================================================ */
@media (max-width: 900px) {
    .tools-doc-shell { grid-template-columns: minmax(0, 1fr) !important; }
    .tools-doc-body  { min-width: 0; max-width: 100%; }

    /* tables: headers keep whole words (sized to fit); data cells break to the
       column so the table always fits the page width. */
    .tools-doc-body .tdb-table:not(.tdb-table--psa) { width: 100%; }
    .tools-doc-body .tdb-table:not(.tdb-table--psa) td { overflow-wrap: anywhere; }

    /* inline code (formulas) breaks instead of forcing the page wider;
       prose breaks only genuinely-too-long tokens. */
    .tools-doc-body code { overflow-wrap: anywhere; }
    .tools-doc-body p,
    .tools-doc-body li { overflow-wrap: break-word; }

    /* block code / equations scroll inside their own box (formula stays intact) */
    .tools-doc-body .tdb-code,
    .tools-doc-body .tdb-eq,
    .tools-doc-body pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tools-doc-body pre code { overflow-wrap: normal; }
}


/* ============================================================================
   V50.16, FOOTER "ADEV" WATERMARK: the giant decorative outline (.sig-text,
   clamp min 10rem ~ 160px) was ~457px wide on phones and got clipped at the
   right edge. Scale it down on small screens so the whole word fits.
   ============================================================================ */
@media (max-width: 600px) {
    .sig-text { font-size: clamp(3.5rem, 22vw, 8rem); }
}


/* ============================================================================

   18, SUBTLE GRID BACKDROP ON HOME HERO

   The existing `.hero-grid-bg` already paints a backdrop. We add a

   PowerLogy-style radial fade mask to make it feel more "instrumented".

   ============================================================================ */



.hero .hero-grid-bg {

    -webkit-mask-image: radial-gradient(

        ellipse 90% 70% at 50% 35%,

        rgba(0, 0, 0, 1) 25%,

        transparent 80%

    );

            mask-image: radial-gradient(

        ellipse 90% 70% at 50% 35%,

        rgba(0, 0, 0, 1) 25%,

        transparent 80%

    );

}

/* ============================================================================

   26, HERO GRID BACKDROP : barely-there trace, only at the very edges

   ============================================================================ */



.hero {

    position: relative;

}

.hero .hero-grid-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:

        linear-gradient(rgba(243, 241, 236, 0.022) 1px, transparent 1px),

        linear-gradient(90deg, rgba(243, 241, 236, 0.022) 1px, transparent 1px);

    background-size: 64px 64px;

    /* Only show at the corners, fade out aggressively in the centre. */

    -webkit-mask-image: radial-gradient(

        ellipse 60% 50% at 50% 45%,

        transparent 40%,

        rgba(0, 0, 0, 0.6) 95%

    );

            mask-image: radial-gradient(

        ellipse 60% 50% at 50% 45%,

        transparent 40%,

        rgba(0, 0, 0, 0.6) 95%

    );

    pointer-events: none;

    transform: none !important;

    transition: none !important;

}

/* ============================================================================
   V51, MOBILE, supprime le grand vide entre le bandeau et le titre du hero.
   En =<900px l'instrument est masque (display:none) et le contenu est court :
   le min-height:100vh + .hero-inner{justify-content:center} centrait le titre
   au milieu de l'ecran, d'ou l'enorme espace sous le header. On cale le
   contenu juste sous le header. (Sur ordinateur : strictement inchange.)
   #home.hero (id+classe) pour passer devant les regles .hero du bundle min.
   ============================================================================ */
@media (max-width: 900px) {
    #home.hero {
        min-height: auto;
        padding-top: 112px;   /* ~ bandeau 30px + header ~68px + petit espace */
        padding-bottom: 48px;
    }
    #home.hero .hero-inner {
        justify-content: flex-start;
    }
}