:root {
--bg: #080b12;
--surface: #0f1320;
--surface2: #161c2e;
--accent: #e8b84b;
--accent2: #ff5f5f;
--text: #e8eaf0;
--muted: #6b7498;
--green: #22c97a;
--orange: #f59e0b;
--red: #ef4444;
--border: rgba(255,255,255,0.07);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

html {
scroll-behavior: smooth;
}

body {
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
overflow-x:hidden;
}

/* HERO */
#hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}

.trailer-bg {
position: absolute;
inset: 0;
z-index: 0;
background: #000;
}

.trailer-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s ease;
}

.trailer-slide.active {
opacity: 1;
}

.trailer-slide:nth-child(1) {
background-image: url('https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=1600&q=80');
}

.trailer-slide:nth-child(2) {
background-image: url('https://images.unsplash.com/photo-1478720568477-152d9b164e26?w=1600&q=80');
}

.trailer-slide:nth-child(3) {
background-image: url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=1600&q=80');
}

.trailer-slide:nth-child(4) {
background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1600&q=80');
}

.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(8,11,18,1) 0%,
rgba(8,11,18,0.5) 40%,
rgba(8,11,18,0.2) 70%,
rgba(8,11,18,0.4) 100%
);
}

.slide-dots {
position: absolute;
bottom: 200px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}

.slide-dot {
width: 6px;
height: 6px;
border-radius: 3px;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s;
border: none;
}

.slide-dot.active {
width: 24px;
background: var(--accent);
}

/* NAV */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px;
background: linear-gradient(to bottom, rgba(8,11,18,0.9), transparent);
backdrop-filter: blur(0px);
transition: all 0.3s;
}

nav.scrolled {
background: rgba(8,11,18,0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}

.logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 4px;
color: var(--accent);
text-decoration: none;
}

.logo span {
color: var(--text);
}

.nav-links {
display: flex;
gap: 32px;
align-items: center;
}

.nav-links a {
color: var(--muted);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: color 0.2s;
cursor: pointer;
}

.nav-links a:hover {
color: var(--text);
}

.btn-nav {
background: var(--accent);
color: #000;
padding: 8px 20px;
border-radius: 4px;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
border: none;
text-decoration: none;
transition: opacity 0.2s;
}

.btn-nav:hover {
opacity: 0.85;
}

/* HERO CONTENT */
.hero-content {
position: relative;
z-index: 2;
padding: 0 40px 80px;
max-width: 700px;
}

.hero-badge {
display: inline-block;
background: var(--accent);
color: #000;
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 2px;
padding: 4px 12px;
border-radius: 2px;
margin-bottom: 20px;
text-transform: uppercase;
}

.hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 8vw, 7rem);
line-height: 0.9;
letter-spacing: 2px;
margin-bottom: 20px;
}

.hero-title .highlight {
color: var(--accent);
}

.hero-sub {
color: rgba(232,234,240,0.7);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 36px;
max-width: 480px;
}

.hero-btns {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.btn-primary {
background: var(--accent);
color: #000;
padding: 14px 32px;
border-radius: 4px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(232,184,75,0.3);
}

.btn-ghost {
background: transparent;
color: var(--text);
padding: 14px 32px;
border-radius: 4px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}

.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
}

/* FORFAITS */
#forfaits {
padding: 100px 40px;
max-width: 1200px;
margin: 0 auto;
}

.section-label {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
letter-spacing: 3px;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}

.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: 2px;
margin-bottom: 60px;
}

.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}

.plan-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 36px 28px;
position: relative;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}

.plan-card:hover {
transform: translateY(-6px);
border-color: rgba(232,184,75,0.3);
}

.plan-card.featured {
border-color: var(--accent);
background: linear-gradient(135deg, #0f1320, #1a1600);
}

.plan-card.featured::before {
content: 'POPULAIRE';
position: absolute;
top: 16px;
right: 16px;
background: var(--accent);
color: #000;
font-family: 'Space Mono', monospace;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 2px;
padding: 3px 8px;
border-radius: 2px;
}

.plan-duration {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
color: var(--muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}

.plan-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 4rem;
line-height: 1;
color: var(--accent);
margin-bottom: 4px;
}

.plan-currency {
font-family: 'Space Mono', monospace;
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 24px;
}

.plan-features {
list-style: none;
margin-bottom: 32px;
}

.plan-features li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 0.88rem;
color: rgba(232,234,240,0.8);
display: flex;
align-items: center;
gap: 10px;
}

.plan-features li::before {
content: '✦';
color: var(--accent);
font-size: 0.6rem;
}

.btn-plan {
width: 100%;
padding: 13px;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 4px;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}

.btn-plan:hover,
.plan-card.featured .btn-plan {
background: var(--accent);
color: #000;
}

/* FORMULAIRE */
#commande {
padding: 100px 40px;
background: var(--surface);
}

.form-container {
max-width: 600px;
margin: 0 auto;
}

.form-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
letter-spacing: 2px;
margin-bottom: 8px;
}

.form-subtitle {
color: var(--muted);
font-size: 0.9rem;
margin-bottom: 40px;
line-height: 1.6;
}

.form-group {
margin-bottom: 20px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

label {
display: block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}

label .req {
color: var(--accent);
}

input,
select {
width: 100%;
padding: 14px 16px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
outline: none;
transition: border 0.2s;
-webkit-appearance: none;
}

input:focus,
select:focus {
border-color: var(--accent);
}

select option {
background: var(--bg);
}

.upload-zone {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
}

.upload-zone:hover,
.upload-zone.dragover {
border-color: var(--accent);
background: rgba(232,184,75,0.04);
}

.upload-zone input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}

.upload-icon {
font-size: 2rem;
margin-bottom: 10px;
}

.upload-text {
font-size: 0.85rem;
color: var(--muted);
}

.upload-text span {
color: var(--accent);
}

#preview-img {
max-width: 100%;
border-radius: 6px;
margin-top: 12px;
display: none;
max-height: 150px;
object-fit: cover;
}

.btn-submit {
width: 100%;
padding: 16px;
background: var(--accent);
color: #000;
border: none;
border-radius: 6px;
font-weight: 700;
font-size: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
margin-top: 12px;
}

.btn-submit:hover {
opacity: 0.9;
transform: translateY(-1px);
}

/* TOAST */
#toast {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
background: var(--surface2);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 16px 24px;
font-size: 0.9rem;
color: var(--text);
transform: translateY(80px);
opacity: 0;
transition: all 0.4s;
max-width: 320px;
}

#toast.show {
transform: translateY(0);
opacity: 1;
}

/* MODAL LOGIN */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}

.modal-overlay.open {
display: flex;
}

.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 440px;
position: relative;
}

.modal-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: var(--muted);
font-size: 1.4rem;
cursor: pointer;
}

.modal-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 2px;
margin-bottom: 8px;
}

.modal-sub {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 32px;
}

.tab-btns {
display: flex;
gap: 0;
margin-bottom: 28px;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}

.tab-btn {
flex: 1;
padding: 10px;
background: none;
border: none;
color: var(--muted);
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}

.tab-btn.active {
background: var(--accent);
color: #000;
font-weight: 700;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

/* ESPACE CLIENT */
#espace-client {
padding: 100px 40px;
max-width: 1000px;
margin: 0 auto;
display: none;
}

.client-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48px;
flex-wrap: wrap;
gap: 20px;
}

.client-greeting {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
letter-spacing: 2px;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 48px;
}

.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 24px;
}

.stat-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}

.stat-value {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
line-height: 1;
}

.stat-value.gold {
color: var(--accent);
}

.stars-display {
display: flex;
gap: 4px;
margin-top: 8px;
}

.star {
color: var(--muted);
font-size: 1.2rem;
}

.star.lit {
color: var(--accent);
}

/* ADMIN */
#espace-admin {
padding: 100px 40px;
max-width: 1200px;
margin: 0 auto;
display: none;
}

.admin-header {
margin-bottom: 48px;
}

.admin-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
letter-spacing: 3px;
}

.admin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 40px;
}

.admin-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px;
}

.admin-card-title {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th {
text-align: left;
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}

td {
padding: 14px 12px;
font-size: 0.88rem;
border-bottom: 1px solid var(--border);
}

.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}

.badge::before {
content:'●';
font-size: 0.5rem;
}

.badge.active {
background: rgba(34,201,122,0.15);
color: var(--green);
}

.badge.warning {
background: rgba(245,158,11,0.15);
color: var(--orange);
}

.badge.danger {
background: rgba(239,68,68,0.15);
color: var(--red);
}

.badge.pending {
background: rgba(232,184,75,0.15);
color: var(--accent);
}

.btn-validate {
padding: 6px 14px;
background: var(--green);
color: #000;
border: none;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: opacity 0.2s;
}

.btn-validate:hover {
opacity: 0.8;
}

.btn-reject {
padding: 6px 14px;
background: transparent;
color: var(--red);
border: 1px solid var(--red);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 6px;
transition: all 0.2s;
}

.btn-reject:hover {
background: var(--red);
color: #fff;
}

.profit-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}

.profit-tab {
padding: 6px 14px;
background: none;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--muted);
font-size: 0.75rem;
cursor: pointer;
letter-spacing: 1px;
transition: all 0.2s;
}

.profit-tab.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
font-weight: 700;
}

.total-profit {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 16px;
}

.btn-logout {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 8px 20px;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 1px;
}

.btn-logout:hover {
border-color: var(--red);
color: var(--red);
}

/* FOOTER */
footer {
padding: 60px 40px 40px;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 24px;
}

.footer-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
letter-spacing: 4px;
color: var(--accent);
}

.footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
}

.footer-links a {
color: var(--muted);
text-decoration: none;
font-size: 0.82rem;
transition: color 0.2s;
}

.footer-links a:hover {
color: var(--text);
}

.footer-copy {
color: var(--muted);
font-size: 0.78rem;
}

.wa-float {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 90;
background: #25d366;
color: #fff;
border-radius: 50px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
transition: all 0.3s;
}

.wa-float:hover {
transform: scale(1.05);
box-shadow: 0 6px 30px rgba(37,211,102,0.5);
}

.wa-float svg {
width: 20px;
height: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
nav {
padding: 16px 20px;
}

.nav-links {
display: none;
}

.hero-content {
padding: 0 20px 100px;
}

#forfaits,
#commande,
#espace-client,
#espace-admin {
padding: 80px 20px;
}

.form-row {
grid-template-columns: 1fr;
}

.admin-grid {
grid-template-columns: 1fr;
}

footer {
flex-direction: column;
text-align: center;
}

.slide-dots {
bottom: 120px;
}
}

@media (max-width: 480px) {
.hero-title {
font-size: 3rem;
}

.modal {
padding: 32px 24px;
}
}