/*
Theme Name: Smartsys Security
Author: Smartsys
Description: Page de sécurité connectée animée, responsive et personnalisable.
Version: 1.0.0
Text Domain: smartsys-security
License: GPL-2.0-or-later
*/
:root{--yellow:#ffca19;--ink:#141613;--muted:#a4a69e;--paper:#f3f2ec}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:5px}button{cursor:pointer}.wrap{width:min(1380px,90%);margin:auto}.top{display:flex;justify-content:space-between;padding:13px 0;color:#bbbdb6;font-size:12px;letter-spacing:.04em}.top span:last-child{color:var(--yellow)}header{position:relative;z-index:20}.nav{display:flex;background:var(--yellow);color:var(--ink);align-items:center;min-height:94px}.brand{background:var(--paper);display:flex;gap:12px;align-items:center;align-self:stretch;padding:22px 32px;font-size:25px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:4px;margin-top:5px}.mark{width:38px;height:43px;border:3px solid #191c17;border-radius:15px 15px 20px 20px;display:grid;place-items:center;color:#aa7f00;font-size:24px}.brand img{max-width:170px;max-height:54px}.links{display:flex;gap:30px;align-items:center;margin:auto;font-size:14px}.links a:hover{box-shadow:0 2px currentColor}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:19px 24px;background:var(--yellow);color:var(--ink);border:1px solid var(--yellow);font-weight:600;font-size:14px;transition:transform .25s,background .25s}.btn:hover{transform:translateY(-3px);background:#ffdb60}.btn b{font-size:22px;font-weight:400}.nav>.btn{margin-right:18px;background:var(--ink);color:white;border:0}.menu{display:none}.hero{min-height:790px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 76% 55%,#765333 0%,#342d23 35%,#191b17 68%)}.hero-photo{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.46}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,14,.68),transparent 85%);pointer-events:none}.hero-inner{position:relative;z-index:3;padding-top:85px;padding-bottom:40px;pointer-events:none}.hero-inner a,.hero-inner button{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:25px;height:2px;background:var(--yellow)}h1{font-size:clamp(52px,5.6vw,84px);font-weight:400;line-height:1.04;letter-spacing:-4px;max-width:810px;margin:27px 0}h1 em{color:var(--yellow);font-style:normal}.intro{color:#d4d5ce;max-width:490px;font-size:16px;line-height:1.75}.actions{display:flex;gap:14px;margin-top:32px}.outline{background:transparent;color:white;border-color:#7e8077}.outline:hover{background:#33372d}.proof{display:flex;gap:40px;margin-top:76px}.proof div{border-left:1px solid #666a5e;padding-left:18px}.proof strong{display:block;font-size:20px;font-weight:400}.proof small{display:block;color:#aaa;line-height:2;font-size:11px}.scene{position:absolute;right:-3%;top:-2%;width:55%;height:105%;perspective:1100px;z-index:2}.door{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#694929 0,#805737 2px,#714c30 4px,#563c27 7px,#775233 9px);transform:rotateY(-17deg);box-shadow:-30px 0 60px #0008}.door:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#fff1,transparent 30%,#0007)}.lock{position:absolute;top:15%;left:35%;width:150px;height:430px;border-radius:65px 65px 38px 38px;background:linear-gradient(105deg,#131516,#5c6061 4%,#1c2021 9%,#101314 55%,#3b4041 95%,#aaa);box-shadow:14px 24px 35px #0009,inset 0 0 3px #aaa;transform:rotate(-4deg)}.lock-brand{text-align:center;letter-spacing:3px;font-size:9px;margin-top:33px;color:#a1a8a4}.sensor{width:66px;height:66px;border:2px solid var(--yellow);border-radius:50%;position:absolute;top:87px;left:42px;display:grid;place-items:center;color:var(--yellow);font-size:28px;box-shadow:0 0 24px #ffca1955;animation:pulse 3s infinite}.sensor:after{content:'';position:absolute;inset:-10px;border:1px solid #ffca1977;border-radius:50%;animation:ripple 3s infinite}.keypad{position:absolute;top:190px;left:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;color:#9ca4a3;font-size:12px;width:82px;text-align:center}.handle{position:absolute;bottom:65px;left:47px;width:230px;height:37px;background:linear-gradient(#717777,#181c1d 35%,#080b0c 70%,#4f5555);border-radius:15px;box-shadow:5px 9px 13px #0006;transform-origin:18px center;animation:handle 8s infinite}.access{position:absolute;left:15%;bottom:18%;background:#181c19eF;border:1px solid #6b7056;border-radius:13px;padding:20px 26px;box-shadow:0 20px 45px #0007;animation:float 5s ease-in-out infinite;min-width:260px}.access small{font-size:9px;letter-spacing:2px;color:#9ca595}.access strong{display:block;font-weight:400;margin-top:10px}.access strong:before{content:'✓';background:var(--yellow);color:#111;border-radius:50%;padding:4px 7px;margin-right:12px}.scene-label{position:absolute;right:10%;bottom:6%;font-size:10px;letter-spacing:3px;color:#ddd}.ticker{border-top:1px solid #3a3d34;border-bottom:1px solid #3a3d34;background:#1d201a;display:flex;justify-content:space-around;gap:20px;padding:24px;flex-wrap:wrap;font-size:11px;letter-spacing:2px}.ticker span:before{content:'✳';color:var(--yellow);margin-right:16px}.section{padding:100px 0}h2{font-size:clamp(35px,3.7vw,56px);letter-spacing:-2px;line-height:1.1;font-weight:400;margin:22px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-head p{max-width:350px;line-height:1.7;color:var(--muted);font-size:14px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid #3c4034;padding:34px;min-height:260px;position:relative;transition:.3s}.card:hover{border-color:var(--yellow);background:#23271d;transform:translateY(-6px)}.card .number{position:absolute;right:25px;top:30px;font-size:11px;color:#7e8476}.icon{font-size:35px;color:var(--yellow)}h3{font-size:23px;font-weight:400;letter-spacing:-.5px;margin:25px 0 12px}.card p{font-size:14px;line-height:1.7;color:var(--muted)}.card a{display:inline-block;color:var(--yellow);font-size:12px;margin-top:12px}.light{background:var(--paper);color:var(--ink)}.light .eyebrow:before{background:#b08b00}.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cccfc3;border:1px solid #cccfc3;margin-top:40px}.sector{padding:30px;background:var(--paper)}.sector span{font-size:12px;color:#8a8d81}.sector p{font-size:14px;line-height:1.7;color:#6b7062}.process{display:grid;grid-template-columns:1fr 1fr;gap:90px}.steps{counter-reset:steps}.step{padding:23px 0;border-bottom:1px solid #3c4034;display:flex;gap:25px}.step:before{counter-increment:steps;content:'0' counter(steps);color:var(--yellow);font-size:13px;padding-top:6px}.step h3{margin:0 0 8px}.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.contact{background:var(--yellow);color:var(--ink)}.contact .eyebrow:before{background:var(--ink)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact p{line-height:1.7;max-width:390px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:12px;font-weight:600}input,textarea,select{display:block;width:100%;margin-top:8px;border:1px solid #8e741f;background:#ffe37d;color:#111;border-radius:0;padding:14px}textarea{min-height:95px;resize:vertical}.wide{grid-column:1/-1}.consent{display:flex;gap:10px;align-items:start;font-size:11px;line-height:1.6;font-weight:400}.consent input{width:auto;margin:3px 0}.contact button{background:#171b15;color:white;border-color:#171b15;width:100%;margin-top:18px}.contact button:hover{background:#343c2e}.status{padding:15px;background:#fff6;border:1px solid #8e741f}.honey{position:absolute;left:-9999px}footer{padding:35px 0;color:#a7ac9e;font-size:12px}.footer-row{display:flex;justify-content:space-between;gap:20px}.footer-row a{color:white}.reveal{opacity:1}.js .reveal{opacity:0;transform:translateY(25px);transition:opacity .7s,transform .7s}.js .reveal.visible{opacity:1;transform:none}.skip{position:absolute;top:-100px;z-index:99;background:white;color:#111;padding:15px}.skip:focus{top:0}@keyframes pulse{50%{box-shadow:0 0 45px #ffca1988}}@keyframes ripple{0%{transform:scale(.8);opacity:0}40%{opacity:.6}100%{transform:scale(1.5);opacity:0}}@keyframes float{50%{transform:translateY(-12px)}}@keyframes handle{0%,60%,100%{transform:rotate(0)}70%,82%{transform:rotate(16deg)}}@media(min-width:1600px){.hero-inner{padding-top:100px}}@media(max-width:1000px){.links{gap:15px}.brand{padding:20px}.nav>.btn{display:none}h1{font-size:64px}.scene{right:-20%;width:70%;opacity:.65}.hero-inner{padding-top:65px}.process,.contact-grid{gap:45px}.sectors{grid-template-columns:1fr 1fr}}@media(max-width:700px){.wrap{width:90%}.top{font-size:10px}.top span:first-child{max-width:200px}.nav{min-height:76px;justify-content:space-between}.brand{font-size:22px;padding:15px}.menu{display:block;background:transparent;border:0;margin:20px;font-size:25px}.links{display:none;position:absolute;top:100%;left:5%;right:5%;background:var(--yellow);padding:25px;flex-direction:column;align-items:start}.links.open{display:flex}.hero{min-height:880px}.hero-inner{padding-top:40px}h1{font-size:53px;letter-spacing:-2.8px;max-width:550px}.intro{font-size:14px;max-width:90%}.actions{gap:10px}.btn{padding:15px;gap:14px;font-size:12px}.scene{width:80%;height:480px;top:auto;bottom:-70px;right:-18%;opacity:.7}.lock{top:5%;transform:scale(.65) rotate(-4deg);transform-origin:top center}.access{bottom:35%;left:0;transform:scale(.75);min-width:220px;padding:15px;animation:none}.scene-label{display:none}.proof{margin-top:230px;gap:20px}.proof strong{font-size:16px}.proof small{font-size:10px}.proof div{padding-left:10px}.section{padding:65px 0}.section-head{display:block}.cards,.process,.contact-grid{grid-template-columns:1fr}.cards{gap:12px}.card{min-height:220px;padding:25px}.sectors{grid-template-columns:1fr 1fr}.sector{padding:20px}.sector h3{font-size:19px}.ticker{font-size:9px;gap:18px}.footer-row{flex-direction:column}.form-grid{gap:14px}h2{letter-spacing:-1.5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}