/* ============================================================================
   Réalisations — second part of the site. Deep blood reds, pale red accents and
   black line work over the 3D stage. The section fades in from the glass scene
   at the top and back into it at the bottom, where the contact chapter begins.
   ============================================================================ */
.portfolio {
    --pf-blood-900: #03050c;
    --pf-blood-800: #060a18;
    --pf-blood-700: #0a1128;
    --pf-blood-600: #0f1a3e;
    --pf-blood-500: #16245a;
    --pf-blood-400: #2b44b8;
    --pf-red: #3d5af1;
    --pf-red-light: #9fd0ff;
    --pf-red-pale: #c9e4ff;
    --pf-text: #eef3ff;
    --pf-text-soft: #b9c7e6;
    --pf-line: rgba(159, 208, 255, 0.2);
    --pf-line-soft: rgba(159, 208, 255, 0.05);
    --pf-ease: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; z-index: 8; isolation: isolate;
    padding: 0 60px;
    color: var(--pf-text);
    overflow: hidden;
}

/* ---- Background: blood gradient, glows, black grid, black slashes, grain ---- */
.pf-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* every layer (grain and glows included) rises out of the 3D scene at the top; at the
       bottom the reds sink into the black of Méthode / Formules / FAQ */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18vh);
    mask-image: linear-gradient(180deg, transparent 0, #000 18vh);
}
.pf-bg-base {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0,
        var(--pf-blood-900) 16vh,
        var(--pf-blood-700) 34vh,
        var(--pf-blood-600) 50%,
        var(--pf-blood-700) calc(100% - 60vh),
        var(--pf-blood-900) calc(100% - 24vh),
        #05060b 100%);
}
.pf-glow {
    /* Soft by its gradient alone: a 90px blur filter on these drifting layers cost frames. */
    position: absolute; border-radius: 50%; opacity: 0.55;
    background: radial-gradient(closest-side, var(--pf-blood-400), color-mix(in srgb, var(--pf-blood-400) 35%, transparent) 45%, transparent);
    animation: pf-drift 26s ease-in-out infinite alternate;
}
.pf-glow.g1 { width: 70vw; height: 60vh; right: -20vw; top: 30vh; }
.pf-glow.g2 { width: 60vw; height: 70vh; left: -25vw; top: 44%; animation-duration: 34s; opacity: 0.4; }
.pf-glow.g3 { width: 50vw; height: 50vh; right: 10vw; bottom: 34vh; animation-duration: 30s; opacity: 0.35; }
@keyframes pf-drift { to { transform: translate3d(6vw, -4vh, 0) scale(1.12); } }
.pf-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--pf-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--pf-line-soft) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(180deg, transparent 10vh, #000 34vh, #000 calc(100% - 60vh), transparent calc(100% - 30vh));
    mask-image: linear-gradient(180deg, transparent 10vh, #000 34vh, #000 calc(100% - 60vh), transparent calc(100% - 30vh));
}
.pf-slashes { position: absolute; left: 0; width: 100%; height: 48vh; overflow: visible; }
.pf-slashes.s1 { top: 22vh; }
.pf-slashes.s2 { top: 52%; }
.pf-slashes path {
    fill: none; stroke: #000; stroke-linecap: square;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.6s var(--pf-ease);
}
.pf-slashes path.thin { stroke-width: 1.2; opacity: 0.8; }
.pf-slashes path.mid { stroke-width: 3; opacity: 0.75; }
.pf-slashes path.bold { stroke-width: 16; opacity: 0.7; }
.pf-slashes path.red { stroke: var(--pf-red-light); stroke-width: 1.2; opacity: 0.55; }
.pf-slashes.is-in path { stroke-dashoffset: 0; }
.pf-slashes.is-in path:nth-child(2) { transition-delay: 0.2s; }
.pf-slashes.is-in path:nth-child(3) { transition-delay: 0.35s; }
.pf-slashes.is-in path:nth-child(4) { transition-delay: 0.5s; }
/* Giant outlined word sliding with the scroll */
.pf-marquee {
    position: absolute; left: 0; top: 30vh; z-index: -1; pointer-events: none;
    white-space: nowrap; will-change: transform;
    font: 500 clamp(140px, 21vw, 420px)/0.82 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.16), 0 0 120px rgba(200, 225, 255, 0.12);
}
.pf-marquee span + span { margin-left: 0.4em; }

.pf-inner { position: relative; width: 100%; max-width: 1760px; margin: 0 auto; padding: 46vh 0 22vh; }

/* ---- Reveal helper ---- */
.portfolio [data-reveal] {
    opacity: 0; transform: translateY(46px);
    transition: opacity 1.1s var(--pf-ease), transform 1.3s var(--pf-ease);
}
.portfolio [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Section head ---- */
.pf-head {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px clamp(40px, 6vw, 120px); align-items: end;
    margin-bottom: clamp(90px, 12vw, 190px);
}
.pf-eyebrow {
    display: flex; align-items: center; gap: 14px; margin-bottom: 44px;
    font: 500 11px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pf-red-pale);
}
.pf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-red-light); box-shadow: 0 0 0 4px rgba(159, 208, 255, 0.16), 0 0 18px rgba(159, 208, 255, 0.8); position: relative; }
/* pulse drawn by a halo that only scales and fades (compositor), not by an animated shadow */
.pf-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 208, 255, 0.5), transparent); animation: pf-pulse 2.4s ease-in-out infinite; }
@keyframes pf-pulse { 50% { transform: scale(1.5); opacity: 0.35; } }
.pf-title {
    font-size: clamp(56px, 7.4vw, 132px); line-height: 0.96; letter-spacing: -0.045em; font-weight: 400;
    color: var(--pf-text);
}
.pf-title .line { display: block; overflow: hidden; white-space: nowrap; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.pf-title .line.muted { color: var(--pf-red-light); }
.pf-head.is-in .pf-title .line-inner { transform: none; opacity: 1; filter: blur(0); }
.pf-lead { font-size: 17px; line-height: 1.75; font-weight: 300; color: var(--pf-text-soft); max-width: 46ch; }

/* ---- Project: browser mock-up with a live site, case study beside it ---- */
.pf-list { display: grid; }
.pf-project {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: clamp(40px, 5vw, 100px); align-items: center;
    padding: clamp(80px, 9vw, 150px) 0;
    border-top: 1px solid var(--pf-line);
}
.pf-project.pf-flip { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
.pf-project.pf-flip .pf-media { order: 2; }
.pf-project::before {                      /* black rule that draws in under the border */
    content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: #000;
    transition: width 1.6s var(--pf-ease);
}
.pf-project.is-in::before { width: 34%; }
.pf-flip.is-in::before { left: auto; right: 0; }
.pf-index {
    position: absolute; top: clamp(18px, 2vw, 34px); right: 0; z-index: 0; pointer-events: none;
    font: 500 clamp(110px, 13vw, 240px)/0.8 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: -0.07em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.68);
}
.pf-flip .pf-index { right: auto; left: 0; }
.pf-media { position: relative; z-index: 1; perspective: 1800px; }
.pf-browser {
    position: relative; border-radius: 16px; overflow: hidden; background: #050001;
    border: 1px solid rgba(159, 208, 255, 0.26);
    box-shadow: 0 0 0 1px #000, 0 60px 120px -34px rgba(0, 0, 0, 0.9), 0 0 140px -30px rgba(61, 90, 241, 0.7);
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.9s var(--pf-ease), box-shadow 0.6s;
    will-change: transform;
}
.pf-media:hover .pf-browser { box-shadow: 0 0 0 1px #000, 0 70px 140px -34px rgba(0, 0, 0, 0.95), 0 0 160px -20px rgba(61, 90, 241, 0.75); }
.pf-bar {
    display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px;
    background: linear-gradient(180deg, #140205, #060914); border-bottom: 1px solid #000;
}
.pf-dots { display: flex; gap: 7px; flex: none; }
.pf-dots i { width: 10px; height: 10px; border-radius: 50%; background: #240407; border: 1px solid rgba(159, 208, 255, 0.32); }
.pf-dots i:first-child { background: var(--pf-red); border-color: var(--pf-red); }
.pf-url {
    flex: 1; min-width: 0; max-width: 440px; margin: 0 auto; padding: 6px 14px; border-radius: 999px;
    border: 1px solid rgba(159, 208, 255, 0.13); background: rgba(255, 255, 255, 0.025);
    font-size: 11px; letter-spacing: 0.06em; color: rgba(201, 228, 255, 0.72); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-live { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pf-red-light); }
.pf-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-red-light); animation: pf-blink 1.6s ease-in-out infinite; }
@keyframes pf-blink { 50% { opacity: 0.25; } }

.pf-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #060914; }
.pf-poster, .pf-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pf-poster { transition: opacity 0.9s ease 0.15s; }
.pf-screen.is-live .pf-poster { opacity: 0; }
.pf-screen iframe {
    position: absolute; top: 0; left: 0; z-index: 1; border: 0; display: block; background: #000;
    width: 1440px; height: 900px; transform: scale(var(--pf-scale, 0.5)); transform-origin: 0 0;
    pointer-events: none; opacity: 0; transition: opacity 0.9s ease;
}
.pf-screen.is-live iframe { opacity: 1; }
.pf-loading {
    position: absolute; left: 0; top: 0; z-index: 2; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--pf-red-light), transparent); background-size: 40% 100%; background-repeat: no-repeat;
    opacity: 0; transition: opacity 0.4s;
}
.pf-screen.is-loading .pf-loading { opacity: 1; animation: pf-load 1.2s linear infinite; }
@keyframes pf-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.pf-open {
    position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 22px; margin: 0;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    background: linear-gradient(180deg, rgba(10, 0, 2, 0) 52%, rgba(10, 0, 2, 0.72));
    color: #ffffff; font: inherit; text-align: left;
    opacity: 0; transition: opacity 0.5s ease;
}
.pf-screen:hover .pf-open, .pf-open:focus-visible { opacity: 1; }
.pf-open:focus-visible { outline: 2px solid var(--pf-red-light); outline-offset: -4px; }
.pf-open-pill {
    display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 999px;
    background: #000000; border: 1px solid var(--pf-red-light); color: var(--pf-red-pale);
    font: 500 11px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
    transform: translateY(10px); transition: transform 0.6s var(--pf-ease), background 0.3s, color 0.3s;
}
.pf-screen:hover .pf-open-pill { transform: none; }
.pf-open:hover .pf-open-pill { background: var(--pf-red-light); color: #000000; }
.pf-open-hint { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(220, 235, 255, 0.7); }

/* Case study */
.pf-info { position: relative; z-index: 1; }
.pf-kicker {
    display: flex; align-items: center; gap: 12px;
    font: 500 11px/1.4 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pf-red-light);
}
.pf-kicker::before { content: ''; width: 30px; height: 2px; background: #000000; flex: none; }
.pf-name { margin: 20px 0 24px; font-size: clamp(46px, 4.8vw, 84px); line-height: 0.94; letter-spacing: -0.045em; font-weight: 400; color: var(--pf-text); }
.pf-name em { font-style: normal; color: var(--pf-red-light); }
.pf-pitch { font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--pf-text-soft); }
.pf-features { list-style: none; margin: 30px 0 26px; border-top: 1px solid var(--pf-line); }
.pf-features li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--pf-line); font-size: 14px; line-height: 1.5; color: #ffe1e3; }
.pf-features li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 6px; transform: rotate(45deg); background: #000000; border: 1px solid var(--pf-red-light); }
/* The project told as a story: the challenge, the answer, what it changes */
.pf-story { margin: 28px 0 28px; border-top: 1px solid var(--pf-line); }
.pf-story > div { position: relative; display: grid; gap: 8px; padding: 18px 0 18px 0; border-bottom: 1px solid var(--pf-line); }
.pf-story dt {
    display: flex; align-items: baseline; gap: 12px;
    font: 500 11px/1.4 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pf-red-pale);
}
.pf-story dt span { color: var(--pf-red-light); letter-spacing: 0.1em; }
.pf-story dd { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--pf-text-soft); }
.pf-story .is-result { padding-left: 18px; }
.pf-story .is-result::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: #000000; box-shadow: 1px 0 0 rgba(159, 208, 255, 0.5); }
.pf-story .is-result dd { color: #ffffff; font-weight: 400; }
.pf-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-stack li { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.72); background: rgba(0, 0, 0, 0.3); font-size: 11px; letter-spacing: 0.1em; color: var(--pf-red-pale); }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 36px; }
.pf-disclaimer { margin-top: 18px; font-size: 12px; line-height: 1.6; font-style: italic; color: var(--pf-text-soft); opacity: 0.85; }
.pf-btn {
    display: inline-flex; align-items: center; gap: 16px; padding: 17px 26px; border-radius: 999px;
    background: #000000; border: 1px solid #000000; color: #ffffff; text-decoration: none;
    font: 500 13px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.02em;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.35s var(--pf-ease);
}
.pf-btn .arrow { color: var(--pf-red-light); transition: color 0.3s, transform 0.45s var(--pf-ease); }
.pf-btn:hover { background: var(--pf-red-light); border-color: var(--pf-red-light); color: #000000; transform: translateY(-2px); }
.pf-btn:hover .arrow { color: #000000; transform: translate(2px, -2px); }
.pf-link {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--pf-red-pale);
    padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.65); transition: color 0.3s, border-color 0.3s;
}
.pf-link:hover { color: #ffffff; border-color: var(--pf-red-light); }

/* ---- Reserved slot: room for the next project ---- */
.pf-slot { border-bottom: 1px solid var(--pf-line); }
.pf-slot-frame {
    position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
    border: 2px dashed rgba(0, 0, 0, 0.7);
    background:
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 22px),
        radial-gradient(80% 70% at 50% 40%, rgba(61, 90, 241, 0.35), rgba(4, 7, 18, 0.5));
    display: grid; place-items: center; text-align: center;
}
.pf-slot-frame::before, .pf-slot-frame::after { content: ''; position: absolute; background: #000000; }
.pf-slot-frame::before { left: 50%; top: 50%; width: 2px; height: 120px; transform: translate(-50%, -50%); }
.pf-slot-frame::after { left: 50%; top: 50%; width: 120px; height: 2px; transform: translate(-50%, -50%); }
.pf-slot-label {
    position: absolute; left: 0; right: 0; bottom: 26px;
    font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pf-red-pale);
}
.pf-slot-corner { position: absolute; width: 22px; height: 22px; border-color: var(--pf-red-light); border-style: solid; border-width: 0; }
.pf-slot-corner.tl { left: 18px; top: 18px; border-left-width: 1px; border-top-width: 1px; }
.pf-slot-corner.tr { right: 18px; top: 18px; border-right-width: 1px; border-top-width: 1px; }
.pf-slot-corner.bl { left: 18px; bottom: 18px; border-left-width: 1px; border-bottom-width: 1px; }
.pf-slot-corner.br { right: 18px; bottom: 18px; border-right-width: 1px; border-bottom-width: 1px; }

/* ---- Fullscreen viewer ---- */
html.viewer-open, html.viewer-open body { overflow: hidden; }
.pf-viewer {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    background: radial-gradient(120% 90% at 50% 0%, #3d050c 0%, #0b0102 62%);
    color: #eef3ff; opacity: 0; transition: opacity 0.45s ease;
}
.pf-viewer[hidden] { display: none; }
.pf-viewer.is-open { opacity: 1; }
.pf-viewer-bar {
    display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 10px 22px;
    border-bottom: 1px solid #000000; background: rgba(12, 1, 3, 0.85);
}
.pf-viewer-index { font-size: 11px; letter-spacing: 0.2em; color: var(--pf-red-light, #9fd0ff); }
.pf-viewer-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-devices { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(159, 208, 255, 0.25); background: #000000; }
.pf-devices button {
    border: 0; background: transparent; color: #b9c7e6; padding: 8px 14px; border-radius: 999px;
    font: 500 11px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
}
.pf-devices button[aria-pressed="true"] { background: #9fd0ff; color: #000000; }
.pf-viewer-tab, .pf-viewer-close {
    display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 999px;
    border: 1px solid rgba(159, 208, 255, 0.3); background: transparent; color: #ffffff; text-decoration: none;
    font: 500 12px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pf-viewer-close { width: 38px; padding: 0; justify-content: center; font-size: 16px; }
.pf-viewer-tab:hover, .pf-viewer-close:hover { background: #9fd0ff; border-color: #9fd0ff; color: #000000; }
.pf-viewer-stage { position: relative; display: grid; place-items: center; padding: 18px; min-height: 0; }
.pf-viewer-frame {
    position: relative; width: 100%; height: 100%; overflow: hidden; background: #000000;
    border-radius: 12px; border: 1px solid rgba(159, 208, 255, 0.22);
    box-shadow: 0 0 0 1px #000000, 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(61, 90, 241, 0.8);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.6s;
}
.pf-viewer.is-mobile .pf-viewer-frame {
    width: min(390px, 100%); height: min(844px, 100%); border-radius: 38px;
    border: 10px solid #000000; outline: 1px solid rgba(159, 208, 255, 0.35);
}
.pf-viewer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #ffffff; }
.pf-viewer-loading {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
    background: #0b0102; transition: opacity 0.6s ease;
    font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #c9e4ff;
}
.pf-viewer.is-loaded .pf-viewer-loading { opacity: 0; }

/* ---- Picture tour (single file): captures in the viewer and in the card on hover ---- */
.pf-tour-view {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 14px; background: #0b0102; scrollbar-width: thin; scrollbar-color: #9fd0ff #0b0102;
}
.pf-tour-view:focus-visible { outline: 2px solid var(--pf-red-light, #9fd0ff); outline-offset: -2px; }
.pf-tour-view figure { position: relative; margin: 0 0 14px; }
.pf-tour-view img { display: block; width: 100%; height: auto; border-radius: 6px; background: #1a0306; }
.pf-tour-chip {
    position: absolute; left: 12px; top: 12px; padding: 7px 12px; border-radius: 999px;
    border: 1px solid rgba(159, 208, 255, 0.35); background: rgba(10, 0, 2, 0.86); color: #ffd9dc;
    font: 500 11px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
}
.pf-tour-end { padding: 26px 16px 34px; text-align: center; color: #b9c7e6; font-size: 14px; line-height: 1.6; }
.pf-tour-end p { max-width: 42ch; margin: 0 auto 18px; }
.pf-viewer.is-mobile .pf-tour-view { padding: 0; }
.pf-viewer.is-mobile .pf-tour-view figure { margin-bottom: 8px; }
.pf-viewer.is-mobile .pf-tour-view img { border-radius: 0; }
.pf-strip { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: opacity 0.6s ease; will-change: transform; }
.pf-strip img { display: block; width: 100%; height: auto; }
.pf-screen.is-touring .pf-strip { opacity: 1; }
.pf-screen.is-touring .pf-poster { opacity: 0; }

/* ---- Touch screens: the call to action stays visible ---- */
@media (hover: none), (pointer: coarse) {
    .pf-open { opacity: 1; background: linear-gradient(180deg, rgba(10, 0, 2, 0) 60%, rgba(10, 0, 2, 0.7)); }
    .pf-open-pill { transform: none; }
    .pf-open-hint { display: none; }
}

/* ---- Narrow screens: stacked case studies, phone mock-ups ---- */
@media (max-width: 1100px) {
    .pf-head { grid-template-columns: 1fr; }
    .pf-project, .pf-project.pf-flip { grid-template-columns: 1fr; gap: 44px; }
    .pf-project.pf-flip .pf-media { order: 0; }
    .pf-index { top: 26px; }
}
@media (max-width: 900px) {
    .portfolio { padding: 0 24px; }
    .pf-inner { padding: 40vh 0 18vh; }
    .pf-title { font-size: clamp(44px, 12vw, 96px); }
    .pf-eyebrow { margin-bottom: 30px; }
    .pf-meta span { margin: 0 0 0 12px; }
    .pf-grid { background-size: 72px 72px; }
    .pf-viewer-bar { gap: 10px; padding: 10px 14px; }
    .pf-devices, .pf-viewer-tab .tab-label { display: none; }
    .pf-viewer-stage { padding: 0; }
    .pf-viewer-frame, .pf-viewer.is-mobile .pf-viewer-frame { width: 100%; height: 100%; border-radius: 0; border: 0; outline: 0; }
}
@media (max-width: 720px) {
    .pf-browser { max-width: 330px; margin: 0 auto; border-radius: 38px; border: 9px solid #000000; box-shadow: 0 0 0 1px rgba(159, 208, 255, 0.3), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 0 120px -30px rgba(61, 90, 241, 0.7); }
    .pf-bar { display: none; }
    .pf-screen { aspect-ratio: 390 / 844; border-radius: 29px; }
    .pf-index { font-size: 110px; top: 30px; }
    .pf-slot-frame { aspect-ratio: 4 / 5; }
}

/* ---- Reduced motion (header switch or system setting): still frames, gentle fades ---- */
html.reduce-motion .portfolio [data-reveal] { transform: none; transition: opacity 0.5s ease; }
html.reduce-motion .pf-slashes path { stroke-dashoffset: 0; transition: none; }
html.reduce-motion .pf-glow, html.reduce-motion .pf-dot, html.reduce-motion .pf-live::before, html.reduce-motion .pf-loading { animation: none; }
html.reduce-motion .pf-browser { transform: none !important; transition: box-shadow 0.4s; }
html.reduce-motion .pf-project::before { transition: none; }
html.reduce-motion .pf-open-pill { transform: none; }
html.reduce-motion .pf-open-hint { display: none; }
html.reduce-motion .pf-viewer, html.reduce-motion .pf-viewer-frame { transition: none; }

/* ---- Toutes les réalisations : la porte vers realisations/ et les pages par métier ---- */
.pf-more { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
    margin-top: clamp(40px, 6vw, 80px); padding: clamp(28px, 4vw, 56px); border-radius: 28px;
    border: 1px solid rgba(159, 208, 255, 0.22); background: radial-gradient(90% 120% at 100% 0%, rgba(61, 90, 241, 0.28), transparent 60%), rgba(6, 10, 24, 0.72); }
.pf-more .pf-name { margin-bottom: 14px; }
.pf-trades { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.pf-trades a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(159, 208, 255, 0.24);
    color: var(--pf-text); text-decoration: none; font-size: 14px; transition: border-color 0.3s, background 0.3s; }
.pf-trades a:hover { border-color: var(--pf-red-light); background: rgba(159, 208, 255, 0.08); }
@media (max-width: 900px) { .pf-more { grid-template-columns: 1fr; } }

/* ---- Sommaire des projets à la une, mosaïque des autres réalisations (14/10/2026) ---- */
.pf-sommaire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 clamp(70px, 8vw, 120px); }
.pf-sommaire a { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center;
    padding: 12px; border-radius: 18px; border: 1px solid rgba(159, 208, 255, 0.2); background: rgba(10, 16, 40, 0.45); color: var(--pf-text); text-decoration: none;
    transition: border-color 0.3s, background 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pf-sommaire a:hover { border-color: rgba(159, 208, 255, 0.55); background: rgba(20, 34, 80, 0.55); transform: translateY(-3px); }
.pf-sommaire a:focus-visible { outline: 1px solid #ffffff; outline-offset: 3px; }
.pf-sommaire img { grid-row: 1 / 3; width: 116px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
.pf-sommaire-n { position: absolute; top: 12px; right: 14px; font-size: 11px; letter-spacing: 0.16em; color: var(--pf-red-light); }
.pf-sommaire-nom { align-self: end; font-size: 18px; letter-spacing: -0.02em; }
.pf-sommaire-metier { align-self: start; font-size: 12.5px; color: var(--pf-text-soft); }
.pf-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pf-mosaic a { position: relative; grid-column: span 2; overflow: hidden; border-radius: 16px; border: 1px solid rgba(159, 208, 255, 0.18); aspect-ratio: 16 / 11; isolation: isolate; text-decoration: none; }
.pf-mosaic a:nth-child(-n+2), .pf-mosaic a:nth-child(n+6) { grid-column: span 3; }
.pf-mosaic img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.pf-mosaic a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 6, 11, 0.88), rgba(5, 6, 11, 0) 62%); }
.pf-mosaic span { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; font-size: 12px; color: var(--pf-text-soft); }
.pf-mosaic b { font-size: 16px; font-weight: 500; color: var(--pf-text); }
.pf-mosaic a:hover img { transform: scale(1.05); }
.pf-mosaic a:focus-visible { outline: 1px solid #ffffff; outline-offset: 3px; }
.pf-more .pf-trades { margin: 22px 0 26px; }
@media (max-width: 1000px) {
    .pf-sommaire { grid-template-columns: 1fr; gap: 10px; }
    .pf-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-mosaic a, .pf-mosaic a:nth-child(-n+2) { grid-column: span 1; }
    .pf-mosaic a:first-child { grid-column: span 2; }
}
html.reduce-motion .pf-sommaire a, html.reduce-motion .pf-mosaic img { transition: none; }


/* ---- 20/10/2026 : le grand mot « Réalisations » ----
   Plus petit, plus discret et placé au-dessus du titre de la section : il ne passe plus derrière le texte. */
.pf-marquee { top: 13vh; font-size: clamp(84px, 12.5vw, 230px); -webkit-text-stroke-color: rgba(255, 255, 255, 0.34);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.16), 0 0 60px rgba(200, 225, 255, 0.08); }

/* ---- 20/10/2026 : version téléphone, plus compacte ---- */
@media (max-width: 720px) {
    .portfolio { padding: 0 16px; }
    .pf-inner { padding: 22vh 0 12vh; }
    .pf-marquee { top: 8vh; font-size: 21vw; }
    .pf-head { gap: 18px; margin-bottom: 44px; }
    .pf-eyebrow { margin-bottom: 18px; }
    .pf-title { font-size: clamp(32px, 9.4vw, 42px); }
    .pf-lead { font-size: 14.5px; line-height: 1.65; }
    .pf-project, .pf-project.pf-flip { padding: 44px 0; gap: 24px; }
    .pf-index { top: 16px; font-size: 64px; }
    .pf-browser { max-width: 250px; border-width: 7px; border-radius: 32px; }
    .pf-screen { border-radius: 25px; }
    .pf-kicker { font-size: 10px; letter-spacing: 0.18em; }
    .pf-name { margin: 12px 0 14px; font-size: clamp(30px, 8.6vw, 38px); }
    .pf-pitch { font-size: 14.5px; line-height: 1.65; }
    .pf-story { margin: 18px 0; }
    .pf-story > div { gap: 6px; padding: 12px 0; }
    .pf-story dd { font-size: 14px; line-height: 1.6; }
    .pf-features { margin: 18px 0; }
    .pf-features li { padding: 10px 0; font-size: 13.5px; }
    .pf-actions { gap: 12px 18px; margin-top: 22px; }
    .pf-btn { padding: 14px 20px; }
    .pf-more { padding: 22px 18px; border-radius: 22px; }
    .pf-more .pf-trades { margin: 16px 0 20px; }
    .pf-trades { gap: 8px; }
    .pf-trades a { min-height: 40px; padding: 0 14px; font-size: 13px; }
}


/* ---- 20/10/2026 : « Réalisations » devient le titre de la section ----
   Le grand mot en filigrane est retiré ; la section s'ouvre sur un cercle en relief aux couleurs
   d'Elevate (bleu électrique vers violet, comme le monogramme en verre), encadré de deux filets. */
.pf-inner { padding-top: 26vh; }
.pf-opening {
    display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px);
    margin: 0 auto clamp(80px, 10vw, 150px);
}
.pf-opening::before, .pf-opening::after {
    content: ''; flex: 1 1 0; max-width: 460px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.75) 70%, rgba(95, 125, 255, 0.95));
}
.pf-opening::after { transform: scaleX(-1); }
.pf-badge {
    position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: clamp(230px, 21vw, 320px); aspect-ratio: 1; border-radius: 50%; margin: 0;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 72% 80%, rgba(192, 132, 252, 0.85), rgba(192, 132, 252, 0) 55%),
        linear-gradient(145deg, #5f7dff 0%, #3d5af1 34%, #5b3ff0 64%, #8b5cf6 86%, #a855f7 100%);
    box-shadow:
        inset 0 8px 16px rgba(255, 255, 255, 0.42),
        inset 0 -18px 30px rgba(24, 8, 70, 0.62),
        inset 0 0 0 2px rgba(255, 255, 255, 0.16),
        0 30px 60px -18px rgba(61, 90, 241, 0.75),
        0 0 0 10px rgba(91, 63, 240, 0.12),
        0 0 110px rgba(139, 92, 246, 0.45);
}
/* anneau dégradé autour du disque, qui tourne lentement (transform seul) */
.pf-badge::before {
    content: ''; position: absolute; inset: -16px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 200deg, #3d5af1, #8b5cf6, #c084fc, #5f7dff, #9fd0ff, #3d5af1);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
    animation: pf-ring 18s linear infinite;
}
/* reflet en arc sur le haut du disque, pour le relief */
.pf-badge::after {
    content: ''; position: absolute; inset: 7% 14% 52%; border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}
@keyframes pf-ring { to { transform: rotate(1turn); } }
.pf-badge-txt {
    position: relative; z-index: 1;
    font: 500 clamp(28px, 2.5vw, 38px)/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: -0.03em; color: #fff;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55), 0 2px 0 rgba(30, 12, 90, 0.55), 0 6px 18px rgba(20, 8, 60, 0.55), 0 0 28px rgba(201, 228, 255, 0.35);
}
.pf-badge-n, .pf-badge-sub {
    position: relative; z-index: 1;
    font: 500 11px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.26em; text-transform: uppercase;
    color: rgba(238, 243, 255, 0.82); text-shadow: 0 1px 0 rgba(30, 12, 90, 0.5);
}
.pf-badge-n::before, .pf-badge-n::after { content: '\2014'; margin: 0 0.6em; opacity: 0.6; }
html.reduce-motion .pf-badge::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .pf-badge::before { animation: none; } }
@media (max-width: 720px) {
    .pf-inner { padding-top: 16vh; }
    .pf-opening { margin-bottom: 56px; gap: 14px; }
    .pf-badge { width: 196px; gap: 8px; }
    .pf-badge::before { inset: -11px; }
    .pf-badge-txt { font-size: 25px; }
    .pf-badge-n, .pf-badge-sub { font-size: 9.5px; }
}


/* ---- 20/10/2026 : les projets à la une restent dans la page ----
   En visite en images, les captures (1440 px de large) élargissaient la colonne implicite de .pf-list :
   le texte du projet sortait de l'écran à droite, sur ordinateur comme sur téléphone. */
.pf-list { grid-template-columns: minmax(0, 1fr); }
.pf-project > * { min-width: 0; }
.pf-name { overflow-wrap: break-word; }