/* ============================================
   Streamica.fr — Global Stylesheet
   Colors derived from france-iptv.tv reference
   ============================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-primary:#e50914;
  --c-primary-dark:#c1070f;
  --c-accent:#FFD700;
  --c-dark:#0d0d0d;
  --c-dark-2:#1a1a1a;
  --c-text:#f0f0f0;
  --c-text-light:#b3b3b3;
  --c-text-dark:#222;
  --c-white:#fff;
  --c-border:#333;
  --c-border-light:#ddd;
  --c-bg-section:#111;
  --font:'Lato',sans-serif;
  --radius:8px;
  --shadow:0 4px 24px rgba(0,0,0,.3);
  --max-w:1200px;
  --transition:all .3s ease;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--c-text);background:var(--c-dark);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--c-accent)}
ul,ol{list-style:none}
.container{width:90%;max-width:var(--max-w);margin:0 auto}

/* ---------- Typography ---------- */
h1{font-size:2.6rem;font-weight:700;line-height:1.2}
h2{font-size:2rem;font-weight:700;line-height:1.25}
h3{font-size:1.5rem;font-weight:600;line-height:1.3}
h4{font-size:1.2rem;font-weight:600}
h5{font-size:1.05rem;font-weight:600}
p{margin-bottom:1rem}

/* ---------- Header / Nav ---------- */
.site-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0a0a 100%);position:sticky;top:0;z-index:1000;border-bottom:2px solid var(--c-primary)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{font-size:1.6rem;font-weight:700;color:var(--c-white);letter-spacing:-.5px}
.logo span{color:var(--c-primary)}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-links a{color:#ccc;font-size:.95rem;font-weight:500;transition:var(--transition);padding:.35rem 0;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--c-primary)}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--c-primary);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--c-white);transition:var(--transition)}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#0d0d0d 0%,#1a0505 50%,#0d0d0d 100%);color:var(--c-white);padding:5rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-30%;width:60%;height:200%;background:radial-gradient(circle,rgba(229,9,20,.12) 0%,transparent 60%);pointer-events:none}
.hero h1{margin-bottom:1.25rem;max-width:800px;margin-left:auto;margin-right:auto}
.hero p{font-size:1.15rem;color:var(--c-text-light);max-width:650px;margin:0 auto 2rem;line-height:1.8}
.hero .btn{font-size:1.1rem;padding:.9rem 2.5rem}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:.75rem 2rem;border-radius:var(--radius);font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition);border:none;font-family:var(--font);text-align:center}
.btn-primary{background:var(--c-primary);color:var(--c-white)}
.btn-primary:hover{background:var(--c-primary-dark);color:var(--c-white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(229,9,20,.35)}
.btn-outline{border:2px solid var(--c-primary);color:var(--c-primary);background:transparent}
.btn-outline:hover{background:var(--c-primary);color:var(--c-white)}
.btn-white{background:var(--c-white);color:var(--c-primary)}
.btn-white:hover{background:#f0f0f0;color:var(--c-primary-dark)}
.btn-accent{background:var(--c-accent);color:var(--c-dark)}
.btn-accent:hover{background:#e6c200;transform:translateY(-2px)}

/* ---------- Section Utilities ---------- */
.section{padding:4.5rem 0}
.section-dark{background:var(--c-dark-2);color:var(--c-white)}
.section-alt{background:var(--c-bg-section)}
.section-light{background:#f8f8f8;color:var(--c-text-dark)}
.section-title{text-align:center;margin-bottom:2.5rem}
.section-title h2{margin-bottom:.5rem}
.section-title p{color:var(--c-text-light);max-width:600px;margin:0 auto}

/* ---------- Features Grid ---------- */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.feature-card{background:var(--c-dark-2);border-radius:var(--radius);padding:2rem;text-align:center;border:1px solid var(--c-border);transition:var(--transition)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--c-primary)}
.feature-card .icon{font-size:2.5rem;margin-bottom:1rem}
.feature-card h3{margin-bottom:.5rem;font-size:1.2rem}
.feature-card p{color:var(--c-text-light);font-size:.95rem}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;max-width:1100px;margin:0 auto}
.price-card{background:var(--c-dark-2);border-radius:12px;padding:2.5rem 2rem;text-align:center;border:2px solid var(--c-border);transition:var(--transition);position:relative;overflow:hidden}
.price-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow)}
.price-card.popular{border-color:var(--c-primary);transform:scale(1.04)}
.price-card.popular::before{content:'Populaire';position:absolute;top:18px;right:-32px;background:var(--c-primary);color:var(--c-white);padding:.3rem 2.5rem;font-size:.8rem;font-weight:700;transform:rotate(45deg);letter-spacing:.5px}
.price-card h3{font-size:1.15rem;color:var(--c-text-light);margin-bottom:.75rem;font-weight:500}
.price-card .price{font-size:2.8rem;font-weight:700;color:var(--c-primary);margin-bottom:.25rem}
.price-card .price-suffix{font-size:.9rem;color:var(--c-text-light)}
.price-card .old-price{font-size:1.1rem;color:#666;text-decoration:line-through;margin-bottom:.25rem}
.price-card ul{text-align:left;margin:1.5rem 0}
.price-card li{padding:.45rem 0;padding-left:1.5rem;position:relative;font-size:.95rem;color:var(--c-text-light)}
.price-card li::before{content:'\2713';position:absolute;left:0;color:var(--c-primary);font-weight:700}
.price-card .btn{width:100%;margin-top:1rem}

/* ---------- Testimonials ---------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.testimonial-card{background:var(--c-dark-2);border-radius:var(--radius);padding:2rem;border:1px solid var(--c-border);position:relative}
.testimonial-card .stars{color:var(--c-accent);font-size:1.2rem;margin-bottom:.75rem}
.testimonial-card p{font-style:italic;color:var(--c-text-light);margin-bottom:1rem;line-height:1.6}
.testimonial-card .author{font-weight:600;color:var(--c-white)}

/* ---------- How It Works ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;text-align:center}
.step{padding:2rem 1.5rem}
.step .num{width:55px;height:55px;border-radius:50%;background:var(--c-primary);color:var(--c-white);font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.step h3{margin-bottom:.5rem;font-size:1.1rem}
.step p{color:var(--c-text-light);font-size:.95rem}

/* ---------- About / Two-col ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.two-col img{border-radius:var(--radius);box-shadow:var(--shadow)}
.two-col-content h2{margin-bottom:1rem}
.two-col-content p{color:var(--c-text-light);margin-bottom:1rem}
.two-col-content ul{margin:1rem 0}
.two-col-content li{padding:.4rem 0;padding-left:1.5rem;position:relative;color:var(--c-text-light)}
.two-col-content li::before{content:'\2713';position:absolute;left:0;color:var(--c-primary);font-weight:700}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-question{padding:1.2rem 1.5rem;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;background:var(--c-dark-2);transition:var(--transition);color:var(--c-white)}
.faq-question:hover{color:var(--c-primary)}
.faq-question::after{content:'+';font-size:1.4rem;color:var(--c-primary);transition:var(--transition)}
.faq-item.active .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 1.5rem}
.faq-answer p{padding-bottom:1.2rem;color:var(--c-text-light);line-height:1.7}

/* ---------- Contact / Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-weight:500;margin-bottom:.4rem;font-size:.95rem;color:var(--c-text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--c-border);border-radius:var(--radius);font-family:var(--font);font-size:1rem;transition:var(--transition);background:var(--c-dark-2);color:var(--c-text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(229,9,20,.12)}
.form-group textarea{resize:vertical;min-height:120px}
.honeypot{position:absolute;left:-9999px;opacity:0}
.form-message{padding:.75rem 1rem;border-radius:var(--radius);margin-top:1rem;font-size:.95rem}
.form-message--success{background:#1a3a1a;color:#4caf50;border:1px solid #2e7d32}
.form-message--error{background:#3a1a1a;color:#ef5350;border:1px solid #c62828}

/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.plan-selector{display:flex;flex-direction:column;gap:.75rem}
.plan-option{border:2px solid var(--c-border);border-radius:var(--radius);padding:1.2rem 1.5rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:1rem}
.plan-option:hover,.plan-option.selected{border-color:var(--c-primary);background:rgba(229,9,20,.06)}
.plan-option input[type=radio]{accent-color:var(--c-primary)}
.plan-option .plan-label{flex:1}
.plan-option .plan-name{font-weight:600}
.plan-option .plan-price{font-weight:700;color:var(--c-primary);font-size:1.2rem}

/* ---------- Channels ---------- */
.channels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.channel-tag{background:var(--c-dark-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:.65rem 1rem;text-align:center;font-size:.9rem;font-weight:500;transition:var(--transition);color:var(--c-text-light)}
.channel-tag:hover{border-color:var(--c-primary);color:var(--c-primary)}

/* ---------- Reseller ---------- */
.reseller-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:3rem}
.benefit-card{background:var(--c-dark-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:2rem;text-align:center}
.benefit-card .icon{font-size:2.2rem;margin-bottom:.75rem}
.benefit-card h3{margin-bottom:.5rem;font-size:1.1rem}
.benefit-card p{color:var(--c-text-light);font-size:.95rem}

/* ---------- Setup Guide ---------- */
.guide-content{max-width:800px;margin:0 auto}
.guide-content h2{margin:2rem 0 1rem;color:var(--c-primary)}
.guide-content h3{margin:1.5rem 0 .75rem}
.guide-content ol{list-style:decimal;padding-left:1.5rem;margin:1rem 0}
.guide-content ol li{padding:.4rem 0;color:var(--c-text-light)}
.guide-content img{border-radius:var(--radius);margin:1.5rem 0;box-shadow:var(--shadow)}
.guide-content p{color:var(--c-text-light)}

/* ---------- Legal Pages ---------- */
.legal-content{max-width:800px;margin:0 auto}
.legal-content h2{margin:2rem 0 .75rem}
.legal-content h3{margin:1.5rem 0 .5rem}
.legal-content p{color:var(--c-text-light);margin-bottom:.75rem}
.legal-content ul{list-style:disc;padding-left:1.5rem;margin:1rem 0}
.legal-content li{padding:.3rem 0;color:var(--c-text-light)}

/* ---------- Footer ---------- */
.site-footer{background:#080808;color:var(--c-text-light);padding:3.5rem 0 1.5rem;border-top:2px solid var(--c-primary)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:2rem}
.footer-col h4{color:var(--c-white);margin-bottom:1rem;font-size:1rem}
.footer-col p{font-size:.9rem;line-height:1.7;color:var(--c-text-light)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-col a{color:var(--c-text-light);font-size:.9rem;transition:var(--transition)}
.footer-col a:hover{color:var(--c-primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;text-align:center;font-size:.85rem;color:rgba(255,255,255,.5)}

/* ---------- Page Header (sub-pages) ---------- */
.page-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0505 100%);color:var(--c-white);padding:3.5rem 0;text-align:center}
.page-header h1{margin-bottom:.5rem}
.page-header p{color:var(--c-text-light);max-width:600px;margin:0 auto}

/* ---------- CTA Section ---------- */
.cta-section{background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);color:var(--c-white);padding:4rem 0;text-align:center}
.cta-section h2{margin-bottom:1rem}
.cta-section p{margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}

/* ---------- Stats ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;text-align:center;padding:2rem 0}
.stat-item .stat-number{font-size:2.5rem;font-weight:700;color:var(--c-primary)}
.stat-item .stat-label{color:var(--c-text-light);font-size:.95rem}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  h1{font-size:1.9rem}
  h2{font-size:1.5rem}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--c-dark);padding:1rem;gap:0;border-top:1px solid rgba(255,255,255,.1)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.75rem 1rem;display:block}
  .hero{padding:3rem 0 2.5rem}
  .two-col,.form-grid,.checkout-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.popular{transform:none}
  .section{padding:3rem 0}
  .features-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}

  .hero { padding: 60px 0 40px; }
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .container{width:92%}
  .stats-row{grid-template-columns:1fr}
}

@media (max-width: 1024px) {
  .container { padding: 0 24px; }
@media (max-width: 640px) {
  .container { padding: 0 16px; }
@media (max-width: 360px) {
  .hero h1 { font-size: 1.25rem; }

/* ─── TOUCH & INTERACTION ─── */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-cta, a, button { min-height: 44px; min-width: 44px; }
  .nav-links a { padding: 12px 8px; }
  .faq-question { padding: 16px; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ─── PRINT ─── */
@media print {
  .site-header, .site-footer, .nav-toggle, .whatsapp-btn, .skip-link, footer, header, nav { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .hero { background: none; padding: 20px 0; }
}