/* ═══════════════════════════════════════════════════════════════════════
   KYRA — Éditorial clair
   Crème, encre, un accent. Instrument Serif + Inter + Plex Mono.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --cream: #FBFAF7;
    --cream-2: #F2F0EA;
    --ink: #111110;
    --ink-2: #1B1A18;
    --soft: #6B6862;
    --soft-2: #928E86;
    --line: #E2DFD8;
    --line-ink: rgba(251, 250, 247, 0.16);
    --accent: #C4471A;

    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    --d1: clamp(44px, 8.2vw, 142px);
    --d2: clamp(33px, 5.4vw, 88px);
    --d3: clamp(25px, 3vw, 46px);
    --d4: clamp(20px, 1.9vw, 28px);
    --lead: clamp(16px, 1.3vw, 19px);

    --s1: 8px;
    --s2: 18px;
    --s3: 28px;
    --s4: 46px;
    --s5: clamp(58px, 6.4vw, 88px);
    --s6: clamp(84px, 9.5vw, 138px);
    --s7: clamp(112px, 14vw, 210px);

    --pad: clamp(24px, 5vw, 84px);
    --wide: 1600px;
    --nav: 84px;

    --expo: cubic-bezier(0.16, 1, 0.3, 1);
    --power: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.smooth { scroll-behavior: auto; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.62;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ═══════════ CHARGEMENT ═══════════ */
.loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--cream);
    display: grid;
    place-items: center;
    transition: opacity 0.7s var(--power);
}
.loader-in { width: min(300px, 60vw); text-align: center; }
.loader-mark {
    display: flex;
    justify-content: center;
    overflow: hidden;
    font-family: var(--serif);
    font-size: clamp(40px, 8vw, 72px);
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.loader-mark span {
    display: inline-block;
    transform: translateY(105%);
    animation: rise 0.9s var(--expo) forwards;
}
.loader-mark span:nth-child(1) { animation-delay: 0.04s; }
.loader-mark span:nth-child(2) { animation-delay: 0.10s; }
.loader-mark span:nth-child(3) { animation-delay: 0.16s; }
.loader-mark span:nth-child(4) { animation-delay: 0.22s; }
@keyframes rise { to { transform: translateY(0); } }
.loader-bar { position: relative; height: 1px; margin-top: 24px; background: var(--line); overflow: hidden; }
.loader-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); }
body.ready .loader { opacity: 0; pointer-events: none; }
body.ready .loader.gone { display: none; }

/* ═══════════ TRANSITION ═══════════ */
.veil {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: var(--ink);
    pointer-events: none;
    transform: translateY(100%);
    display: grid;
    place-items: center;
}
.veil span {
    font-family: var(--serif);
    font-size: clamp(28px, 4.6vw, 58px);
    color: var(--cream);
    opacity: 0;
    transform: translateY(22px);
}
.veil.in { transform: translateY(0); transition: transform 0.72s var(--expo); }
.veil.in span { opacity: 1; transform: none; transition: opacity 0.45s 0.16s ease, transform 0.7s 0.14s var(--expo); }
.veil.out { transform: translateY(-100%); transition: transform 0.85s var(--expo); }
.veil.out span { opacity: 0; transition: opacity 0.3s ease; }

/* ═══════════ NAV ═══════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    height: var(--nav);
    display: flex;
    align-items: center;
    padding: 0 var(--pad);
    transition: transform 0.6s var(--power), background 0.5s ease, border-color 0.5s;
    border-bottom: 1px solid transparent;
}
.nav.tuck { transform: translateY(-101%); }
.nav.solid {
    background: rgba(251, 250, 247, 0.86);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: var(--line);
}
.nav-in { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand {
    position: relative;
    z-index: 960;
    font-family: var(--serif);
    font-size: 27px;
    letter-spacing: 0.005em;
}
.brand i {
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: baseline;
    transition: transform 0.5s var(--power);
}
.brand:hover i { transform: scale(2); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-link {
    position: relative;
    font-size: 14.5px;
    color: var(--soft);
    padding: 3px 0;
    transition: color 0.35s;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--power);
}
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* au-dessus d'une section sombre, la barre passe en négatif */
.nav.inv { color: var(--cream); }
.nav.inv.solid { background: rgba(14, 14, 13, 0.7); border-bottom-color: var(--line-ink); }
.nav.inv .nav-link { color: rgba(251, 250, 247, 0.62); }
.nav.inv .nav-link:hover, .nav.inv .nav-link[aria-current] { color: var(--cream); }
.nav.inv .btn-line { border-color: var(--line-ink); color: var(--cream); }
.nav.inv .btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.nav.inv .burger span { background: var(--cream); }

.burger {
    display: none;
    position: relative;
    z-index: 960;
    width: 44px; height: 44px;
    margin-right: -10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.5s var(--power); }
body.nav-open .burger span { background: var(--cream); }
body.nav-open .burger span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Menu ouvert : la barre repasse au-dessus du voile, sinon le bouton qui l'a
   ouvert se retrouve dessous et il n'y a plus aucun moyen de refermer. */
body.nav-open .nav {
    z-index: 960;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
body.nav-open .brand { color: var(--cream); }

.menu {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: var(--ink);
    color: var(--cream);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s var(--expo);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--pad);
}
body.nav-open .menu { clip-path: inset(0 0 0 0); }
.menu a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 7px 0;
    font-family: var(--serif);
    font-size: clamp(34px, 8.4vw, 70px);
    line-height: 1.12;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s var(--power), transform 0.7s var(--expo), color 0.3s;
}
.menu a small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); }
.menu a:hover { color: var(--accent); }
body.nav-open .menu a { opacity: 1; transform: none; }
body.nav-open .menu a:nth-child(1) { transition-delay: 0.16s; }
body.nav-open .menu a:nth-child(2) { transition-delay: 0.23s; }
body.nav-open .menu a:nth-child(3) { transition-delay: 0.30s; }
body.nav-open .menu a:nth-child(4) { transition-delay: 0.37s; }
body.nav-open .menu a:nth-child(5) { transition-delay: 0.44s; }
.menu-foot {
    position: absolute;
    left: var(--pad); right: var(--pad);
    bottom: 38px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.5);
}
@media (max-width: 940px) {
    .nav-links { display: none; }
    .burger { display: flex; }
}

/* ═══════════ MISE EN PAGE ═══════════ */
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--s7) 0; position: relative; }
.sec-sm { padding: var(--s6) 0; }
.tint { background: var(--cream-2); }
.dark { background: var(--ink); color: var(--cream); }
.dark .eyebrow { color: var(--cream); opacity: 0.6; }
.dark .lead, .dark .prose, .dark p { color: rgba(251, 250, 247, 0.62); }

/* ═══════════ TYPOGRAPHIE ═══════════ */
.eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--soft-2);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.026em; line-height: 0.98; text-wrap: balance; }
h1 { font-size: var(--d1); line-height: 0.94; }
h2 { font-size: var(--d2); }
h3 { font-size: var(--d3); line-height: 1.04; }
h4 { font-size: var(--d4); line-height: 1.14; letter-spacing: -0.018em; }
em, .it { font-style: italic; }
.ac { color: var(--accent); }

.lead { font-size: var(--lead); line-height: 1.6; color: var(--soft); max-width: 50ch; }
.prose { color: var(--soft); max-width: 58ch; }
.prose p + p { margin-top: var(--s2); }
.prose em { color: var(--ink); font-style: italic; }
.dark .prose em { color: var(--cream); }

/* ═══════════ BOUTONS ═══════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 30px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background 0.4s var(--power), color 0.4s, border-color 0.4s;
}
.btn i { font-style: normal; transition: transform 0.5s var(--power); }
.btn:hover i { transform: translateX(5px); }
.btn-solid { background: var(--ink); color: var(--cream); }
.btn-solid:hover { background: var(--accent); }
.btn-line { border: 1px solid var(--line); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.dark .btn-solid { background: var(--cream); color: var(--ink); }
.dark .btn-solid:hover { background: var(--accent); color: var(--cream); }
.dark .btn-line { border-color: var(--line-ink); color: var(--cream); }
.dark .btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.tlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}
.tlink::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform-origin: right;
    transition: transform 0.5s var(--power);
}
.tlink:hover::after { transform: scaleX(0); }
.tlink i { font-style: normal; transition: transform 0.5s var(--power); }
.tlink:hover i { transform: translateX(6px); }

/* ═══════════ MOUVEMENT ═══════════ */
.ln { display: block; overflow: hidden; }
.ln > span {
    display: block;
    transform: translateY(110%);
    transition: transform 1.15s var(--expo);
    transition-delay: var(--ld, 0s);
    will-change: transform;
}
[data-split].on .ln > span { transform: translateY(0); }

[data-up] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--power), transform 1.1s var(--expo);
    transition-delay: var(--d, 0s);
}
[data-up].on { opacity: 1; transform: none; }
[data-up="fade"] { transform: none; }

.fig {
    position: relative;
    overflow: hidden;
}
/* le rideau vit sur le média, jamais sur .fig : un élément entièrement
   détouré a un ratio d'intersection nul, et l'observateur qui doit le
   révéler ne le verrait donc jamais entrer à l'écran. */
.fig img, .fig video {
    width: 100%; height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 100% 0);
    transform: scale(1.18);
    transition: clip-path 1.35s var(--expo), transform 1.7s var(--expo);
}
.fig.on img, .fig.on video { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .ln > span { transform: none !important; }
    [data-up] { opacity: 1 !important; transform: none !important; }
    .fig img, .fig video { clip-path: none !important; transform: none !important; }
    .loader-mark span { animation: none !important; }
}

/* ═══════════ OUVERTURE ═══════════ */
.hero { padding: calc(var(--nav) + clamp(80px, 12vw, 180px)) 0 var(--s5); }
.hero .eyebrow { margin-bottom: clamp(26px, 4vw, 50px); }
.hero h1 { max-width: 15ch; }
.hero-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(30px, 5vw, 80px);
    flex-wrap: wrap;
    margin-top: clamp(34px, 5vw, 70px);
}
.hero-foot .lead { max-width: 44ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Plaque pleine largeur */
.plate {
    position: relative;
    height: min(64vw, 620px);
    overflow: hidden;
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; }
.plate-cap {
    position: absolute;
    left: var(--pad); bottom: clamp(24px, 4vw, 50px);
    z-index: 2;
    max-width: 34ch;
    color: var(--cream);
}
.plate-cap span {
    display: block;
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}
.plate-cap p { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 36px); line-height: 1.14; }
.plate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 9, 0.72), transparent 52%);
}

/* ═══════════ FILM QUI S'OUVRE ═══════════ */
.film-sec { padding: clamp(30px, 4vw, 56px) 0 var(--s6); }
.film-tags {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: clamp(16px, 2.2vw, 30px);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--soft-2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease 0.9s, transform 1s var(--expo) 0.9s;
}
.film-sec.on .film-tags { opacity: 1; transform: none; }
.film-tags i { font-style: normal; color: var(--accent); }
@media (max-width: 620px) { .film-tags span:last-child { display: none; } }

.film {
    --film-r: clamp(14px, 1.8vw, 28px);
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 84vh;
    overflow: hidden;
    background: var(--ink);
    clip-path: inset(0 37% round var(--film-r));
    transition: clip-path 1.5s 0.35s cubic-bezier(0.5, 0.5, 0, 1);
}
.film-sec.on .film { clip-path: inset(0 0 round var(--film-r)); }
.film video, .film img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 2.1s 0.35s cubic-bezier(0.5, 0.5, 0, 1);
}
.film-sec.on .film video, .film-sec.on .film img { transform: none; }

/* ═══════════ BANDE DÉFILANTE ═══════════ */
.marq {
    display: flex;
    overflow: hidden;
    padding: clamp(14px, 1.7vw, 24px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    user-select: none;
}
.marq-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(20px, 2.6vw, 38px);
    padding-right: clamp(20px, 2.6vw, 38px);
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1.1;
    white-space: nowrap;
    animation: marq 42s linear infinite;
}
.marq:hover .marq-track { animation-play-state: paused; }
.marq-track i { font-style: normal; font-size: 0.42em; color: var(--accent); }
.marq-track em { font-style: italic; color: var(--soft); }
@keyframes marq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marq-track { animation: none; } }

/* ═══════════ DÉCLARATION + CHIFFRES ═══════════ */
.statement {
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 62px);
    line-height: 1.16;
    letter-spacing: -0.024em;
    max-width: 20ch;
}
.statement .w { color: rgba(17, 17, 16, 0.18); transition: color 0.55s ease; }
.statement .w.lit { color: var(--ink); }
.statement .hl { font-style: italic; }
.statement .hl.lit { color: var(--accent); }

.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 52px);
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
}
.figures b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1;
    letter-spacing: -0.03em;
}
.figures span { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
@media (max-width: 820px) { .figures { grid-template-columns: 1fr 1fr; } }

/* ═══════════ TÊTE DE SECTION ═══════════ */
.head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}
.head .eyebrow { margin-bottom: var(--s3); }
.head h2 { max-width: 15ch; }
.head-copy { max-width: 38ch; color: var(--soft); }

/* ═══════════ GRILLE DE TRAVAUX ═══════════ */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 52px); }
.work figure { overflow: hidden; border-radius: 3px; background: var(--cream-2); aspect-ratio: 16 / 10; }
.work img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.1s var(--expo);
}
.work:hover img { transform: scale(1.045); }
.work-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}
.work h3 { font-size: clamp(23px, 2.4vw, 36px); }
.work-url { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--soft-2); }
.work p { margin-top: 6px; font-size: 14px; color: var(--soft); }
@media (max-width: 820px) { .works { grid-template-columns: 1fr; } }

/* ═══════════ BANDE DE CAPTURES ═══════════ */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 16px); }
.strip figure { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 3px; background: var(--cream-2); }
.strip img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--expo); }
.strip a:hover img { transform: scale(1.04); }
.strip figcaption {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft-2);
}
@media (max-width: 760px) { .strip { grid-template-columns: 1fr 1fr; } }

/* ═══════════ PILE DE PROJETS (cartes collantes) ═══════════ */
/* --step = hauteur de la barre de titre : une fois empilées, chaque carte
   laisse voir son nom au complet. */
.pile {
    --step: clamp(56px, 5.6vw, 82px);
    --pile-r: clamp(14px, 1.7vw, 26px);
    position: relative;
    padding-bottom: var(--step);
}
.pile-item {
    position: sticky;
    top: calc(var(--nav) + 10px + var(--i) * var(--step));
    padding-bottom: 12px;
}
.pile-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: var(--pile-r);
    background: var(--ink);
    box-shadow: 0 -1px 0 rgba(251, 250, 247, 0.22), 0 24px 60px -30px rgba(17, 17, 16, 0.55);
    transition: border-radius 0.5s var(--power);
    cursor: pointer;
}
.pile-item:not(.under) .pile-card:hover { border-radius: calc(var(--pile-r) * 1.7); }
.pile-shot {
    width: 100%; height: 100%;
    object-fit: cover;
    /* on rogne l'en-tête du site client pour qu'il n'entre pas en collision
       avec le nom du projet posé en haut de la carte */
    object-position: 50% var(--pos, 30%);
    transform: scale(1.005);
    filter: brightness(96%);
    transition: transform 0.7s var(--power), filter 0.7s ease;
}
.pile-item:not(.under) .pile-card:hover .pile-shot { transform: scale(1.055); filter: brightness(100%); }
.pile-veil {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8, 8, 7, 0.62), rgba(8, 8, 7, 0.06) 42%, transparent 62%);
    pointer-events: none;
}

.pile-bar {
    position: absolute;
    z-index: 3;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(15px, 1.5vw, 22px) clamp(18px, 2.2vw, 32px);
    color: var(--cream);
    transition: transform 0.45s var(--power);
}
.pile-item:not(.under) .pile-card:hover .pile-bar { transform: translateY(-100%); }
.pile-name {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 74%;
    font-family: var(--serif);
    font-size: clamp(20px, 2.1vw, 33px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.pile-no {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--accent);
    transform: translateY(-2px);
}
.pile-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.pile-pills i {
    display: block;
    padding: 6px 13px;
    border-radius: 100px;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--mono);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pile-foot {
    position: absolute;
    z-index: 3;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.2vw, 32px);
    color: rgba(251, 250, 247, 0.78);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.6s var(--power);
}
.pile-item:not(.under) .pile-card:hover .pile-foot { opacity: 1; transform: none; }
.pile-foot p { max-width: 40ch; font-size: 14px; line-height: 1.5; }
.pile-url { flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pile-card::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 7, 0.82), transparent 46%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.pile-item:not(.under) .pile-card:hover::after { opacity: 1; }

.pile-go {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.pile-go span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: clamp(88px, 9vw, 136px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    filter: blur(10px);
    scale: 1.2;
    transition: opacity 0.35s ease-out, filter 0.35s ease-out, scale 0.35s ease-out;
}
.pile-item:not(.under) .pile-card:hover .pile-go span { opacity: 1; filter: blur(0); scale: 1; }
.pile-go b { font-weight: 400; color: var(--accent); font-size: 17px; line-height: 1; }

.pile-item.under .pile-card { cursor: default; }

@media (max-width: 900px) {
    .pile { --step: 62px; }
    .pile-card { aspect-ratio: 3 / 2; }
    .pile-name { font-size: clamp(18px, 3.5vw, 25px); }
}
@media (max-width: 620px) {
    .pile { --step: 54px; }
    .pile-card { aspect-ratio: 4 / 3; }
    .pile-pills i:nth-child(n + 2) { display: none; }
    .pile-foot p { display: none; }
    /* en 4/3 l'image est rognée sur les côtés, plus en hauteur : l'en-tête du
       site client réapparaît, on l'assombrit davantage */
    .pile-veil { background: linear-gradient(to bottom, rgba(8, 8, 7, 0.8), rgba(8, 8, 7, 0.12) 46%, transparent 66%); }
}
@media (hover: none) {
    .pile-foot { opacity: 1; transform: none; }
    .pile-card::after { opacity: 1; }
    .pile-go { display: none; }
}

/* ═══════════ VIDÉO PILOTÉE PAR LE DÉFILEMENT ═══════════ */
.scrub { position: relative; height: 300vh; background: var(--ink); }
.scrub-stick {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.scrub-media { position: absolute; inset: 0; z-index: 0; }
.scrub-media video, .scrub-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.52;
    transform: scale(1.04);
}
.scrub-media video { position: absolute; inset: 0; }
.scrub-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 7, 0.92) 6%, rgba(8, 8, 7, 0.34) 52%, rgba(8, 8, 7, 0.7));
}
.scrub-in {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--pad) clamp(52px, 8vh, 104px);
    color: var(--cream);
}
.scrub-top {
    position: absolute;
    top: calc(var(--nav) + clamp(20px, 5vh, 54px));
    left: var(--pad); right: var(--pad);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.5);
}
.scrub-stage { position: relative; min-height: clamp(230px, 32vh, 320px); }
.scrub-step {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.85s var(--expo);
    pointer-events: none;
}
.scrub-step.on { opacity: 1; transform: none; pointer-events: auto; }
.scrub-step .n {
    display: block;
    margin-bottom: var(--s2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--accent);
}
.scrub-step h3 { max-width: 17ch; font-size: clamp(30px, 4.6vw, 72px); line-height: 1; }
.scrub-step p { margin-top: var(--s3); max-width: 46ch; font-size: var(--lead); color: rgba(251, 250, 247, 0.68); }
.scrub-in .tlink { margin-top: clamp(18px, 2.6vh, 30px); }
.scrub-rail { display: flex; gap: 7px; margin-top: clamp(26px, 4vh, 46px); }
.scrub-rail i {
    position: relative;
    width: clamp(44px, 6vw, 82px);
    height: 2px;
    background: rgba(251, 250, 247, 0.18);
    overflow: hidden;
}
.scrub-rail i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}
@media (max-width: 760px) {
    .scrub { height: 260vh; }
    .scrub-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .scrub { height: auto; }
    .scrub-stick { position: relative; height: auto; padding-top: calc(var(--nav) + 40px); }
    .scrub-step { position: relative; opacity: 1; transform: none; margin-bottom: var(--s5); }
    .scrub-rail { display: none; }
}

/* ═══════════ MOSAÏQUE ═══════════ */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 16px); align-items: start; }
.mosaic figure { overflow: hidden; border-radius: 3px; background: var(--cream-2); }
.mosaic img, .mosaic video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.m-wide { grid-column: span 2; aspect-ratio: 16 / 10; }
.m-tall { grid-column: span 1; aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
    .mosaic { grid-template-columns: repeat(2, 1fr); }
    .m-wide { grid-column: span 2; }
    .m-tall { grid-column: span 1; }
}

/* ═══════════ CARTES ILLUSTRÉES ═══════════ */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(300px, 32vw, 440px);
    padding: clamp(24px, 2.6vw, 40px);
    overflow: hidden;
    isolation: isolate;
    border-radius: 3px;
    color: var(--cream);
}
.card-bg { position: absolute; inset: 0; z-index: -2; }
.card-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.3s var(--expo); }
.card:hover .card-bg img { transform: scale(1.1); }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 9, 0.88) 4%, rgba(10, 10, 9, 0.2) 62%); }
.card-n { margin-bottom: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--cream); opacity: 0.7; }
.card h3 { margin-bottom: 10px; }
.card p { color: rgba(251, 250, 247, 0.72); font-size: 14px; max-width: 36ch; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } .card { min-height: 280px; } }

/* ═══════════ LISTE (domaines, étapes) ═══════════ */
.rows { border-top: 1px solid var(--line); }
.dark .rows { border-color: var(--line-ink); }
.rows > li, .rows > div {
    display: grid;
    grid-template-columns: clamp(56px, 7vw, 110px) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(18px, 3vw, 56px);
    align-items: start;
    padding: clamp(26px, 3.2vw, 44px) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.6s var(--power);
}
.dark .rows > li, .dark .rows > div { border-color: var(--line-ink); }
.rows > li:hover, .rows > div:hover { padding-left: 14px; }
.rows .n {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
    padding-top: 7px;
}
.rows h3 { max-width: 16ch; }
.rows h4 { max-width: 20ch; }
.rows p { color: var(--soft); font-size: 14.5px; max-width: 54ch; }
.dark .rows p { color: rgba(251, 250, 247, 0.6); }
@media (max-width: 860px) {
    .rows > li, .rows > div { grid-template-columns: 48px minmax(0, 1fr); row-gap: 12px; }
    .rows p { grid-column: 2; }
}

/* ═══════════ APPEL FINAL ═══════════ */
.cta { padding: var(--s7) 0; text-align: center; }
.cta h2 { max-width: 17ch; margin: var(--s3) auto var(--s3); font-size: clamp(36px, 6.2vw, 104px); }
.cta .lead { margin: 0 auto var(--s4); }
.cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ═══════════ PIED ═══════════ */
.foot { background: var(--ink); color: var(--cream); padding: var(--s6) 0 30px; }
.foot-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.7fr));
    gap: var(--s4);
    margin-bottom: var(--s6);
}
.foot-tag { max-width: 22ch; font-family: var(--serif); font-size: clamp(22px, 2.1vw, 32px); line-height: 1.2; }
.foot-col h5 {
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.45);
}
.foot-col a, .foot-col span {
    display: block;
    margin-bottom: 8px;
    font-size: 14.5px;
    color: rgba(251, 250, 247, 0.72);
    transition: color 0.35s;
}
.foot-col a:hover { color: var(--accent); }
.foot-mark {
    display: block;
    font-family: var(--serif);
    font-size: clamp(80px, 22vw, 330px);
    line-height: 0.78;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(251, 250, 247, 0.2);
    user-select: none;
    margin-bottom: var(--s4);
    transition: color 1s var(--power), -webkit-text-stroke-color 0.8s;
}
.foot-mark:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.foot-bot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--line-ink);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.45);
}
@media (max-width: 820px) {
    .foot-top { grid-template-columns: 1fr 1fr; }
    .foot-tag { grid-column: 1 / -1; }
}

/* ═══════════ EN-TÊTE DE PAGE ═══════════ */
.phead { padding: calc(var(--nav) + clamp(72px, 11vw, 160px)) 0 var(--s5); }
.phead .eyebrow { margin-bottom: var(--s3); }
.phead h1 { max-width: 16ch; }
.phead .lead { margin-top: var(--s4); }

/* ═══════════ DOMAINES (solutions) ═══════════ */
.dom { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.dom-head { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px); margin-bottom: var(--s5); }
.dom-head .n { flex-shrink: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); }
.dom-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 88px); align-items: start; }
.dom-media { position: sticky; top: calc(var(--nav) + 36px); aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; }
.dom-media img { width: 100%; height: 100%; object-fit: cover; }
.dom-intro { margin-bottom: var(--s4); font-size: var(--lead); color: var(--soft); max-width: 44ch; }
@media (max-width: 900px) { .dom-grid { grid-template-columns: 1fr; } .dom-media { position: relative; top: 0; } }

/* ═══════════ ALIAS & COMPLÉMENTS ═══════════ */
.sec.light { background: var(--cream-2); }
.stack-card-t { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 66px); }
.stack-card-t .n { margin-bottom: var(--s3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.stack-card-t h3 { margin-bottom: var(--s2); max-width: 15ch; }
.stack-card-t p { color: var(--soft); max-width: 46ch; font-size: 14.5px; }
.stack-card-m { position: relative; overflow: hidden; min-height: 270px; }
.stack-card-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .stack-card-m { order: -1; aspect-ratio: 16 / 9; min-height: 0; } }

/* Liste de solutions */
.dom-list { border-top: 1px solid var(--line); }
.dom-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.55s var(--power);
}
.dom-list li:hover { padding-left: 12px; }
.dom-list .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent); padding-top: 7px; }
.dom-list h4 { margin-bottom: 7px; }
.dom-list p { color: var(--soft); font-size: 14.5px; max-width: 54ch; }

/* Étapes */
.steps { border-top: 1px solid var(--line); }
.dark .steps { border-color: var(--line-ink); }
.step {
    display: grid;
    grid-template-columns: clamp(56px, 7vw, 108px) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(18px, 3vw, 54px);
    align-items: start;
    padding: clamp(24px, 3vw, 42px) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.6s var(--power);
}
.dark .step { border-color: var(--line-ink); }
.step:hover { padding-left: 14px; }
.step-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); padding-top: 7px; }
.step h3 { max-width: 18ch; font-size: var(--d4); }
.step p { color: var(--soft); font-size: 14.5px; max-width: 52ch; }
@media (max-width: 860px) {
    .step { grid-template-columns: 48px minmax(0, 1fr); row-gap: 12px; }
    .step p { grid-column: 2; }
}

/* Preuves */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.proof > div { padding: clamp(26px, 3vw, 42px); background: var(--cream); }
.proof .k { display: block; margin-bottom: 15px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.proof h4 { margin-bottom: 10px; }
.proof p { color: var(--soft); font-size: 14.5px; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }

/* ═══════════ COMPARATIF ═══════════ */
.versus { border-top: 1px solid var(--line); }
.versus-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.versus-row > div { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.6vw, 40px); }
.versus-row .them {
    color: var(--soft-2);
    font-size: 14.5px;
    text-decoration: line-through;
    text-decoration-color: rgba(196, 71, 26, 0.4);
}
.versus-row .us {
    border-left: 1px solid var(--line);
    background: rgba(196, 71, 26, 0.035);
    font-family: var(--serif);
    font-size: clamp(17px, 1.6vw, 23px);
    line-height: 1.24;
}
.versus-head > div { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 20px; padding-bottom: 20px; }
.versus-head .them { text-decoration: none; }
.versus-head .us { color: var(--accent); font-family: var(--mono); font-size: 10.5px; }
@media (max-width: 700px) {
    .versus-head { display: none; }
    .versus-row { grid-template-columns: 1fr; }
    .versus-row .us { border-left: 0; }
}

/* ═══════════ PILIERS ═══════════ */
.stack { position: relative; }
.stack-card {
    position: sticky;
    top: calc(var(--nav) + 5vh);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    min-height: 60vh;
    margin-bottom: 6vh;
    overflow: hidden;
    border-radius: 3px;
    background: var(--cream-2);
    border: 1px solid var(--line);
}
.stack-card:nth-child(even) { background: var(--cream); }
.stack-t { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 66px); }
.stack-t .n { margin-bottom: var(--s3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.stack-t h3 { margin-bottom: var(--s2); max-width: 15ch; }
.stack-t p { color: var(--soft); max-width: 46ch; font-size: 14.5px; }
.stack-m { position: relative; overflow: hidden; min-height: 270px; }
.stack-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .stack-card { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; }
    .stack-m { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
}

/* ═══════════ FAQ ═══════════ */
.faq { max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: 26px 0;
    text-align: left;
    font-family: var(--serif);
    font-size: clamp(19px, 2vw, 28px);
    line-height: 1.18;
    transition: color 0.35s;
}
.faq-q:hover { color: var(--accent); }
.faq-ic {
    position: relative;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: transform 0.6s var(--expo), background 0.4s, border-color 0.4s, color 0.4s;
}
.faq-ic::before, .faq-ic::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 11px; height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.5s var(--expo);
}
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-ic { transform: rotate(135deg); background: var(--ink); border-color: var(--ink); color: var(--cream); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.7s var(--expo); }
.faq-a p { padding: 0 52px 28px 0; color: var(--soft); font-size: 15px; max-width: 66ch; }

/* ═══════════ CONTACT ═══════════ */
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 100svh; padding-top: var(--nav); }
.contact-r video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-l { display: flex; flex-direction: column; justify-content: center; gap: var(--s5); padding: var(--s6) var(--pad); }
.contact-l h1 { font-size: clamp(40px, 6vw, 92px); }
.contact-l .eyebrow { margin-bottom: var(--s2); }
.contact-l > div > .lead { margin-top: var(--s3); }
.book { max-width: 600px; margin-top: var(--s4); padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: 3px; background: var(--cream-2); }
.book-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: var(--s3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.book-live { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); }
.book-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(196, 71, 26, 0.14); animation: ping 2.2s ease-in-out infinite; }
@keyframes ping { 50% { box-shadow: 0 0 0 9px rgba(196, 71, 26, 0); } }
.book-dur { color: var(--soft-2); }
.book h2 { font-size: clamp(25px, 2.8vw, 40px); max-width: 13ch; }
.book > p { margin-top: 12px; color: var(--soft); font-size: 14.5px; max-width: 46ch; }
.book .btn { margin-top: var(--s3); }
.book-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--s3); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft-2); }
.book-meta li { display: flex; align-items: center; gap: 8px; }
.book-meta li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
/* la colonne de gauche est longue : sans cela le panneau s'étirerait à
   1700 px et la captation 16/9 serait rognée en une bande verticale */
.contact-r {
    position: sticky;
    top: var(--nav);
    align-self: start;
    height: calc(100svh - var(--nav));
    overflow: hidden;
    min-height: 46vh;
}
.contact-r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-note { position: absolute; z-index: 1; left: clamp(22px, 4vw, 56px); bottom: clamp(28px, 5vw, 64px); max-width: 30ch; color: var(--cream); }
.contact-note span { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.contact-note p { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 32px); line-height: 1.16; }
.contact-r::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 9, 0.78), transparent 46%); }
.contact-meta { display: flex; gap: 30px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft-2); }
@media (max-width: 940px) {
    .contact { grid-template-columns: 1fr; }
    .contact-r { position: relative; top: 0; height: auto; min-height: 52vh; order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO VIDÉO — accueil
   Un seul panneau sombre, encadré de crème. Le reste du site reste clair.
   ═══════════════════════════════════════════════════════════════════════ */
.hv { position: relative; }
.hv-frame {
    --hv-r: clamp(14px, 1.8vw, 26px);
    position: relative;
    height: calc(100svh - 8px);
    min-height: 540px;
    margin: 8px var(--pad) 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--hv-r);
    background: var(--ink);
    /* le panneau s'ouvre depuis une fente au chargement */
    clip-path: inset(22% 30% round var(--hv-r));
    transition: clip-path 1.5s 0.15s cubic-bezier(0.5, 0.5, 0, 1);
}
.hv.on .hv-frame { clip-path: inset(0 0 round var(--hv-r)); }

.hv-media { position: absolute; inset: 0; z-index: 0; }
.hv-media video {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 2.4s 0.15s cubic-bezier(0.5, 0.5, 0, 1);
}
.hv.on .hv-media video { transform: none; }
/* deux voiles : un dégradé qui protège le texte, un voile général qui
   éteint les captures très claires quand elles passent dans le montage */
.hv-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(9, 9, 8, 0.94) 1%,
            rgba(9, 9, 8, 0.78) 26%,
            rgba(9, 9, 8, 0.34) 54%,
            rgba(9, 9, 8, 0.10) 74%,
            rgba(9, 9, 8, 0.42) 100%),
        rgba(9, 9, 8, 0.20);
}

.hv-in {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 clamp(22px, 3.2vw, 60px) clamp(38px, 6vh, 74px);
    color: var(--cream);
}
.hv-eyebrow {
    display: block;
    margin-bottom: clamp(18px, 3vh, 34px);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.62);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s ease 1s, transform 1s var(--expo) 1s;
}
.hv.on .hv-eyebrow { opacity: 1; transform: none; }
.hv h1 {
    max-width: 17ch;
    font-size: clamp(37px, 5.6vw, 94px);
    line-height: 0.96;
}
.hv-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 70px);
    flex-wrap: wrap;
    margin-top: clamp(26px, 4vh, 52px);
}
.hv-lead {
    max-width: 48ch;
    font-size: var(--lead);
    line-height: 1.58;
    color: rgba(251, 250, 247, 0.74);
}
.hv-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hv-cta .btn-solid { background: var(--cream); color: var(--ink); }
.hv-cta .btn-solid:hover { background: var(--accent); color: var(--cream); }
.hv-cta .btn-line { border-color: rgba(251, 250, 247, 0.3); color: var(--cream); }
.hv-cta .btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hv-lead, .hv-cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s ease var(--d, 1.15s), transform 1.1s var(--expo) var(--d, 1.15s);
}
.hv-cta { --d: 1.3s; }
.hv.on .hv-lead, .hv.on .hv-cta { opacity: 1; transform: none; }

.hv-cue {
    position: absolute;
    z-index: 3;
    right: clamp(22px, 3.2vw, 60px);
    top: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: rotate(90deg) translateX(-50%);
    transform-origin: right center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.55);
    opacity: 0;
    transition: opacity 0.9s ease 1.5s, color 0.35s;
}
.hv.on .hv-cue { opacity: 1; }
.hv-cue:hover { color: var(--cream); }
.hv-cue i { display: block; width: 44px; height: 1px; background: currentColor; overflow: hidden; position: relative; }
.hv-cue i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left;
    animation: cue 2.6s var(--power) infinite;
}
@keyframes cue {
    0% { transform: scaleX(0); transform-origin: left; }
    45% { transform: scaleX(1); transform-origin: left; }
    55% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}
@media (max-width: 900px) { .hv-cue { display: none; } }

.hv-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(24px, 4vw, 72px);
    margin: 0 var(--pad);
    padding: clamp(20px, 2.4vw, 30px) 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--soft);
}
.hv-strip span { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.hv-strip b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 1.9vw, 28px);
    letter-spacing: -0.02em;
    color: var(--ink);
}

@media (max-width: 620px) {
    .hv-frame { height: calc(100svh - 8px); min-height: 500px; }
    .hv h1 { font-size: clamp(32px, 8.6vw, 46px); max-width: 14ch; }
    .hv-lead { font-size: 15px; }
    .hv-cta { width: 100%; }
    .hv-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .hv-frame { clip-path: inset(0 0 round var(--hv-r)) !important; }
    .hv-media video { transform: none !important; }
    .hv-eyebrow, .hv-lead, .hv-cta, .hv-cue { opacity: 1 !important; transform: none !important; }
    .hv-cue { transform: rotate(90deg) translateX(-50%) !important; }
    .hv-cue i::after { animation: none; }
}

/* ═══════════ EN CLAIR — l'explication en langage normal ═══════════ */
.clear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 60px);
    border-top: 1px solid var(--line);
    padding-top: var(--s4);
}
.clear-col .n {
    display: block;
    margin-bottom: var(--s3);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}
.clear-col h3 { max-width: 18ch; margin-bottom: var(--s2); font-size: var(--d4); }
.clear-col p { color: var(--soft); font-size: 14.5px; max-width: 42ch; }
@media (max-width: 860px) { .clear-grid { grid-template-columns: 1fr; } }

.exa {
    margin-top: var(--s6);
    padding: clamp(28px, 3.6vw, 58px);
    border-radius: 3px;
    background: var(--cream-2);
    border-left: 2px solid var(--accent);
}
.exa-k {
    display: block;
    margin-bottom: var(--s3);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--soft-2);
}
.exa blockquote {
    font-family: var(--serif);
    font-size: clamp(21px, 2.5vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.022em;
    max-width: 30ch;
}
.exa figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft-2);
}
.exa figcaption .tlink { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink); }

.whofor {
    display: flex;
    align-items: baseline;
    gap: clamp(14px, 2vw, 28px);
    flex-wrap: wrap;
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    max-width: 78ch;
    font-size: 14.5px;
    color: var(--soft);
}
.whofor span {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO « LA CHAÎNE » — solutions
   Un jeton parcourt la ligne : la demande devient une paie.
   ═══════════════════════════════════════════════════════════════════════ */
.sh { padding: calc(var(--nav) + clamp(64px, 9vw, 128px)) 0 var(--s6); }
.sh .eyebrow { margin-bottom: var(--s3); }
.sh h1 { max-width: 16ch; }
.sh .lead { margin-top: var(--s4); max-width: 54ch; }

.chain {
    --dur: 11s;
    position: relative;
    margin-top: clamp(52px, 7vw, 104px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--power) 0.35s, transform 1.1s var(--expo) 0.35s;
}
.sh.on .chain, .chain.on { opacity: 1; transform: none; }
.chain-line { position: relative; height: 1px; background: var(--line); }
.chain-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: chainfill var(--dur) linear infinite;
}
.chain-run {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(196, 71, 26, 0.14);
    animation: chainrun var(--dur) linear infinite;
}
@keyframes chainfill { 0% { transform: scaleX(0); } 92%, 100% { transform: scaleX(1); } }
@keyframes chainrun { 0% { left: 0; } 92%, 100% { left: 100%; } }

.chain-nodes { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.chain-nodes li { position: relative; padding-top: clamp(22px, 2.6vw, 34px); }
.chain-nodes li::before {
    content: '';
    position: absolute;
    top: -3.5px;
    left: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--line);
    transition: none;
    animation: nodelit var(--dur) linear infinite;
    /* le jeton met 92 % du cycle à parcourir la ligne : ce diviseur cale
       l'allumage de chaque pastille sur son passage */
    animation-delay: calc(var(--dur) * var(--k) / 6.45);
}
@keyframes nodelit {
    0%, 4% { background: var(--accent); border-color: var(--accent); transform: scale(1.5); }
    26%, 100% { background: var(--cream); border-color: var(--line); transform: scale(1); }
}
.chain-nodes b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 23px);
    line-height: 1.14;
    letter-spacing: -0.016em;
}
.chain-nodes span {
    display: block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft-2);
}
.chain-cap {
    margin-top: clamp(28px, 3.4vw, 48px);
    max-width: 62ch;
    font-size: 14.5px;
    color: var(--soft);
}
.chain-cap em { font-style: italic; color: var(--ink); }

@media (max-width: 860px) {
    .chain-nodes { grid-template-columns: 1fr 1fr 1fr; row-gap: 26px; }
    .chain-line { display: none; }
    .chain-nodes li { padding-top: 20px; border-top: 1px solid var(--line); }
    .chain-nodes li::before { top: -4px; animation: none; background: var(--accent); border-color: var(--accent); }
}
@media (max-width: 560px) { .chain-nodes { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .chain-run, .chain-line::after, .chain-nodes li::before { animation: none; }
    .chain-line::after { transform: scaleX(1); }
    .chain-nodes li::before { background: var(--accent); border-color: var(--accent); }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO « LE DEVIS À ZÉRO » — approche
   Chaque ligne du devis se raye. Le total tombe à 0 $.
   ═══════════════════════════════════════════════════════════════════════ */
.ah { padding: calc(var(--nav) + clamp(58px, 8vw, 112px)) 0 var(--s6); }
.ah-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(34px, 5vw, 88px);
    align-items: center;
}
.ah .eyebrow { margin-bottom: var(--s3); }
.ah h1 { max-width: 13ch; }
.ah .lead { margin-top: var(--s4); }

.quote {
    padding: clamp(22px, 2.6vw, 38px);
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--cream-2);
    box-shadow: 0 26px 60px -46px rgba(17, 17, 16, 0.5);
}
.quote-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft-2);
}
.quote-top b { color: var(--ink); font-weight: 400; }
.quote-lines li {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(11px, 1.3vw, 16px) 0;
    border-bottom: 1px solid rgba(226, 223, 216, 0.7);
    font-size: 14px;
    color: var(--soft);
}
.quote-lines b {
    flex-shrink: 0;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 13px;
    color: var(--ink);
    transition: color 0.5s ease calc(var(--k) * 0.13s + 0.75s);
}
.quote-lines li::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.62s var(--power) calc(var(--k) * 0.13s + 0.5s);
}
.ah.on .quote-lines li::after { transform: scaleX(1); }
.ah.on .quote-lines b { color: var(--soft-2); }
.quote-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-top: clamp(16px, 2vw, 24px);
    padding-top: clamp(16px, 2vw, 24px);
    border-top: 1px solid var(--ink);
}
.quote-total span {
    max-width: 20ch;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.7;
}
.quote-total b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(46px, 6vw, 92px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--accent);
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.7s ease 1.5s, transform 0.9s var(--expo) 1.5s;
}
.ah.on .quote-total b { opacity: 1; transform: none; }
.quote-note {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft-2);
}
@media (max-width: 900px) { .ah-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .quote-lines li::after { transform: scaleX(1); }
    .quote-total b { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO « LE MUR » — travaux
   Deux rangées de vrais écrans qui dérivent en sens contraire.
   ═══════════════════════════════════════════════════════════════════════ */
/* le mur doit mordre sur le bas de l'écran dès le chargement : c'est lui
   qui dit « ces produits existent », pas le titre */
.rh { padding: calc(var(--nav) + clamp(34px, 4.4vw, 70px)) 0 0; overflow: hidden; }
.rh .eyebrow { margin-bottom: var(--s3); }
.rh h1 { max-width: 15ch; font-size: clamp(34px, 5vw, 82px); }
.rh .lead { margin-top: var(--s3); }
.rh-wall {
    margin-top: clamp(32px, 3.8vw, 58px);
    padding-bottom: clamp(46px, 6vw, 86px);
    display: grid;
    gap: clamp(8px, 1vw, 16px);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    user-select: none;
}
/* deux pistes identiques par voie : quand la première a fini de sortir,
   la seconde occupe déjà sa place — la bande ne montre jamais de trou */
.rh-lane { display: flex; overflow: hidden; }
.rh-row {
    display: flex;
    flex-shrink: 0;
    gap: clamp(8px, 1vw, 16px);
    padding-right: clamp(8px, 1vw, 16px);
    animation: marq 58s linear infinite;
}
.rh-lane.rev .rh-row { animation-duration: 76s; animation-direction: reverse; }
.rh-wall:hover .rh-row { animation-play-state: paused; }
.rh-row figure {
    flex-shrink: 0;
    width: clamp(230px, 26vw, 430px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: var(--cream-2);
    border: 1px solid var(--line);
}
.rh-row img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(0.9);
}
@media (prefers-reduced-motion: reduce) { .rh-row { animation: none; } }

/* ═══════════ HORLOGE VIVANTE — contact ═══════════ */
/* la règle générique .contact-note span la remettrait en display:block */
.contact-note span.now, .now {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.now i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(196, 71, 26, 0.18);
    animation: ping 2.2s ease-in-out infinite;
}
.now b { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ═══════════ EN-TÊTE DE DOSSIER QUI S'OUVRE ═══════════ */
.pj-head .pj-shot > img, .pj-head .pj-shot > video {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.1);
    transition: clip-path 1.25s 0.25s var(--expo), transform 1.7s 0.25s var(--expo);
}
.pj-head.on .pj-shot > img, .pj-head.on .pj-shot > video { clip-path: inset(0 0 0 0); transform: none; }
.pj-head .pj-mark { opacity: 0; transform: scale(0.72); transition: opacity 0.7s ease 0.1s, transform 0.9s var(--expo) 0.1s; }
.pj-head.on .pj-mark { opacity: 1; transform: none; }
.pj-head .pj-meta > div { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease var(--d, 0s), transform 0.9s var(--expo) var(--d, 0s); }
.pj-head.on .pj-meta > div { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .pj-head .pj-shot > img, .pj-head .pj-shot > video { clip-path: none !important; transform: none !important; }
    .pj-head .pj-mark, .pj-head .pj-meta > div { opacity: 1 !important; transform: none !important; }
}