/* ═══════════════════════════════════════════════════════════════
   LA SEINE — une courbe simple sépare le bleu des rives
   du beige de la terre. Elle ne bouge qu'avec le défilement.
═════════════════════════════════════════════════════════════════ */
:root{--river-w:clamp(58px,8vw,150px);--river-r:clamp(150px,19vw,340px);--gutter:clamp(22px,3vw,66px)}

.fullpage{--pad-x:calc(var(--river-w) + var(--gutter))}
.fullpage>.fp-panel{padding-left:calc(var(--river-w) + var(--gutter));padding-right:calc(var(--river-r) + var(--gutter))}
.topbar{padding-left:calc(var(--river-w) + var(--gutter));padding-right:calc(var(--river-r) + var(--gutter))}

.riviere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.riviere svg{position:absolute;top:0;height:300vh;width:calc(var(--river-w) + 2px);display:block;will-change:transform}
.riviere .r-left{left:0;transform:translateY(var(--flow,0px))}
.riviere .r-right{right:0;width:calc(var(--river-r) + 2px);transform:translateY(var(--flow-r,0px)) scaleX(-1)}
.riviere .eau{fill:var(--c-petrol)}

@media (max-width:860px){
  :root{--river-w:clamp(22px,6vw,44px);--river-r:clamp(26px,7vw,54px);--gutter:clamp(14px,4vw,28px)}
}