/* FishReplay / performance-fishing apparel direction.
   Une seule grammaire visuelle : topographie, marquages techniques, touches néon.
   Les poissons sont des motifs intégrés, jamais des panneaux promotionnels isolés. */
:root{
  --ink:#071116;--deep:#071116;--mint:#46ece2;--lime:#d8ff35;
  --cream:#f7f7eb;--pink:#ff4f94;--muted:#9eb4b7;
  --electric:#d8ff35;--aqua:#46ece2;--hot:#ff4f94;
}
html{scroll-padding-top:80px}
body{background:#071116}
::selection{background:#d8ff35;color:#081116}
.page-progress{height:4px;background:linear-gradient(90deg,#d8ff35,#46ece2 48%,#ff4f94)}
.nav-bar{height:82px;border-bottom:1px solid rgba(201,239,221,.16);background:rgba(4,14,18,.55);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.nav-bar.scrolled{background:rgba(5,15,20,.96);border-color:rgba(216,255,53,.28)}
.site-brand>span>span,.footer-brand span{color:#d8ff35}
.site-brand img{filter:drop-shadow(0 0 10px rgba(216,255,53,.35))}
.main-links a{color:#eaf1ed;letter-spacing:.16em}
.main-links a:hover{color:#d8ff35}
.beta-indicator{color:#dce3dc;letter-spacing:.1em}
.beta-indicator b{background:#d8ff35;box-shadow:0 0 18px rgba(216,255,53,.75)}
.pill-link{min-height:60px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);letter-spacing:.13em;transition:transform .25s,filter .25s,box-shadow .25s}
.pill-bright{background:#d8ff35;color:#081116}
.pill-mint{background:#d8ff35;color:#081116}
.pill-link:hover{filter:saturate(1.12) brightness(1.05)}

/* Première impression : photo textile + architecture graphique, sans collage. */
.hero{min-height:760px;min-height:100svh;background:#07191c url('assets/fish-outdoor-editorial-v9.webp') center 54%/cover no-repeat}
.hero-film{z-index:0;background:
  linear-gradient(90deg,rgba(3,12,17,.94) 0%,rgba(3,12,18,.79) 30%,rgba(3,14,20,.33) 60%,rgba(3,15,18,.05) 100%),
  linear-gradient(0deg,rgba(3,12,16,.92),transparent 35%,rgba(3,12,16,.16) 72%),
  repeating-linear-gradient(112deg,transparent 0 66px,rgba(216,255,53,.025) 67px,transparent 68px)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:url('assets/topography-v9.svg') left 35%/min(66vw,900px) auto no-repeat;opacity:.12;mix-blend-mode:screen}
.hero::after{content:'';position:absolute;z-index:1;left:5.2vw;top:calc(82px + 12vh);height:1px;width:min(44vw,670px);background:linear-gradient(90deg,#d8ff35,transparent);pointer-events:none}
.hero-fish-art{position:absolute;z-index:1;right:-10vw;bottom:-16vh;width:min(62vw,900px);height:70vh;background:url('assets/fish-pike-neon-v9.webp') center/contain no-repeat;opacity:.24;mix-blend-mode:screen;filter:saturate(1.1);-webkit-mask-image:linear-gradient(95deg,transparent 5%,#000 42%,#000 80%,transparent 100%);mask-image:linear-gradient(95deg,transparent 5%,#000 42%,#000 80%,transparent 100%);pointer-events:none;animation:fish-drift 15s ease-in-out infinite alternate}
.hero-target{position:absolute;z-index:1;left:47%;top:43%;width:270px;aspect-ratio:1;border:1px solid rgba(216,255,53,.16);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero-target span{position:absolute;inset:19%;border:1px dashed rgba(216,255,53,.14);border-radius:50%}
.hero-target span:nth-child(2){inset:39%;border-style:solid}
.hero-target span:nth-child(3){inset:49.5%;background:#d8ff35;border:0;box-shadow:0 0 18px #d8ff35}
.hero-content{z-index:3;max-width:1300px;padding:150px 5.2vw 122px}
.hero-eyebrow{color:#d8ff35;font-size:11px;font-weight:800;letter-spacing:.17em;max-width:650px}
.hero-eyebrow .small-dash{background:#d8ff35}
.hero-title{font-size:clamp(90px,10.7vw,197px);line-height:.79;letter-spacing:-.027em;text-shadow:0 12px 70px rgba(0,0,0,.37)}
.hero-title em{font:italic 1.0em/.8 var(--serif);color:#d8ff35;letter-spacing:-.06em;white-space:nowrap;text-shadow:0 0 50px rgba(216,255,53,.18)}
.hero-intro{max-width:840px;gap:45px;align-items:center;margin-top:clamp(28px,5vh,54px)}
.hero-intro p{max-width:425px;font-size:clamp(15px,1.23vw,19px);line-height:1.55;color:#e9f0eb}
.hero-intro strong{color:#e7ff9e}
.hero-gear{z-index:3;bottom:116px;border-color:rgba(216,255,53,.3);background:rgba(4,17,21,.78);padding:17px 21px 17px 16px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
.hero-gear strong{color:#efffee}.hero-gear>div>span{color:#afc3bc}
.gear-pulse{border-color:#d8ff35}.gear-pulse:after{background:#d8ff35;box-shadow:0 0 13px #d8ff35}
.hero-foot{z-index:3;border-color:rgba(216,255,53,.28);color:#c5d4ce}
.hero-foot>a span{color:#d8ff35}
@keyframes fish-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1.6%,1.5%,0)}}

/* L'explication doit être immédiate, sans une seule carte d'habillage inutile. */
.method{position:relative;isolation:isolate;overflow:hidden;background:#0d1b1c;color:#f3f5ea;padding:45px max(5.3vw,calc((100vw - 1650px)/2)) 55px;border-top:1px solid rgba(216,255,53,.23);border-bottom:1px solid rgba(216,255,53,.3)}
.method::before{content:'';position:absolute;z-index:-1;right:-17%;top:-22%;width:81%;height:140%;background:url('assets/fish-pike-neon-v9.webp') right center/contain no-repeat;opacity:.105;mix-blend-mode:screen;filter:saturate(.8);pointer-events:none}
.method::after{content:'';position:absolute;z-index:-1;inset:0;background:url('assets/topography-v9.svg') right center/65% auto no-repeat;opacity:.22;pointer-events:none}
.method-topline{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(234,250,226,.2);padding-bottom:18px;color:#d8ff35;font-size:10px;font-weight:800;letter-spacing:.21em}
.method-topline-extra{color:#9fb6a9}
.method-lead{display:grid;grid-template-columns:1.4fr .65fr;column-gap:60px;align-items:end;padding:75px 0 65px}
.method-kicker{grid-column:1/-1;color:#d8ff35;margin:0 0 21px;font-size:12px;letter-spacing:.21em;font-weight:800}
.method h2{font:800 clamp(75px,8vw,150px)/.79 var(--display);letter-spacing:-.02em;margin:0;text-transform:uppercase}
.method h2 em{font:italic .67em/.91 var(--serif);letter-spacing:-.055em;color:#d8ff35;white-space:nowrap}
.method-lead>p:last-child{color:#c4d5cb;max-width:390px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;margin:0 0 5px}
.method-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;margin:0;border:1px solid rgba(214,245,209,.22)}
.method-steps li{min-height:245px;position:relative;padding:25px 32px 31px;background:rgba(4,17,21,.36);border-right:1px solid rgba(214,245,209,.22);transition:background .35s}
.method-steps li:last-child{border-right:0}
.method-steps li:hover{background:rgba(68,108,69,.21)}
.method-steps li::after{content:'';position:absolute;left:0;bottom:0;right:0;height:4px;transform:scaleX(0);transform-origin:left;transition:transform .35s;background:linear-gradient(90deg,#d8ff35,#46ece2)}
.method-steps li:hover::after{transform:scaleX(1)}
.method-number{display:flex;justify-content:space-between;align-items:center;color:#d8ff35;font:800 17px var(--display);letter-spacing:.09em;padding-bottom:25px;border-bottom:1px solid rgba(216,255,53,.2)}
.method-number>span{font-size:21px}
.method-steps strong{display:block;font:800 clamp(40px,4vw,70px)/.9 var(--display);letter-spacing:-.01em;margin:23px 0 11px}
.method-steps p{font-size:14px;line-height:1.6;color:#c0d0c9;margin:0;max-width:340px}
.method-tail{padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:10px;letter-spacing:.13em;font-weight:800;color:#93a99b}
.method-tail a{color:#d8ff35;display:flex;align-items:center;gap:12px}
.method-tail a:hover{text-decoration:underline;text-underline-offset:6px}
.method-tail a span{font-size:17px}

/* Les captures sont intégrées à la même direction artistique : motifs sobres autour. */
.experience{background:#0b1c1e}
.experience-slide::before{content:'';position:absolute;z-index:0;inset:0;background:url('assets/topography-v9.svg') right center/73vw auto no-repeat;opacity:.13;pointer-events:none}
.experience-slide::after{content:'';position:absolute;top:83px;right:5.3vw;width:70px;height:7px;background:repeating-linear-gradient(90deg,#d8ff35 0 12px,transparent 12px 19px);opacity:.9}
.slide-record{background:radial-gradient(ellipse at 82% 52%,rgba(27,125,128,.4),transparent 43%),linear-gradient(132deg,#061c21,#08141a 76%)}
.slide-save{background:radial-gradient(ellipse at 76% 50%,rgba(182,229,176,.58),transparent 45%),linear-gradient(136deg,#f4f5e9,#cde7db)}
.slide-memory{background:radial-gradient(ellipse at 81% 49%,rgba(224,44,132,.29),transparent 43%),linear-gradient(135deg,#25182b,#0b1923 79%)}
.scene-index{font-size:11px;color:#d8ff35;letter-spacing:.15em}
.scene-dash{background:#d8ff35}
.scene-heading{font-size:clamp(66px,6.6vw,126px);line-height:.85;white-space:normal;max-width:680px;margin-bottom:27px}
.scene-heading em{font-size:.67em;line-height:.95;color:#d8ff35;display:block;letter-spacing:-.045em;white-space:normal}
.scene-desc{font-size:clamp(15px,1.18vw,18px);line-height:1.65;max-width:480px;color:#ccdfd7}
.scene-proof{color:#d8ff35;font-size:9px;letter-spacing:.1em}
.scene-proof span{box-shadow:0 0 14px #d8ff35}
.scene-orbit{border-color:rgba(216,255,53,.18);box-shadow:inset 0 0 100px rgba(52,167,161,.09),0 0 130px rgba(18,162,159,.14)}
.scene-orbit::before{border-style:dashed;border-color:rgba(216,255,53,.12)}
.scene-orbit::after{border-color:rgba(216,255,53,.18)}
.slide-save .scene-heading,.slide-save .scene-desc{color:#112b2a}
.slide-save .scene-index,.slide-save .scene-proof{color:#2a6254}
.slide-save .scene-heading em{color:#c42678}
.slide-save .scene-orbit{border-color:rgba(6,85,73,.16)}
.slide-memory .scene-heading em{color:#ff82bd}
.scene-ghost{font-size:clamp(180px,28vw,500px);left:3vw;color:rgba(216,255,53,.032)}
.slide-save .scene-ghost{color:rgba(12,81,69,.05)}
.slide-memory .scene-ghost{color:rgba(255,79,148,.044)}
.image-zoom{color:#d8ff35;letter-spacing:.13em}
.image-zoom:hover{color:#46ece2}
.slide-save .image-zoom{color:#245c4b}
.progress-fill{background:#d8ff35}

/* League : un vrai parcours expliqué, classement explicitement fictif sur le site. */
.league{background:#06131c url('assets/fish-league-v2.webp') center/cover no-repeat}
.league-shade{background:linear-gradient(90deg,rgba(4,13,20,.97),rgba(3,14,23,.87) 43%,rgba(4,16,23,.45)),linear-gradient(0deg,rgba(5,12,21,.86),transparent 26%),url('assets/topography-v9.svg') 75% center/64vw auto no-repeat}
.league-top{border-color:rgba(216,255,53,.35)}
.league-top>.eyebrow,.league-edition{color:#d8ff35}
.league-fr{color:#dbe8e1}
.league-heading{font-size:clamp(70px,7.5vw,138px);line-height:.8;white-space:normal;margin:25px 0 25px;max-width:780px}
.league-heading em{font-size:.73em;line-height:.95;color:#d8ff35;white-space:nowrap;text-transform:uppercase}
.league-copy>p{max-width:535px;line-height:1.62;color:#dae5dd}
.league-checks{margin:21px 0 28px;gap:10px}
.league-checks span{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(216,255,53,.24);background:rgba(20,44,38,.62);padding:11px 12px;font-size:9px;letter-spacing:.06em;color:#eff5e9}
.league-checks b{font:800 16px var(--display);color:#d8ff35;margin-right:1px}
.rank-light{background:radial-gradient(circle,rgba(216,255,53,.17),rgba(31,134,116,.1) 46%,transparent 74%)}
.rank-frame{border-color:rgba(216,255,53,.53)}
.league-bottom{border-color:rgba(216,255,53,.29);color:#d2e1ce}
.league-bottom span:first-child{color:#d8ff35}

/* Conclusion graphique : typographie intégrée au motif, sans photo supplémentaire. */
.closing{background:#0b1718;min-height:720px}
.closing-bg{background:
  linear-gradient(90deg,rgba(8,21,23,.86),rgba(8,21,23,.72)),
  url('assets/fish-pike-neon-v9.webp') 85% 60%/min(93vw,1150px) auto no-repeat,
  url('assets/topography-v9.svg') center/cover no-repeat,
  radial-gradient(circle at 80% 50%,#1b3941,#081115 65%);opacity:1}
.closing::after{content:'';position:absolute;left:50%;top:18%;height:1px;width:min(72vw,960px);transform:translateX(-50%);background:linear-gradient(90deg,transparent,#d8ff35 50%,transparent);pointer-events:none;opacity:.8}
.closing-inner{position:relative;z-index:1}
.closing-inner .eyebrow{color:#d8ff35}
.closing h2{font-size:clamp(88px,11vw,200px);line-height:.81}
.closing h2 em{color:#d8ff35;font-size:.7em}
.closing-inner>p:not(.eyebrow){max-width:480px;font-size:16px;line-height:1.62;color:#dfede6}
.footer{background:#061014;border-top:1px solid rgba(216,255,53,.3)}
.footer-main>span{color:#d0ded0}
.footer-disclaimer{color:#9dafa9}
.footer a:hover{color:#d8ff35}
.lightbox-close{background:#d8ff35;color:#0c2021}
@media(prefers-reduced-motion:no-preference){
  .reveal-initial{opacity:0;translate:0 24px;transition:opacity .75s ease,translate .75s cubic-bezier(.2,.75,.2,1)}
  .reveal-initial.is-inview{opacity:1;translate:0 0}
  .method-steps li:nth-child(2){transition-delay:.08s}
  .method-steps li:nth-child(3){transition-delay:.16s}
}

@media(min-width:1800px){.hero-title{font-size:190px}.hero-content{max-width:1500px}}
@media(max-width:1200px) and (min-width:881px){
  .hero-title{font-size:10vw}.hero-intro{flex-wrap:wrap;gap:22px}
  .method{padding-inline:4vw}.method h2{font-size:7.7vw}.method-lead{gap:35px}
  .method-steps li{padding-inline:22px}.league-heading{font-size:7.5vw}
  .league-body{gap:15px}.league-checks span{font-size:8px;padding:9px 8px}
}
@media(max-width:880px){
  html{scroll-padding-top:65px}
  .nav-bar{height:66px;background:rgba(4,16,19,.82)}
  .main-links{top:66px;background:rgba(5,17,20,.98)}
  .nav-right .beta-indicator{font-size:8px;letter-spacing:0}
  .hero{min-height:790px;min-height:100svh;background-position:67% center}
  .hero-film{background:linear-gradient(90deg,rgba(2,13,18,.77),rgba(2,15,20,.35)),linear-gradient(0deg,rgba(2,12,17,.96) 0%,rgba(3,14,20,.36) 55%,rgba(2,12,17,.58) 100%)}
  .hero::before{background-size:110vw auto;opacity:.11}
  .hero::after{top:130px;left:22px;width:55vw}
  .hero-fish-art{width:85vw;height:43vh;right:-32vw;bottom:6vh;opacity:.18;animation:none}
  .hero-target{width:150px;left:80%;top:43%;opacity:.55}
  .hero-content{padding:185px 22px 250px}
  .hero-eyebrow{max-width:340px;font-size:9px;letter-spacing:.11em;line-height:1.5}
  .hero-title{font-size:clamp(67px,15.2vw,112px);line-height:.84;letter-spacing:-.02em}
  .hero-title em{font-size:.96em}
  .hero-intro{margin-top:26px;display:block}
  .hero-intro p{max-width:350px;font-size:15px;line-height:1.6;margin-bottom:25px}
  .pill-link{min-height:55px;font-size:10px;padding:0 18px}
  .hero-gear{left:22px;bottom:90px;background:rgba(3,16,20,.78)}
  .hero-foot{left:22px;right:22px}
  .hero-foot>a{gap:10px;font-size:8px}
  .method{padding:25px 22px 40px}
  .method-topline{font-size:9px;letter-spacing:.08em}
  .method-topline-extra{display:none}
  .method::before{right:-40%;top:0;width:130%;opacity:.08}
  .method::after{background-size:140vw auto;opacity:.16}
  .method-lead{display:block;padding:65px 0 35px}
  .method-kicker{margin-bottom:15px;font-size:10px}
  .method h2{font-size:clamp(68px,13vw,108px);line-height:.84}
  .method h2 em{font-size:.61em;white-space:normal}
  .method-lead>p:last-child{margin:24px 0 0;max-width:500px;font-size:15px;line-height:1.62}
  .method-steps{grid-template-columns:1fr}
  .method-steps li{min-height:0;padding:20px 23px 26px;border-right:0;border-bottom:1px solid rgba(214,245,209,.22)}
  .method-steps li:last-child{border-bottom:0}
  .method-number{padding-bottom:13px}
  .method-steps strong{font-size:44px;margin:15px 0 7px}
  .method-steps p{font-size:14px;max-width:510px}
  .method-tail{align-items:flex-start;flex-direction:column;gap:15px;font-size:9px}
  .experience-slide{padding:90px 24px 85px;min-height:790px}
  .experience-slide::before{background-size:155vw auto;opacity:.1}
  .experience-slide::after{top:80px;right:22px;width:47px;height:5px}
  .scene-heading{font-size:clamp(63px,12.8vw,103px);line-height:.85;max-width:590px;margin-bottom:20px}
  .scene-heading em{font-size:.71em}
  .scene-desc{font-size:15px;line-height:1.6}
  .scene-proof{margin-top:20px;font-size:9px}
  .scene-visual{padding:22px 0 0}
  .scene-orbit{width:min(80vw,470px)}
  .slide-save .scene-heading{color:#102c2a}
  .league{min-height:1040px;padding:86px 24px 26px}
  .league-shade{background:linear-gradient(0deg,rgba(4,14,19,.95),rgba(4,16,23,.81)),url('assets/topography-v9.svg') center/160vw auto no-repeat}
  .league-top>.eyebrow{font-size:9px;line-height:1.4}
  .league-body{padding-top:46px;gap:5px}
  .league-heading{font-size:clamp(70px,12.8vw,114px);margin:22px 0}
  .league-heading em{font-size:.76em}
  .league-copy>p{font-size:15px;line-height:1.62}
  .league-checks{gap:8px;margin:18px 0 24px}
  .league-checks span{padding:8px 9px;font-size:8px;letter-spacing:0}
  .league-checks b{font-size:14px}
  .league-visual{min-height:500px;padding:32px 0}
  .rank-frame{width:clamp(205px,52vw,290px)}
  .league-bottom{font-size:8px;line-height:1.4}
  .closing{min-height:700px}
  .closing-bg{background:linear-gradient(90deg,rgba(6,19,21,.82),rgba(7,20,24,.74)),url('assets/fish-pike-neon-v9.webp') 70% center/150vw auto no-repeat,url('assets/topography-v9.svg') center/180vw auto no-repeat,#07171d}
  .closing::after{top:14%;width:80vw}
  .closing h2{font-size:clamp(78px,14vw,132px)}
  .closing h2 em{font-size:.73em}
  .closing-inner>p:not(.eyebrow){font-size:15px}
}
@media(max-width:390px){
  .hero-content{padding-inline:19px}.hero-title{font-size:15vw}
  .hero::after{left:19px}.hero-eyebrow{font-size:8px}
  .hero-intro p{font-size:14px}
  .hero-gear{left:19px}.hero-foot{left:19px;right:19px}
  .method{padding-inline:19px}.method h2{font-size:12.2vw}
  .experience-slide{padding-inline:20px}.scene-heading{font-size:12.4vw}
  .league{padding-inline:20px}.league-heading{font-size:12vw}
  .league-checks span{font-size:7px}
  .closing h2{font-size:13vw}
}
@media(prefers-reduced-motion:reduce){.hero-fish-art{animation:none}.method-steps li::after{transition:none}}