/* Section d'accueil : recherche OSINT animée (tutoriel) */
.osint-showcase{position:relative;max-width:1180px;margin:120px auto 0;padding:0 20px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.osint-showcase::before{content:"";position:absolute;z-index:-1;inset:-40px -10% auto auto;width:560px;height:560px;border-radius:50%;background:#ff2d3a;opacity:.12;filter:blur(120px);pointer-events:none}
.os-copy h2{margin:14px 0 16px;font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:-.045em;font-weight:760}
.os-copy h2 span{background:linear-gradient(100deg,#ff5a5a,#ff2d3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.os-copy>p{color:#a39aa0;font-size:16px;line-height:1.65;margin:0 0 22px;max-width:46ch}
.os-criteria{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.os-criteria li{padding:7px 13px;border-radius:99px;border:1px solid #ffffff1a;background:#ffffff06;color:#b9aeb4;font-size:13px;font-weight:600;transition:.35s}
.os-criteria li.on{color:#fff;border-color:#ff5a6a;background:#ff2d3a22;box-shadow:0 0 18px #ff2d3a40;transform:translateY(-2px)}
.os-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:99px;background:linear-gradient(120deg,#ff4a5a,#c2152b);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 32px #e0243b55;transition:transform .2s,box-shadow .2s}
.os-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px #e0243b88}

.os-window{position:relative;max-width:560px;justify-self:end;width:100%;border:1px solid #ffffff1f;border-radius:20px;background:linear-gradient(160deg,#17111a,#0b0a0e);box-shadow:0 40px 90px #000b,0 0 0 1px #ff2d3a14;overflow:hidden}
.os-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid #ffffff12;background:#ffffff04}
.os-bar i{width:10px;height:10px;border-radius:50%}
.os-bar i:nth-child(1){background:#ff5f57}.os-bar i:nth-child(2){background:#febc2e}.os-bar i:nth-child(3){background:#28c840}
.os-bar span{margin-left:10px;color:#7d7379;font-size:12px;font-family:ui-monospace,Consolas,monospace}
.os-body{position:relative;height:392px;padding:14px 16px;overflow:hidden}
.os-title{margin:0 0 2px;font-size:15px;font-weight:750;color:#fff}
.os-sub{margin:0 0 10px;font-size:11.5px;color:#8b8187}
.os-sec{margin-bottom:5px;border:1px solid #ffffff14;border-radius:12px;background:#0b0a0d;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.os-sec.open{border-color:#ff5a6a55;background:#0e0c12}
.os-sec.hot{box-shadow:0 0 0 3px #ff2d3a1c}
.os-sh{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px}
.os-ico{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.os-ico svg{width:13px;height:13px}
.os-sn{font-size:13px;font-weight:700;color:#fff}
.os-cnt{min-width:18px;padding:1px 6px;border-radius:99px;background:linear-gradient(120deg,#ff4a5a,#c2152b);color:#fff;font-size:10px;font-weight:800;text-align:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.os-cnt.on{transform:scale(1)}
.os-chev{margin-left:auto;width:7px;height:7px;border:solid #8f8189;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.os-sec.open .os-chev{transform:rotate(-135deg) translateY(-2px)}
.os-sf{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:0;padding:0 12px;opacity:0;transition:max-height .35s ease,padding .35s ease,opacity .3s}
.os-sec.open .os-sf{max-height:90px;padding:8px 12px 12px;opacity:1;border-top:1px solid #ffffff10}
.os-sf label{display:grid;gap:4px;font-size:10px;font-weight:650;letter-spacing:.03em;color:#9d8f96}
.os-in{display:flex;align-items:center;height:30px;padding:0 10px;border-radius:9px;border:1px solid #ffffff1c;background:#050407;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.os-in.typing{border-color:#ff5a6a;box-shadow:0 0 0 3px #ff2d3a26}
.os-in.typing::after{content:"";width:2px;height:13px;margin-left:2px;background:#ff5a6a;animation:blink 1s steps(1) infinite}
.os-in.filled{border-color:#ff5a6a70;background:#10080b}
.os-in.ph{color:#6f656b;font-weight:400}
.os-actions{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px;border:1px solid #ffffff1a;border-radius:99px;background:#0b0a0ee6}
.os-go,.os-reset{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 16px;border-radius:99px;font:inherit;font-size:12px;font-weight:700;color:#fff;transition:transform .15s,filter .15s,box-shadow .2s}
.os-go{border:0;background:linear-gradient(120deg,#ff4a5a,#c2152b);box-shadow:0 6px 18px #e0243b50}
.os-go svg,.os-reset svg{width:13px;height:13px}
.os-go.press{transform:scale(.92);filter:brightness(1.3)}
.os-go.hot{box-shadow:0 0 0 4px #ff2d3a33,0 6px 18px #e0243b80}
.os-reset{border:1px solid #ffffff22;background:#ffffff08;color:#e8dde1}
.os-filled{margin-left:auto;padding-right:8px;color:#ff9aa5;font-size:11px;font-weight:650}

.os-cursor{position:absolute;z-index:6;left:0;top:0;width:20px;height:20px;pointer-events:none;opacity:0;transition:transform .8s cubic-bezier(.45,.05,.2,1),opacity .3s;filter:drop-shadow(0 3px 6px #000a)}
.os-cursor.show{opacity:1}
.os-cursor svg{width:20px;height:20px;fill:#fff;stroke:#111;stroke-width:1.3}
.os-cursor::after{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;border:2px solid #ff5a6a;opacity:0;transform:scale(.3)}
.os-cursor.tap::after{animation:os-tap .45s ease-out}
@keyframes os-tap{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}

.os-over{position:absolute;inset:0;z-index:5;padding:14px 16px;background:#0c0a0f;opacity:0;pointer-events:none;transition:opacity .35s}
.os-over.on{opacity:1}
.os-scan{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;opacity:0;transition:opacity .3s}
.os-scan.on{opacity:1}
.os-radar{position:relative;width:112px;height:112px;border-radius:50%;border:1px solid #ff5a6a55;background:radial-gradient(circle,#ff2d3a22,transparent 70%)}
.os-radar::before,.os-radar::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid #ff5a6a40}
.os-radar::before{inset:0}
.os-radar b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#ff2d3a88,transparent 28%);animation:os-spin 1.3s linear infinite}
.os-radar em{position:absolute;width:7px;height:7px;border-radius:50%;background:#ff7a86;box-shadow:0 0 10px #ff5a6a;animation:os-ping 1.3s ease-out infinite}
.os-radar em:nth-of-type(1){left:28%;top:30%}.os-radar em:nth-of-type(2){left:64%;top:58%;animation-delay:.4s}.os-radar em:nth-of-type(3){left:46%;top:76%;animation-delay:.8s}
@keyframes os-spin{to{transform:rotate(360deg)}}
@keyframes os-ping{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
.os-log{color:#9a8f95;font:12px ui-monospace,Consolas,monospace;text-align:center;height:1.4em}
.os-prog{width:200px;height:4px;border-radius:9px;background:#ffffff14;overflow:hidden}
.os-prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#ff4a5a,#ff9aa5)}
.os-prog.run i{animation:os-fill 1.5s ease-out forwards}
@keyframes os-fill{to{width:100%}}
.os-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;color:#8f8389;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:0;transition:opacity .4s}
.os-head b{color:#fff;font-size:16px;letter-spacing:0}
.os-head.on{opacity:1}
.os-results{display:grid;gap:9px}
.os-card{display:flex;gap:12px;padding:11px 13px;border:1px solid #ffffff14;border-radius:14px;background:#0a090d;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .45s cubic-bezier(.22,.8,.22,1)}
.os-card.on{opacity:1;transform:none}
.os-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff22;background:#18171d;color:#fff;font-size:12px;font-weight:800}
.os-info{min-width:0;flex:1}
.os-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:800 13px ui-monospace,Consolas,monospace;text-transform:uppercase}
.os-name span:nth-of-type(2){color:#9c9ba6}
.os-src{padding:2px 9px;border-radius:7px;border:1px solid #ffffff1c;background:#ffffff08;color:#cfc9ce;font:500 11px Inter,system-ui,sans-serif;text-transform:none}
.os-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 16px;margin-top:7px}
.os-rows div{display:flex;gap:7px;align-items:center;font:700 11.5px ui-monospace,Consolas,monospace;text-transform:uppercase;color:#f0eef2;min-width:0}
.os-rows div::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--d,#34d399)}
.os-rows small{font:600 10px Inter,system-ui,sans-serif;letter-spacing:.08em;color:#6d6b76;white-space:nowrap}
.os-rows span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.os-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px;border-top:1px solid #ffffff12;background:#ffffff04}
.os-steps li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;list-style:none;color:#7d7379;font-size:11px;font-weight:650;line-height:1.2;transition:.35s}
.os-steps b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;border:1px solid #ffffff26;font-size:11px;transition:.35s}
.os-steps li.on{color:#fff;background:#ff2d3a18}
.os-steps li.on b{background:linear-gradient(120deg,#ff4a5a,#c2152b);border-color:transparent}
.os-steps li.done b{border-color:#34d39980;color:#34d399}
.os-steps{margin:0}
@media(max-width:900px){.osint-showcase{grid-template-columns:1fr;gap:34px;margin-top:80px}.os-window{justify-self:center}.os-copy{text-align:center}.os-copy>p{margin-inline:auto}.os-criteria{justify-content:center}}
@media(max-width:480px){.os-steps li{font-size:10px}.os-sf{grid-template-columns:1fr}.os-sec.open .os-sf{max-height:130px}.os-body{height:430px}}
@media(prefers-reduced-motion:reduce){.os-radar b,.os-radar em,.os-in.typing::after{animation:none}}
.os-sub{display:none}.os-body{height:420px}.os-title{margin-bottom:10px}
.os-body{height:436px}

/* v6 : page complète, onglets, souris bien visible */
.os-window{max-width:600px}
.os-body{height:472px}
.os-tabs{display:flex;gap:4px;margin:0 0 12px;padding:4px;border:1px solid #ffffff1c;border-radius:99px;background:#0d0c10;width:max-content;max-width:100%}
.os-tabs span{padding:6px 14px;border-radius:99px;color:#a69ca2;font-size:11.5px;font-weight:700;transition:.3s}
.os-tabs span.on{background:linear-gradient(120deg,#e83942,#b91b24);color:#fff;box-shadow:0 0 14px #e82e4355}
.os-tabs span.off{opacity:.4}
.os-tabs span.hot{background:#ffffff14;color:#fff}
.os-body.fivem .os-sec:not([data-k=fm]){display:none}
.os-cursor{width:28px;height:28px;z-index:9}
.os-cursor svg{width:28px;height:28px;stroke-width:1.2}
.os-cursor::after{left:-6px;top:-6px;width:20px;height:20px}
.os-cursor.show{opacity:1}

/* v7 : grande fenêtre rectangulaire, formulaire à gauche, résultats à droite */
.osint-showcase{grid-template-columns:1fr;max-width:1120px;gap:40px;justify-items:center}
.os-copy{text-align:center;max-width:760px}
.os-copy>p{margin-inline:auto;max-width:60ch}
.os-criteria{justify-content:center}
.os-copy h2 br{display:none}
.os-window{max-width:1060px;justify-self:center;border-radius:22px}
.os-bar{padding:13px 18px}
.os-body{height:446px;padding:16px 20px}
.os-title,.os-sec,.os-actions{width:calc(50% - 14px)}
.os-tabs{margin-bottom:14px}
.os-over{left:auto;right:20px;top:64px;bottom:16px;width:calc(50% - 14px);inset:64px 20px 16px auto;padding:14px;border:1px solid #ffffff14;border-radius:16px;background:linear-gradient(160deg,#100d13,#0a090d);opacity:1;overflow:hidden}
.os-over::before{content:"Les résultats s’afficheront ici";position:absolute;inset:0;display:grid;place-items:center;color:#5f565c;font-size:13px;font-weight:600;transition:opacity .3s}
.os-over.on::before{opacity:0}
.os-steps{padding:12px 20px;gap:10px}
.os-steps li{font-size:12px;padding:8px 12px}
.os-sh{height:38px}
@media(max-width:860px){
  .os-body{height:auto;padding-bottom:20px}
  .os-title,.os-sec,.os-actions{width:auto}
  .os-over{position:relative;inset:auto;width:auto;height:320px;margin-top:14px}
  .os-steps li{font-size:10.5px}
}
.os-body{height:496px}