:root{--bg:225 18% 6%;--fg:34 22% 90%;--line:rgba(202,207,220,.09);--line-strong:rgba(202,207,220,.15);--red:#ed4b42;--font:'DM Sans',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:hsl(var(--bg))}
body{min-height:100dvh;overflow-x:hidden;display:flex;flex-direction:column;font-family:var(--font);color:hsl(var(--fg));-webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 82% 2%,rgba(126,28,23,.13),transparent 28rem),radial-gradient(circle at 12% 80%,rgba(17,48,62,.13),transparent 30rem),hsl(var(--bg))}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.grid{position:fixed;inset:0;z-index:-1;opacity:.7;pointer-events:none;background-image:linear-gradient(rgba(177,186,204,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(177,186,204,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.45) 55%,transparent 100%)}

.nav{position:fixed;inset:1rem 1rem auto;z-index:30;max-width:1180px;margin:0 auto;padding:.75rem 1rem;border-radius:1rem;background:rgba(12,14,19,.78);border:1px solid var(--line);box-shadow:0 16px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.75rem}
.brand img{width:2.75rem;height:2.75rem;border-radius:.75rem;object-fit:contain}
.brand__copy{display:grid;line-height:1}
.brand__copy strong{color:#f1eee7;font-size:.88rem;letter-spacing:.13em}
.brand__copy small{margin-top:.3rem;color:#777b86;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase}
.tabs{display:flex;gap:.3rem;padding:.25rem;border-radius:.85rem;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.tab{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border:0;border-radius:.65rem;background:none;color:#9a9ea8;font-size:.78rem;font-weight:600;cursor:pointer;transition:.2s}
.tab:hover{color:#f1eee7}
.tab[aria-selected=true]{color:#fff2ed;background:rgba(237,75,66,.16);box-shadow:inset 0 0 0 1px rgba(237,75,66,.5)}
.nav__hub{padding:.5rem .85rem;border-radius:.7rem;color:#9a9ea8;font-size:.76rem;font-weight:600}
.nav__hub:hover{color:#f1eee7;background:rgba(255,255,255,.06)}

main{flex:1;width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:6.75rem 0 2.5rem}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.kicker{color:var(--red);font-size:.66rem;font-weight:700;letter-spacing:.3em}
h1{margin-top:.5rem;color:#f1eee7;font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;line-height:1;letter-spacing:-.04em}
.head p{margin-top:.55rem;color:#8a8f9a;font-size:.9rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:99px;border:1px solid var(--line-strong);background:rgba(255,255,255,.025);color:#b0b4bd;font-size:.68rem;font-weight:600;letter-spacing:.06em}
.badge::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#4fd08a;box-shadow:0 0 10px #4fd08a}
.badge.srv::before{background:#e9b44c;box-shadow:0 0 10px #e9b44c}

.work{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1.25rem;align-items:start}
.panel{border-radius:1.25rem;border:1px solid var(--line-strong);background:linear-gradient(160deg,rgba(27,30,38,.92),rgba(13,15,20,.96));box-shadow:0 26px 70px rgba(0,0,0,.45)}
.stage{padding:1rem}
.file{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem;color:#8a8f9a;font-size:.74rem}
.file b{color:#d9d5cc;font-weight:600}
.link{background:none;border:0;color:var(--red);font-size:.74rem;font-weight:700;cursor:pointer}
.link:hover{opacity:.75}

.screen{position:relative;aspect-ratio:16/9;border-radius:.9rem;overflow:hidden;background:#050608;border:1px solid var(--line)}
.screen video{width:100%;height:100%;object-fit:contain;display:block}
.drop{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;text-align:center;padding:1.5rem;cursor:pointer;border:2px dashed transparent;border-radius:.9rem;transition:.2s;
  background:radial-gradient(ellipse at 50% 40%,rgba(237,75,66,.12),transparent 65%)}
.drop:hover,.drop.over{border-color:rgba(237,75,66,.55);background:radial-gradient(ellipse at 50% 40%,rgba(237,75,66,.22),transparent 65%)}
.drop__ico{width:3.6rem;height:3.6rem;display:grid;place-items:center;border-radius:1rem;border:1px solid rgba(237,75,66,.5);background:rgba(237,75,66,.14);color:#fff2ed}
.drop strong{color:#f1eee7;font-size:1.1rem}
.drop span{color:#8a8f9a;font-size:.8rem}
.clock{position:absolute;left:.8rem;bottom:.8rem;padding:.3rem .6rem;border-radius:.5rem;background:rgba(8,9,12,.75);backdrop-filter:blur(6px);font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;color:#f1eee7}

.tl{margin-top:.9rem;padding:.85rem;border-radius:.9rem;border:1px solid var(--line);background:rgba(8,9,12,.4)}
.track{position:relative;height:3.4rem;border-radius:.6rem;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10%),linear-gradient(180deg,#1a1d25,#11131a);touch-action:none;user-select:none}
.thumbs{position:absolute;inset:0;display:flex;border-radius:.6rem;overflow:hidden}
.thumbs canvas{flex:1;min-width:0;height:100%;object-fit:cover;opacity:.85}
.shade{position:absolute;top:0;bottom:0;background:rgba(6,7,10,.72);backdrop-filter:grayscale(1)}
.sel{position:absolute;top:-2px;bottom:-2px;border:2px solid var(--red);border-radius:.6rem;box-shadow:0 0 22px rgba(237,75,66,.35);cursor:grab}
.h{position:absolute;top:-2px;bottom:-2px;width:14px;background:var(--red);cursor:ew-resize;display:grid;place-items:center}
.h::after{content:"";width:2px;height:40%;border-radius:2px;background:rgba(255,255,255,.85)}
.h.a{left:-2px;border-radius:.6rem 0 0 .6rem}.h.b{right:-2px;border-radius:0 .6rem .6rem 0}
.head-line{position:absolute;top:-6px;bottom:-6px;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);pointer-events:none}
.tl__row{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;color:#8a8f9a;font-size:.72rem;font-variant-numeric:tabular-nums}
.ctrl{display:flex;gap:.4rem}
.round{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:.65rem;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);cursor:pointer;color:#d9d5cc}
.round:hover{border-color:rgba(237,75,66,.5);color:#fff2ed;background:rgba(237,75,66,.14)}

.side{display:grid;gap:1rem}
.box{padding:1.1rem 1.15rem}
.box h2{color:#f1eee7;font-size:.9rem;font-weight:700}
.box>p{margin:.3rem 0 .9rem;color:#8a8f9a;font-size:.74rem;line-height:1.5}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
label{display:grid;gap:.35rem;color:#9a9ea8;font-size:.68rem;font-weight:600;letter-spacing:.04em}
label.full{grid-column:1/-1}
input[type=text],select{width:100%;padding:.6rem .7rem;border-radius:.65rem;border:1px solid var(--line-strong);background:rgba(8,9,12,.6);color:#f1eee7;font-size:.86rem;font-variant-numeric:tabular-nums;outline:none}
input[type=text]:focus,select:focus{border-color:rgba(237,75,66,.6)}
input[readonly]{color:#b0b4bd}
select option{background:#14161c}
/* Listes déroulantes : même rendu que le TCG / la Pêche (calculator-zone-trigger / -menu) */
.dd{position:relative}
.dd select{display:none}
.dd__trigger{display:flex;align-items:center;justify-content:space-between;gap:.65rem;width:100%;min-height:2.5rem;padding:0 .75rem;border:1px solid rgba(202,207,220,.15);border-radius:.42rem;outline:0;color:#dfd9d0;background:#111319;font-size:.8rem;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.dd__trigger>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__trigger svg{flex:0 0 auto;color:#aeb0b8;transition:color .2s,transform .2s}
.dd__trigger:hover,.dd__trigger:focus-visible,.dd.open .dd__trigger{border-color:rgba(237,75,66,.45);background:rgba(21,23,29,.9)}
.dd.open .dd__trigger svg{color:#ed8178;transform:rotate(180deg)}
.dd__menu{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:40;padding:.35rem;border:1px solid rgba(237,75,66,.3);border-radius:.65rem;background:rgba(20,22,29,.98);box-shadow:0 18px 35px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04);max-height:16rem;overflow-y:auto;scrollbar-width:none;animation:ddin .14s ease-out}
.dd__menu::-webkit-scrollbar{display:none}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}}
.dd__menu button{display:flex;align-items:center;width:100%;min-height:2.15rem;padding:.45rem .6rem;border:1px solid transparent;border-radius:.4rem;color:#aeb0b8;background:transparent;font-size:.78rem;text-align:left;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.dd__menu button:hover,.dd__menu button.is-active{border-color:rgba(237,75,66,.2);color:#f0eae2;background:rgba(237,75,66,.1)}
.dd__menu button.is-active{color:#ed8178}
.dd__menu button:focus-visible{outline:2px solid rgba(237,101,94,.88);outline-offset:-2px}
.go{width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1rem;border-radius:.85rem;border:1px solid rgba(237,75,66,.7);background:linear-gradient(180deg,#ed4b42,#c93a32);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 14px 36px rgba(237,75,66,.28);transition:.2s}
.go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.go.ghost{background:rgba(237,75,66,.14);box-shadow:none;border-color:rgba(237,75,66,.5);color:#fff2ed}
.hint{margin-top:.7rem;color:#777b86;font-size:.68rem;line-height:1.5;text-align:center}
.prog{height:.45rem;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin:.9rem 0 .5rem}
.prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c93a32,#ed4b42);transition:width .25s}
.done{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem .85rem;border-radius:.75rem;border:1px solid rgba(79,208,138,.3);background:rgba(79,208,138,.07);font-size:.76rem}
.done b{color:#9be8bf}

.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.size{padding:.65rem .5rem;border-radius:.7rem;border:1px solid var(--line-strong);background:rgba(255,255,255,.025);text-align:center;cursor:pointer;transition:.2s}
.size b{display:block;color:#f1eee7;font-size:.95rem}
.size small{color:#8a8f9a;font-size:.62rem;letter-spacing:.04em}
.size:hover{border-color:rgba(237,75,66,.4)}
.size.on{border-color:rgba(237,75,66,.7);background:rgba(237,75,66,.14)}
.cmp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;text-align:center}
.cmp div{padding:1.4rem 1rem;border-radius:.9rem;border:1px solid var(--line);background:rgba(8,9,12,.4)}
.cmp small{display:block;color:#8a8f9a;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.cmp b{display:block;margin-top:.45rem;color:#f1eee7;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.03em}
.cmp em{font-style:normal;color:#8a8f9a;font-size:.74rem}
.cmp .to b{color:var(--red)}
.cmp svg{color:#777b86}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}
.steps div{padding:.8rem;border-radius:.8rem;border:1px solid var(--line);font-size:.74rem;color:#9a9ea8;line-height:1.45}
.steps b{display:block;color:var(--red);font-size:.62rem;letter-spacing:.2em;margin-bottom:.3rem}

.footer{width:min(1180px,calc(100% - 2rem));margin:1rem auto 0;padding:1.35rem 0 1.6rem;border-top:1px solid var(--line);color:#686d78;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-align:center}
.footer b{color:var(--red)}
[hidden]{display:none!important}
@media(max-width:900px){.work{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}
@media(max-width:640px){.brand__copy small,.nav__hub{display:none}.tab span{display:none}}

/* ===== Ajouts du vrai site ===== */
.footer a{color:var(--red);transition:opacity .2s}
.footer a:hover{opacity:.75}
a.link{cursor:pointer}
button.size{font:inherit;color:inherit}
.go:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.go.busy{background:rgba(237,75,66,.14);box-shadow:none;border-color:rgba(237,75,66,.5);color:#fff2ed}
.mini{padding:.45rem .5rem;border-radius:.42rem;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:#b0b4bd;font-size:.68rem;font-weight:600;cursor:pointer;transition:.2s}
.mini:hover{border-color:rgba(237,75,66,.45);color:#fff2ed;background:rgba(237,75,66,.1)}
.notice{margin-top:.8rem;padding:.6rem .75rem;border-radius:.6rem;border:1px solid rgba(233,180,76,.28);background:rgba(233,180,76,.07);color:#e3d3a8;font-size:.74rem;line-height:1.5}
.err{margin-top:.6rem;padding:.55rem .65rem;border-radius:.5rem;border:1px solid rgba(237,75,66,.23);color:#ee9187;background:rgba(237,75,66,.07);font-size:.74rem;line-height:1.45}
.stage.over{border-color:rgba(237,75,66,.6)}
.done .link{white-space:nowrap}
/* ===== Bouton « Accueil RedSide » (même rendu que sur les autres sites) ===== */
.nav__left{display:flex;align-items:center;gap:.75rem;min-width:0}
.back{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border-radius:.75rem;border:1px solid rgba(220,222,229,.11);background:rgba(255,255,255,.035);color:#c9c5bd;font-size:.75rem;font-weight:600;white-space:nowrap;transition:color .2s,border-color .2s,background-color .2s}
.back:hover,.back:focus-visible{color:#fff2ed;border-color:rgba(237,75,66,.45);background:rgba(237,75,66,.1);outline:none}
.back svg{flex:0 0 auto}