/* ================================================================ King IPTV — Feuille de style partagée Utilisée par : index.html, abonnements.html, essai-gratuit.html, faq.html, blog.html ================================================================ */ /* Font Awesome 6.5 chargé via CDN (voir dans ) */ /* ── Font fallbacks anti-CLS ────────────────────────────────── Ces @font-face calent les polices système sur les métriques exactes des web fonts pour éliminer le saut de mise en page (CLS) ──────────────────────────────────────────────────────────── */ @font-face{font-family:'Bebas Neue Fallback';src:local('Impact');size-adjust:78%;ascent-override:95%;descent-override:22%;line-gap-override:0%;unicode-range:U+0000-00FF} @font-face{font-family:'Outfit Fallback';src:local('Arial');size-adjust:103%;ascent-override:90%;descent-override:22%;line-gap-override:0%;unicode-range:U+0000-00FF} @font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:23%;line-gap-override:0%;unicode-range:U+0000-00FF} /* ═══════════════════════════════════════════════ RESET & VARIABLES ═══════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* ── Nouveau thème Blanc + Bleu dégradé ── */ --bg:#FFFFFF; --bg2:#F4F7FF; --card:#FFFFFF; --card2:#EEF3FF; --border:#D6E0FF; --text:#0A0A1A; --muted:#5A6480; --subtle:#A0AACC; --r:12px; --rl:20px; --maxw:1160px; /* ── Bleu principal ── */ --gradient:linear-gradient(135deg,#1A237E 0%,#1565C0 50%,#42A5F5 100%); --gradient-btn:linear-gradient(135deg,#1565C0 0%,#42A5F5 100%); --blue-dark:#1A237E; --blue-mid:#1565C0; --blue-light:#42A5F5; --blue-pale:#E3F2FD; /* ── Alias de compatibilité (remplace gold/green/dark) ── */ --gold:#1565C0; --gold2:#42A5F5; --gold-dark:#1A237E; --glow:rgba(21,101,192,0.18); --glow2:rgba(21,101,192,0.07); --border-g:#D6E0FF; --green:#1565C0; --green2:#1A237E; } html{scroll-behavior:smooth} body{ font-family:'Outfit','Outfit Fallback',sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.65; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ul{list-style:none} /* ═══════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════ */ ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px} /* ═══════════════════════════════════════════════ UTILITIES ═══════════════════════════════════════════════ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section-label{ display:inline-flex;align-items:center;gap:8px; font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);background:var(--glow2); border:1px solid var(--border-g);border-radius:50px; padding:5px 14px;margin-bottom:16px; } .section-title{ font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif; font-size:clamp(2rem,5vw,3rem); letter-spacing:.04em; color:var(--text); line-height:1.1; margin-bottom:12px; } .section-sub{color:var(--muted);font-size:.95rem;max-width:560px} /* ═══════════════════════════════════════════════ ANNOUNCEMENT BAR ═══════════════════════════════════════════════ */ .ann-bar{ background:var(--blue-dark); color:#FFFFFF; height:36px; overflow:hidden; display:flex; align-items:center; position:relative; } .ann-track{ display:flex; white-space:nowrap; animation:ann 28s linear infinite; gap:0; } .ann-track span{ display:inline-flex;align-items:center;gap:10px; font-size:.78rem;font-weight:700;letter-spacing:.04em; padding:0 48px; } .ann-track span i{font-size:.7rem;opacity:.7} @keyframes ann{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ═══════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════ */ .nav{ position:sticky;top:0;z-index:900; background:var(--gradient); border-bottom:none; box-shadow:0 2px 20px rgba(21,101,192,0.25); } .nav-inner{ display:flex;align-items:center;justify-content:space-between; height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px; } .nav-logo{ display:inline-flex;align-items:center; text-decoration:none;flex-shrink:0; background:#fff; border-radius:8px; padding:3px 10px; height:40px;max-height:40px; overflow:hidden; box-sizing:border-box; } .nav-logo img,.nav-logo-img{ height:34px!important;width:auto!important; max-width:140px!important;max-height:34px!important; display:block!important;object-fit:contain!important; flex-shrink:0; } .footer-brand .nav-logo{background:transparent;padding:0;border-radius:0;height:auto;max-height:none;overflow:visible} .footer-brand .nav-logo img,.footer-brand .nav-logo-img{height:36px!important;max-height:36px!important} .nav-logo-crown{ width:30px;height:30px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); border-radius:8px; display:flex;align-items:center;justify-content:center; color:#FFFFFF;font-size:.95rem; } .nav-logo-text{color:#FFFFFF} .nav-logo-text span{color:#FFFFFF} .nav-links{display:flex;align-items:center;gap:28px} .nav-links a{font-size:.88rem;font-weight:500;color:rgba(255,255,255,0.8);transition:color .2s} .nav-links a:hover{color:#FFFFFF} .nav-links a.active{color:#FFFFFF;font-weight:700} .nav-cta{ display:flex;align-items:center;gap:10px; } .btn-wa{ display:inline-flex;align-items:center;gap:7px; background:#FFFFFF;color:var(--blue-dark); font-size:.82rem;font-weight:700; padding:8px 18px;border-radius:50px; transition:background .2s,transform .2s,box-shadow .2s; box-shadow:0 2px 8px rgba(0,0,0,0.15); } .btn-wa:hover{background:#F4F7FF;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,0.2)} .btn-wa i{font-size:.9rem} .btn-wa-outline{ display:inline-flex;align-items:center;gap:7px; background:transparent;color:#FFFFFF; border:1.5px solid rgba(255,255,255,0.65); font-size:.82rem;font-weight:700; padding:8px 18px;border-radius:50px; transition:background .2s,border-color .2s,transform .2s; } .btn-wa-outline:hover{background:rgba(255,255,255,0.12);border-color:#FFFFFF;transform:translateY(-1px)} .nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px} .nav-hamburger span{display:block;width:22px;height:2px;background:#FFFFFF;border-radius:2px;transition:.3s} /* Mobile menu */ .nav-mobile{ display:none; flex-direction:column; background:linear-gradient(180deg,#1565C0 0%,#1A237E 100%); border-top:1px solid rgba(255,255,255,0.15); padding:20px 24px; gap:16px; } .nav-mobile a{font-size:.95rem;font-weight:500;color:rgba(255,255,255,0.85);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.12)} .nav-mobile a:last-child{border-bottom:none} .nav-mobile a:hover{color:#FFFFFF} .nav-mobile.open{display:flex} /* ═══════════════════════════════════════════════ HERO ═══════════════════════════════════════════════ */ .hero{ background:linear-gradient(135deg,#1A237E 0%,#1565C0 60%,#42A5F5 100%); padding:96px 24px 80px; max-width:100%; width:100%; text-align:center; } .hero-desc{margin-left:auto;margin-right:auto} .hero-btns{justify-content:center} .hero-trust{justify-content:center} .hero-badge{ display:inline-flex;align-items:center;gap:8px; font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#FFFFFF; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); border-radius:50px;padding:6px 16px; margin-bottom:20px; } .hero-badge .dot{ width:7px;height:7px;border-radius:50%; background:#FFFFFF; animation:blink 1.8s ease-in-out infinite; } @keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--glow)}50%{opacity:.5;box-shadow:0 0 0 5px transparent}} .hero h1{ font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif; font-size:clamp(2.6rem,6vw,4.2rem); letter-spacing:.03em; line-height:1.05; margin-bottom:20px; color:#FFFFFF; } .hero h1 em{ font-style:normal; background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,0.75)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-desc{ font-size:1rem;color:rgba(255,255,255,0.85); margin-bottom:32px; max-width:520px; line-height:1.7; } .hero-desc strong{color:#FFFFFF;font-weight:600} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px} /* ── Boutons sur fond BLEU (hero, cta-final) ─────────── */ .btn-primary-hero{ display:inline-flex;align-items:center;gap:8px; background:#FFFFFF;color:#1A237E; font-size:15px;font-weight:700; padding:14px 28px;border-radius:50px;border:none; cursor:pointer;text-decoration:none; box-shadow:0 4px 15px rgba(0,0,0,0.15); transition:all .2s ease; } .btn-primary-hero:hover{background:#F0F4FF;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.2)} .btn-secondary-hero{ display:inline-flex;align-items:center;gap:8px; background:transparent;color:#FFFFFF; border:2px solid #FFFFFF; font-size:15px;font-weight:700; padding:14px 28px;border-radius:50px; cursor:pointer;text-decoration:none; transition:all .2s ease; } .btn-secondary-hero:hover{background:rgba(255,255,255,0.15);transform:translateY(-1px)} /* ── Boutons sur fond BLANC ──────────────────────────── */ .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:linear-gradient(135deg,#1565C0 0%,#42A5F5 100%);color:#FFFFFF; font-size:15px;font-weight:700; padding:14px 28px;border-radius:50px;border:none; cursor:pointer;text-decoration:none; box-shadow:0 4px 15px rgba(21,101,192,0.3); transition:all .2s ease; } .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(21,101,192,0.4)} .btn-secondary,.btn-outline{ display:inline-flex;align-items:center;gap:8px; background:transparent;color:#1565C0; border:2px solid #1565C0; font-size:15px;font-weight:700; padding:14px 28px;border-radius:50px; cursor:pointer;text-decoration:none; transition:all .2s ease; } .btn-secondary:hover,.btn-outline:hover{background:#E3F2FD;color:#1565C0;transform:translateY(-1px)} .hero-trust{ display:flex;flex-wrap:wrap;align-items:center;gap:20px; } .hero-trust-item{ display:flex;align-items:center;gap:7px; font-size:.8rem;color:rgba(255,255,255,0.8); } .hero-trust-item i{color:rgba(255,255,255,0.9);font-size:.85rem} /* Hero right — TV visual */ .hero-visual{ position:relative; display:flex; flex-direction:column; gap:12px; } .tv-frame{ background:var(--card); border:2px solid var(--border); border-radius:16px; overflow:hidden; position:relative; aspect-ratio:16/10; } .tv-frame::before{ content:''; position:absolute;inset:0; background:linear-gradient(135deg,rgba(21,101,192,.06) 0%,transparent 60%); pointer-events:none; z-index:1; } .tv-topbar{ background:var(--card2); border-bottom:1px solid var(--border); padding:8px 14px; display:flex;align-items:center;gap:8px; font-size:.72rem;color:var(--muted); position:relative;z-index:2; } .tv-dots{display:flex;gap:5px} .tv-dot{width:9px;height:9px;border-radius:50%} .tv-dot.r{background:#FF5F57} .tv-dot.y{background:#FFBD2E} .tv-dot.g{background:#28CA41} .tv-title-bar{margin-left:auto;font-size:.68rem;color:var(--subtle)} .tv-content{ display:grid;grid-template-columns:repeat(3,1fr); gap:6px;padding:10px;position:relative;z-index:2; } .tv-channel{ background:var(--card2); border:1px solid var(--border); border-radius:7px; padding:8px 6px; display:flex;flex-direction:column; align-items:center;gap:5px; font-size:.65rem;color:var(--muted); text-align:center; transition:border-color .3s,background .3s; } .tv-channel:hover{border-color:var(--border-g);background:rgba(21,101,192,.04)} .tv-ch-icon{ width:32px;height:22px; background:var(--border); border-radius:4px; display:flex;align-items:center;justify-content:center; font-size:.8rem; color:var(--gold); } .tv-ch-live{ display:inline-block; background:#e53e3e;color:#fff; font-size:.55rem;font-weight:700; padding:1px 5px;border-radius:3px; } /* Stat pills below TV */ .hero-stats{ display:grid;grid-template-columns:1fr 1fr; gap:10px; } .hero-stat{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; display:flex;align-items:center;gap:12px; } .hero-stat-ico{ width:36px;height:36px;min-width:36px; background:var(--glow2); border:1px solid var(--border-g); border-radius:9px; display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:.9rem; } .hero-stat-val{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:1.2rem;letter-spacing:.04em;color:var(--gold);line-height:1} .hero-stat-lbl{font-size:.7rem;color:var(--muted)} /* ═══════════════════════════════════════════════ CHANNEL TICKER ═══════════════════════════════════════════════ */ .ticker-wrap{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg2); overflow:hidden; padding:14px 0; position:relative; } .ticker-wrap::before,.ticker-wrap::after{ content:''; position:absolute;top:0;bottom:0;width:80px; z-index:2;pointer-events:none; } .ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)} .ticker-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)} .ticker-track{ display:flex; white-space:nowrap; animation:tick 40s linear infinite; } .ticker-item{ display:inline-flex;align-items:center;gap:8px; padding:0 20px; font-size:.82rem;font-weight:500;color:var(--muted); } .ticker-item i{color:var(--gold);font-size:.7rem} @keyframes tick{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ═══════════════════════════════════════════════ STATS BAND ═══════════════════════════════════════════════ */ .stats-band{ padding:70px 24px; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); } .stats-grid{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; } .stat-block{ background:var(--card); padding:36px 24px; text-align:center; position:relative; } .stat-block:not(:last-child)::after{ content:''; position:absolute;right:0;top:20%;bottom:20%; width:1px;background:var(--border); } .stat-num{ font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif; font-size:2.8rem;letter-spacing:.04em; color:var(--gold); line-height:1; margin-bottom:6px; } .stat-lbl{font-size:.82rem;color:var(--muted);font-weight:500} /* ═══════════════════════════════════════════════ FEATURES ═══════════════════════════════════════════════ */ .features{padding:90px 24px} .features-header{text-align:center;margin-bottom:56px} .features-header .section-sub{margin:0 auto} .feat-grid{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:repeat(4,1fr); gap:18px; } .feat-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:32px 24px; position:relative; overflow:hidden; transition:border-color .25s,transform .25s,box-shadow .25s; box-shadow:0 2px 16px rgba(21,101,192,0.10),0 0 0 1px rgba(66,165,245,0.08); } .feat-card:hover{ border-color:var(--border-g); transform:translateY(-2px); box-shadow:0 4px 24px rgba(21,101,192,0.20),0 0 12px rgba(66,165,245,0.15),0 0 1px rgba(66,165,245,0.4); } .feat-card::before{ content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--gradient-btn); opacity:0;transition:opacity .3s; } .feat-card:hover::before{opacity:1} .feat-ico{ width:48px;height:48px; background:var(--glow2); border:1px solid var(--border-g); border-radius:13px; display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:1.2rem; margin-bottom:20px; } .feat-card h3{ font-size:1rem;font-weight:700; color:var(--text);margin-bottom:10px; } .feat-card p{font-size:.85rem;color:var(--muted);line-height:1.6} /* ═══════════════════════════════════════════════ PRICING ═══════════════════════════════════════════════ */ .pricing{ padding:90px 24px; background:var(--bg2); } .pricing-header{text-align:center;margin-bottom:52px} .pricing-header .section-sub{margin:0 auto} .pricing-grid{ max-width:760px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr; gap:20px; } .price-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:36px 32px; position:relative; overflow:hidden; transition:transform .25s,border-color .25s,box-shadow .25s; box-shadow:0 2px 16px rgba(21,101,192,0.10),0 0 0 1px rgba(66,165,245,0.08); } .price-card:hover{ transform:translateY(-2px); box-shadow:0 4px 24px rgba(21,101,192,0.20),0 0 12px rgba(66,165,245,0.15),0 0 1px rgba(66,165,245,0.4); } .price-card.popular{ border:2px solid var(--blue-mid); background:linear-gradient(145deg,#EEF3FF,#FFFFFF); box-shadow:0 4px 24px rgba(21,101,192,0.25),0 0 16px rgba(66,165,245,0.20); } .popular-badge{ position:absolute;top:16px;right:16px; background:var(--gradient-btn);color:#FFFFFF; font-size:.68rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase; padding:4px 10px;border-radius:50px; box-shadow:0 2px 8px rgba(21,101,192,0.3); } .price-plan-name{ font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);margin-bottom:4px; } .price-duration{font-size:.82rem;color:var(--muted);margin-bottom:20px} .price-amount{ display:flex;align-items:flex-start;gap:4px; margin-bottom:6px; } .price-amount sup{ font-size:1.2rem;font-weight:700;color:var(--text); margin-top:12px; } .price-amount .num{ font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif; font-size:4rem;letter-spacing:.03em; color:var(--gold);line-height:1; } .price-per{font-size:.8rem;color:var(--muted);margin-bottom:28px} .price-features{ display:flex;flex-direction:column;gap:12px; margin-bottom:28px; } .price-feat{ display:flex;align-items:center;gap:10px; font-size:.87rem;color:var(--muted); } .price-feat i{ color:var(--gold);font-size:.8rem; width:16px;text-align:center;flex-shrink:0; } .price-feat strong{color:var(--text)} .price-divider{ height:1px;background:var(--border); margin:20px 0; } .btn-price{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;padding:14px; border-radius:50px; font-size:.9rem;font-weight:700; transition:all .2s; cursor:pointer;border:none; } .btn-price-gold{ background:var(--gradient-btn);color:#FFFFFF; box-shadow:0 4px 15px rgba(21,101,192,0.3); } .btn-price-gold:hover{background:linear-gradient(135deg,#1A237E 0%,#1565C0 100%);transform:translateY(-2px);box-shadow:0 8px 28px rgba(21,101,192,0.45)} .btn-price-green{ background:var(--gradient-btn);color:#FFFFFF; box-shadow:0 4px 15px rgba(21,101,192,0.3); } .btn-price-green:hover{background:linear-gradient(135deg,#1A237E 0%,#1565C0 100%);transform:translateY(-2px);box-shadow:0 8px 24px rgba(21,101,192,0.45)} .price-note{ text-align:center;margin-top:28px; font-size:.8rem;color:var(--subtle); } .price-note i{color:var(--gold);margin-right:5px} /* ── Toggle Mensuel / Annuel ─────────────────── */ .plan-toggle-wrap{display:flex;justify-content:center;margin-bottom:44px} .plan-toggle{ display:inline-flex; background:var(--card); border:1px solid var(--border); border-radius:50px; padding:4px; gap:4px; } .toggle-btn{ padding:10px 26px; border-radius:50px; border:none; background:transparent; color:var(--muted); font-family:'Outfit','Outfit Fallback',sans-serif; font-size:.9rem;font-weight:600; cursor:pointer; transition:all .25s; display:inline-flex;align-items:center;gap:8px; } .toggle-btn.active{background:var(--gradient-btn);color:#FFFFFF;box-shadow:0 2px 10px rgba(21,101,192,0.3)} .badge-save{ background:var(--blue-pale);color:var(--blue-mid); font-size:.65rem;font-weight:800;letter-spacing:.05em; padding:2px 8px;border-radius:50px; } .toggle-btn.active .badge-save{background:rgba(255,255,255,0.25);color:#FFFFFF} /* ── Grille 2 ou 3 colonnes ─────────────────── */ .pricing-grid-2col{ max-width:760px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr; gap:20px; } .pricing-grid-3col{ max-width:1040px;margin:0 auto; display:grid;grid-template-columns:repeat(3,1fr); gap:20px; } /* ── Onglets durée dans la carte ───────────────*/ .duration-tabs{ display:flex; background:var(--bg); border:1px solid var(--border); border-radius:50px; padding:3px; gap:3px; margin-bottom:20px; } .dur-btn{ flex:1; padding:7px 6px; border-radius:50px; border:none; background:transparent; color:var(--muted); font-family:'Outfit','Outfit Fallback',sans-serif; font-size:.72rem;font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;gap:4px; } .dur-btn.active{background:var(--gradient-btn);color:#FFFFFF;box-shadow:0 2px 8px rgba(21,101,192,0.25)} .dur-popular{ font-size:.58rem;font-weight:800; background:rgba(255,255,255,0.25); padding:1px 5px;border-radius:50px; color:#FFFFFF; } /* ── Carte Premium Pro ──────────────── */ .price-card.best-value{ border:2px solid var(--blue-light); background:linear-gradient(145deg,#E3F2FD,#FFFFFF); box-shadow:0 4px 24px rgba(21,101,192,0.1); } .best-badge{background:var(--gradient) !important;color:#fff !important} /* ═══════════════════════════════════════════════ COMPARISON TABLE ═══════════════════════════════════════════════ */ .comparison{padding:90px 24px} .comparison-header{text-align:center;margin-bottom:48px} .comparison-header .section-sub{margin:0 auto} .cmp-table-wrap{ max-width:860px;margin:0 auto; overflow-x:auto; } .cmp-table{ width:100%;border-collapse:separate;border-spacing:0; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; } .cmp-table th{ padding:16px 20px; font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; text-align:left; background:var(--card2); border-bottom:1px solid var(--border); color:var(--muted); } .cmp-table th.th-king{ color:var(--blue-mid); background:rgba(21,101,192,.06); } .cmp-table td{ padding:13px 20px; font-size:.87rem; border-bottom:1px solid var(--border); background:var(--card); color:var(--muted); } .cmp-table td.td-king{ background:rgba(21,101,192,.03); color:var(--text);font-weight:500; } .cmp-table tr:last-child td{border-bottom:none} .cmp-yes{color:#4ade80;font-size:.9rem} .cmp-no{color:#f87171;font-size:.9rem} .cmp-avg{color:var(--gold);font-size:.9rem} .cmp-row-lbl{font-weight:600;color:var(--text)!important} /* ═══════════════════════════════════════════════ DEVICES ═══════════════════════════════════════════════ */ .devices{ padding:90px 24px; background:var(--bg2); } .devices-header{text-align:center;margin-bottom:52px} .devices-header .section-sub{margin:0 auto} .devices-grid{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:repeat(3,1fr); gap:16px; } .device-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:28px 24px; display:flex;align-items:flex-start;gap:18px; transition:border-color .25s,transform .25s,box-shadow .25s; box-shadow:0 2px 16px rgba(21,101,192,0.10),0 0 0 1px rgba(66,165,245,0.08); } .device-card:hover{ border-color:var(--border-g); transform:translateY(-2px); box-shadow:0 4px 24px rgba(21,101,192,0.20),0 0 12px rgba(66,165,245,0.15),0 0 1px rgba(66,165,245,0.4); } .device-ico{ width:46px;height:46px;min-width:46px; background:var(--glow2); border:1px solid var(--border-g); border-radius:12px; display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:1.15rem; } .device-info h3{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:5px} .device-info p{font-size:.82rem;color:var(--muted);line-height:1.5} .device-tag{ display:inline-block; margin-top:8px; font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--glow2);border:1px solid var(--border-g); color:var(--gold);border-radius:50px;padding:2px 9px; } /* ═══════════════════════════════════════════════ TESTIMONIALS — WhatsApp chat bubbles ═══════════════════════════════════════════════ */ .testimonials{padding:90px 24px} .testimonials-header{text-align:center;margin-bottom:52px} .testimonials-header .section-sub{margin:0 auto} .chat-phone{ max-width:480px;margin:0 auto; background:#FFFFFF; border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(21,101,192,0.15); } .chat-topbar{ background:var(--gradient); padding:14px 18px; display:flex;align-items:center;gap:12px; border-bottom:none; } .chat-avatar{ width:36px;height:36px; background:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.4); border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.85rem;color:#FFFFFF;font-weight:700; font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;letter-spacing:.04em; } .chat-name{font-size:.88rem;font-weight:700;color:#FFFFFF} .chat-status{font-size:.72rem;color:rgba(255,255,255,0.8);margin-top:1px} .chat-online{ width:8px;height:8px;border-radius:50%;background:var(--green); animation:blink 2s infinite;margin-left:auto; } .chat-body{ padding:18px 16px; display:flex;flex-direction:column;gap:14px; max-height:480px;overflow-y:auto; } .chat-msg{ max-width:82%; display:flex;flex-direction:column;gap:4px; } .chat-msg.in{align-self:flex-start} .chat-msg.out{align-self:flex-end} .bubble{ padding:11px 14px; border-radius:16px; font-size:.85rem;line-height:1.5; position:relative; } .chat-msg.in .bubble{ background:var(--bg2); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; } .chat-msg.out .bubble{ background:var(--blue-pale); border:1px solid rgba(21,101,192,.2); color:var(--text); border-bottom-right-radius:4px; } .bubble strong{color:var(--gold)} .chat-meta{ font-size:.65rem;color:var(--subtle); display:flex;align-items:center;gap:5px; } .chat-msg.out .chat-meta{justify-content:flex-end} .chat-meta i{color:var(--green);font-size:.7rem} .chat-sender{font-size:.7rem;font-weight:700;color:var(--gold);margin-bottom:2px} .chat-stars{color:var(--gold);font-size:.72rem;letter-spacing:1px} /* ═══════════════════════════════════════════════ FAQ ═══════════════════════════════════════════════ */ .faq{ padding:90px 24px; background:var(--bg2); } .faq-header{text-align:center;margin-bottom:52px} .faq-header .section-sub{margin:0 auto} .faq-list{ max-width:760px;margin:0 auto; display:flex;flex-direction:column;gap:10px; } .faq-item{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color .3s; } .faq-item.open{border-color:var(--border-g)} .faq-q{ padding:18px 22px; display:flex;align-items:center;justify-content:space-between;gap:16px; cursor:pointer; transition:background .2s; } .faq-q:hover{background:var(--card2)} .faq-q-text{font-size:.9rem;font-weight:600;color:var(--text)} .faq-arrow{ width:28px;height:28px;min-width:28px; background:var(--glow2);border:1px solid var(--border-g); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:.7rem; transition:transform .3s; } .faq-item.open .faq-arrow{transform:rotate(180deg)} .faq-a{ padding:0 22px; max-height:0;overflow:hidden; font-size:.87rem;color:var(--muted);line-height:1.7; transition:max-height .35s ease,padding .3s; } .faq-item.open .faq-a{ padding:0 22px 18px; max-height:300px; } /* ═══════════════════════════════════════════════ FINAL CTA ═══════════════════════════════════════════════ */ .cta-final{ padding:100px 24px; text-align:center; position:relative; overflow:hidden; } .cta-final::before{ content:''; position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); width:600px;height:600px; background:radial-gradient(circle,var(--glow) 0%,transparent 70%); pointer-events:none; } .cta-final .section-title{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:16px} .cta-final .section-sub{margin:0 auto 36px;max-width:480px} .cta-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px} .cta-small{ font-size:.78rem;color:var(--subtle); margin-top:20px; } .cta-small i{color:var(--gold);margin-right:4px} /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ .footer{ background:var(--gradient); border-top:none; padding:48px 24px 32px; } .footer-grid{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; } .footer-brand .nav-logo{font-size:1.3rem;margin-bottom:14px;color:#FFFFFF} .footer-brand p{font-size:.83rem;color:rgba(255,255,255,0.75);line-height:1.7;max-width:260px;margin-bottom:18px} .footer-wa{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,0.15);color:#FFFFFF; border:1px solid rgba(255,255,255,0.3); font-size:.82rem;font-weight:700; padding:9px 18px;border-radius:50px; transition:background .2s; } .footer-wa:hover{background:rgba(255,255,255,0.25)} .footer-col h4{ font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#FFFFFF;margin-bottom:16px; } .footer-col ul{display:flex;flex-direction:column;gap:10px} .footer-col ul li a{ font-size:.85rem;color:rgba(255,255,255,0.75); transition:color .2s; } .footer-col ul li a:hover{color:#FFFFFF} .footer-bottom{ max-width:var(--maxw);margin:0 auto; border-top:1px solid rgba(255,255,255,0.15); padding-top:24px; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:12px; } .footer-copy{font-size:.78rem;color:rgba(255,255,255,0.6)} .footer-legal{ display:flex;gap:18px; } .footer-legal a{font-size:.78rem;color:rgba(255,255,255,0.6);transition:color .2s} .footer-legal a:hover{color:rgba(255,255,255,0.9)} /* ═══════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════ */ /* ── Tablette (≤ 1024px) ── */ @media(max-width:1024px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat-block::after{display:none} .feat-grid{grid-template-columns:repeat(2,1fr)} .devices-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:30px} } /* ── Mobile (≤ 768px) ── */ @media(max-width:768px){ /* Navigation */ .nav-links,.nav-cta{display:none} .nav-hamburger{display:flex} /* Réduction padding sections */ .hero{padding:64px 18px 48px} .stats-band{padding:40px 18px} .features{padding:56px 18px} .pricing{padding:56px 18px} .comparison{padding:56px 18px} .devices{padding:56px 18px} .testimonials{padding:56px 18px} .faq{padding:56px 18px} .cta-final{padding:64px 18px} .footer{padding:40px 18px 28px} /* Hero — boutons pleine largeur */ .hero h1{font-size:2.6rem} .hero-desc{font-size:.92rem} .hero-btns{flex-direction:column;align-items:stretch} .btn-primary,.btn-outline,.btn-primary-hero,.btn-secondary-hero{justify-content:center;padding:15px 20px;font-size:.95rem} .hero-trust{gap:12px} .hero-trust-item{font-size:.75rem} /* Stats */ .stat-block{padding:28px 16px} .stat-num{font-size:2.2rem} /* Features */ .feat-grid{grid-template-columns:1fr} .features-header,.pricing-header,.comparison-header,.devices-header,.testimonials-header,.faq-header{margin-bottom:36px} /* Pricing */ .pricing-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto} .pricing-grid-2col{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto} .pricing-grid-3col{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto} .price-card{padding:28px 22px} .btn-price{padding:15px;font-size:.92rem} /* Tableau comparatif — scroll horizontal tactile */ .cmp-table-wrap{-webkit-overflow-scrolling:touch} .cmp-table{min-width:500px} .cmp-table th,.cmp-table td{padding:10px 12px;font-size:.78rem} /* Appareils */ .devices-grid{grid-template-columns:1fr} /* Chat WhatsApp — pleine largeur */ .chat-phone{max-width:100%;border-radius:16px} .chat-body{max-height:400px} /* FAQ — cibles tactiles plus grandes */ .faq-q{padding:16px 18px;min-height:54px} .faq-q-text{font-size:.88rem} .faq-a{padding:0 18px} .faq-item.open .faq-a{padding:0 18px 16px} /* CTA final — boutons pleine largeur */ .cta-btns{flex-direction:column;align-items:stretch;max-width:360px;margin-left:auto;margin-right:auto} .cta-btns .btn-primary,.cta-btns .btn-outline,.cta-btns .btn-primary-hero,.cta-btns .btn-secondary-hero{justify-content:center;padding:15px 20px} .cta-final .section-title{font-size:2.2rem} .cta-final .section-sub{font-size:.88rem} /* Footer */ .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center;gap:8px} .footer-legal{flex-wrap:wrap;justify-content:center;gap:10px} .footer-brand p{max-width:100%} } /* ── Petit mobile (≤ 480px) ── */ @media(max-width:480px){ /* Hero */ .hero{padding:56px 16px 40px} .hero h1{font-size:2.1rem} .hero-desc{font-size:.88rem} .hero-trust{flex-direction:column;align-items:flex-start;gap:10px} /* Barre d'annonce */ .ann-track span{font-size:.72rem;padding:0 28px} /* Stats */ .stats-grid{grid-template-columns:1fr 1fr} .stat-block{padding:22px 12px} .stat-num{font-size:1.8rem} .stat-lbl{font-size:.74rem} /* Pricing */ .pricing-grid{max-width:100%} .pricing-grid-2col{max-width:100%} .pricing-grid-3col{max-width:100%} .price-card{padding:24px 18px} .price-amount .num{font-size:3.2rem} .dur-btn{font-size:.65rem;padding:6px 4px} /* Appareils — 2 colonnes compactes */ .devices-grid{grid-template-columns:1fr 1fr} .device-card{padding:18px 14px;gap:10px;flex-direction:column;align-items:center;text-align:center} .device-ico{width:40px;height:40px;min-width:40px} /* Tableau — encore plus compact */ .cmp-table th,.cmp-table td{padding:9px 10px;font-size:.73rem} /* Section sous-titres */ .section-sub{font-size:.86rem} } /* === abonnements.html specific === */ /* STEPS — étapes de commande (unique à abonnements.html) */ .steps-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:36px 28px;text-align:center;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:0 2px 16px rgba(21,101,192,0.10),0 0 0 1px rgba(66,165,245,0.08)} .step-card:hover{border-color:var(--border-g);transform:translateY(-2px);box-shadow:0 4px 24px rgba(21,101,192,0.20),0 0 12px rgba(66,165,245,0.15),0 0 1px rgba(66,165,245,0.4)} .step-num{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:3.5rem;letter-spacing:.04em;color:var(--border);line-height:1;margin-bottom:12px} .step-ico{width:56px;height:56px;background:var(--glow2);border:1px solid var(--border-g);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.4rem;margin:0 auto 20px} .step-card h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:10px} .step-card p{font-size:.87rem;color:var(--muted);line-height:1.65} @media(max-width:1024px){.steps-grid{grid-template-columns:1fr 1fr}} @media(max-width:768px){.steps-grid{grid-template-columns:1fr}} /* === essai-gratuit.html specific === */ /* FAQ SECTION étendue avec catégories (unique à essai-gratuit.html et faq.html) */ .faq-section{padding:90px 24px} .faq-category{max-width:760px;margin:0 auto 48px} .faq-category:last-child{margin-bottom:0} .faq-cat-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--border)} .faq-cat-ico{width:40px;height:40px;min-width:40px;background:var(--glow2);border:1px solid var(--border-g);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1rem} .faq-cat-title{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--text)} /* Bouton outline sombre (unique à essai-gratuit.html et faq.html) */ .btn-outline-dark{display:inline-flex;align-items:center;gap:8px;background:rgba(21,101,192,0.08);color:var(--blue-mid);font-size:.9rem;font-weight:600;padding:12px 24px;border-radius:50px;border:1px solid var(--blue-mid);transition:border-color .2s,background .2s,transform .2s} .btn-outline-dark:hover{background:rgba(21,101,192,0.15);transform:translateY(-2px)} @media(max-width:768px){ .faq-section{padding:56px 18px} .cta-btns .btn-primary,.cta-btns .btn-outline-dark,.cta-btns .btn-primary-hero,.cta-btns .btn-secondary-hero{justify-content:center;padding:15px 20px} } /* === blog.html specific === */ /* HERO BLOG */ .blog-hero{padding:64px 24px 48px;max-width:var(--maxw);margin:0 auto;text-align:center} .blog-hero .label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--glow2);border:1px solid var(--border-g);border-radius:50px;padding:5px 14px;margin-bottom:16px} .blog-hero h1{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:.04em;color:var(--text);line-height:1.1;margin-bottom:12px} .blog-hero p{color:var(--muted);font-size:.95rem;max-width:520px;margin:0 auto 32px} /* FILTERS */ .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:var(--maxw);margin:0 auto;padding:0 24px 48px} .filter-btn{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:7px 16px;border-radius:50px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s} .filter-btn:hover,.filter-btn.active{border-color:var(--gold);color:var(--gold);background:var(--glow2)} /* BLOG GRID */ .blog-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .blog-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .3s} .blog-card:hover{border-color:var(--border-g);transform:translateY(-4px)} .bc-header{padding:28px 24px 0;position:relative} .bc-cat{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:var(--glow2);border:1px solid var(--border-g);border-radius:50px;padding:3px 10px;margin-bottom:14px} .bc-cat.sport{color:#4ade80;background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.2)} .bc-cat.tuto{color:#60a5fa;background:rgba(96,165,250,.07);border-color:rgba(96,165,250,.2)} .bc-cat.qualite{color:var(--gold);background:var(--glow2);border-color:var(--border-g)} .bc-cat.guide{color:#f472b6;background:rgba(244,114,182,.07);border-color:rgba(244,114,182,.2)} .bc-cat.depannage{color:#fb923c;background:rgba(251,146,60,.07);border-color:rgba(251,146,60,.2)} .blog-card h2{font-size:1rem;font-weight:700;color:var(--text);line-height:1.45;margin-bottom:10px} .blog-card p{font-size:.83rem;color:var(--muted);line-height:1.6;padding:0 24px} .bc-footer{margin-top:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)} .bc-meta{display:flex;align-items:center;gap:12px;font-size:.73rem;color:var(--subtle)} .bc-meta i{color:var(--gold);font-size:.7rem} .bc-read{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--gold);transition:gap .2s} .blog-card:hover .bc-read{gap:8px} /* BLOG CTA */ .blog-cta{background:var(--bg2);border-top:1px solid var(--border);padding:72px 24px;text-align:center} .blog-cta h2{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.03em;margin-bottom:12px} .blog-cta p{color:var(--muted);font-size:.95rem;margin-bottom:28px} .btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#FFFFFF;font-size:.9rem;font-weight:700;padding:13px 26px;border-radius:50px;margin:4px;transition:background .2s,transform .2s} .btn-gold:hover{background:var(--gold2);transform:translateY(-2px)} .btn-wa2{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-size:.9rem;font-weight:700;padding:13px 26px;border-radius:50px;margin:4px;transition:background .2s,transform .2s} .btn-wa2:hover{background:var(--green2);transform:translateY(-2px)} @media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.blog-grid{grid-template-columns:1fr}.nav-links{display:none}} /* ═══ BOUTON WHATSAPP FLOTTANT ═══ */ .wa-fab{ position:fixed;bottom:28px;right:28px;z-index:9999; width:60px;height:60px; background:#25D366; border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.45); text-decoration:none; transition:transform .25s,box-shadow .25s; } .wa-fab:hover{transform:scale(1.12);box-shadow:0 8px 30px rgba(37,211,102,0.6)} .wa-fab svg{width:32px;height:32px;fill:#fff;display:block} /* Pulse subtil pour attirer l'attention */ @keyframes wa-pulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.45)}50%{box-shadow:0 4px 28px rgba(37,211,102,0.75)}} .wa-fab{animation:wa-pulse 2.5s ease-in-out infinite} .wa-fab:hover{animation:none} @media(max-width:600px){.wa-fab{bottom:18px;right:18px;width:52px;height:52px}.wa-fab svg{width:28px;height:28px}} /* ═══════════════════════════════════════════════ ARTICLE PAGES (/blog/) ═══════════════════════════════════════════════ */ /* ── Breadcrumb ── */ .breadcrumb-nav{max-width:860px;margin:20px auto 0;padding:0 20px;font-size:13px;color:var(--muted)} .breadcrumb{display:flex;gap:6px;list-style:none;align-items:center;flex-wrap:wrap} .breadcrumb a{color:var(--blue-mid);text-decoration:none} .breadcrumb a:hover{text-decoration:underline} .breadcrumb li{display:flex;align-items:center} /* ── Article Hero ── */ .article-hero{max-width:860px;margin:0 auto;padding:40px 20px 24px;text-align:center} .article-badge{display:inline-block;background:var(--blue-pale);color:var(--blue-mid);border-radius:50px;padding:4px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px} .article-hero h1{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:.03em;line-height:1.15;color:var(--blue-dark);margin-bottom:12px} .article-meta{font-size:13px;color:var(--muted);margin-bottom:16px} .article-intro{font-size:1rem;color:var(--muted);max-width:700px;margin:0 auto;line-height:1.75;border-left:3px solid var(--blue-mid);text-align:left;padding-left:16px} /* ── Article Content ── */ .article-content{max-width:860px;margin:0 auto;padding:32px 20px 60px} .article-content h2{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:1.7rem;letter-spacing:.03em;color:var(--text);margin:40px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)} .article-content h3{font-size:1rem;font-weight:700;color:var(--blue-mid);margin:24px 0 10px} .article-content p{font-size:.95rem;line-height:1.8;color:var(--muted);margin-bottom:16px} .article-content p strong{color:var(--text)} .article-content ul{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px} .article-content ul li{color:var(--muted);padding-left:22px;position:relative;font-size:.95rem;line-height:1.75} .article-content ul li::before{content:'✓';position:absolute;left:0;color:var(--blue-mid);font-weight:700} .article-content ol{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:steps} .article-content ol li{color:var(--muted);padding-left:34px;position:relative;counter-increment:steps;font-size:.95rem} .article-content ol li::before{content:counter(steps);position:absolute;left:0;top:1px;width:24px;height:24px;background:var(--blue-mid);color:#fff;font-weight:700;font-size:.72rem;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:24px;text-align:center} /* ── Step list (numbered with circles) ── */ .step-list{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:steps} .step-list li{color:var(--muted);padding-left:38px;position:relative;counter-increment:steps;font-size:.95rem;line-height:1.75} .step-list li::before{content:counter(steps);position:absolute;left:0;top:1px;width:24px;height:24px;background:var(--blue-mid);color:#fff;border-radius:50%;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:24px;text-align:center} /* ── Info box ── */ .info-box{background:var(--blue-pale);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:20px 0;display:flex;gap:12px;align-items:flex-start} .info-box p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6} /* ── CTA box inside article ── */ .article-cta-box{background:linear-gradient(135deg,var(--blue-pale),#F4F7FF);border:1px solid var(--border);border-radius:16px;padding:32px;text-align:center;margin:40px 0} .article-cta-box h3{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:1.5rem;letter-spacing:.03em;color:var(--text);margin-bottom:8px} .article-cta-box p{color:var(--muted);font-size:.9rem;margin-bottom:20px} .btn-cta-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1565C0,#42A5F5);color:#fff!important;font-size:.9rem;font-weight:700;padding:12px 24px;border-radius:50px;margin:4px;text-decoration:none;transition:opacity .2s} .btn-cta-primary:hover{opacity:.9} .btn-cta-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff!important;font-size:.9rem;font-weight:700;padding:12px 24px;border-radius:50px;margin:4px;text-decoration:none;transition:opacity .2s} .btn-cta-wa:hover{opacity:.9} /* ── Related articles (bottom of article) ── */ .related-articles{max-width:860px;margin:0 auto;padding:32px 20px 48px} .related-articles h2{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:1.4rem;letter-spacing:.03em;color:var(--text);margin-bottom:20px} .related-articles .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .related-articles .related-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;color:var(--blue-mid);font-weight:600;font-size:.88rem;text-decoration:none;display:block;transition:all .2s} .related-articles .related-card:hover{background:var(--blue-pale);transform:translateY(-2px);box-shadow:0 4px 16px rgba(21,101,192,.12);border-color:var(--blue-mid)} /* ── CTA final (gradient banner) ── */ .article-cta-final{background:linear-gradient(135deg,#1A237E 0%,#42A5F5 100%);padding:60px 20px;text-align:center;margin-top:0} .article-cta-final h2{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;color:#fff;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.03em;margin-bottom:12px} .article-cta-final p{color:rgba(255,255,255,.85);font-size:.95rem;margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto} .btn-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn-primary{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.6);color:#fff!important;font-size:.9rem;font-weight:700;padding:12px 28px;border-radius:50px;text-decoration:none;transition:all .2s} .btn-primary:hover{background:rgba(255,255,255,.25);border-color:#fff} .btn-secondary{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff!important;font-size:.9rem;font-weight:700;padding:12px 28px;border-radius:50px;text-decoration:none;transition:opacity .2s} .btn-secondary:hover{opacity:.9} @media(max-width:600px){ .related-articles .related-grid{grid-template-columns:1fr} .article-cta-final{padding:40px 20px} }