/* =====================================================================
   LE JEU DE JIGSAW — page d'accueil
   Tout est préfixé « lp- » pour ne jamais entrer en conflit avec jeu.css
   ===================================================================== */
#landing{
  --bg:#050505;--panel:#0c0c0e;--panel2:#111114;--line:#211f1f;--red:#941C1C;--red2:#b0222c;--bone:#D8D3CA;--dim:#8b867d;--mute:#5d5953;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas","Courier New",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  background:var(--bg);color:var(--bone);font-family:var(--sans);font-size:15px;line-height:1.6;user-select:text;-webkit-user-select:text
}
#landing a{color:inherit;text-decoration:none}
#landing h1,#landing h2,#landing h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
#landing em{font-style:italic;color:var(--red2)}
#landing ol,#landing ul{list-style:none}

/* ---------- boutons ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;background:var(--red);color:#f3e9e4;border:1px solid var(--red);
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.lp-btn:hover{background:var(--red2);border-color:var(--red2)}
.lp-btn:active{transform:translateY(1px)}
.lp-btn:focus-visible,#landing a:focus-visible,#landing summary:focus-visible,#landing input:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.lp-btn-o{background:transparent;border-color:#3a3634;color:var(--bone);font-weight:500}
.lp-btn-o:hover{background:#151313;border-color:#6a6460}
.lp-btn-s{min-height:36px;padding:7px 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- navigation ---------- */
.lp-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  background:#050505ea;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.lp-logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.lp-logo svg{width:22px;height:22px;fill:none;stroke:var(--red2);stroke-width:2.4}
.lp-links{display:flex;gap:26px;font-size:13px;color:var(--dim)}
.lp-links a:hover,.lp-foot-l a:hover{color:var(--bone)}

/* ---------- hero ---------- */
.lp-hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:center;padding:90px 22px 110px;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 38% 42%,#5a101499,#0000 70%),
    radial-gradient(ellipse 40% 50% at 82% 30%,#2a0a0c88,#0000 70%),
    repeating-linear-gradient(0deg,#0000 0 46px,#0000004d 46px 48px),
    repeating-linear-gradient(90deg,#0000 0 110px,#00000038 110px 112px),
    linear-gradient(#0d0708,#050505)}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000030 2px 3px),radial-gradient(ellipse at center,#0000 50%,#000c 100%)}
.lp-frame{position:absolute;inset:22px;pointer-events:none;z-index:2;
  background:
    linear-gradient(#6b6660,#6b6660) 0 0/22px 1px no-repeat,linear-gradient(#6b6660,#6b6660) 0 0/1px 22px no-repeat,
    linear-gradient(#6b6660,#6b6660) 100% 0/22px 1px no-repeat,linear-gradient(#6b6660,#6b6660) 100% 0/1px 22px no-repeat,
    linear-gradient(#6b6660,#6b6660) 0 100%/22px 1px no-repeat,linear-gradient(#6b6660,#6b6660) 0 100%/1px 22px no-repeat,
    linear-gradient(#6b6660,#6b6660) 100% 100%/22px 1px no-repeat,linear-gradient(#6b6660,#6b6660) 100% 100%/1px 22px no-repeat}
.lp-osd{position:absolute;top:-8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--dim);background:transparent;padding:0 10px;text-transform:uppercase}
.lp-osd-l{left:26px}.lp-osd-r{right:26px}
.lp-osd i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d2413a;margin-right:8px;animation:lp-blink 1.4s steps(1) infinite}
@keyframes lp-blink{50%{opacity:.15}}
.lp-hero-in{position:relative;z-index:3;width:100%;max-width:980px;margin:0 auto}
.lp-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.lp-hero h1{font-size:clamp(50px,8.4vw,104px);line-height:.92;max-width:5.6em;margin-bottom:26px;text-shadow:0 2px 30px #000}
.lp-lead{font-size:16px;max-width:25em;color:#e4dfd6;margin-bottom:26px}
.lp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.lp-small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.lp-timer{position:absolute;right:max(46px,calc(50% - 490px));bottom:54px;z-index:3;border:1px solid #2a0c0c;background:#0a0303cc;padding:9px 16px 6px;text-align:right}
.lp-timer small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.lp-timer b{font-family:var(--mono);font-weight:400;font-size:30px;letter-spacing:.14em;color:#d2413a;text-shadow:0 0 12px #c9302c;font-variant-numeric:tabular-nums}
/* mur d'écrans */
.lp-mons{position:absolute;z-index:1;right:max(34px,calc(50% - 560px));top:74px;width:min(36vw,410px);height:340px;opacity:.9}
.lp-mon{position:absolute;background:#000;border:7px solid #0e0d0d;border-radius:10px/13px;box-shadow:0 0 0 1px #262323,0 20px 50px #000,inset 0 0 26px #000;overflow:hidden}
.lp-mon canvas{display:block;width:100%;height:100%;image-rendering:pixelated;filter:contrast(1.15)}
.lp-mon b{position:absolute;left:8px;top:6px;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.14em;color:#d8d3caaa}
.lp-mon::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px),radial-gradient(ellipse at center,#0000 40%,#000b)}
.lp-m1{right:0;top:0;width:56%;aspect-ratio:4/3;transform:rotate(1.5deg)}
.lp-m2{right:50%;top:36%;width:42%;aspect-ratio:4/3;transform:rotate(-2deg)}
.lp-m3{right:6%;top:52%;width:38%;aspect-ratio:4/3;transform:rotate(-.5deg)}

/* ---------- bandeau défilant ---------- */
.lp-marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0c;padding:15px 0}
.lp-marq-in{display:flex;align-items:center;gap:44px;width:max-content;animation:lp-marq 46s linear infinite}
.lp-marq span{font-family:var(--serif);font-style:italic;font-size:21px;text-transform:uppercase;letter-spacing:.02em;color:#77726a;white-space:nowrap}
.lp-marq i{font-style:normal;font-size:26px;line-height:1;color:var(--red2);font-weight:300}
@keyframes lp-marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.lp-sec{padding:clamp(72px,11vw,132px) 22px}
.lp-tight{padding-top:clamp(40px,6vw,70px);padding-bottom:clamp(60px,9vw,110px)}
.lp-alt{background:linear-gradient(#0e0f13,#0b0b0e);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-in{max-width:980px;margin:0 auto}
.lp-sec h2{font-size:clamp(32px,4.7vw,52px);line-height:1.02;max-width:13em;margin-bottom:clamp(30px,5vw,54px)}
.lp-p{color:var(--dim);max-width:30em;margin-top:-24px}
.lp-center{text-align:center}.lp-center h2{margin-left:auto;margin-right:auto}

/* concept */
.lp-concept{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(26px,5vw,56px);align-items:start}
.lp-evid{position:relative;aspect-ratio:5/6;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 60% at 45% 40%,#7a141a88,#0000 70%),repeating-linear-gradient(115deg,#0000 0 14px,#00000040 14px 15px),linear-gradient(#170a0b,#070505)}
.lp-evid svg{width:46%;height:46%;fill:none;stroke:#c9303a;stroke-width:.9;filter:drop-shadow(0 0 22px #941c1c);transform:rotate(-12deg)}
.lp-evid span{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.lp-evid::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000003a 2px 3px),radial-gradient(ellipse at center,#0000 45%,#000d)}
.lp-list{counter-reset:c}
.lp-list li{counter-increment:c;position:relative;padding:20px 0 20px 46px;border-bottom:1px solid var(--line)}
.lp-list li:first-child{padding-top:4px}
.lp-list li::before{content:"0" counter(c);position:absolute;left:0;top:27px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--red2)}
.lp-list li:first-child::before{top:11px}
.lp-list h3{font-size:25px;line-height:1.1;margin-bottom:6px}
.lp-list p{color:var(--dim);font-size:14px;max-width:32em}

/* démonstration */
.lp-demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(26px,5vw,60px);align-items:center}
.lp-demo h2{margin-bottom:44px}
.lp-rx{border:1px solid #2a2a30;background:#08080a}
.lp-rx-h{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid #1c1c21}
.lp-rx.ok .lp-rx-h span:last-child{color:#e4dfd6}
.lp-rx canvas{display:block;width:100%;height:auto;aspect-ratio:14/5;border-bottom:1px solid #1c1c21}
.lp-rx-l{display:block;padding:16px 14px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.lp-rx input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:calc(100% - 28px);margin:0 14px;height:30px;background:transparent;cursor:ew-resize;touch-action:none;--v:12%}
.lp-rx input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--red2) var(--v),#d8d3ca var(--v))}
.lp-rx input[type=range]::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--red2) var(--v),#d8d3ca var(--v))}
.lp-rx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:26px;margin-top:-11px;background:#d8d3ca;border:1px solid #000;border-radius:2px;box-shadow:0 2px 8px #000}
.lp-rx input[type=range]::-moz-range-thumb{width:18px;height:26px;background:#d8d3ca;border:1px solid #000;border-radius:2px}
#lp-rx-msg{padding:8px 14px 16px;font-size:13px;color:var(--dim);min-height:3.2em}
.lp-rx.ok #lp-rx-msg{color:#e4dfd6}

/* épreuves */
.lp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lp-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);padding:92px 16px 16px;overflow:hidden;min-height:250px}
.lp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:78px;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 80% 120% at 30% 0,#5a101477,#0000 70%),repeating-linear-gradient(0deg,#0000 0 2px,#00000040 2px 3px),#0a0808}
.lp-card b{position:absolute;left:16px;top:22px;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;color:#e9e3da}
.lp-card h3{font-size:23px;line-height:1.08;margin-bottom:8px}
.lp-card p{font-size:13.5px;color:var(--dim);flex:1}
.lp-card div{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.lp-card div span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#a8a399;background:#17171a;padding:3px 8px}
.lp-card-go{justify-content:space-between;padding-top:20px;background:radial-gradient(ellipse 90% 80% at 50% 100%,#5a101455,#0000 75%),var(--panel)}
.lp-card-go::before{display:none}
.lp-card-go h3{font-size:27px;font-style:italic;color:#e9e3da}
.lp-card-go .lp-btn{width:100%}

/* étapes */
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.lp-steps li{padding:22px 22px 26px;border-right:1px solid var(--line);background:var(--panel)}
.lp-steps li:last-child{border-right:none}
.lp-steps b{display:block;font-family:var(--serif);font-weight:400;font-size:64px;line-height:1;color:#5a1418;margin-bottom:14px}
.lp-steps h3{font-size:25px;line-height:1.1;margin-bottom:6px}
.lp-steps p{font-size:13.5px;color:var(--dim)}

/* interactions */
.lp-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.lp-feats>div{border-left:1px solid var(--line);padding-left:18px}
.lp-feats h3{font-size:22px;margin-bottom:4px}
.lp-feats p{font-size:14px;color:var(--dim)}

/* classement */
.lp-glow{background:radial-gradient(ellipse 60% 80% at 50% 50%,#3a0a0e99,#0000 70%),#060405;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-board{max-width:520px;margin:0 auto;border:1px solid #2a1416;background:#070405cc;padding:26px 22px}
#lp-board-empty small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
#lp-board-empty p{font-family:var(--serif);font-size:23px;line-height:1.2}
#lp-board-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:14px;align-items:baseline;padding:10px 4px;border-bottom:1px solid #1e1012;text-align:left;font-variant-numeric:tabular-nums}
#lp-board-list li:last-child{border-bottom:none}
#lp-board-list i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--red2)}
#lp-board-list b{font-family:var(--serif);font-weight:400;font-size:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lp-board-list span{font-family:var(--mono);font-size:12px;color:var(--dim)}
#lp-board-list strong{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--bone)}

/* questions */
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq details:first-child{border-top:1px solid var(--line)}
.lp-faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-family:var(--serif);font-size:22px;line-height:1.2}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--mono);font-size:20px;color:var(--red2)}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq p{color:var(--dim);font-size:14.5px;max-width:42em;padding:0 0 20px}

/* installation */
.lp-inst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-inst>div{border:1px solid var(--line);background:var(--panel2);padding:18px}
.lp-inst small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--red2);margin-bottom:8px}
.lp-inst p{font-size:14px;color:#c4bfb6}

/* appel final */
.lp-final{position:relative;text-align:center;padding:clamp(90px,14vw,170px) 22px;overflow:hidden;border-top:1px solid var(--line);
  background:radial-gradient(ellipse 55% 90% at 50% 60%,#6a121899,#0000 70%),repeating-linear-gradient(0deg,#0000 0 46px,#0000004d 46px 48px),repeating-linear-gradient(90deg,#0000 0 110px,#00000038 110px 112px),linear-gradient(#090506,#050505)}
.lp-final h2{font-size:clamp(46px,8vw,92px);line-height:.95;margin-bottom:30px}

/* pied de page */
.lp-foot{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:20px 46px;align-items:start;padding:44px max(22px,calc(50% - 490px)) 60px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.lp-foot-l{display:grid;gap:6px}
.lp-foot p{max-width:34em;justify-self:end;font-size:11.5px;line-height:1.6;color:var(--mute)}

/* apparition au défilement */
.lp-rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.lp-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.lp-rv{opacity:1;transform:none;transition:none}.lp-marq-in{animation:none}#landing{scroll-behavior:auto}}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .lp-links{display:none}
  .lp-mons{right:-40px;top:40px;width:300px;height:250px;opacity:.38}
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  #landing{font-size:15.5px}
  .lp-logo span{letter-spacing:.2em}
  .lp-hero{min-height:0;padding:74px 20px 130px;align-items:flex-start}
  .lp-frame{inset:12px}.lp-osd-r{display:none}.lp-osd-l{left:16px}
  .lp-hero h1{font-size:clamp(50px,15.5vw,76px)}
  .lp-cta .lp-btn{width:100%;min-height:52px;font-size:15px}
  .lp-timer{right:26px;bottom:34px}
  .lp-concept,.lp-demo{grid-template-columns:1fr}
  .lp-evid{aspect-ratio:16/10}
  .lp-evid svg{width:30%;height:60%}
  .lp-p{margin-top:-14px}.lp-demo h2{margin-bottom:30px}
  .lp-steps{grid-template-columns:1fr}
  .lp-steps li{border-right:none;border-bottom:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;column-gap:8px}
  .lp-steps li:last-child{border-bottom:none}
  .lp-steps b{grid-row:span 2;font-size:54px;margin:0}
  .lp-feats,.lp-inst{grid-template-columns:1fr}
  .lp-foot{grid-template-columns:1fr}.lp-foot p{justify-self:start}
  .lp-card{min-height:0}
  .lp-final .lp-btn{width:100%;max-width:340px;min-height:54px;font-size:15px}
}
@media(max-width:430px){
  .lp-cards{grid-template-columns:1fr}
  .lp-card{padding:20px 16px 16px 84px}
  .lp-card::before{right:auto;bottom:0;height:auto;width:68px;border-bottom:none;border-right:1px solid var(--line)}
  .lp-card b{left:14px;top:20px;font-size:38px}
  .lp-card-go{padding:20px 16px}
  .lp-card-go h3{margin-bottom:16px}
}