/*
Theme Name: Stokard Satellite & Network
Theme URI: https://www.stokard.be/
Author: Stokard Satellite & Network
Description: Thème une page pour Stokard Satellite & Network : TV et internet par satellite (Starlink, Skysat), antennes camping-car, réseaux Wi-Fi et événements. Formulaire de contact intégré.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: stokard
*/
body{margin:0;background:#000000}
a{color:#FFFFFF}a:hover{color:#FF4A50}
.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 72%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 41% 33%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 57% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 58%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 79% 27%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 81%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 7% 63%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 50% 90%,#fff 50%,transparent 51%);animation:twinkle 5s ease-in-out infinite alternate}
.stars.b{background-position:50% 50%;transform:scale(1.6) rotate(12deg);animation-delay:-2.5s;opacity:.6}
@keyframes twinkle{from{opacity:.25}to{opacity:.9}}
.kenburns{animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-2%,-1%)}}
.orbit{animation:spin 26s linear infinite;transform-origin:50% 50%}
.orbit.slow{animation-duration:48s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}.d4{animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.marquee{display:flex;width:max-content;animation:slide 28s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(215,25,32,.7)}100%{box-shadow:0 0 0 18px rgba(215,25,32,0)}}
.scrollcue{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}
.card img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.06)}
.btn{transition:background .25s,color .25s}
.btn:hover{background:#FFFFFF;color:#000000}
.btn.red:hover{background:#FFFFFF;color:#B5121B}
@supports (animation-timeline: view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
.zoomin{animation:zoomin linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
@keyframes zoomin{from{transform:scale(1.25);opacity:.3}to{transform:scale(1);opacity:1}}
}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(160px,16vw,280px);grid-auto-flow:dense;gap:12px}
.tile{position:relative;overflow:hidden;background:#141414}
.tile img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s}
.tile:hover img{transform:scale(1.07);filter:none}
.tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);pointer-events:none;transition:border-color .4s}
.tile:hover::after{border-color:#D71920}
.bw{grid-column:span 2;grid-row:span 2}.bt{grid-row:span 2}.bs{}.bw2{grid-column:span 2}.bt2{grid-column:span 2}.bs2{}
@media (max-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bw,.bw2{grid-column:span 2}}
.sep{position:relative;height:1px;margin:0 clamp(24px,4vw,72px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 15%,rgba(255,255,255,.22) 85%,transparent);overflow:visible;z-index:2}
.sep-beam{position:absolute;top:-1px;left:0;width:22%;height:3px;background:linear-gradient(90deg,transparent,#D71920 60%,#FF4A50);filter:drop-shadow(0 0 6px #D71920);animation:beam 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes beam{0%{transform:translateX(-30%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(480%);opacity:0}}
.sep-node{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:#000;border:2px solid #D71920;transform:rotate(45deg)}
.sep-label{position:absolute;right:0;top:10px;font-family:'Barlow',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:#8C8C8C}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
input,select,textarea{color:#FFFFFF}
input:focus,select:focus,textarea:focus{outline:2px solid #FF4A50;outline-offset:2px}
.stk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.stk-notice{margin:0;padding:14px 18px;font-weight:500;border-left:4px solid #D71920;background:#141414}
.stk-notice.ok{border-left-color:#3FB950}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:80px}
.admin-bar header{top:32px !important}