/* ============================================================
   HEADER / HERO - Bro's Perfs
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

body{background:#050505;font-family:Arial,sans-serif}

.hero{height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at center,#222 0%,#080808 50%,#000 100%)}
#lightning{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.smoke{position:absolute;inset:-50px;background:radial-gradient(circle,rgba(255,120,0,.15),transparent 60%);filter:blur(50px);animation:smokeMove 8s infinite alternate}
@keyframes smokeMove{from{transform:translate(-30px,-20px)}to{transform:translate(40px,30px)}}

.navbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:30px 8%}
.logo img{width:180px}
.navbar ul{display:flex;gap:40px;list-style:none}
.navbar a{color:white;text-decoration:none;font-weight:bold;transition:.3s}
.navbar a:hover{color:#ff7300;text-shadow:0 0 10px #ff7300}
.hero-content{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:white}
.hero-content h1{font-size:90px;letter-spacing:8px;text-shadow:0 0 10px #ff7300,0 0 30px #ff7300}
.hero-content h1 span{color:#ff7300}
.hero-content p{margin:25px;font-size:22px}
.btn{display:inline-block;padding:18px 40px;background:#ff7300;color:black;font-weight:bold;border-radius:50px;cursor:pointer;transition:.3s}
.btn:hover{box-shadow:0 0 20px #ff7300,0 0 60px #ff7300;transform:scale(1.05)}

.slider-1{position:relative;z-index:6;max-width:700px;margin:150px auto 0;overflow:hidden;border:1px solid #ff7300;border-radius:20px;box-shadow:0 0 5px #ff7300}
.hero-cta{position:relative;z-index:6;display:flex;gap:20px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.slider-1 .slider{animation:slider-1 50s infinite ease-in-out;display:flex}
.slider-1 p{background:#000;flex-shrink:0;padding:72px 20px;width:100%;text-align:center;font-size:25px;color:#ff7300}
@keyframes slider-1{0%,10%{transform:translateX(0)}12%,22%{transform:translateX(-100%)}27%,37%{transform:translateX(-200%)}42%,52%{transform:translateX(-300%)}57%,67%{transform:translateX(-400%)}72%,82%{transform:translateX(-500%)}87%,97%{transform:translateX(-600%)}100%{transform:translateX(-700%)}}

@media(max-width:800px){
    .slider-1{margin-top:110px;max-width:92%}
    .slider-1 p{font-size:18px;padding:50px 15px}
    .hero-content h1{font-size:50px}
    .navbar ul{display:none}
}

/* ---------------- CONTRÔLES DU SLIDER ---------------- */
.slider-1{touch-action:pan-y;outline:none}
.slider-1 .slider{animation:none;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
.slider-controls{position:absolute;left:0;right:0;bottom:12px;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:0 12px;pointer-events:none}
.slider-arrow{width:40px;height:40px;border:1px solid rgba(246,97,2,.75);border-radius:50%;background:rgba(0,0,0,.72);color:#F66102;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:.25s}
.slider-arrow:hover{background:#F66102;color:#111;transform:scale(1.08)}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:7px;pointer-events:auto}
.slider-dot{width:8px;height:8px;padding:0;border:1px solid #aaa;border-radius:50%;background:transparent;cursor:pointer;transition:.25s}
.slider-dot.active{width:10px;height:10px;background:#F66102;border-color:#F66102;box-shadow:0 0 10px rgba(246,97,2,.8)}
.slider-1 p{padding-bottom:78px}

@media(max-width:800px){
    .slider-controls{bottom:9px;padding:0 9px}
    .slider-arrow{width:34px;height:34px;font-size:.8rem}
    .slider-dots{gap:6px}
    .slider-dot{width:7px;height:7px}
    .slider-dot.active{width:9px;height:9px}
    .slider-1 p{padding-bottom:62px}
}