/* =========================================================
   IRON TV PRO — main.css (Clean 2026)
   ========================================================= */

:root{
  --bg: #fbfdff;
  --surface: #ffffff;
  --surface-2: #f3f8ff;
  --text: #23324a;
  --muted: #55657d;
  --primary: #2f7df6;
  --secondary: #7a5cff;
  --accent: #ffb25a;
  --accent-2: #47d7c6;
  --border: rgba(35,50,74,0.10);
  --radius: 1rem;
  --shadow: 0 10px 26px rgba(47,125,246,0.14);
  --shadow-soft: 0 10px 22px rgba(122,92,255,0.10);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{
  outline: 3px solid rgba(47,125,246,0.35);
  outline-offset: 3px;
  border-radius: 10px;
}

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Typography */
.h1{font-size:2.55rem;margin-bottom:1rem;letter-spacing:-0.02em;}
.h2{font-size:2rem;margin-bottom:1rem;letter-spacing:-0.02em;}
.sub{color:var(--muted);margin:.5rem 0 2rem;}
.lead{font-size:1.15rem;color:var(--muted);margin-bottom:1rem;}
.clients{font-size:1rem;margin-bottom:1.4rem;color:var(--primary);font-weight:800;}
.seo-intro{color:var(--muted);max-width:900px;margin: 0 auto;}

/* Layout */
.container{width:90%;max-width:1200px;margin:0 auto;}
.section{padding:5rem 0;}
.section.alt{background: linear-gradient(180deg, var(--surface-2), rgba(255,255,255,0.9));}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.8rem;}

/* Header */
.header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;gap:1rem;}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-weight:900;text-decoration:none;
}
.logo{width:160px;height:auto;}
.brand span{font-weight:900;letter-spacing:.02em;}
.menu{display:flex;gap:1rem;align-items:center;}
.menu a{
  text-decoration:none;
  font-weight:700;
  padding:.45rem .7rem;
  border-radius: 999px;
  transition: .25s ease;
}
.menu a:hover{background: rgba(47,125,246,0.10); color:#1f4fa6;}

.hamburger{
  display:none;
  flex-direction:column;gap:.35rem;
  background:none;border:none;cursor:pointer;
  padding:.55rem;border-radius:12px;
}
.hamburger:hover{background: rgba(47,125,246,0.10);}
.hamburger span{width:26px;height:3px;background: var(--text);border-radius:999px;}

/* Hero */
.hero{
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(47,125,246,0.20), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(122,92,255,0.16), transparent 60%),
    linear-gradient(135deg, #f2f8ff, #fff6fb);
  text-align:center;
  padding: 6.2rem 1rem 5.2rem;
  border-bottom: 1px solid var(--border);
}
.badge-top{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  max-width:100%;
  white-space:normal;
  background: rgba(255,178,90,0.25);
  padding:.45rem 1rem;
  border-radius: 999px;
  font-size:.95rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,178,90,0.35);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.55rem;
  border-radius: 999px;
  font-weight:900;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  user-select:none;
}
.btn--primary{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47,125,246,0.18);}
.btn--ghost{
  border: 2px solid rgba(47,125,246,0.45);
  background: rgba(255,255,255,0.70);
  color:#1f4fa6;
}
.btn--ghost:hover{background: rgba(47,125,246,0.10); transform: translateY(-2px); box-shadow: var(--shadow-soft);}

.cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;}

/* Cards */
.card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  text-align:center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform: translateY(-3px); box-shadow: 0 16px 30px rgba(122,92,255,0.12);}
.card .icon{font-size:2rem;margin-bottom:1rem;}

/* Steps */
.steps{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin:2rem 0;}
.step{flex:1;min-width:220px;text-align:center;}
.step__num{
  display:inline-grid;place-items:center;
  width:44px;height:44px;
  background: rgba(71,215,198,0.22);
  border: 1px solid rgba(71,215,198,0.35);
  border-radius: 50%;
  margin-bottom: .6rem;
  font-weight:900;
}

/* Tabs + Pricing */
.tabs{display:flex;justify-content:center;margin-bottom:2rem;gap:1rem;flex-wrap:wrap;}
.tab-btn{
  background: rgba(47,125,246,0.10);
  border: 1px solid rgba(47,125,246,0.18);
  padding:.65rem 1.2rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  transition: .2s ease;
}
.tab-btn:hover{transform: translateY(-1px);}
.tab-btn.active{
  background: linear-gradient(135deg, rgba(47,125,246,0.22), rgba(122,92,255,0.18));
  border-color: rgba(122,92,255,0.28);
}

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

.pricing{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.p-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  text-align:center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}
.p-card:hover{transform: translateY(-4px); box-shadow: 0 18px 34px rgba(47,125,246,0.14);}
.p-name{font-weight:900;color:var(--muted);}
.p-price{font-size:1.85rem;font-weight:950;margin:1rem 0;}
.p-feats{list-style:disc;text-align:left;margin:1rem 0 1.2rem 1.25rem;color:var(--muted);}
.p-feats li{margin:.35rem 0;}
.p-card--recommended{
  border: 2px solid rgba(255,178,90,0.55);
  box-shadow: 0 18px 36px rgba(255,178,90,0.18);
}
.badge{
  position:absolute;top:12px;right:12px;
  background: rgba(255,178,90,0.30);
  border: 1px solid rgba(255,178,90,0.45);
  padding:.32rem .65rem;
  border-radius: 999px;
  font-size:.82rem;
  font-weight:950;
}

/* Stats */
.stat{text-align:center;}
.stat h3{font-size:2rem;margin-bottom:.5rem;}

/* Comparatif */
.comparatif{width:100%;border-collapse:collapse;margin-top:2rem;overflow:hidden;border-radius: 14px;}
.comparatif th,.comparatif td{border:1px solid rgba(35,50,74,0.12);padding:1rem;text-align:center;}
.comparatif th{
  background: linear-gradient(135deg, rgba(47,125,246,0.22), rgba(122,92,255,0.18));
}

/* Testimonials */
.testis{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;}
.testi{
  background: var(--surface);
  border-radius: var(--radius);
  padding:1.5rem;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  flex:1;min-width:250px;
}
.testi blockquote{color: var(--muted); margin:.6rem 0;}

/* FAQ */
.faq{
  margin-bottom:1rem;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.faq summary{font-weight:950;cursor:pointer;}

/* Contact */
.contact-list{list-style:none;}
.contact-list li{margin-bottom:.8rem;}
.contact-list a{color:#1f4fa6;text-decoration:none;font-weight:900;}
.contact-list a:hover{text-decoration:underline;}

/* Footer */
.footer{
  background: linear-gradient(180deg, rgba(243,248,255,0.9), rgba(255,255,255,0.95));
  padding:2.2rem 0;
  text-align:center;
  border-top: 1px solid var(--border);
}
.footer nav{margin-top:1rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.footer nav a{text-decoration:none;color: var(--muted);font-weight:900;}
.footer nav a:hover{color:#1f4fa6;}

/* WhatsApp floating */
.whatsapp-float{
  position:fixed;bottom:20px;right:20px;
  background: linear-gradient(135deg, #34e6c7, #2fb7f6);
  color:#fff;
  padding: 1rem;
  border-radius: 50%;
  font-size: 1.5rem;
  box-shadow: 0 14px 30px rgba(47,183,246,0.22);
  z-index: 1200;
  text-decoration:none;
}

/* Sticky bar */
.sticky-bar{
  position:fixed;bottom:0;left:0;width:100%;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding:.85rem 1rem;
  display:none;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  z-index:1100;
}
.sticky-bar .sticky-text{font-weight:950;text-decoration:none;}
.sticky-cta{min-width:140px;}

/* Shimmer */
.shimmer{
  position:relative;
  display:inline-block;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  overflow:hidden;
}
.shimmer::before{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer-move 3s infinite;
  pointer-events:none;
}
@keyframes shimmer-move{
  0%{transform:translateX(-100%);}
  50%{transform:translateX(100%);}
  100%{transform:translateX(100%);}
}

/* Promo popup */
.promo-popup{
  position:fixed;
  bottom: 25px;
  right: 25px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(122,92,255,0.30);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(47,125,246,0.16);
  padding: 1.25rem 1.2rem 1.4rem;
  width: 310px;
  max-width: 92%;
  z-index: 3000;
  display:none;
}
.promo-content{text-align:center;}
.promo-popup h3{font-size:1.25rem;color:#4f46e5;margin-bottom:.5rem;}
.promo-popup p{color: var(--muted);margin:.4rem 0 1rem;}
.promo-popup .price{color:#f39b2f;font-weight:950;}
.close-btn{
  position:absolute;
  top: 6px;
  right: 8px;
  background:none;border:none;
  font-size:1.35rem;
  cursor:pointer;
  color: rgba(35,50,74,0.70);
  min-width:44px;min-height:44px;
}
.promo-popup.pulsing{animation:pulse 1.2s ease-in-out;}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.02);}100%{transform:scale(1);}}

/* Responsive */
@media (max-width: 768px){
  .menu{
    display:none;
    flex-direction:column;
    gap:.8rem;
    background: rgba(255,255,255,0.96);
    padding: 1rem;
    position:absolute;
    top: 70px;
    right: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    min-width: 220px;
  }
  .menu.show{display:flex;}
  .hamburger{display:flex;}
  .sticky-bar{display:flex;flex-direction:column;align-items:stretch;text-align:center;}
  .sticky-bar a{width:100%;}
  .whatsapp-float{bottom: 95px;}
}

@media (max-width: 480px){
  .hero{padding:4.4rem 1rem 3.8rem;}
  .h1{font-size:1.85rem;line-height:1.25;}
  .lead{font-size:1rem;}
  .cta{flex-direction:column;gap:1rem;}
  .btn{width:100%;}
  .grid-3{grid-template-columns:1fr;gap:1.2rem;}
  .card{padding:1.35rem;}
  .steps{flex-direction:column;gap:1.2rem;}
  .comparatif{font-size:.9rem;}
  .comparatif th,.comparatif td{padding:.7rem;}
  .testis{flex-direction:column;gap:1rem;}
  .promo-popup{bottom:10px;right:10px;width:270px;}
  .footer nav{flex-direction:column;gap:.45rem;}
}

/* =========================================================
   BLOG (Optional styles) — keep scoped
   ========================================================= */

.blog-page .blog-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  align-items: start;
}
.blog-page .search-bar,
.blog-page .newsletter{
  display:flex;
  gap: 12px;
  align-items:center;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 24px rgba(36, 50, 74, 0.08);
}
.blog-page .search-bar input,
.blog-page .newsletter input{
  flex:1;
  min-width:0;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  outline:none;
  background:#fff;
}
.blog-page .blog-controls{
  margin-top: 18px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.blog-page .blog-filters{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.blog-page .blog-filters select{
  border: 1px solid rgba(37,99,235,0.18);
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  color: var(--text);
}
.blog-page .results-count{font-weight:900;color: rgba(36,50,74,0.75);}

.articles-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin-top: 22px;
  align-items: stretch;
}
@media (max-width: 980px){
  .articles-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
  .blog-page .blog-top{grid-template-columns: 1fr;}
}
@media (max-width: 620px){
  .articles-grid{grid-template-columns: 1fr !important;}
}

.post-card{
  background:#fff;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(37,99,235,0.12);
  box-shadow: 0 16px 34px rgba(36, 50, 74, 0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover{transform: translateY(-6px); box-shadow: 0 22px 44px rgba(36, 50, 74, 0.14);}

.post-media{position:relative;display:block;text-decoration:none;}
.post-cover{width:100%;aspect-ratio:16/9;object-fit:cover;background:#eef2ff;}
.post-tag{
  position:absolute;top:14px;left:14px;
  padding:8px 12px;border-radius:999px;
  font-weight:950;font-size:.9rem;color:#fff;
  background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(37,99,235,0.95));
  border: 1px solid rgba(255,255,255,0.25);
}

.post-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;min-height:210px;}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;font-weight:800;color: rgba(36,50,74,0.65);font-size:.95rem;}
.post-title{margin:2px 0 0;font-size:1.18rem;line-height:1.25;font-weight:950;color:#0f172a;}
.post-title a{text-decoration:none;}
.post-title a:hover{color:var(--primary);}
.post-excerpt{
  color: rgba(36,50,74,0.72);
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  color:#6d28d9;
  text-decoration:none;
  padding-top:6px;
}
.pagination{display:flex;justify-content:center;gap:14px;margin-top:28px;}