/* ================================================================
   PEEVO — Design system 2026
   Bleu Peevo #004AAD, hero sombre + scène générative, sections claires.
   Préfixe de classes : pvo-
   ================================================================ */

/* ================================================================
   1. FONTS (self-hosted, latin)
   ================================================================ */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/archivo-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/archivo-variable-ext.woff2') format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plexmono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plexmono-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   2. TOKENS
   ================================================================ */
:root {
    /* Couleurs */
    --pvo-blue: #004aad;          /* seule couleur de marque */
    --pvo-blue-hover: #003c8d;
    --pvo-electric: #0e6fff;      /* impulsions, focus */
    --pvo-ink: #0b1c36;           /* encre navy */
    --pvo-soft: #46586f;
    --pvo-faint: #637289;
    --pvo-paper: #f5f7fb;         /* papier froid */
    --pvo-card: #ffffff;
    --pvo-line: #dce4f0;
    --pvo-wash: #e9f0fb;
    --pvo-night: #040d1d;         /* fond de la scène générative */
    --pvo-band: #051d3a;          /* bande produits / footer */
    --pvo-band-card: #0b2a52;
    --pvo-band-line: #1b3a66;
    --pvo-band-ink: #eef3fb;
    --pvo-band-soft: #9db4d6;
    --pvo-ok: #1f7a4d;
    --pvo-err: #b42318;

    /* Typo */
    --pvo-disp: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pvo-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

    /* Structure */
    --pvo-wrap: 1140px;
    --pvo-nav-h: 68px;
    --pvo-radius: 10px;
}

/* ================================================================
   3. BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--pvo-nav-h) + 12px);
}

body {
    margin: 0;
    background: var(--pvo-paper);
    color: var(--pvo-ink);
    font: 400 16.5px/1.65 var(--pvo-disp);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--pvo-blue); text-decoration: none; }
a:hover { color: var(--pvo-blue-hover); }
img { max-width: 100%; height: auto; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
    outline: 2px solid var(--pvo-electric);
    outline-offset: 3px;
    border-radius: 4px;
}

.pvo-wrap {
    width: 100%;
    max-width: var(--pvo-wrap);
    margin: 0 auto;
    padding: 0 1.4rem;
}

.pvo-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--pvo-blue);
    color: #fff;
    padding: .7rem 1.2rem;
    z-index: 200;
}
.pvo-skip:focus { left: 0; color: #fff; }

/* ================================================================
   4. TYPOGRAPHIE DE SECTION
   ================================================================ */
.pvo-eyebrow {
    display: block;
    font-family: var(--pvo-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pvo-blue);
}

.pvo-h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: .5rem 0 1rem;
    text-wrap: balance;
}

.pvo-h3 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}

.pvo-lede {
    color: var(--pvo-soft);
    max-width: 58ch;
    margin: 0 0 2.2rem;
}
/* Titre de section suivi directement d'une grille : même respiration qu'après un chapeau */
.pvo-h2 + [class^="pvo-grid-"] { margin-top: 2.2rem; }

.pvo-section { padding: 5rem 0; }
.pvo-section-card {
    background: var(--pvo-card);
    border-top: 1px solid var(--pvo-line);
    border-bottom: 1px solid var(--pvo-line);
}

/* ================================================================
   5. BOUTONS
   ================================================================ */
.pvo-btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font: 600 .95rem var(--pvo-disp);
    padding: .72rem 1.35rem;
    border-radius: 6px;
    transition: background .15s, border-color .15s, color .15s;
}
.pvo-btn-primary { background: var(--pvo-blue); color: #fff; }
.pvo-btn-primary:hover { background: var(--pvo-blue-hover); color: #fff; }
.pvo-btn-ghost {
    background: transparent;
    color: var(--pvo-blue);
    border: 1px solid var(--pvo-line);
}
.pvo-btn-ghost:hover { border-color: var(--pvo-blue); }
.pvo-btn-nav { padding: .5rem 1.05rem; font-size: .88rem; }

/* ================================================================
   6. NAVIGATION
   ================================================================ */
.pvo-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 247, 251, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pvo-line);
}
.pvo-nav-in {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    height: var(--pvo-nav-h);
}
.pvo-nav-brand {
    display: flex;
    align-items: center;
    margin-right: auto;
}
.pvo-logo { display: block; }
.pvo-logo img { display: block; width: 107px; height: 40px; }
.pvo-nav-links {
    display: flex;
    gap: 1.5rem;
    font-size: .92rem;
    font-weight: 500;
}
.pvo-nav-links a { color: var(--pvo-soft); }
.pvo-nav-links a:hover,
.pvo-nav-links a.is-active { color: var(--pvo-blue); }
.pvo-nav-links a.is-active { font-weight: 600; }

.pvo-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 0;
    background: none;
    border: 1px solid var(--pvo-line);
    border-radius: 6px;
    cursor: pointer;
}
.pvo-nav-toggle span {
    display: block;
    height: 2px;
    width: 18px;
    margin: 0 auto;
    background: var(--pvo-ink);
    transition: transform .2s, opacity .2s;
}
.pvo-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pvo-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pvo-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   7. HERO (scène générative)
   ================================================================ */
.pvo-hero {
    position: relative;
    background: var(--pvo-night);
    overflow: hidden;
}
.pvo-hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.pvo-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 13, 29, .93) 0%, rgba(4, 13, 29, .6) 45%, rgba(4, 13, 29, .02) 75%);
}
.pvo-hero-in {
    position: relative;
    padding-block: 6rem 5.5rem;
    max-width: 680px;
}
.pvo-hero-in--page { padding-block: 4.5rem 4rem; }
.pvo-hero .pvo-eyebrow { color: #7fb3ff; }
.pvo-hero h1 {
    font-size: clamp(2.1rem, 4.8vw, 3.4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.028em;
    margin: 1rem 0 1.2rem;
    color: #f4f8ff;
    text-wrap: balance;
}
.pvo-hero-sub {
    color: #b8c9e4;
    font-size: 1.08rem;
    max-width: 48ch;
    margin: 0 0 1.9rem;
}
.pvo-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.pvo-hero .pvo-btn-primary { background: #0b69f5; }
.pvo-hero .pvo-btn-primary:hover { background: #0a57cc; }
.pvo-hero .pvo-btn-ghost {
    color: #cfe0fb;
    border-color: rgba(160, 190, 235, .35);
}
.pvo-hero .pvo-btn-ghost:hover { border-color: #cfe0fb; color: #fff; }

/* ================================================================
   8. BANDE DE PREUVES
   ================================================================ */
.pvo-proof {
    background: var(--pvo-card);
    border-bottom: 1px solid var(--pvo-line);
}
.pvo-proof-in {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    align-items: center;
    padding-block: 1.1rem;
}
.pvo-proof-item { display: flex; align-items: baseline; gap: .55rem; }
/* Les partenariats à gauche, l'agrément CII (dernier élément) calé à droite */
.pvo-proof-item:last-child { margin-left: auto; }
.pvo-proof-item .k {
    font: 700 1.25rem var(--pvo-disp);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pvo-proof-item .v {
    font-family: var(--pvo-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pvo-faint);
}
.pvo-proof-item--badge .k { color: var(--pvo-blue); font-size: 1.05rem; }

/* ================================================================
   9. ICÔNES
   ================================================================ */
.pvo-ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--pvo-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.pvo-ico svg {
    width: 24px;
    height: 24px;
    stroke: var(--pvo-blue);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ================================================================
   10. GRILLES DE CARTES
   ================================================================ */
.pvo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.pvo-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.pvo-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }

/* ================================================================
   11. CARTE SERVICE
   ================================================================ */
.pvo-svc {
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-radius: var(--pvo-radius);
    padding: 1.7rem 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.pvo-svc:hover { border-color: var(--pvo-blue); transform: translateY(-3px); }
.pvo-svc .pvo-tag {
    font-family: var(--pvo-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pvo-blue);
    margin-bottom: .6rem;
}
.pvo-svc h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .5rem; }
.pvo-svc p { color: var(--pvo-soft); font-size: .95rem; margin: 0 0 1.2rem; }
.pvo-svc ul { margin: 0 0 1.4rem; font-size: .92rem; }
.pvo-svc li { padding: .5rem 0; border-top: 1px solid var(--pvo-line); color: var(--pvo-ink); }
.pvo-svc .pvo-go { margin-top: auto; font-weight: 600; font-size: .95rem; }
.pvo-go::after { content: " →"; transition: margin .15s; }
.pvo-svc:hover .pvo-go::after { margin-left: .3rem; }

/* ================================================================
   11 bis. SERVICES AU DÉFILEMENT (accueil)
   Au repos (sans JS, mouvement réduit) : trois blocs sur fond nuit.
   .is-pinned (posée par peevo.js) : scène épinglée, un texte à la fois.
   ================================================================ */
.pvo-scroll { background: var(--pvo-night); color: #f4f8ff; }
.pvo-scroll-stage { position: relative; padding-block: 5rem; }
.pvo-scroll-scene, .pvo-scroll-veil, .pvo-scroll-count { display: none; }
.pvo-scroll-head {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    color: #f4f8ff;
    text-wrap: balance;
}
.pvo-scroll-texts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.pvo-scroll-svc {
    background: #081a33;
    border: 1px solid #16304f;
    border-radius: var(--pvo-radius);
    padding: 1.7rem 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
}
.pvo-scroll-still { width: 100%; aspect-ratio: 4 / 3; display: block; margin-bottom: 1.2rem; }
.pvo-scroll-tag {
    font-family: var(--pvo-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6aa8ff;
}
.pvo-scroll-svc h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; margin: .6rem 0 .5rem; text-wrap: balance; }
.pvo-scroll-svc p { color: #b8c9e4; font-size: .95rem; margin: 0 0 1.2rem; max-width: 42ch; }
.pvo-scroll-svc ul { margin: 0 0 1.4rem; border-top: 1px solid #16304f; max-width: 380px; }
.pvo-scroll-svc li { padding: .55rem 0; border-bottom: 1px solid #16304f; font-size: .93rem; color: #dbe6f7; }
.pvo-scroll-svc .pvo-go { margin-top: auto; color: #7fb3ff; font-weight: 600; font-size: .95rem; }
.pvo-scroll-svc .pvo-go:hover { color: #fff; }

/* ---- Épinglé ---- */
.pvo-scroll.is-pinned { height: 340vh; }
.is-pinned .pvo-scroll-stage {
    position: sticky;
    top: var(--pvo-nav-h);
    height: calc(100vh - var(--pvo-nav-h));
    height: calc(100svh - var(--pvo-nav-h));
    min-height: 520px;
    overflow: hidden;
    padding: 0;
}
.is-pinned .pvo-scroll-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.is-pinned .pvo-scroll-veil {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 13, 29, .96) 0%, rgba(4, 13, 29, .75) 34%, rgba(4, 13, 29, 0) 58%);
}
.is-pinned .pvo-scroll-in {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 440px) 1fr;
    align-items: center;
}
.is-pinned .pvo-scroll-head {
    font-family: var(--pvo-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7fb3ff;
    margin-bottom: 1.4rem;
}
.pvo-scroll-steps[hidden] { display: none; }
.pvo-scroll-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 2rem; }
.pvo-scroll-steps button {
    position: relative;
    background: none;
    border: 0;
    padding: .65rem 0 0;
    text-align: left;
    cursor: pointer;
    font: 400 .68rem var(--pvo-mono);
    letter-spacing: .06em;
    color: #6f8bb3;
    transition: color .3s;
}
.pvo-scroll-steps button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #16304f; }
.pvo-scroll-bar { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--pvo-electric); }
.pvo-scroll-steps button.is-on { color: #cfe0fb; }
.pvo-scroll-steps button:focus-visible { outline: 2px solid var(--pvo-electric); outline-offset: 4px; }
.is-pinned .pvo-scroll-texts { grid-template-columns: 1fr; gap: 0; margin: 0; }
.is-pinned .pvo-scroll-svc h3 {
    font-size: clamp(1.7rem, 3.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.022em;
    margin: .5rem 0 .9rem;
}
.is-pinned .pvo-scroll-svc p { font-size: 1rem; }
.is-pinned .pvo-scroll-svc {
    grid-area: 1 / 1;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .45s, transform .45s, visibility 0s .45s;
}
.is-pinned .pvo-scroll-svc.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .45s; }
.is-pinned .pvo-scroll-count {
    display: block;
    position: absolute;
    right: 1.4rem;
    bottom: 1.6rem;
    font-family: var(--pvo-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    color: #6f8bb3;
}

/* ---- Variante papier clair, retenue le 09/10/2026 pour ne pas répéter le
   hero sombre (sans la classe pvo-scroll--light : fond nuit) ---- */
.pvo-scroll--light { background: var(--pvo-paper); color: var(--pvo-ink); }
.pvo-scroll--light .pvo-scroll-head { color: var(--pvo-ink); }
.pvo-scroll--light:not(.is-pinned) .pvo-scroll-svc { background: var(--pvo-card); border-color: var(--pvo-line); }
.pvo-scroll--light .pvo-scroll-tag,
.pvo-scroll--light.is-pinned .pvo-scroll-head { color: var(--pvo-blue); }
.pvo-scroll--light .pvo-scroll-svc p { color: var(--pvo-soft); }
.pvo-scroll--light .pvo-scroll-svc ul { border-top-color: var(--pvo-line); }
.pvo-scroll--light .pvo-scroll-svc li { border-bottom-color: var(--pvo-line); color: var(--pvo-ink); }
.pvo-scroll--light .pvo-scroll-svc .pvo-go { color: var(--pvo-blue); }
.pvo-scroll--light .pvo-scroll-svc .pvo-go:hover { color: var(--pvo-blue-hover); }
.pvo-scroll--light .pvo-scroll-steps button { color: var(--pvo-faint); }
.pvo-scroll--light .pvo-scroll-steps button::before { background: var(--pvo-line); }
.pvo-scroll--light .pvo-scroll-steps button.is-on { color: var(--pvo-ink); }
.pvo-scroll--light .pvo-scroll-count { color: var(--pvo-faint); }
.pvo-scroll--light.is-pinned .pvo-scroll-veil {
    background: linear-gradient(90deg, rgba(245, 247, 251, .97) 0%, rgba(245, 247, 251, .8) 34%, rgba(245, 247, 251, 0) 58%);
}

/* Bloc de contenu simple (missions, modalités…) */
.pvo-block {
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-radius: var(--pvo-radius);
    padding: 1.6rem;
}
.pvo-block h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 .6rem; letter-spacing: -.01em; }
.pvo-block p { color: var(--pvo-soft); font-size: .94rem; margin: 0 0 .8rem; }
.pvo-block ul { font-size: .93rem; }
.pvo-block li {
    padding: .45rem 0;
    border-top: 1px solid var(--pvo-line);
    color: var(--pvo-soft);
}
.pvo-block li:first-child { border-top: 0; padding-top: 0; }

/* Bloc mis en avant (porte d'entrée) */
.pvo-feature {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-left: 4px solid var(--pvo-blue);
    border-radius: var(--pvo-radius);
    padding: 2.2rem 2rem;
}
.pvo-feature h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: .4rem 0 .8rem; letter-spacing: -.015em; }
.pvo-feature p { color: var(--pvo-soft); }
.pvo-steps { display: grid; gap: .55rem; counter-reset: pvostep; }
.pvo-steps li {
    counter-increment: pvostep;
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: .7rem;
    align-items: baseline;
    font-size: .94rem;
    color: var(--pvo-soft);
}
.pvo-steps li::before {
    content: counter(pvostep);
    font: 600 .75rem var(--pvo-mono);
    color: var(--pvo-blue);
    border: 1px solid var(--pvo-line);
    border-radius: 6px;
    padding: .2rem 0;
    text-align: center;
}

/* ================================================================
   12. BANDEAU CII
   ================================================================ */
.pvo-cii {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
        linear-gradient(115deg, #003c8d 0%, #0a58d0 70%, #1e6ef0 100%);
    color: #fff;
    overflow: hidden;
}
.pvo-cii-in {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 2rem;
    align-items: center;
    padding-block: 3.2rem;
}
.pvo-cii .pvo-eyebrow { color: #a8cbff; }
.pvo-cii h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    margin: .5rem 0 .8rem;
    text-wrap: balance;
}
.pvo-cii p { color: #cfe0fb; max-width: 54ch; margin: 0 0 1.4rem; font-size: .98rem; }
.pvo-cii .pvo-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.pvo-cii .pvo-btn-ghost:hover { border-color: #fff; }
.pvo-cii-year {
    font-family: var(--pvo-mono);
    font-weight: 700;
    font-size: clamp(4rem, 11vw, 8.5rem);
    line-height: 1;
    text-align: right;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .55);
    letter-spacing: -.04em;
}
.pvo-cii-year small {
    display: block;
    font-size: .8rem;
    letter-spacing: .22em;
    color: #a8cbff;
    -webkit-text-stroke: 0;
    margin-top: .6rem;
    text-transform: uppercase;
}

/* ================================================================
   13. SECTION « CONCRÈTEMENT » + SCHÉMA
   ================================================================ */
.pvo-how-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
}
/* Points clés : une coche dans une pastille, une ligne par point, le texte
   reste aligné sur lui-même quand il passe à la ligne */
.pvo-pts { list-style: none; margin: 0; padding: 0; font-size: .95rem; border-top: 1px solid var(--pvo-line); }
.pvo-pts li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: .75rem;
    align-items: start;
    padding: .7rem 0;
    border-bottom: 1px solid var(--pvo-line);
    color: var(--pvo-soft);
}
.pvo-pts li::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    border-radius: 50%;
    background: var(--pvo-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23004aad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .7rem no-repeat;
}

.pvo-schema { min-width: 0; }
.pvo-schema-cap {
    font-family: var(--pvo-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--pvo-faint);
    text-transform: uppercase;
    margin-top: .6rem;
    text-align: right;
}

/* Journal d'exécution d'un flux (_include/journal.html.twig) */
.pvo-journal {
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-radius: 12px;
    padding: 1.3rem 1.4rem .9rem;
}
.pvo-journal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.pvo-journal-name { font-weight: 600; font-size: .95rem; }
.pvo-journal-name small {
    display: block;
    font: 400 .72rem var(--pvo-mono);
    color: var(--pvo-faint);
    letter-spacing: .04em;
}
.pvo-state {
    font: 600 .68rem var(--pvo-mono);
    letter-spacing: .06em;
    padding: .2rem .6rem;
    border-radius: 99px;
    white-space: nowrap;
}
.pvo-state--ok { color: var(--pvo-ok); background: #e5f3ec; }
.pvo-state--ok::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: .4rem;
    vertical-align: 1px;
}
.pvo-journal-log {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pvo-line);
    font: 400 .78rem/1.5 var(--pvo-mono);
}
.pvo-journal-log li {
    display: grid;
    grid-template-columns: 4.4rem 1rem 1fr;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--pvo-line);
    color: var(--pvo-soft);
    transition: opacity .35s, transform .35s;
}
.pvo-journal-log li:last-child { border-bottom: 0; }
.pvo-journal-log .t { color: var(--pvo-faint); font-variant-numeric: tabular-nums; }
.pvo-journal-log .s { font-weight: 600; text-align: center; }
.pvo-journal-log .m b { font-weight: 600; color: var(--pvo-ink); }
.pvo-journal-log .is-go .s { color: var(--pvo-electric); }
.pvo-journal-log .is-ok .s { color: var(--pvo-ok); }
.pvo-journal-log .is-warn { background: #fbf0dd; margin-inline: -.5rem; padding-inline: .5rem; border-radius: 4px; }
.pvo-journal-log .is-warn .s, .pvo-journal-log .is-warn .m { color: #8a4e06; }
/* Écriture ligne à ligne : uniquement quand le JS tourne, au repos tout est visible */
.pvo-journal-log li.is-wait { opacity: 0; transform: translateY(4px); }

/* ================================================================
   14. BANDE PRODUITS (navy)
   ================================================================ */
.pvo-band { background: var(--pvo-band); color: var(--pvo-band-ink); }
.pvo-band .pvo-eyebrow { color: #4f95ff; }
.pvo-band .pvo-lede { color: var(--pvo-band-soft); }
.pvo-band h2 { color: var(--pvo-band-ink); }

.pvo-prod {
    background: var(--pvo-band-card);
    border: 1px solid var(--pvo-band-line);
    border-radius: var(--pvo-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.pvo-prod:hover { border-color: var(--pvo-electric); transform: translateY(-3px); }
.pvo-prod-viz {
    height: 96px;
    background: #07203f;
    border-bottom: 1px solid var(--pvo-band-line);
}
.pvo-prod-viz svg { width: 100%; height: 100%; display: block; }
.pvo-prod-body {
    padding: 1.3rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}
.pvo-prod-dom {
    font-family: var(--pvo-mono);
    font-size: .7rem;
    color: var(--pvo-band-soft);
    letter-spacing: .06em;
}
.pvo-prod h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--pvo-band-ink); }
.pvo-prod-pitch { color: var(--pvo-band-soft); font-size: .93rem; flex: 1; margin: 0; }
.pvo-prod-lnk { color: #5c9dff; font-weight: 600; font-size: .92rem; }
.pvo-prod:hover .pvo-prod-lnk { color: #9ec8ff; }

/* ================================================================
   15. ÉTUDES DE CAS
   ================================================================ */
.pvo-case {
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-radius: var(--pvo-radius);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
}
.pvo-case-sect {
    font-family: var(--pvo-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pvo-faint);
    margin-bottom: .7rem;
}
.pvo-case h3 { font-size: 1.15rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
.pvo-case p { color: var(--pvo-soft); font-size: .93rem; margin: 0 0 1rem; }
.pvo-case-res { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: auto; }
.pvo-case-res div { font-variant-numeric: tabular-nums; }
.pvo-case-res .k {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--pvo-blue);
    display: block;
    letter-spacing: -.02em;
}
.pvo-case-res .v { font-size: .78rem; color: var(--pvo-faint); }
.pvo-case-tech {
    font-family: var(--pvo-mono);
    font-size: .72rem;
    color: var(--pvo-faint);
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--pvo-line);
}
.pvo-center-link { text-align: center; margin-top: 2rem; }

/* Filtres */
.pvo-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.pvo-filter {
    font: 600 .82rem var(--pvo-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 99px;
    border: 1px solid var(--pvo-line);
    background: var(--pvo-card);
    color: var(--pvo-soft);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pvo-filter:hover { border-color: var(--pvo-blue); color: var(--pvo-blue); }
.pvo-filter[aria-pressed="true"] {
    background: var(--pvo-blue);
    border-color: var(--pvo-blue);
    color: #fff;
}
.pvo-case[hidden] { display: none; }

/* ================================================================
   16. CONTACT
   ================================================================ */
.pvo-contact { background: var(--pvo-card); border-top: 1px solid var(--pvo-line); }
.pvo-contact-in {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 3.5rem;
    padding-block: 5rem;
}
.pvo-coords { display: grid; gap: 1rem; margin-top: 2rem; font-size: .95rem; }
.pvo-coords .c { display: grid; gap: .1rem; }
.pvo-coords .l {
    font-family: var(--pvo-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pvo-faint);
}
.pvo-contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.pvo-rgpd { font-size: .78rem; color: var(--pvo-faint); }
.pvo-rgpd a, .pvo-form-alert a { text-decoration: underline; text-underline-offset: 2px; }

/* Formulaire de /contact */
.pvo-form-grid {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 3.5rem;
    align-items: start;
}
.pvo-form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.pvo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.pvo-field { display: grid; gap: .35rem; }
.pvo-field label { font-weight: 600; font-size: .9rem; color: var(--pvo-ink); }
.pvo-field label .opt {
    font: 400 .66rem var(--pvo-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pvo-faint);
    margin-left: .35rem;
}
.pvo-field input,
.pvo-field select,
.pvo-field textarea {
    width: 100%;
    font: 400 1rem/1.5 var(--pvo-disp);
    color: var(--pvo-ink);
    background: var(--pvo-card);
    border: 1px solid var(--pvo-line);
    border-radius: 6px;
    padding: .65rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}
.pvo-field textarea { resize: vertical; min-height: 9rem; }
.pvo-field input:focus,
.pvo-field select:focus,
.pvo-field textarea:focus {
    outline: none;
    border-color: var(--pvo-electric);
    box-shadow: 0 0 0 3px rgba(14, 111, 255, .18);
}
.pvo-field.is-err input,
.pvo-field.is-err select,
.pvo-field.is-err textarea { border-color: var(--pvo-err); }
.pvo-field-err { margin: 0; font-size: .82rem; color: var(--pvo-err); }
/* Erreurs globales (jeton CSRF expiré) rendues par form_errors(form) */
.pvo-form > ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--pvo-err); }
.pvo-form-alert {
    margin: 1.4rem 0 0;
    padding: .8rem 1rem;
    border-left: 3px solid var(--pvo-err);
    background: #fdf1f1;
    font-size: .92rem;
}
.pvo-form-ok {
    margin-top: 1.6rem;
    padding: 1.6rem;
    border: 1px solid var(--pvo-line);
    border-left: 3px solid var(--pvo-ok);
    border-radius: var(--pvo-radius);
    background: var(--pvo-card);
}
.pvo-form-ok h3 { margin: 0 0 .4rem; color: var(--pvo-ok); }
.pvo-form-ok p { margin: 0 0 1rem; }
.pvo-form-foot { display: grid; gap: .9rem; justify-items: start; margin-top: .4rem; }
.pvo-form-foot .pvo-rgpd { margin: 0; }
/* Honeypot : hors écran plutôt que display:none, que certains robots repèrent */
.pvo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================================================================
   17. FOOTER
   ================================================================ */
.pvo-footer {
    background: var(--pvo-band);
    color: var(--pvo-band-soft);
    font-size: .88rem;
}
.pvo-footer a { color: var(--pvo-band-soft); }
.pvo-footer a:hover { color: var(--pvo-band-ink); }
.pvo-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 3rem 0 2.2rem;
}
.pvo-footer h2 {
    font-family: var(--pvo-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pvo-band-ink);
    margin: 0 0 .9rem;
    font-weight: 600;
}
.pvo-footer li { padding: .2rem 0; }
.pvo-footer-tag { margin: 1rem 0 0; max-width: 34ch; }
.pvo-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    justify-content: space-between;
    padding: 1.2rem 0;
    border-top: 1px solid var(--pvo-band-line);
    font-size: .82rem;
}

/* ================================================================
   19. RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
    .pvo-nav-toggle { display: flex; }
    .pvo-nav-links {
        position: absolute;
        top: var(--pvo-nav-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        gap: 0;
        background: var(--pvo-card);
        border-bottom: 1px solid var(--pvo-line);
        padding: .5rem 1.4rem 1.2rem;
    }
    .pvo-nav-links.is-open { display: flex; }
    .pvo-nav-links a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--pvo-line); }

    .pvo-hero-in { padding-block: 3.5rem 4rem; }

    .pvo-grid-3, .pvo-grid-2, .pvo-grid-4 { grid-template-columns: 1fr; }
    .pvo-scroll-texts { grid-template-columns: 1fr; }
    .pvo-scroll-stage { padding-block: 3.5rem; }
    /* Épinglé sur mobile : course plus courte (un geste du pouce par service),
       texte en haut, scène en dessous, listes masquées */
    .pvo-scroll.is-pinned { height: 250vh; height: 250svh; }
    .is-pinned .pvo-scroll-in { grid-template-columns: 1fr; align-items: start; padding-top: 1.6rem; }
    .is-pinned .pvo-scroll-veil { background: linear-gradient(180deg, rgba(4, 13, 29, .97) 0%, rgba(4, 13, 29, .9) 38%, rgba(4, 13, 29, 0) 54%); }
    .pvo-scroll--light.is-pinned .pvo-scroll-veil { background: linear-gradient(180deg, rgba(245, 247, 251, .97) 0%, rgba(245, 247, 251, .9) 38%, rgba(245, 247, 251, 0) 54%); }
    .is-pinned .pvo-scroll-head { margin-bottom: 1rem; }
    .is-pinned .pvo-scroll-svc p { font-size: .93rem; margin-bottom: .9rem; }
    .is-pinned .pvo-scroll-svc ul { display: none; }
    .pvo-scroll-steps { margin-bottom: 1.2rem; }
    .pvo-how-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pvo-cii-in { grid-template-columns: 1fr; }
    .pvo-cii-year { text-align: left; }
    .pvo-feature { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.6rem 1.4rem; }
    .pvo-contact-in { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.5rem; }
    .pvo-form-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .pvo-form-row { grid-template-columns: 1fr; }
    .pvo-footer-top { grid-template-columns: 1fr 1fr; }
    .pvo-section { padding: 3.5rem 0; }
}

@media (max-width: 560px) {
    .pvo-footer-top { grid-template-columns: 1fr; }
    .pvo-proof-in { gap: .9rem 2rem; }
    .pvo-journal { padding-inline: 1rem; }
    .pvo-journal-log li { grid-template-columns: 3.9rem .8rem 1fr; gap: .4rem; font-size: .74rem; }
}

/* ================================================================
   20. MOUVEMENT RÉDUIT
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pvo-svc:hover, .pvo-prod:hover { transform: none; }
    .pvo-scroll-svc, .pvo-scroll-steps button { transition: none; }
}

/* ================================================================
   21. IMPRESSION
   ================================================================ */
@media print {
    .pvo-nav, .pvo-hero canvas, .pvo-scroll-still { display: none; }
    body { background: #fff; }
}